モーション・プリンシプル
動きがどうあるべきかを、使用ツールに依存せずに決定します。このスキルは、タイミング、イージング、間隔、重さ、リズムに関する答えを提供します。技術スタックを選ぶのではなく、具体的な数値（duration、cubic-bezier カーブ、スタガーオフセット、スプリング設定）を生成し、あらゆる実装に引き渡せる状態にします。
使用するタイミング
- 動きが硬い、浮いている、機械的、ロボット的、または安っぽく感じられ、診断が必要なとき
- クリップやトランジションの duration、イージングカーブ、スタガーオフセットを選択するとき
- モーションが物理的な直感（重さ、フォロースルー、弧）を尊重しているかレビューするとき
- キーフレームを音楽のビートや編集のアクセントに同期させるとき
三本の柱 — 数値の前にこれを決める
あらゆるモーションは、duration やカーブを選ぶ前に、3つの質問に答えるべきです。これを飛ばすと、技術的には正しくても何も感じないモーションになります。これらは、コレクション全体が参照する共有語彙です。
| 柱 | 質問 | それが導くもの |
|---|---|---|
| 感情的な意図 | 視聴者に何を感じさせたいか？（喜び、落ち着き、緊迫感、信頼、優雅さ） | イージング、duration、振幅/オーバーシュート |
| 視覚的ナラティブ | ミクロなストーリーは何か？ セットアップ→アクション→解決 | 順序、ステージング、何がいつ入ってくるか |
| モーションクラフト | どうやって信憑性を持たせるか？ | 物理、二次モーション、弧、フォロースルー |
三つのモーションレイヤー — 奥行き、平坦さを避ける
平坦なモーション = メインのものだけが動く。信憑性のあるモーションは、同時に次の3つのレイヤーを実行します。
- プライマリ — 目が追うメインのアクション（ヒーロームーブ）
- セカンダリ — プライマリに反応して動く、背景を豊かにする動き（影の移動、アイコンの微動、ラベルの遅れての定着）
- アンビエント — 決して注意を引かない背景の生命感（ゆっくりとしたグラデーションのドリフト、低コントラストのパルス）
判断レイヤー（
motion-art-direction）ではこれらを Hero / Support / Texture と呼びます — 同じ3つのレイヤーを、動きに値するもの でランク付けしたものです。Primary≈Hero、Secondary≈Support、Ambient≈Texture。
コア・プリンシプル
イージングは最大のレバー
リニアな動きはロボット的に見えます。linearは連続ループ（スピナー、マーキー、無限スクロール）のみに予約します。目が離散的なイベントとして認識するものにはすべて加速が必要です。
カーブをアクションに合わせる：
- 出現 -> ease-out（速い開始、穏やかな着地）。オブジェクトがエネルギーを持って到着し、減速して所定の位置に収まる。
cubic-bezier(0.16, 1, 0.3, 1) - 消失 -> ease-in（穏やかな開始、速い終了）。オブジェクトは加速して去る。
cubic-bezier(0.7, 0, 0.84, 0) - 移動（画面内に留まる） -> ease-in-out（対称）。
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 を参照してください。
タイミングは重さと重要度を伝える
| 要素 | Duration |
|---|---|
| マイクロインタラクション（ホバー、トグル、タップフィードバック） | 100-200ms |
| UIトランジション（パネル、モーダル、ページ領域） | 200-400ms |
| ヒーロー/大要素/フルスクリーン | 400-800ms |
| シネマティックカメラ移動 | 800-2000ms |
距離とサイズは duration を拡大縮小します。20px 動く小さなアイコンと 800px 動くフルブリードパネルは、同じ duration を持つべきではありません — パネルはより多くの時間が必要です。さもないと無重力に見えます。実用的なスケーリング：距離または面積がおよそ2倍になるごとに duration を約30-50%追加し、知覚される速度をほぼ一定に保ちます。重いオブジェクトはゆっくりと動き出し、オーバーシュートは少なくなります。軽いオブジェクトは素早く動き、バウンスすることもあります。
間隔とスタガーがリズムを生み出す
リスト、グリッド、グループを一度にすべて表示してはいけません — それは単一の平坦なイベントとして読まれます。各子要素の開始をずらします。
- リスト/シーケンシャルアイテム：アイテム間 40-80ms
- 高密度グリッド：20-40ms（アイテム数が多いほど、アイテムあたりの遅延は小さくします。そうしないと末尾が長引きます）
- グループ全体の表示完了はおよそ 600-800ms に収めます。
count * offsetがそれを超える場合は、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. duration ベースのモーション
スプリング（質量 / 剛性 / 減衰）は duration を自己決定し、インタラクティブで中断可能なモーション（ドラッグリリース、ジェスチャー）に適しており、より物理的に感じられます。duration+イージングは、正確な同期が重要な振付済みのタイムライン固定シーケンス（ビデオ、スクロール連動表示）に適しています。キビキビしたデフォルトスプリング：stiffness 300, damping 30, mass 1。完全なスプリングテーブルは references/easing-curves.md を参照してください。
よくある失敗の診断
- 硬い/ロボット的に感じる -> 出現に
linearまたは対称イージングを使用している。ease-out に切り替える。 - 浮いてる/鈍く感じる -> duration が長すぎる、または ease-out が穏やかすぎる。duration を30%削減し、カーブを急峻にする。
- 安っぽい/ガタつく感じ -> すべてが一度に出現している（スタガーがない）、またはサイズに関係なくすべての要素が1つの duration を共有している。
- イージングしているのに機械的に感じる -> アンティシペーション、フォロースルー、弧がない。弧と重なりを追加する。
クイックリファレンス
| 必要事項 | 使用するもの |
|---|---|
| 出現 | 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）、要素タイプ別の duration ガイダンス。references/easing-graph-editor.md— After Effects グラフエディタの技術：スピードグラフ vs バリューグラフ、イージングハンドルと影響度/速度の数値、キビキビ、オーバーシュート、アンティシペーション、バウンスのステップバイステップレシピ。references/twelve-principles.md— ディズニーの12の原則すべてに、具体的で数値化されたモーショングラフィックスの例を添えて。