dramatic-2000ms-plus

ドラマチックなアニメーション（2000ms以上）

2000msを超えると、アニメーションは映画になります。これはUIのトランジションではなく、製品に組み込まれた短編映画です。ブランドを象徴する瞬間に使いましょう。

ドラマチックなスケールで活用するディズニーの原則

映画のような演出

スクワッシュ＆ストレッチ：キャラクター全体をアニメーション化し、有機的で生き生きとした動きを生み出すために40％以上変形させます。必要に応じて物理法則を無視します。

予備動作：ドラマチックな緊張感を生み出すため、400～600msかけて盛り上げます。観客は期待を胸に待ちます。

演出：映画撮影のように、状況を見せるショット、クローズアップ、種明かしを取り入れます。状態ではなく、シーンとして考えましょう。

ストレート・アヘッド／ポーズ・トゥ・ポーズ：ハイブリッドな手法を採用し、ポーズ・トゥ・ポーズの構成にストレート・アヘッドの細部を加えます。

後続動作：動きの生態系を広げ、主要な動作の後もすべてが動き続けるようにします。世界に生命が宿ったように感じられます。

スローイン／スローアウト：感情に合わせたタイミングを使い、物語の展開に沿ったカーブにします。強調したい部分では間を取ります。

弧：すべての要素の動きを意図的に設計し、振り付けられた軌跡を描きます。

二次動作：さまざまなスケールと速度の動きを重ね、全体を演出します。

タイミング：60fpsで120フレーム以上を使い、アニメーション制作にふさわしい品質を実現します。

誇張：感情の真実を伝えるため、芸術的な裁量で物理法則を破ります。

立体感のある描画：視差、被写界深度、カメラの動きを取り入れた3D環境を構築します。

魅力：ユーザーが人に語りたくなる、記憶に残る体験を作ります。

イージングの推奨事項

/* Multi-phase narrative */
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);

/* Building drama */
animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);

/* Resolution/satisfaction */
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);

/* Complex sequences - use multiple keyframes with varying easings */

最適な使用例

• 製品ローンチの披露
• ブランドの象徴的な演出
• プレミアムなオンボーディング（ユーザーごとに1回）
• 実績やマイルストーンのお祝い
• ゲームのようなインタラクション
• データストーリーのビジュアライゼーション
• 年次報告書のアニメーション
• マーケティング用マイクロサイト

実装パターン

@keyframes epicReveal {
  0% {
    opacity: 0;
    transform: perspective(1000px) rotateX(30deg) translateY(100px) scale(0.7);
    filter: blur(20px);
  }
  25% {
    opacity: 0.8;
    filter: blur(10px);
  }
  50% {
    transform: perspective(1000px) rotateX(-5deg) translateY(-20px) scale(1.05);
    filter: blur(0);
  }
  75% {
    transform: perspective(1000px) rotateX(2deg) translateY(10px) scale(0.98);
  }
  90% {
    transform: perspective(1000px) rotateX(-1deg) translateY(-5px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) rotateX(0) translateY(0) scale(1);
  }
}

.epic-reveal {
  animation: epicReveal 3000ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

要件

• スキップ可能：常にスキップ（タップ／クリック／キー入力）できるようにします
• ユーザーごとに1回：設定を保存し、繰り返し再生しないようにします
• モーションの軽減：即時に表示する代替手段を用意します
• 読み込み戦略：事前読み込み、またはプログレッシブエンハンスメントを採用します
• パフォーマンス予算：専用の最適化工程を設けます
• サウンドデザイン：音声も検討します（ミュートオプション付き）

制作上の考慮事項

• 実装前にストーリーボードを作成します
• 再生時間について関係者の合意を得ます
• ローエンド端末でテストします
• 複雑なシーケンスでは、動画を代替手段として検討します
• 通常の開発時間の3～5倍を見込みます

重要なポイント

ドラマチックなアニメーションはミニプロダクションです。ストーリーボードの作成、反復、仕上げが必要です。その見返りとして、ブランドの差別化と記憶に残る体験が得られます。それに見合う投資をしましょう。