excitement-energy

高揚感とエネルギーのあるアニメーション

活気と高揚感を生み出し、ダイナミックでインパクトの強い体験を作るアニメーションを作成します。

感情的な目標

高揚感は、ダイナミックで徐々に激しさを増す動きによって生まれます。エネルギーは、勢いを生み出してユーザーの関心を維持する、速く変化に富んだアニメーションから生まれます。

高揚感を生み出すディズニーの原則

伸縮と圧縮

ダイナミックでインパクトのある動き（20～35％）。エネルギッシュに圧縮し、伸長させます。オブジェクトが弾むように反応します。

予備動作

緊張感を素早く高めます（100～150ms）。巻き上げられたバネのように、予備動作そのものが高揚感を生み出します。

演出

ダイナミックな構図にします。対角線や非対称のレイアウトを使い、静止した印象をなくして、あらゆる配置にエネルギーを込めます。

ストレート・アヘッド・アクション

パーティクルエフェクト、爆発、ダイナミックな背景に活用します。エネルギッシュで自然発生的な動きを生み出します。

フォロースルーとオーバーラッピング・アクション

弾むような、エネルギッシュなオーバーシュートを取り入れます。要素はただ止まるのではなく、勢いよく跳ね返ります。

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

大胆な加速カーブを使います。素早く動き始め、きびきびと止めます。インパクトを出すには cubic-bezier(0.0, 0, 0.2, 1) を使います。

アーク

ドラマチックで大きく弧を描く軌道にします。高い軌道とダイナミックなカーブで、視線を集める動きを作ります。

セカンダリー・アクション

パーティクル、軌跡、光彩など、エネルギーを伝える効果をふんだんに取り入れます。高揚感のある瞬間に、周囲の環境も反応します。

タイミング

素早く、歯切れよくします（100～300ms）。シーケンスもテンポよく進めます。タイミングに変化をつけることで、リズムとエネルギーが生まれます。

誇張

大きく誇張します（25～40％）。動きを強調して、インパクトを生み出します。エネルギーを伝えるには、控えめな表現を超える必要があります。

立体的な描画

ダイナミックなポーズや形状にし、動きを強調します。速さや力を伝える形を使います。

魅力

大胆でコントラストの強いデザインにします。彩度の高い色やダイナミックな角度を使い、視覚的なエネルギーを生み出します。

タイミングの推奨事項

要素	期間	イージング
素早い動き	100-150ms	ease-out
バウンス	300-400ms	spring
表示	200-300ms	ease-out
シーケンスのステップ	50-100ms	ease-out

CSS イージング

--energy-snap: cubic-bezier(0.0, 0, 0.2, 1);
--energy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--energy-punch: cubic-bezier(0.22, 1, 0.36, 1);

エネルギーの高いパターン

@keyframes energy-burst {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes energy-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes energy-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

エネルギーの高め方

1. 予備動作で期待感を高める
2. メインアクションを素早く、力強く見せる
3. エネルギッシュなフォロースルーを加える
4. セカンダリーエフェクトを連続して展開する
5. 次のビートの前に短い間を置く

使用する場面

• スポーツやフィットネスのアプリ
• 音楽やエンターテインメント
• ゲームのインターフェース
• イベントのプロモーション
• 製品のローンチ
• 販売やプロモーション
• ストリーミングプラットフォーム
• アクション指向のアプリ