timing-principle-mastery

タイミングを極める

時間の重み

タイミングとは、動作にかかるフレーム数（またはミリ秒数）です。一見単純で、単に長さを表すものに思えますが、ほかのどの原則よりも力強く、重みや感情、エネルギーを伝えます。タイミングを変えれば、意味も変わります。

基本理論

物理的な伝達：タイミングは質量と力について伝えます。重い物体は動き始めるのも止まるのもゆっくりです。軽い物体は瞬時に反応します。同じ距離を落ちるボウリングの球と風船を区別するのは、タイミングだけです。

感情的な伝達：タイミングはキャラクターの状態を伝えます。遅いタイミングは、疲れている、落ち込んでいる、あるいは体が大きいという印象を与えます。キビキビとしたタイミングは、警戒している、神経質、あるいは身軽という印象を与えます。

フレームレートの基礎

24fps（映画の標準）：

• 1-2フレーム：瞬間的（衝突、ポンと現れる動き）
• 4-6フレーム：素早い（キビキビとした反応）
• 8-12フレーム：標準的（自然な動き）
• 16-24フレーム：慎重（重みがあり、よく考えられた動き）
• 24-48フレーム：遅い（ドラマチックで、重い動き）
• 48フレーム以上：非常に遅い（巨大なもの、水中、夢のような動き）

60fps（UI／ゲーム）の場合、同等の感覚にするには2.5倍してください。

タイミングの分類

物理的なタイミング：質量、重力、力に左右されます（客観的） 演劇的なタイミング：物語上の必要性や感情の節目に左右されます（主観的） 音楽的なタイミング：リズムとテンポに左右されます（構造的） UIのタイミング：応答性とユーザーの知覚に左右されます（機能的）

ほかの原則との関係

スローイン／スローアウトは、タイミングに質感を与えます：全体の長さと、動作内の間隔は連携して機能します。

予備動作はタイミングの感じ方に影響します：長い予備動作があると、その後の動作がより速く感じられます。

ステージングは、タイミングで階層を表現します：重要な要素は、従属する要素とは異なるタイミングで動きます。

誇張は、タイミングを誇張することを意味する場合がよくあります：ポーズを長く保ち、動作を短く圧縮します。

分野別の活用

UI／モーションデザイン

• 瞬間的（0-100ms）：ボタンのフィードバック、トグルスイッチ—知覚できる遅延なし
• 素早い（100-200ms）：マイクロインタラクション、ホバー状態—反応がよく、かつ目に見える
• 標準的（200-300ms）：ページ遷移、モーダル—快適で、理解しやすい
• 慎重（300-500ms）：複雑な遷移、オンボーディング—内容を把握する時間を確保
• 遅い（500ms以上）：ドラマチックな演出、環境アニメーション—思索を促す

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

• タイミングで個性を表現：弾むような動き＝速いタイミング。不機嫌な動き＝遅いタイミング
• タイミングで質量を表現：ゾウの歩行＝1歩あたり24フレーム以上。ネズミ＝4-6フレーム
• 感情の状態：落ち込みはタイミングを遅くし、興奮は速くします
• 年齢の表現：若者＝キビキビとした回復。高齢者＝ゆっくりと慎重な動き

モーショングラフィックス

• リズムの確立：一貫したタイミングがビートを生み出します
• タイミングでコントラストを表現：ゆっくりと盛り上げ、素早く見せます
• 音楽との同期：アニメーションを音声のテンポに合わせます

ゲームデザイン

• 応答性：入力から反応までのタイミングが「ゲームフィール」を決めます
• ヒットストップ：衝突時の一時的な停止（重みが加わります）
• ジューシーさ：フィードバックイベントにおける、素早く満足感のあるタイミング

よくある間違い

1. 均一なタイミング：すべてが同じ長さだと、単調に感じられます
2. 速すぎる：動きが見えなくなり、ぎこちなく、不快になります
3. 遅すぎる：インターフェースの反応が鈍く、応答性が低く感じられます
4. 状況を無視する：エンタープライズソフトウェアにカジュアルゲームのタイミングを使う

タイミングのコントラスト原則

タイミングは、コントラストによって意味を持ちます。速い動作が速く感じられるのは、その前の動作が遅かったからです。動きの中でポーズを保つと、ドラマチックな印象が生まれます。単調なタイミングでは、強調が失われます。

長さの階層

関係性に一貫性を持たせたタイミングシステムを作ります：

• 基本単位（例：200ms）
• 速い＝基本単位 × 0.5（100ms）
• 遅い＝基本単位 × 1.5（300ms）
• ドラマチック＝基本単位 × 2（400ms）

体系的なタイミングはまとまりを生み、ばらばらな長さは混乱を招きます。

静止

タイミングを決めるうえで最も強力な手法の一つは、動きを止めることです。ポーズを保つことで、次の効果が生まれます。

• 強調（瞬間を印象づける）
• 期待感（動作の前に意味深な間を置く）
• 視認性（観客が認識するための時間を確保する）

静止の力を決して過小評価しないでください。

実装の指針

標準的なインタラクションでは、デフォルトの時間を200〜300msに設定してください。次の要素に応じて調整します。質量（重いほど長く）、距離（遠いほど長く）、重要度（重要なほど認識する時間を長く）、感情のトーン（遊び心のある動きほどキビキビと）。何かが「しっくりこない」と感じたら、タイミングが原因であることがよくあります。他の調整をする前に、時間を50％短くした場合と50％長くした場合を試してみてください。