animation-principles

モーションの原則

使用するツールにかかわらず、動きが自然に感じられる方法を決めます。このスキルでは、タイミング、イージング、間隔、重み、リズムを扱います。技術スタックは選びません。どの実装にもそのまま渡せる具体的な数値（時間、cubic-bezier 曲線、スタッガーのオフセット、スプリング設定）を提示します。

使用するタイミング

• 動きが硬い、ふわふわする、機械的、ロボットのよう、安っぽいと感じられ、原因を診断する必要があるとき。
• クリップやトランジションの時間、イージング曲線、スタッガーのオフセットを選ぶとき。
• 動きが物理的な直感（重み、フォロースルー、弧）に沿っているか確認するとき。
• キーフレームを音楽のビートや編集上のアクセントに同期させるとき。

3 つの柱 — 数値を決める前に定めること

あらゆる動きについて、時間や曲線を決める前に、次の 3 つの問いに答えてください。これを省くと、技術的には正しくても何も感じさせない動きになります。これらは、このコレクションの他の項目が参照する共通の語彙です。

柱	問い	影響するもの
感情的な意図	見る人に何を感じてほしいですか？（喜び、落ち着き、緊迫感、信頼、優雅さ）	イージング、時間、振幅／オーバーシュート
視覚的な物語	どんな短い物語ですか？準備 → 動作 → 解決	順序、演出、何をいつ登場させるか
モーションの技術	どうすれば本物らしく感じられますか？	物理、セカンダリモーション、弧、フォロースルー

3 つのモーションレイヤー — 平坦さではなく奥行き

平坦な動きでは、主要な要素だけが動きます。説得力のある動きでは、次の 3 つのレイヤーが同時に動きます。

• プライマリ — 視線が追う主要な動き（主役の動き）。
• セカンダリ — プライマリに反応する、動きを支える豊かさ（影が移動する、アイコンが少しずれる、ラベルが遅れて落ち着くなど）。
• アンビエント — 注意を引くことのない背景の動き（ゆっくりとしたグラデーションの移動、コントラストを抑えたパルスなど）。

判断レイヤー（motion-art-direction）では、これらをヒーロー／サポート／テクスチャと呼びます。動きを加える価値のある要素という観点で順位付けしていますが、同じ 3 つのレイヤーです。プライマリ≈ヒーロー、セカンダリ≈サポート、アンビエント≈テクスチャです。

基本原則

イージングは最も大きな効果をもたらす調整要素です

リニアな動きはロボットのように見えます。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 を参照してください。

タイミングで重みと重要性を伝える

要素	時間
マイクロインタラクション（ホバー、切り替え、タップ時のフィードバック）	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 では1拍が500ms、8分音符のグリッドは250msです。重要な瞬間をこのグリッドに合わせます。音楽のない編集では、作品全体に一定の呼吸をもたらすため、視覚的な拍動（例：500-800msごとに大きなイベントを1つ）を作ります。

スプリングと時間ベースの動き

スプリングは（質量／剛性／減衰によって）時間と感触が自動的に決まるため、ドラッグ後の解放やジェスチャーなど、インタラクティブで中断可能な動きに向いています。動画やスクロールに連動した表示など、正確な同期が重要な、演出済みでタイムラインに固定されたシーケンスには、時間＋イージングが適しています。素早い動きのデフォルトスプリングは 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 Graph Editor の操作ガイド：速度グラフと値グラフ、イージングハンドルと影響度／速度の数値、キビキビした動き、オーバーシュート、予備動作、バウンスを作る手順。
• references/twelve-principles.md — Disney の 12 原則すべてと、それぞれに具体的な数値を用いたモーショングラフィックスの例。