anticipation-mastery

予備動作を極める

セットアップの原則

予備動作は、観客にこれから起こる動きを予告します。演劇の観察からこの原則を発見したディズニーのアニメーターたちは、準備動作がないと、動きが「突然何もないところから」起きたように見え、ワクワクするどころか混乱を招くことに気づきました。原則は、重要な動作の前には必ず逆方向の動きが必要だということです。

基本理論

ニュートンの第三法則を視覚化する：物理的な動作には準備が必要です。投手は投げる前に振りかぶります。猫は飛びかかる前に身をかがめます。予備動作によって、この物理的な必然性が目に見える、ドラマチックなものになります。

注意を誘導する：予備動作は、見る人にどこを見ればよいか、何を期待すればよいかを伝えます。驚きを、より心を引きつける感情であるサスペンスへと変えます。

3つの役割

1. 身体的な準備：跳ねるには体を縮める必要があります（ジャンプ、投げる、殴る）
2. 精神的な準備：観客がこれから起こる動きを認識する時間が必要です
3. 感情的な準備：解放の前に緊張感を高めることで、インパクトが増します

タイミングの変化

長さが動きの大きさを示します：小さな動きには短い予備動作（2～4フレーム）を、重要な場面には長い予備動作（12～24フレーム）を使います。丸1秒かけて振りかぶれば、何か重大なことが起きると見る人に伝わります。

反比例の関係：予備動作が大きいほど、その後の動きを速くしても認識しやすくなります。

他の原則との関係

ステージングは予備動作に左右されます：準備のポーズによって、動きが起こる場所へ注意を誘導します。

タイミングは予備動作の比率で決まります：古典的な公式は1：2です。動作2拍に対して、予備動作を1拍入れます。

スクワッシュ／ストレッチがよく使われます：キャラクターは爆発的な動きの前に体を縮めます。

誇張によって予備動作が強調されます：コミカルな効果を生むため、カートゥーンの振りかぶりは物理的に不可能なほど大きくなります。

分野ごとの応用

UI／モーションデザイン

• ボタンのホバー状態：クリックへの反応を予告するため、わずかに拡大します
• ページ遷移：ナビゲーションの前に短い間や微細な動きを入れます
• 読み込み状態：コンテンツが表示される前に、脈打つ、または振りかぶるようなアニメーションを入れます
• ドラッグ操作：要素が「解放」される前に、わずかな抵抗を加えます

キャラクターアニメーション

• ジャンプの準備：ポーズを保ちながら、しっかりと体をかがめてから跳び上がります
• パンチの繰り出し：前方に打ち出す前に、肩を後ろへ回します
• 感情の変化：反応の前に一拍の静止を入れます

マイクロインタラクション

• トグルスイッチ：新しい状態へ切り替わる前に、短く圧縮します
• 通知：落ち着く前に、画面外からわずかに入ってきます
• ツールチップ：ごく短い遅延を入れ、表示の基点からわずかに拡大します

ゲームデザイン

• 攻撃の振りかぶり：プレイヤーが対応できるよう、読み取りやすい予備動作を入れます
• 能力のチャージ：蓄積される力に合わせて、視覚的に高まっていく演出を入れます
• ボスの攻撃パターン：誇張した予備動作によって、学習可能なメカニクスを作ります

よくある間違い

1. 予備動作を完全に省く：動きがロボットのように唐突に感じられます
2. 小さな動作に予備動作を入れすぎる：動きが鈍く、過剰なアニメーションに感じられます
3. 方向を間違える：予備動作は動作の方向と逆でなければなりません
4. タイミングを一律にする：動作の重要度に応じて、予備動作の長さを変えます

逆転のテクニック

コミカルな効果や意外性を生み出すには、予備動作に対する期待を裏切ります。長く振りかぶってから、小さな動作をします。大きな動作の前に、予備動作を入れません。この原則の力は、それがないときにどれほど違和感が生じるかによって証明されます。

実装の目安

200msを超える動作には、すべて予備動作を入れます。予備動作の長さは、メインの動作の30～50％にします。動作に「張りがない」と感じるときは、たいてい予備動作が不足しています。