モーション原則
動きを「正しく」感じさせるための意思決定を、使用するツールに依存せずに行います。このスキルは、タイミング、イージング、間隔、重さ、リズムを決めるものです。技術スタックを選ぶのではなく、実装に引き渡せる具体的な数値（持続時間、cubic-bezier曲線、スタガーオフセット、スプリング設定）を生成します。
使用するタイミング
- 動きが硬い、浮いている、機械的、ロボット的、安っぽいと感じられ、診断が必要な場合。
- クリップやトランジションの持続時間、イージング曲線、スタガーオフセットを選ぶ場合。
- 動きが物理的な直感（重さ、フォロースルー、弧）を尊重しているかレビューする場合。
- キーフレームを楽曲のビートや編集のアクセントに同期させる場合。
3つの柱 — 数値を決める前にこれを確定する
すべての動きは、持続時間や曲線を選ぶ前に、3つの質問に答える必要があります。これらをスキップすると、技術的には正しくても「何も感じさせない」動きになります。これらは、このコレクション全体が参照する共通の語彙です。
| 柱 | 質問 | 影響を与えるもの |
|---|---|---|
| エモーショナルインテント | 視聴者に何を感じさせるか？（喜び、落ち着き、緊迫感、信頼、優雅さ） | イージング、持続時間、振幅/オーバーシュート |
| ビジュアルナラティブ | 小さなストーリーは何か？ 準備 → アクション → 解決 | シーケンス、演出、何がいつ登場するか |
| モーションクラフト | どのように動きを信憑性のあるものにするか？ | 物理、二次的な動き、弧、フォロースルー |
3つのモーションレイヤー — 奥行き、平坦さではない
平坦な動き＝メインのものだけが動く。信憑性のある動きは、一度に3つのレイヤーで動作します：
- プライマリ — 目が追うメインのアクション（主役の動き）。
- セカンダリ — プライマリに反応する、豊かさを補完する動き（影の移動、アイコンの微調整、後から落ち着くラベル）。
- アンビエント — 決して注意を引かない背景の生命感（ゆっくりとしたグラデーションのドリフト、低コントラストのパルス）。
判断レイヤー（
motion-art-direction）ではこれらをHero / Support / Textureと呼びます — 同じ3つのレイヤーですが、「何が動きを得るにふさわしいか」で順位付けされます。Primary≈Hero、Secondary≈Support、Ambient≈Texture。
中核原則
イージングは最大のレバー
線形の動きはロボット的と解釈されます。linearは連続ループ（スピナー、マーキー、無限スクロール）のみに予約してください。目が個別のイベントとして知覚するものはすべて加速が必要です。
動きにカーブを合わせる：
- 登場 / 出現 -> イーズアウト（速いスタート、穏やかな落ち着き）。オブジェクトがエネルギーを持って到着し、減速して位置に落ち着く。
cubic-bezier(0.16, 1, 0.3, 1)。 - 退出 / 消失 -> イーズイン（穏やかなスタート、速い終了）。オブジェクトが加速して去る。
cubic-bezier(0.7, 0, 0.84, 0)。 - 移動 / 再配置（画面上に留まる） -> イーズインアウト（対称）。
cubic-bezier(0.65, 0, 0.35, 1)。 - 遊び心 / ブランド表現 -> わずかなオーバーシュート。
cubic-bezier(0.34, 1.56, 0.64, 1)（1.56が1.0を超え、オーバーシュートして落ち着く動作を生み出し、「重さ」と解釈される）。
経験則：目は遅い終了よりも遅い開始をはるかに許容しません。迷ったら、減速して停止してください。
手動イージングシェイピング（After Effects）。 曲線を指定する代わりに手動でキーフレームを打つ場合も、同じ原則がグラフエディタに適用されます：スピードグラフの両端がゼロに向かって平坦になるように形作り、減速の影響を80〜90%に押し上げて、スナップ感のある発進と滑らかな停止を実現します。F9（イージーイーズ）は33%の対称的な出発点に過ぎません — 非対称にしてください。グラフエディタの読み方、ハンドル/影響のテクニック、オーバーシュート、アンティシペーション、バウンスのステップバイステップレシピ（減衰バウンス式を含む）については references/easing-graph-editor.md を参照してください。
タイミングは重さと重要性を伝える
| 要素 | 持続時間 |
|---|---|
| マイクロインタラクション（ホバー、トグル、タップフィードバック） | 100〜200ms |
| UIトランジション（パネル、モーダル、ページ領域） | 200〜400ms |
| ヒーロー/大要素/全画面 | 400〜800ms |
| 映画的なカメラ移動 | 800〜2000ms |
距離とサイズは持続時間を拡大します。20px移動する小さなアイコンと、800px移動する全画面パネルは同じ持続時間であるべきではありません — パネルはより多くの時間を必要とします。さもなければ無重力に見えます。実用的なスケーリング：距離または面積がおよそ2倍になるごとに、持続時間を約30〜50%追加して、知覚速度をほぼ一定に保ちます。重いオブジェクトはゆっくりと動き始め、オーバーシュートが少なくなります。軽いオブジェクトはスナップし、バウンドする場合があります。
間隔とスタガーがリズムを生み出す
リスト、グリッド、グループを一度にすべて表示してはいけません — 単一の平坦なイベントとして解釈されます。各子要素の開始をずらしてください。
- リスト/連続アイテム：アイテム間 40〜80ms。
- 密集グリッド：20〜40ms（アイテムが多いほど、アイテムあたりの遅延は小さくします。さもないと末尾が引きずられます）。
- グループの合計表示時間はおよそ 600〜800ms に制限します。
count * offsetがそれを超える場合は、オフセットを小さくするか、距離ベースのスタガー（起点から遠いアイテムほど後から開始）に切り替えます。 - スタガーの方向は目の動きに従うべきです：上から下、または焦点から放射状に。
1/3ルール（2つの形態、どちらも普遍的）：
- 距離 — どの要素も、画面の約1/3以上を中間キーフレームやスケール/不透明度の変化なしに移動してはいけません。長く途切れないスライドは「テンプレートが動いた」と解釈され、「何かが起こった」とは解釈されません。
- 同時性 — 3つ以上の要素がある場合、一度に活発に動いている要素は約1/3以下に保ちます。残りは静止するか、アンビエントとして動きます。すべてが一緒に動く = 焦点のないノイズです。
アンティシペーションとフォロースルーが物理的な動きを売り込む
- アンティシペーション：メインのアクションの前に行う小さな逆方向の動き（ボタンがポップする前に
scale 0.95に沈む、キャラクターがジャンプする前にしゃがむ）。60〜120msで十分です。 - フォロースルー / オーバーラッピングアクション：後続部分はメインの本体が停止した後も動き続けます（ヒーローカードが着地した後、その影とラベルが40〜80ms遅れて落ち着く）。すべてを同じフレームで停止させるのではなく、付随する要素の落ち着くタイミングをずらします。
- 弧：自然な動きの軌跡。有機的なオブジェクトの純粋な直線的な移動は機械的に見えます。x/yにわずかな弧を追加するか、パスに沿ってアニメーションさせます。
ビート同期とリズム
モーションがオーディオに付随する場合、インパクトのあるキーフレーム（ヒット、カット、リビール）はビートの間ではなく、ビート上に配置します。120 BPMではビートは500ms、8分音符のグリッドは250msです。重要な瞬間をそのグリッドに量子化します。音楽がない編集の場合は、視覚的なパルスを確立します（例：約500〜800msごとに1つの主要イベント）ので、作品が一貫して呼吸します。
スプリングベース vs. 持続時間ベースのモーション
スプリング（質量 / 剛性 / ダンピング）は持続時間を自動決定し、インタラクティブで割り込み可能なモーション（ドラッグリリース、ジェスチャー）に対してより物理感があります。持続時間+イージングは、正確な同期が重要な振り付けされた、タイムラインに固定されたシーケンス（ビデオ、スクロールトリガーのリビール）に適しています。スナップ感のあるデフォルトスプリング：stiffness 300, damping 30, mass 1。完全なスプリングテーブルは references/easing-curves.md を参照してください。
よくある失敗の診断
- 硬い/ロボット的 -> 登場に
linearまたは対称的なイージングを使用している。イーズアウトに切り替える。 - 浮いている/緩慢 -> 持続時間が長すぎる、またはイーズアウトが穏やかすぎる。持続時間を30%削減し、カーブを鋭くする。
- 安っぽい/ガタつく -> すべてが一度に出現する（スタガーがない）、またはすべての要素がサイズに関係なく同じ持続時間を共有している。
- イージングしているのに機械的 -> アンティシペーション、フォロースルー、弧がない。弧とオーバーラップを追加する。
クイックリファレンス
| ニーズ | 使用法 |
|---|---|
| 登場 | cubic-bezier(0.16, 1, 0.3, 1)、300〜500ms |
| 退出 | cubic-bezier(0.7, 0, 0.84, 0)、200〜300ms |
| 移動 | cubic-bezier(0.65, 0, 0.35, 1)、300〜400ms |
| ブランド表現のポップ | cubic-bezier(0.34, 1.56, 0.64, 1)、400〜600ms |
| リストスタガー | アイテムあたり40〜80ms、合計約700msで制限 |
| ループのみ | linear |
参照ファイル
references/easing-curves.md— 名前付きcubic-bezierライブラリ（正確な値、スプリング設定（Framer/react-spring/iOS）、要素タイプ別の持続時間ガイダンス）。references/easing-graph-editor.md— After Effectsグラフエディタの技術：スピードグラフとバリューグラフ、イージングハンドルと影響/速度の数値、スナップ感、オーバーシュート、アンティシペーション、バウンスのステップバイステップレシピ。references/twelve-principles.md— 12のディズニー原則すべてに、具体的で数値化されたモーショングラフィックスの例を各々に提供。