timing-calibration

タイミングの調整

ディズニーのタイミングの原則を活用して、アニメーションの速度を適切に設定します。

問題の兆候

• 「遅すぎる」または「速すぎる」というフィードバックがある
• アニメーションに一貫性がない
• 似た操作でも速度が異なる
• ユーザーがアニメーションの終了を待つ
• 動きが機械的、または不自然に感じられる

原則ごとの診断

タイミング

問題：操作の種類に合わない長さになっています
対処法：マイクロインタラクション：100～150ms。トランジション：200～400ms。複雑な表示：400～600ms。UI では1秒を超えないようにします。

スローインとスローアウト

問題：一定速度のタイミングは機械的に感じられます
対処法：イージングを使います。表示時はイーズアウト（素早く始まり、ゆっくりと着地）、終了時はイーズイン（ゆっくり始まり、素早く終わる）を使います。

円弧

問題：直線的な動きの速度が適切でありません
対処法：曲線の動きには、直線の動きより多くの時間が必要です。円弧を描く動きでは、時間を長くします。

ステージング

問題：複数の速度が競合しています
対処法：似た要素は似た速度でアニメーションさせます。タイミングに調和を持たせます。

セカンダリアクション

問題：セカンダリアニメーションの相対的な速度が適切でありません
対処法：セカンダリアクションは、プライマリアクションより少し遅くします。自然な階層が生まれます。

タイミングの目安

カテゴリ	長さ	用途
瞬時	0～100ms	ホバー状態、マイクロフィードバック
高速	100～200ms	ボタン、切り替え、小さな要素
標準	200～300ms	カード、モーダル、ほとんどのトランジション
低速	300～400ms	ページトランジション、大きな要素
じっくり	400～600ms	複雑な表示、オンボーディング

すぐにできる調整

1. まずは200msから始める - そこから調整します
2. 要素が大きいほど、時間を長くする - サイズは体感速度に影響します
3. 移動距離もタイミングに影響する - 移動距離が長いほど、時間も長くします
4. タイミングの目安を作る - 一貫した値を3～4種類使います
5. 速度を2倍にしてテストする - 速くしても問題なければ、その速度を使います

トラブルシューティングのチェックリスト

• ほとんどの UI で、長さは400ms未満ですか？
• 似た要素のタイミングは似ていますか？
• イージングを適用していますか（一定速度ではありませんか）？
• 大きな動きほど、時間を長くしていますか？
• テスト：速度を30%上げても、内容を読み取れますか？
• テスト：速度を30%下げると、もたついて感じられますか？
• ユーザーはアニメーションの終了を待っていますか？
• プラットフォームの慣例（iOS/Android/Web）と比較しましたか？

コードパターン

:root {
  /* Timing scale */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-deliberate: 500ms;

  /* Easing */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Size-aware timing */
.small-element { transition-duration: var(--duration-fast); }
.medium-element { transition-duration: var(--duration-normal); }
.large-element { transition-duration: var(--duration-slow); }