universal-emotion

汎用感情アニメーションフレームワーク

ディズニーの12の原則を体系的に分析し、あらゆる感情の目標に適用します。

感情の目標

どのような感情も、アニメーションの原則を意図的に適用することで表現できます。このフレームワークは、感情的な意図を具体的な動きのパラメーターに変換するのに役立ちます。

感情のマッピングフレームワーク

ステップ1：感情を定義する

次の尺度を使って目標を特定します。

• エネルギー：低 ←→ 高
• 感情価：ネガティブ ←→ ポジティブ
• 覚醒度：落ち着いた ←→ 興奮した
• 支配性：従属的 ←→ 力強い

ステップ2：原則を感情に対応付ける

原則	低エネルギー	高エネルギー
スクワッシュ＆ストレッチ	0-10%	20-40%
予備動作	50-100ms	150-300ms
タイミング	400-800ms	100-250ms
誇張	0-15%	25-50%
後追いの動き	長めに静止	すばやく弾む

原則	シリアス	遊び心のある
アーク	直線的／線形	曲線的／弾む
二次動作	最小限	豊富
ストレート・アヘッド	避ける	取り入れる
魅力	すっきり／幾何学的	丸みのある／有機的

ステップ3：イージングを選ぶ

感情の種類	イージングのスタイル	例
落ち着き	対称的なイージング	ease-in-out
自信	強いイーズアウト	cubic-bezier(0,0,0.2,1)
遊び心	オーバーシュート	cubic-bezier(0.34,1.56,0.64,1)
緊急性	鋭いイーズアウト	cubic-bezier(0.0,0,0.2,1)
優雅さ	長めのイージング	cubic-bezier(0.4,0,0.6,1)

感情別クイックリファレンス

ポジティブな感情

• 喜び：短いタイミング、高いスクワッシュ／ストレッチ、弾むイージング
• 信頼：一貫したタイミング、変形は最小限、滑らかなイージング
• 落ち着き：長いタイミング、控えめな動き、対称的なイージング
• 興奮：短いタイミング、高いエネルギー、ダイナミックなイージング

機能的な感情

• 緊急性：非常に短いタイミング、直接的な軌道、注意を引く動き
• プロフェッショナル：中程度のタイミング、装飾は最小限、標準的なイージング
• 親しみやすさ：中程度のタイミング、柔らかな変形、穏やかなイージング

プレミアムな感情

• 優雅さ：長めのタイミング、変形なし、洗練されたイージング
• 力強さ：意図的なタイミング、衝撃を強調、強いイージング

CSS 変数テンプレート

:root {
  /* Adjust based on target emotion */
  --emotion-duration: 300ms;
  --emotion-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --emotion-squash: 1;
  --emotion-overshoot: 0;
}

判断ツリー

1. 感情のエネルギーは高いですか、それとも低いですか？
2. 感情はポジティブですか、ネガティブですか、それとも中立ですか？
3. ユーザーに主導権があると感じてもらいますか、それとも導かれていると感じてもらいますか？
4. これは一瞬の出来事ですか、それとも状態ですか？
5. ブランドの個性はどのようなものですか？

感情の組み合わせ

実際の体験では、複数の感情が組み合わさります。原則を重ね合わせます。

• 主な感情：影響度70%
• 副次的な感情：影響度30%
• それに応じてタイミング／イージングを調整します

使用する場面

• これまでにない感情面の要件
• ブランド固有の解釈
• 複雑な感情の変化
• 感情面での効果を検証するA/Bテスト
• 異文化への配慮
• アクセシビリティへの対応