motion-design

モーションデザイン

すべてのアニメーションとトランジションに、これらのルールを適用してください。例として、依存関係のない CSS、Web Animations API、View Transitions API があります。これらのルールは、どのフレームワークやユーティリティシステムにもそのまま適用できます。詳細なルールとパターンは ./reference/ にまとめられています。ルールを適用または引用する前に、関連するファイルを読んでください。

基本方針

明確な目的がある場合に限ってアニメーションを使用し、すべてのアニメーションをアクセシブルにし、ランタイム依存関係を追加しないでください。モーションは変化を明確にするためのものであり、装飾ではありません。目的を果たす最も低コストな手法を選び、プロジェクト既存のモーショントークンを再利用し、アニメーションと同時に視覚効果を抑えた代替手段も提供してください。後回しにしてはいけません。

確認

レビューのみの場合は、作業を中断せずに指摘事項を報告してください。既存ファイルを編集する前に、まず変更内容を確認し、正しく判断するために必要な情報があれば、推測せずに尋ねてください。

判断の手順

すべてのアニメーションについて、以下の手順を順番に進め、いずれかの段階を通過できなければそこで中止してください。

1. アニメーションを使用するか判断します。次のセクションにある頻度と目的の条件を適用し、アニメーションを使用しない選択肢も検討してください。reference/principles.md を参照してください。
2. 何を動かすか選びます。transform と opacity のみをアニメーションさせ、レイアウトプロパティは避けてください。reference/performance.md を参照してください。
3. 手法を選びます。状態の変化には CSS トランジション、ループには CSS アニメーション、スクリプト制御または中断可能なモーションには Web Animations API、フォールバックを用意した DOM の変更には View Transitions API を使用してください。reference/techniques.md を参照してください。
4. 登場と退出の動きを設計します。登場時は減速させ、退出時はより速くし、ポップオーバーではトリガーの位置を transform-origin に設定し、短いリストには時間差をつけてください。reference/entrances-and-exits.md を参照してください。
5. 視覚効果を抑えた代替手段を定義します。単にオフにするのではなく、クロスフェードのような実際の代替手段を用意してください。reference/accessibility.md を参照してください。
6. 中断可能にします。ユーザーが動きの途中で逆方向にしたり、別の動きに切り替えたりできるようにしてください。それが期待される場面で適用します。reference/interactivity.md を参照してください。
7. パフォーマンスと品質を確認します。ミドルレンジのデバイスで 60fps を維持してから、チェックリストを実行してください。コードの確認だけではフレームレートや滑らかさを確認できないため、実際にページを動かす必要がある項目は、合格ではなく検証待ちとして記録してください。reference/performance.md と reference/checklist.md を参照してください。

判断基準

すべてのアニメーションは、次の 2 つの問いを順番に通過する必要があります。いずれかに該当しなければ、アニメーションを使用しないでください。

1. 頻度。この体験をユーザーがどのくらいの頻度で目にするかを考えます。1 日に何百回も目にするものは、アニメーションさせないでください。たまに目にする画面や初回に表示される画面には、アニメーションの予算を使えます。
2. 目的。次のいずれかを 1 つ挙げます。フィードバック、空間的一貫性、状態の提示、唐突な変化の防止、または楽しさ。楽しさを目的にできるのは、まれに表示される画面や初回に表示される画面に限ります。

頻度	判断
1 日に何百回も（キーボードショートカット、コマンドパレット）	アニメーションなし
1 日に何十回も（ホバー、リスト内の移動）	ごくわずかなアニメーションのみ、またはアニメーションなし
たまに（モーダル、ドロワー、トースト）	標準的なアニメーション
まれ、または初回（オンボーディング、成功時）	ここで楽しさのための予算を使います

ユーザーが読んでいる、または操作しているコンテンツを、スタイル目的で動かしてはいけません。詳細は reference/principles.md を参照してください。

モーショントークン

プロジェクトに既存のトークンがある場合は、それを再利用してください。ない場合は、この組み込みのスケールを使用してください。これだけで完結するため、ほかのスキルをインストールする必要はありません。スケール全体とコピー可能な _tokens.css は reference/motion-tokens.md にあります。

期間	値	用途
--motion-duration-1	100ms	マイクロフィードバック、ホバー、アイコン
--motion-duration-2	150ms	終了、ツールチップの終了
--motion-duration-3	200ms	ドロップダウン、ポップオーバー、小さな要素の表示
--motion-duration-4	300ms	モーダル、ドロワー、ページ遷移
--motion-duration-5	500ms	大きな強調、または初回の強調

イージング	値	用途
--motion-ease-out	cubic-bezier(0.22, 1, 0.36, 1)	表示時、デフォルト
--motion-ease-standard	cubic-bezier(0.4, 0, 0.2, 1)	画面内での移動
--motion-ease-in	cubic-bezier(0.4, 0, 1, 1)	画面外へ移動する終了時

リファレンス一覧

ルールを適用または引用する前に、関連ファイルを読んでください。

• 基礎：
  • reference/principles.md — アニメーションを使うタイミング、目的、節度
  • reference/motion-tokens.md — 期間、イージング、距離、スケール
• テクニック：
  • reference/techniques.md — トランジション、アニメーション、Web Animations API、View Transitions
  • reference/entrances-and-exits.md — 表示、終了、開く動きと閉じる動きの非対称性、transform-origin、段階的な表示
  • reference/interactivity.md — 中断可能な動きとジェスチャーの感覚
  • reference/performance.md — コンポジターに適したプロパティと60fps
• パターン：
  • reference/patterns.md — 依存関係がなく、アクセシブルな厳選レシピ
• 品質：
  • reference/accessibility.md — 動きを減らす設定への代替手段と前庭系への安全性
  • reference/checklist.md — テスト用チェックリスト
• クレジット：
  • reference/credits.md — 系譜と出典

アンチパターン

• width、height、top、left などのレイアウトプロパティをアニメーションさせる。
• 動きを減らす設定を、実用的な代替手段ではなく単なるオフスイッチとして扱う。
• コマンドパレットなど、更新頻度の高い画面要素をアニメーションさせる。
• ユーザーが現在読んでいる、または操作しているコンテンツを動かす。

---

@planetabhi による執筆