deliberate-1200-2000ms

意図的なアニメーション（1200-2000ms）

1200-2000msでは、インターフェースではなく、体験を作り出します。この長さは、アニメーション自体がコンテンツとなる、本格的なストーリーテリングの瞬間に適しています。

意図的な速度で表現するディズニーの原則

物語を余すところなく表現する

スクワッシュ＆ストレッチ：キャラクターを特徴づけます。30-40%の変形によって個性が生まれます。オブジェクトがキャラクターになります。

予備動作：ドラマチックな準備を十分に行います。300-400msの予備動作で緊張感と期待感を生み出します。

演出：シーンを演出します。映画撮影をイメージしてください。まず全体を見せ、次に細部へと進みます。物語の流れを明確にします。

ストレート・アヘッド／ポーズ・トゥ・ポーズ：ポーズ・トゥ・ポーズは必須です。6-10個のキーポーズで物語の展開を形作ります。

あと追いの動き：動きを長く収束させます。メインの動きが終わった後も、300-500msの二次的な動きを加えます。

スローイン／スローアウト：物語のペースを作ります。イージングカーブで感情を表現します。急な始まりは緊急性を、緩やかな終わりは解決を示します。

弧を描く動き：軌道を緻密に設計します。動きの軌道はデフォルト任せにせず、各要素の軌道が全体の構成に貢献するよう設計します。

二次的な動き：エコシステム全体を作り上げます。メイン、二次、三次、環境の動きをすべて連動させます。

タイミング：60fpsで72-120フレームです。アニメーション品質のフレーム数を確保します。

誇張：感情を増幅します。単なる動きではなく、感情が伝わるように誇張します。

立体感のある描画：立体的なストーリーテリングです。視差、奥行き、遠近感の変化によって空間を作り出します。

魅力：深い感情的な関わりを生みます。こうしたアニメーションを通じて、ユーザーに何かを感じてもらいます。

イージングの推奨事項

/* Narrative arc - beginning, middle, end */
animation-timing-function: cubic-bezier(0.34, 0, 0.14, 1);

/* Graceful, considered motion */
transition: all 1500ms cubic-bezier(0.16, 1, 0.3, 1);

/* Building momentum */
transition: all 1800ms cubic-bezier(0.65, 0, 0.35, 1);

/* Elastic storytelling */
transition: transform 1600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);

最適な用途

• アプリのスプラッシュ／起動シーケンス
• ブランドを印象づける演出
• チュートリアルのストーリー展開
• 実績達成のお祝い
• マイルストーンのアニメーション
• 感情状態の変化（エラーから成功へ）
• ストーリー主導のオンボーディング
• 機能の発表

実装パターン

@keyframes appLaunch {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(50px);
    filter: blur(10px);
  }
  30% {
    opacity: 1;
    filter: blur(5px);
  }
  60% {
    transform: scale(1.02) translateY(-10px);
    filter: blur(0);
  }
  80% {
    transform: scale(0.99) translateY(5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.app-launch {
  animation: appLaunch 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

重要な考慮事項

• ユーザーが必ずスキップ／閉じることができるようにします
• 重要な操作を妨げてはいけません
• 再訪時には表示しないようにします（再訪ユーザーを検出します）
• 単なる装飾ではなく、真の価値を加える必要があります
• 動きに敏感なユーザーへの配慮をテストします（動きを減らす設定を優先します）

重要なポイント

意図的なアニメーションは、ブランドへの投資です。何が起きているかを示すだけでなく、ユーザーの心を動かします。デザイン、反復、テストのための予算を確保してください。こうした瞬間が、品質に対する印象を左右します。