モーション階層完全ガイド｜UIアニメーションの優先順位と設計方法

Webサイトやアプリケーションに動きを加えると、画面の変化を分かりやすくしたり、利用者の注意を重要な情報へ向けたりできます。しかし、複数の要素が同じ速さ、同じ大きさ、同じタイミングで動くと、どこを見ればよいのか分からなくなります。動きが多いほど分かりやすくなるわけではなく、情報の重要度に合わせて強さを変える必要があります。

モーション階層とは、画面内の動きに優先順位を付け、最も重要な変化を強く、補助的な変化を控えめに見せる設計方法です。視覚階層が文字サイズ、色、余白、配置によって重要度を示すのに対し、モーション階層は移動距離、速度、開始時刻、継続時間、拡大率などによって重要度を示します。Material Designでも、サイズ、配置、コントラスト、動きを適切に用いた階層が、重要情報の理解を助けると説明されています。

本記事では、モーション階層の設計方法を、主要動作、補助動作、状態変化、画面遷移、ECサイトへの活用、速度、イージング、アクセシビリティ、実装、検証の順に解説します。単に見栄えのよいアニメーションを作るのではなく、利用者が現在の状態と次の行動を理解できるUIへ改善するための実践的な方法を紹介します。

1. モーション階層とは

モーション階層とは、画面上で発生する複数の動きに重要度の差を設ける考え方です。最も重要な行動や状態変化には認識しやすい動きを与え、補助的な反応や装飾には小さく短い動きを使用します。

すべての要素を均等に動かすと、利用者の注意が分散します。動きの目的を分類し、どの動きを最初に認識させるかを決めることが、モーション階層の出発点です。

1.1 動きによる情報の優先順位

静止画面では、文字サイズ、色、位置、余白などによって情報の重要度を示します。動きが加わる画面では、先に動く要素、大きく移動する要素、長く表示される要素が強く認識されやすくなります。

そのため、購入完了、入力エラー、画面遷移などの重要な変化と、アイコンの小さな反応、背景装飾などを同じ強さにしてはいけません。動きそのものが、情報の優先順位を表す設計要素になります。

1.2 視覚階層との違い

視覚階層は、画面が止まっている状態でも確認できます。モーション階層は、時間の経過とともに変化する順番や強さを扱います。両者は別々のものではなく、相互に補完する関係です。

静止状態では購入ボタンが最も目立っていても、周囲のバナーや商品画像が常に動いていれば、実際の注意は別の場所へ移ります。画面の静的な優先順位と、動的な優先順位を一致させる必要があります。

1.3 動きの強さを決める要素

動きの強さは、移動距離、拡大率、速度、継続時間、繰り返し回数、色変化などの組み合わせで決まります。一つの数値だけで強さを判断することはできません。

短い距離でも高速で繰り返されれば強く感じられます。反対に、大きな画面遷移でも自然な速度と方向を使えば、落ち着いた印象になります。複数の要素をまとめて調整します。

1.4 時間軸を使った情報設計

モーション階層では、何が動くかだけでなく、いつ動くかが重要です。利用者の操作直後に反応を表示し、その後に内容を更新することで、操作と結果の関係が分かりやすくなります。

複数の要素を順番に表示する場合は、重要度の高い情報を先に見せます。ただし、順番を細かく分けすぎると、すべての表示が終わるまで待たされるため、必要な差だけを設けます。

1.5 モーション階層が必要な画面

画面遷移、モーダル、商品追加、入力エラー、通知、メニュー展開など、状態変化が多い画面ではモーション階層が重要です。ECサイトでは、商品選択から購入完了まで多数の動きが発生します。

単純な静的ページでも、スクロール表示、画像切り替え、バナー、ボタン反応が重なることがあります。個別には小さな動きでも、同時に発生すると階層が崩れるため、画面全体で確認します。

2. モーション階層を設計する目的

モーション階層の目的は、画面を華やかにすることではありません。利用者が何が起きたかを理解し、次に何をすべきか判断できるようにすることです。

動きを追加する前に、伝えるべき状態、利用者の行動、発生している問題を明確にします。目的が説明できない動きは、削除または弱める候補になります。

2.1 注意を重要な情報へ向ける

エラー、購入完了、在庫切れなど、利用者が見落としてはいけない情報には、適切な動きを使用できます。静止表示だけでは周囲の情報に埋もれる場合に有効です。

ただし、注意を集める動きを複数箇所で同時に使うと、どれも重要に見えなくなります。一画面で最も重要な変化を決め、その要素を優先します。

2.2 操作と結果をつなげる

利用者がボタンを押した後、対象要素が変化すると、操作が受け付けられたことを理解できます。カートボタンを押した直後に商品数が更新されれば、操作結果が明確になります。

反応が遅い、または別の場所だけが変化すると、利用者はボタンを再度押す可能性があります。操作対象の近くで最初の反応を示し、その後に関連情報を更新します。

2.3 画面内の関係を説明する

商品カードから商品詳細へ移動する際、画像の位置や大きさを連続的に変えると、一覧の商品と詳細画面の関係を理解しやすくなります。突然別画面へ切り替えるより、情報のつながりを示せます。

ただし、長い移動や複雑な変形は操作を遅く感じさせます。関係を説明するために必要な最小限の動きを選びます。

2.4 状態変化を分かりやすくする

メニューの展開、選択状態、保存完了などは、変化前と変化後の差を示す必要があります。動きによって変化の過程を見せると、突然内容が増減するより理解しやすくなります。

一方、変化の内容が明確な場合は、長いアニメーションを使う必要はありません。短い色変化やアイコン変化だけで十分な場合もあります。

2.5 ブランドの印象を表現する

動きの速度、弾み方、滑らかさは、ブランドの印象へ影響します。金融サービスでは安定した動き、子ども向けサービスでは親しみやすい動きなど、事業の性質に合わせられます。

ブランド表現を優先しすぎると、操作性が低下する場合があります。利用者の理解と操作を妨げない範囲で、動きの性格を統一します。

3. 動きの重要度を三段階に分ける方法

モーション階層を管理しやすくするには、動きを高・中・低の三段階へ分ける方法があります。Material Designのボタンも、高強調、中強調、低強調という階層で扱われています。モーションにも同様の考え方を適用できます。

段階数を増やしすぎると、デザイナーや開発者がどの動きを使用すべきか判断しにくくなります。最初は三段階程度に限定し、必要に応じて例外を定義します。

3.1 高優先度の動き

高優先度には、購入完了、重大なエラー、画面全体の遷移など、利用者の行動や結果に直接関係する動きを割り当てます。画面内で最初に認識される必要があります。

高優先度だからといって、激しい点滅や大きな振動を使う必要はありません。表示位置、背景との分離、適切な拡大などを組み合わせ、落ち着いて認識できる強さにします。

3.2 中優先度の動き

中優先度には、メニュー展開、フィルター適用、商品画像切り替えなど、作業の進行を助ける動きを割り当てます。主要な結果を補助する役割です。

高優先度より移動距離を短くし、継続時間も短めにします。ただし、状態の変化が理解できないほど弱くしてはいけません。

3.3 低優先度の動き

低優先度には、マウスを重ねた際のわずかな色変化、アイコンの小さな拡大、背景装飾などを割り当てます。操作可能性や質感を伝える補助として使用します。

低優先度の動きを常時繰り返すと、結果的に強い注意を集めます。低優先度では、利用者の操作時だけ短く発生させる設計が適しています。

3.4 三段階を数値化する

各段階に標準の継続時間、移動距離、拡大率を設定すると、画面間の一貫性を保ちやすくなります。例えば、高優先度は240ミリ秒から400ミリ秒、中優先度は160ミリ秒から240ミリ秒、低優先度は80ミリ秒から160ミリ秒の範囲で管理します。

これらの数値は絶対的な規則ではありません。画面サイズ、移動距離、端末性能、操作内容によって調整し、実機で確認します。

3.5 例外を管理する

読み込み中の表示や、処理完了まで継続する進捗表示は、通常の段階へ入れにくい場合があります。例外を自由に増やすのではなく、利用目的と終了条件を記録します。

例外の動きにも、停止方法、動きを減らす設定、処理終了後の表示を定義します。例外が増えてきた場合は、分類自体を見直します。

4. 主要動作を最も強く見せる方法

主要動作とは、画面で利用者に最も実行してほしい行動です。ECサイトでは、商品詳細を見る、カートに追加する、購入を確定するなどが該当します。

主要動作のモーションは、操作を促すために常に動かすのではなく、利用者が操作した瞬間と結果が返る瞬間に使用します。静止状態の視覚階層も同時に整える必要があります。

4.1 押下直後に反応を返す

主要ボタンを押した瞬間に、わずかな縮小、色変化、押し込み表現などを表示します。通信処理が完了する前でも、入力が受け付けられたことを示せます。

反応が遅れると、利用者は操作できなかったと考える可能性があります。最初の視覚反応と、実際の処理結果を分けて設計します。

4.2 結果を関連する場所へ表示する

カート追加後は、ボタンだけでなくカート件数や通知も更新します。ただし、画面上部のカートだけが動くと、スマートフォンでは見えない場合があります。

操作対象の近くで「追加しました」と伝え、その後にカート件数を更新すると、結果を理解しやすくなります。複数の反応は同時または短い間隔でつなげます。

4.3 背景から分離する

モーダルや購入確認画面を表示する際は、背景を暗くし、前景を少し拡大または浮上させることで階層を示せます。背景と前景の関係が明確になります。

背景まで大きく移動させると、視覚的な負担が増えます。主要内容を前景として示し、背景の動きは最小限にします。

4.4 主要動作を繰り返し動かさない

購入ボタンを常に上下させたり点滅させたりすると、短期的には目立っても、本文の閲覧を妨げます。また、利用者が急かされていると感じる可能性があります。

主要動作は、静止状態では色、位置、余白で目立たせ、動きは操作反応や重要な条件変化に限定します。

4.5 複数の主要操作を作らない

「購入する」「カートに追加」「今すぐ注文」「詳しく見る」が同じ強さで動くと、利用者は選択に迷います。画面の目的に合わせて一つの主要操作を決めます。

補助操作は、枠線ボタン、文字リンク、小さなアイコンなどへ分け、動きも弱くします。モーション階層とボタンの視覚階層を一致させます。

コード例：主要ボタンの押下反応

.primary-action {
 transition:
   transform 120ms ease-out,
   background-color 120ms ease-out;
}

.primary-action:active {
 transform: scale(0.97);
}

.primary-action[data-state="completed"] {
 animation: action-completed 280ms ease-out;
}

@keyframes action-completed {
 0% {
   transform: scale(1);
 }

 45% {
   transform: scale(1.04);
 }

 100% {
   transform: scale(1);
 }
}
 

5. 補助動作を控えめに設計する方法

補助動作は、主要な行動を理解しやすくするための動きです。マウスを重ねた反応、アイコン変化、補足情報の表示などが含まれます。

補助動作が主要動作より強くなると、モーション階層が崩れます。移動距離、色変化、継続時間を抑え、操作の存在だけを伝える程度にします。

5.1 マウスを重ねた反応を小さくする

商品カードへマウスを重ねた際に、カード全体を大きく浮かせると、周辺カードとの位置関係が変化します。小さな影や境界線の変化だけでも操作可能性を伝えられます。

一覧画面で多数のカードが反応する場合は、一つひとつの動きを弱くします。タッチ端末ではマウスを重ねた状態が存在しないため、重要情報をこの反応だけに依存させません。

5.2 アイコンの変化を限定する

お気に入り登録時に、ハートアイコンの色や大きさを短く変えると状態変化を伝えられます。画面全体を動かす必要はありません。

アイコンが回転、跳ね、拡大を同時に行うと強すぎる場合があります。状態を示すために必要な変化を一つまたは二つに絞ります。

5.3 補足情報を近くに表示する

ツールチップや補足説明は、対象要素の近くに短い動きで表示します。離れた場所から大きく移動させると、主要情報のように見えます。

表示方向は、対象要素と画面端の位置に合わせます。毎回異なる方向から表示されると、一貫性が失われます。

5.4 消える動きを短くする

補助通知やツールチップを閉じる際は、表示時より短い時間で消す方法があります。利用者はすでに内容を確認しているため、長い退場アニメーションは必要ありません。

ただし、突然消えると状態変化を見失う場合があります。透明度を短く変えるなど、最低限の連続性を残します。

5.5 主要動作との同時発生を避ける

購入完了モーダルが表示される瞬間に、背景の商品カードやバナーも動くと、注意が分散します。高優先度の動きが発生している間は、低優先度の動きを停止または遅らせます。

同時に動かす必要がある場合は、主要要素を先に開始し、補助要素を少し遅らせます。どの要素が結果で、どの要素が補足かを時間差で示します。

6. 画面遷移の階層を設計する方法

画面遷移は、利用者が現在地から別の場所へ移動したことを示します。方向、距離、拡大率を統一すると、画面構造を理解しやすくなります。

Material Designでは、遷移する要素を独立した方向へ動かすのではなく、主要な軸に沿ってまとまりとして動かすことが推奨されています。

6.1 同じ階層の画面を横方向で示す

商品一覧のページ切り替えや、同じ階層のタブ移動では、横方向の移動を使用できます。並列関係であることを視覚的に示せます。

方向は、ナビゲーションの順序と一致させます。次の項目へ進むときと戻るときで方向を反転させ、位置関係を維持します。

6.2 詳細画面を前方への移動で示す

一覧から詳細へ移動する場合は、対象要素の拡大や前面への移動を使用できます。詳細が一覧の中から開かれたことを示します。

戻る際は、反対の動きで一覧へ戻します。別の方向へ消すと、画面間の関係が分かりにくくなります。

6.3 モーダルを上位層として示す

確認画面や重要な選択をモーダルで表示する場合、背景を固定し、前景を上に重ねます。背景へ戻れることと、一時的な上位層であることが伝わります。

モーダルを画面端から長距離移動させる必要はありません。透明度と小さな拡大を組み合わせるだけでも階層を表現できます。

6.4 戻る動きを対称にする

進むときに右から左へ移動した場合、戻るときは左から右へ移動させます。進行方向と履歴を直感的に理解しやすくなります。

ただし、すべての操作を完全に逆再生する必要はありません。戻る操作は素早くしたい利用者も多いため、退場時間を少し短くできます。

6.5 複数方向を混在させない

一つの画面で、メニューは左、商品詳細は下、通知は右、広告は上から同時に現れると、構造を理解しにくくなります。方向には意味を持たせ、用途ごとに統一します。

主要な移動軸を一つ決め、補助的な表示だけ別方向を使用します。独立した要素を無関係な方向へ動かしすぎないことが重要です。

7. タイミングと順番で階層を作る方法

モーション階層は、大きさだけでなく開始時刻によっても作れます。最も重要な要素を先に動かし、関連する要素を少し遅れて表示すると、視線の順番を設計できます。

ただし、すべての要素を順番に動かすと表示完了が遅れます。情報を理解するために必要な時間差だけを設けます。

7.1 主要要素を最初に表示する

画面が開いた際は、ページタイトル、主要内容、主要操作を先に表示します。背景装飾や補助情報は後から表示しても問題ありません。

主要要素が後から現れると、利用者は最初に見えた補助情報を重要だと判断する可能性があります。静的な優先順位と表示順を一致させます。

7.2 関連要素をまとめて動かす

商品画像、商品名、価格など、同じ情報単位に属する要素は、近いタイミングで動かします。別々に長い時間差を付けると、関係が弱く見えます。

関連要素の中でも、商品名を先にし、その後に価格を表示するなど、小さな順番を設けることはできます。全体として一つのまとまりに感じられる間隔へ抑えます。

7.3 段階表示を短くする

一覧カードを順番に表示する演出では、カード数が増えるほど最後の表示が遅れます。最初の数件だけ時間差を付け、その後はまとめて表示する方法があります。

情報閲覧が主目的のページでは、演出より表示速度を優先します。毎回同じ段階表示を繰り返さず、初回表示だけに限定する方法もあります。

7.4 操作結果を待たせない

保存や購入などの操作後に、演出が終わるまで結果を表示しない設計は避けます。処理中であることをすぐ示し、完了後に短い結果表示を行います。

通信処理が長い場合は、進捗表示や状態文を使用します。単なる回転表示だけでは、何を待っているのか分かりにくい場合があります。

7.5 同時発生数を制限する

同時に動く要素が多いほど、個々の変化を追いにくくなります。画面遷移中に必要な要素と、遷移後でもよい要素を分けます。

主要な動きが完了するまで装飾を止める、または画面が安定した後に補助動作を開始する方法が有効です。

コード例：段階表示を短く制限する

.motion-list__item {
 opacity: 0;
 transform: translateY(8px);
 animation: item-enter 220ms ease-out forwards;
}

.motion-list__item:nth-child(2) {
 animation-delay: 40ms;
}

.motion-list__item:nth-child(3) {
 animation-delay: 80ms;
}

.motion-list__item:nth-child(n + 4) {
 animation-delay: 100ms;
}

@keyframes item-enter {
 to {
   opacity: 1;
   transform: translateY(0);
 }
}
 

8. 速度と継続時間を調整する方法

アニメーションが遅すぎると操作を妨げ、速すぎると変化を認識できません。移動距離、画面サイズ、情報の重要度に合わせて継続時間を調整します。

同じ継続時間でも、短距離移動と画面全体の移動では感じ方が異なります。固定値をすべてに適用せず、用途別の範囲を定義します。

8.1 小さな反応を短くする

ボタンの押下や色変化など、移動量が小さい反応は短時間で完了させます。長い時間を使うと、操作に遅延があるように感じられます。

短くても、開始と終了が認識できる程度の時間は必要です。実機で繰り返し操作し、反応が見えるか確認します。

8.2 大きな遷移に少し長い時間を使う

画面全体や大きなモーダルが移動する場合は、小さなボタン反応より長い時間を使います。距離に対して時間が短すぎると、急激な移動になります。

ただし、長距離だからといって一秒以上の演出を毎回行うと、利用者の作業を遅らせます。情報構造が伝わる範囲で短くします。

8.3 入場と退場の時間を変える

新しい情報の入場は認識する時間が必要ですが、不要になった情報の退場は短くできます。退場を素早くすると、次の操作へ移りやすくなります。

エラーメッセージなど、消えること自体が重要な場合は、急に削除しないようにします。状態の重要度に応じて調整します。

8.4 端末性能を考慮する

高性能な制作環境で滑らかに見えても、低性能端末では遅延や停止が発生する場合があります。多くの要素を同時に動かすほど処理負担が増えます。

対象利用者が使う端末で確認し、処理負荷が高い演出を減らします。動きの品質が安定しない場合は、単純な透明度変化へ置き換えます。

8.5 時間変数を共通化する

CSS変数やデザイントークンとして、短時間、中時間、長時間を定義します。部品ごとに自由な時間を設定するより、一貫した体験を作りやすくなります。

数値名だけでなく、用途も記録します。短時間は押下反応、中時間は展開、長時間は画面遷移のように使用条件を決めます。

コード例：時間を共通変数で管理する

:root {
 --motion-duration-fast: 120ms;
 --motion-duration-medium: 220ms;
 --motion-duration-slow: 360ms;

 --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
 --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
}

.button {
 transition:
   transform var(--motion-duration-fast)
   var(--motion-easing-standard);
}

.dropdown {
 transition:
   opacity var(--motion-duration-medium)
   var(--motion-easing-standard),
   transform var(--motion-duration-medium)
   var(--motion-easing-standard);
}

.page-transition {
 transition:
   transform var(--motion-duration-slow)
   var(--motion-easing-standard);
}
 

9. イージングで動きの性格を分ける方法

イージングは、動き始めから終了までの速度変化を決めます。同じ距離と継続時間でも、イージングが異なると重さや反応性の印象が変わります。

主要、補助、退場などの用途ごとにイージングを定義すると、モーション階層とブランドの一貫性を保てます。

9.1 標準的な動きに滑らかな減速を使う

メニュー展開やカード表示では、速く始まり、終了時に減速する動きが自然に感じられます。要素が目的位置へ落ち着く印象を与えます。

減速を強くしすぎると、最後の部分だけ長く残るため、操作が遅く感じられます。継続時間と合わせて調整します。

9.2 退場を素早く始める

閉じる、削除する、画面外へ移動する動きは、ゆっくり始めるより素早く退場させる方が作業を妨げにくくなります。

ただし、削除対象を確認する必要がある場合は、即座に消すのではなく、短い縮小や透明度変化を使います。

9.3 弾む動きを限定する

弾むイージングは、成功、追加、楽しい反応を表現できます。しかし、入力欄、業務画面、重大なエラーなどへ使用すると、内容と印象が一致しない場合があります。

同じ画面で複数の要素が弾むと、視線が散ります。ブランド表現や重要な達成時だけに限定します。

9.4 線形変化を進捗へ使う

一定速度の線形変化は、進捗や連続回転などに適しています。要素の入場や画面遷移へ使うと、機械的で不自然に感じられる場合があります。

進捗表示でも、実際の処理時間が不明な場合に正確な進行率を装ってはいけません。不確定な処理には別形式の表示を使用します。

9.5 用途別にイージングを固定する

開発者が部品ごとに異なる曲線を選ぶと、画面全体の動きが統一されません。入場、退場、標準、強調など、少数の曲線へ限定します。

曲線名だけでなく、利用例をデザインシステムへ掲載します。実際に再生できる見本を用意すると判断しやすくなります。

10. ECサイトでモーション階層を活用する方法

ECサイトでは、商品発見、比較、選択、カート追加、決済という各段階で動きが発生します。購入導線を優先し、広告や装飾の動きを抑えることが重要です。

利用者が商品を検討している最中に不要な動きを表示すると、価格や仕様の比較を妨げます。購入段階ごとに必要な動きだけを残します。

10.1 商品カードの反応を控えめにする

商品カードへマウスを重ねた際は、境界線、影、画像切り替えなどで操作可能性を示せます。カード全体を大きく移動させる必要はありません。

複数の商品を比較する一覧では、カード位置が動くと視線がずれます。比較の安定性を優先し、反応を小さくします。

10.2 商品画像の切り替えを分かりやすくする

色や角度を変更した際は、現在の画像と次の画像を短く切り替えます。強い回転や長いスライドより、透明度変化が適している場合があります。

選択した色と画像が一致したことを示すため、色名や選択状態も同時に更新します。画像の動きだけで状態を伝えないようにします。

10.3 カート追加を主要動作として扱う

カート追加は、ECサイトの重要な成果につながる操作です。押下反応、追加完了通知、カート件数更新を一つの流れとして設計します。

商品画像がカートへ飛ぶ演出は関係を示せますが、移動距離が長く、毎回発生すると負担になる場合があります。短い確認表示でも十分か検証します。

10.4 在庫変化を適切に強調する

選択したサイズが在庫切れの場合は、該当選択肢と購入ボタンの状態を更新します。画面全体を振動させるより、対象箇所の近くで理由を表示します。

残り数量を強調する場合も、常に点滅させてはいけません。選択変更によって在庫状態が変わった瞬間だけ、短く表示します。

10.5 購入完了を明確に伝える

決済完了後は、完了見出し、注文番号、次の案内を優先して表示します。紙吹雪などの装飾を使う場合でも、重要情報より先に見せないようにします。

注文が成立したことを文字でも明確に伝えます。アニメーションだけで完了を示すと、動きを減らしている利用者へ情報が届きません。

11. フォームとエラー表示の階層を設計する方法

フォームでは、入力中、検証中、エラー、成功、送信中など複数の状態が存在します。各状態を同じ強さで動かすと、何を修正すべきか分かりにくくなります。

エラーは重要ですが、利用者を驚かせる必要はありません。問題のある入力欄と説明を明確にし、修正へ導く動きを使用します。

11.1 入力中の反応を小さくする

入力欄へフォーカスした際は、境界線やラベル位置を短く変化させます。大きな拡大や周囲の移動は、入力作業を不安定にします。

ラベルが移動する形式では、入力後も項目名が確認できるようにします。動きが終了した状態でも読みやすいことが重要です。

11.2 エラーを対象箇所で示す

送信後にエラーがある場合は、最初のエラーへ移動し、該当入力欄とメッセージを強調します。画面全体を揺らすだけでは、修正箇所が分かりません。

複数エラーがある場合は、すべてを同時に激しく動かさず、エラー概要と個別メッセージを使用します。

11.3 振動表現を慎重に使う

入力エラー時に左右へ振動させる演出は、拒否されたことを伝えられますが、繰り返すと不快になります。移動距離を小さくし、一回だけ使用します。

動きを無効にしている場合でも、枠線、アイコン、説明文でエラーが分かるようにします。

11.4 送信中の状態を維持する

送信ボタンを押した後は、処理中であることを表示し、重複送信を防ぎます。ボタン内の表示変更や進捗表示を使用できます。

処理が長い場合は、何を行っているかを説明します。回転アイコンだけを長時間表示すると、停止しているのか判断できません。

11.5 成功表示をエラーより落ち着かせる

入力が正常になった際は、チェックアイコンや短い色変化で伝えます。入力のたびに大きな成功アニメーションを表示すると、作業を妨げます。

フォーム全体の送信完了は高優先度ですが、個別項目の正常状態は補助情報として扱います。

コード例：エラー時の動きを限定する

.form-field[data-state="error"] {
 animation: field-error 220ms ease-out;
}

@keyframes field-error {
 0%,
 100% {
   transform: translateX(0);
 }

 35% {
   transform: translateX(-4px);
 }

 70% {
   transform: translateX(4px);
 }
}

.form-field__error {
 color: #9f1d1d;
 font-weight: 700;
}
 

12. アクセシビリティへ対応する方法

動きは、一部の利用者にめまい、吐き気、集中困難などを引き起こす可能性があります。必要以上の移動、拡大、視差効果を避け、動きを減らす設定に対応する必要があります。

WCAG 2.2では、操作によって開始される非本質的なモーションアニメーションを無効にできることが、レベルAAAの達成基準として示されています。また、自動的に開始し一定時間続く動きには、一時停止、停止、非表示の仕組みが必要になる場合があります。

12.1 動きを減らす設定を検出する

CSSのprefers-reduced-motionを使用すると、OSで動きを減らす設定を選んでいる利用者を検出できます。W3Cも、操作による動きを抑える方法としてこの媒体問い合わせを紹介しています。

設定を検出した場合は、移動、拡大、回転などを削減します。すべてを完全に無効にする必要はなく、短い透明度変化へ置き換える方法があります。

12.2 情報を動きだけで伝えない

保存完了やエラーをアニメーションだけで示すと、動きを無効にした利用者が状態を理解できません。文字、アイコン、色、利用可能な属性を組み合わせます。

動きは理解を補助する役割とし、動きがなくても同じ情報へ到達できるようにします。

12.3 大きな拡大と視差を減らす

背景と前景が異なる速度で移動する視差効果や、画面全体の急な拡大は、前庭障害を持つ利用者へ強い負担を与える可能性があります。

装飾目的の視差は無効化できるようにし、重要な操作には使用しません。スクロール位置と連動する長距離移動も慎重に扱います。

12.4 自動再生を制御する

カルーセル、動画背景、広告などが自動的に動く場合は、停止方法を提供します。動きが情報閲覧を妨げる場合、利用者が止められることが重要です。

自動切り替えによって、読んでいる内容が消えないようにします。重要な情報を自動カルーセルだけへ掲載することも避けます。

12.5 キーボード操作時の動きを確認する

Tabキーで移動するたびに大きなスクロールや拡大が発生すると、現在位置を追いにくくなります。フォーカス要素が見える範囲へ必要最小限に移動します。

フォーカス表示は、アニメーションがなくても明確に認識できるようにします。動きを減らす設定でも操作順序と現在位置が分かることを確認します。

コード例：動きを減らす設定へ対応する

@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
   scroll-behavior: auto !important;
   animation-duration: 1ms !important;
   animation-iteration-count: 1 !important;
   transition-duration: 1ms !important;
 }

 .parallax-layer,
 .floating-decoration {
   transform: none !important;
 }
}
 

13. 滑らかに動作させる実装方法

モーション階層が正しくても、動きが途中で止まったり遅れたりすると、状態変化を理解しにくくなります。表示性能はモーション設計の一部として考える必要があります。

Webアニメーションでは、transformとopacityを中心に使用すると、比較的滑らかに処理しやすくなります。web.devも、高性能なCSSアニメーションの設計と検証方法を紹介しています。

13.1 transformを優先する

位置を変更する場合は、topやleftを連続的に変更するより、transform: translate()を使用する方法があります。画面全体の再配置処理を減らしやすくなります。

ただし、最終的な文書配置までtransformへ依存すると、操作領域やレイアウトとのずれが発生する場合があります。アニメーション中の表現として使用します。

13.2 opacityを組み合わせる

要素の入場と退場では、短い移動と透明度変化を組み合わせると、自然に見せやすくなります。大きな移動を使わなくても状態変化を認識できます。

透明度がゼロの要素でも操作可能な状態が残る場合があります。非表示時のポインター操作やフォーカスを適切に制御します。

13.3 大量要素を同時に動かさない

商品一覧のすべてのカードや背景要素を同時に動かすと、端末負荷が高くなります。表示範囲内の必要な要素だけを対象にします。

動かす要素数を減らすことは、性能だけでなく階層の明確化にもつながります。主要な変化だけを残します。

13.4 フレーム落ちを確認する

滑らかな動きを目指す場合、各フレームの処理が一定時間内に完了する必要があります。web.devでは、60フレーム毎秒を一つの一般的な目標として説明しています。

ただし、数値だけで品質を判断せず、対象端末で操作した際の反応性を確認します。読み込み、通信、画像処理と同時に動く場面も検証します。

13.5 JavaScriptの処理を減らす

毎フレームJavaScriptで位置を計算すると、他の処理と競合する場合があります。CSSアニメーションやWeb Animations APIを使い、ブラウザへ処理を任せられる部分を増やします。

スクロールイベントを大量に実行する場合は、処理頻度を制限します。画面外の装飾まで継続的に計算しないようにします。

コード例：Web Animations APIによる状態変更

function showNotification(element) {
 const reduceMotion = window.matchMedia(
   "(prefers-reduced-motion: reduce)"
 ).matches;

 const keyframes = reduceMotion
   ? [
       { opacity: 0 },
       { opacity: 1 },
     ]
   : [
       {
         opacity: 0,
         transform: "translateY(8px)",
       },
       {
         opacity: 1,
         transform: "translateY(0)",
       },
     ];

 element.animate(keyframes, {
   duration: reduceMotion ? 100 : 220,
   easing: "cubic-bezier(0.2, 0, 0, 1)",
   fill: "both",
 });
}
 

14. デザインシステムでモーションを管理する方法

モーションを画面ごとに個別設計すると、同じ操作でも動き方が変わります。利用者が状態を学習しにくくなり、実装と保守の負担も増えます。

デザインシステムには、継続時間、イージング、距離、優先度、利用条件、禁止例を記録します。Appleの設計指針でも、モーションはプラットフォーム体験を構成する基礎項目の一つとして扱われています。

14.1 モーショントークンを定義する

継続時間、イージング、移動距離、拡大率などを変数として定義します。部品実装では、直接数値を書くのではなく共通トークンを使用します。

トークン名には、fastやslowだけでなく、feedbackやpage-transitionなど用途を示す方法もあります。利用条件を理解しやすくなります。

14.2 優先度別の見本を用意する

高、中、低の各優先度について、実際に再生できる見本を掲載します。文章と数値だけでは、動きの強さを正確に共有できません。

主要ボタン、通知、メニュー、モーダルなど、代表的な部品を使って違いを示します。適切な例だけでなく、強すぎる例も示すと判断しやすくなります。

14.3 使用条件を明記する

「成功時には弾む動きを使う」のような規則だけでは、すべての成功状態に適用される可能性があります。個別入力の成功には使用せず、重要な作業完了だけに使うなど条件を限定します。

禁止条件も記録します。常時点滅、複数方向の同時移動、重要情報を隠す遅延などを禁止例として示します。

14.4 デザインと実装を共有する

デザインツール上の試作と、実際のブラウザ実装では動き方が異なることがあります。開発者と共同で、実機上の時間、曲線、性能を確認します。

コード例や共通部品をデザインシステムへ登録すると、画面ごとの実装差を減らせます。更新時はデザインとコードを同時に修正します。

14.5 変更履歴を残す

モーションの数値や利用条件を変更した場合は、理由、対象部品、変更日を記録します。変更が既存画面へ与える影響も確認します。

新しい演出を追加する際は、既存の優先度体系で表現できないか検討します。類似する動きを無制限に増やさないようにします。

コード例：モーショントークンの定義

:root {  --motion-feedback-duration: 120ms;  --motion-component-duration: 220ms;  --motion-page-duration: 360ms;  --motion-distance-small: 4px;  --motion-distance-medium: 12px;  --motion-distance-large: 32px;  --motion-scale-feedback: 0.97;  --motion-scale-emphasis: 1.04;  --motion-standard:    cubic-bezier(0.2, 0, 0, 1);  --motion-exit:    cubic-bezier(0.4, 0, 1, 1); }

15. モーション階層を検証して改善する方法

モーション階層は、静止画や仕様書だけでは十分に評価できません。実際に操作し、どの動きが最初に認識されるか、作業を妨げないかを確認します。

制作者は動きの目的を知っているため、初見利用者より理解しやすい傾向があります。ユーザビリティテスト、行動データ、実機確認を組み合わせます。

15.1 主要動作が最初に認識されるか確認する

利用者へ画面を操作してもらい、どの変化に最初に気付いたかを質問します。主要な結果より背景装飾や補助通知が先に認識されている場合、階層を調整します。

視線だけでなく、操作後の発言や迷いも確認します。「追加されたか分からない」という反応があれば、動きまたは状態文が不足しています。

15.2 同時に動く要素数を確認する

重要な操作ごとに画面を録画し、同時に動く要素を数えます。意図せず、固定バナー、商品画像、通知、背景などが同時に動いている場合があります。

不要な動きを削除し、必要な要素だけを残します。削除後に情報理解が変わらなければ、その動きは装飾的だった可能性があります。

15.3 操作完了時間を測定する

アニメーションによって次の操作を待たされていないか確認します。画面遷移中でも、利用可能になった要素は操作できるようにする方法があります。

ただし、遷移途中で誤操作が起きる場合は、動きを短くするか、操作可能になる時点を明確にします。単に全操作を長時間無効化しないようにします。

15.4 動きを減らした状態を確認する

通常設定だけでなく、prefers-reduced-motionが有効な状態でもテストします。情報、操作結果、画面構造が失われていないか確認します。

動きを無効にした結果、モーダルが突然現れて分かりにくい場合は、短い透明度変化や明確なフォーカス移動を使用します。

15.5 公開後の行動データを確認する

カート追加の重複、戻る操作、エラー再発、モーダルの即時閉じなどを分析します。動きが強すぎたり、結果が伝わっていなかったりする可能性があります。

クリック率だけでなく、操作時間、完了率、誤操作、問い合わせ内容も確認します。演出を追加したことで短期的なクリックが増えても、購入完了や満足度が下がる場合があります。

モーション監査の記録例

対象操作：
商品カードからカートへ追加

高優先度：
追加完了メッセージ、カート件数更新

中優先度：
ボタンの状態変更

低優先度：
商品カードの影、アイコンの色変化

発見した問題：
商品画像がカートまで長距離移動し、
完了メッセージより強く認識されていた。

改善内容：
商品画像の移動を削除し、
ボタン付近の完了表示と件数更新へ限定した。

確認指標：
重複クリック率、カート追加成功認知率、
操作完了までの時間
 

おわりに

モーション階層は、動きを増やすための考え方ではなく、重要な動きと不要な動きを区別するための設計方法です。画面内で最も重要な行動や状態変化を高優先度とし、補助的な反応や装飾を中・低優先度へ分けることで、利用者の注意を適切に導けます。

実際の設計では、移動距離、継続時間、イージング、開始順序、繰り返し回数を個別に考えるのではなく、一つの階層として組み合わせます。静止状態の視覚階層と動的な優先順位を一致させ、操作直後の反応、処理中の状態、完了結果を連続した流れとして設計することが重要です。

動きは、すべての利用者に同じ方法で提供する必要はありません。動きを減らす設定、低性能端末、キーボード操作などを含めて検証し、アニメーションがなくても情報と操作結果が伝わる状態を維持します。モーション階層をデザインシステムへ組み込み、継続的に検証することで、見た目の演出ではなく、理解と購入行動を支えるUIモーションへ改善できます。