orchestrated-sequences

オーケストレーションされたシーケンス

オーケストレーションされたシーケンスでは、複数の要素を時間に沿って連携させます。オーケストラを指揮する指揮者のように、各要素がいつ登場し、どのように動き、要素同士がどのように関係するかを制御します。

オーケストレーションにおけるディズニーの原則

アンサンブルの連携

潰しと伸ばし：統一感のあるスタイルにします。すべての要素で弾力性を一貫させましょう。弾むような動きと硬い動きを混ぜると、まとまりがなくなります。

予備動作：準備動作をずらします。先導する要素が最初に予備動作を行い、ほかの要素が順番に続きます。

ステージング：明確な優先順位を付けます。メインの動きを先導させ、サブの要素は競合せずに支えます。

ストレートアヘッド／ポーズ・トゥ・ポーズ：ポーズ・トゥ・ポーズが必須です。振り付けには正確なタイミング制御が必要です。

後追いの動き：連鎖的に収束させます。要素は順番に着地し、後追いの動きを重ねます。

スローイン／スローアウト：共通のイージングファミリーを使います。同じカーブのバリエーションを使うことで、まとまりが生まれます。

弧を描く動き：軌道を連携させます。要素同士がランダムに動くのではなく、互いに補完し合う方向へ動くようにします。

二次動作：意図を持って支えます。すべての要素に構成上の役割を持たせます。

タイミング：オーケストレーションの要です。遅延をずらし、長さに変化を付け、テンポを変えます。

誇張：強調の度合いを調整します。メインの要素はより誇張し、サポート要素は控えめにします。

立体的な描画：立体感のルールを一貫させます。遠近感、奥行き、スケールの関係を統一します。

魅力：パフォーマンスに統一感を持たせます。シーケンス全体が、ひとつの構成された瞬間として感じられるようにします。

タイミングの手法

/* Linear stagger - equal delays */
.item:nth-child(n) {
  transition-delay: calc(var(--index) * 50ms);
}

/* Accelerating stagger - getting faster */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 80ms; }
.item:nth-child(3) { transition-delay: 140ms; }
.item:nth-child(4) { transition-delay: 180ms; }

/* Decelerating stagger - slowing down */
.item:nth-child(1) { transition-delay: 0ms; }
.item:nth-child(2) { transition-delay: 40ms; }
.item:nth-child(3) { transition-delay: 100ms; }
.item:nth-child(4) { transition-delay: 180ms; }

イージングの推奨事項

/* Cohesive family - same curve, different durations */
.primary { transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.secondary { transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1); }
.tertiary { transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Sequence curve - smooth start, confident end */
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

最適なユースケース

• ページ読み込み時のシーケンス
• ダッシュボードの表示
• カードグリッドのアニメーション
• ナビゲーションメニューを開く動き
• フィーチャーセクションの表示
• データビジュアライゼーションの構築
• オンボーディングのステップシーケンス
• リスト項目の表示アニメーション

実装パターン

/* Staggered reveal system */
.orchestrated-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 300ms ease-out,
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.orchestrated-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Apply delays via CSS custom properties or nth-child */
.orchestrated-item:nth-child(1) { transition-delay: 0ms; }
.orchestrated-item:nth-child(2) { transition-delay: 75ms; }
.orchestrated-item:nth-child(3) { transition-delay: 150ms; }
.orchestrated-item:nth-child(4) { transition-delay: 225ms; }

// JS orchestration for complex sequences
const sequence = [
  { el: '.hero', delay: 0, duration: 500 },
  { el: '.title', delay: 100, duration: 400 },
  { el: '.subtitle', delay: 200, duration: 350 },
  { el: '.cta', delay: 350, duration: 400 },
];

重要なポイント

オーケストレーションとは、時間の中での構成です。ビジュアルデザインが空間の中で要素を配置するように、アニメーションのオーケストレーションでは時間の中で動きを配置します。目指すのは、個々のアニメーションの寄せ集めではなく、ひとつの一貫したパフォーマンスです。