Web Motion Atlas / ウェブ演出図鑑

採用前に 読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。

次の演出をHTML・CSS・JavaScriptで実装してください。
タイムラインアニメーション / Timeline on scroll
スクロールに合わせて線が伸び、節目が順番に現れる。
使いどころ: 沿革、制作工程、導入の流れ
scroll + transform
読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。

次の演出をHTML・CSS・JavaScriptで実装してください。
スクロールテキストリビール / Scroll text reveal
読み進めると文字の色が変わり、文章が浮かび上がる。
使いどころ: 短いメッセージ、ブランドの紹介
scroll + opacity
読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。

次の演出をHTML・CSS・JavaScriptで実装してください。
スタッキングカード / Stacking cards
次のカードが下から重なり、前のカードは奥へ下がる。
使いどころ: サービス紹介、連続する事例
scroll + transform
読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。

次の演出をHTML・CSS・JavaScriptで実装してください。
背景色の切り替え / Background color change
読み進める位置に合わせて、背景の配色を変える。
使いどころ: 章の区切り、テーマの転換
scroll + background-color
読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。

次の演出をHTML・CSS・JavaScriptで実装してください。
隠れるヘッダー / Hide-on-scroll header
下へ読むとナビが隠れ、上へ戻ると再び現れる。
使いどころ: 長い記事、スマホのナビゲーション
scroll direction + transform
読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。

次の演出をHTML・CSS・JavaScriptで実装してください。
スクロールスパイ / Scrollspy
読んでいる区間と目次の選択状態が連動する。
使いどころ: 長い解説、製品仕様
scroll position + aria-current
読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。

次の演出をHTML・CSS・JavaScriptで実装してください。
トップへ戻るボタン / Back to top
下へ進むとボタンが現れ、押すと冒頭へ戻る。
使いどころ: 長い一覧、読み物の再探索
scrollTo + focus
読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。

次の演出をHTML・CSS・JavaScriptで実装してください。
スクロールで拡大 / Scroll zoom
画面の中の風景が拡大し、見る対象へ近づく。
使いどころ: 製品の細部、キービジュアル
scroll + scale
読む順序や本文を隠さず、スクロール操作を奪わない。動きを抑える設定では完成した状態を表示する。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。

次の演出をHTML・CSS・JavaScriptで実装してください。
3Dチルト / 3D tilt
ポインターの位置に合わせ、カードが立体的に傾く。
使いどころ: 作品カード、製品の紹介
pointermove + perspective
ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。

次の演出をHTML・CSS・JavaScriptで実装してください。
スポットライトホバー / Spotlight hover
触れた位置を光が追いかけ、カードの輪郭を照らす。
使いどころ: 機能選択、注目する項目
radial-gradient + Pointer Events
ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。

次の演出をHTML・CSS・JavaScriptで実装してください。
ホバーで画像切り替え / Image swap on hover
ホバーやタップで、商品の色や別の表情を見せる。
使いどころ: 商品の色違い、表裏の比較
opacity + :focus-visible
ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。

次の演出をHTML・CSS・JavaScriptで実装してください。
テキストロール / Text roll
文字が上へ送られ、次の文字が下から現れる。
使いどころ: 短いリンク、メニュー
overflow + translateY
ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。

次の演出をHTML・CSS・JavaScriptで実装してください。
ホバーで画像プレビュー / Hover image preview
一覧の項目に触れると、その場所の画像が現れる。
使いどころ: 作品一覧、旅行先の比較
pointermove + focus
ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。

次の演出をHTML・CSS・JavaScriptで実装してください。
フローティングラベル / Floating label
入力するとラベルが上へ移り、項目名を残す。
使いどころ: 問い合わせ、申し込みフォーム
label + :placeholder-shown
ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。

次の演出をHTML・CSS・JavaScriptで実装してください。
インラインバリデーション / Inline validation
入力欄の近くにエラーと修正結果を表示する。
使いどころ: メールアドレスなどの形式確認
ValidityState + aria-invalid
ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。

次の演出をHTML・CSS・JavaScriptで実装してください。
ローディングボタン / Loading button
処理中・完了をボタンに示し、連続操作を防ぐ。
使いどころ: 保存や送信の操作結果
disabled + aria-busy
ホバーだけを必須にしない。タップ・キーボードにも同じ内容を示す。入力例は端末内だけで動作し、送信しない。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。

次の演出をHTML・CSS・JavaScriptで実装してください。
ビュートランジション / View transition
同じ画像を保ちながら、カードから詳細へ移る。
使いどころ: 一覧から詳細、画面間の連続性
document.startViewTransition
内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。

次の演出をHTML・CSS・JavaScriptで実装してください。
ライトボックス / Lightbox
画像を大きく開き、閉じると元の場所へ戻る。
使いどころ: 写真、作品、図の拡大
dialog.showModal + close
内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。

次の演出をHTML・CSS・JavaScriptで実装してください。
ホットスポット / Hotspots
図の印を押すと、その部位の説明が開く。
使いどころ: 製品の構造、施設の案内
button + aria-expanded
内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。

次の演出をHTML・CSS・JavaScriptで実装してください。
カウントダウンタイマー / Countdown timer
期限までの残り時間を示し、ゼロで終了する。
使いどころ: 締切、イベント開始までの案内
performance.now + timeout
内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。

次の演出をHTML・CSS・JavaScriptで実装してください。
シェイプディバイダー / Animated shape divider
波の形が動き、上下のセクションをつなぐ。
使いどころ: ヒーロー下端、章の区切り
SVG path + transform
内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。

次の演出をHTML・CSS・JavaScriptで実装してください。
いいねアニメーション / Like animation
押した直後にハートが弾み、選択状態が変わる。
使いどころ: お気に入り、保存への反応
aria-pressed + Web Animations
内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。

次の演出をHTML・CSS・JavaScriptで実装してください。
スクロールダウンの合図 / Scroll cue
下向きの動きで続きを示し、押すと次へ進む。
使いどころ: ファーストビューから本文への案内
scrollIntoView + focus
内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。

採用前に 内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。

次の演出をHTML・CSS・JavaScriptで実装してください。
背景動画 / Background video
動画を背景として再生し、手前の文字を読ませる。
使いどころ: 旅行、空間、ブランドの紹介
video + muted + playsinline
内容を読む操作と演出を分け、停止・閉じる手段を残す。非対応のブラウザでも内容へ到達できるようにする。
対象・きっかけ・変化を上記の説明に合わせてください。320px幅、キーボード、prefers-reduced-motionに対応し、本文の読みやすさとフォーカスを保ってください。