joy-delight

喜びと楽しさを生むアニメーション

喜びや心地よい驚き、心に残る楽しさをもたらすアニメーションを作成します。

感情的な目標

喜びは、思いがけない楽しさ、遊び心のある動き、期待を上回る瞬間から生まれます。生き生きとして反応がよく、本当に楽しいと感じられるアニメーションが、喜びをもたらします。

喜びを生むディズニーの原則

つぶしと伸ばし

弾むような、弾力のある動きを誇張します。衝撃を受けて30～40％つぶれるオブジェクトは、生き生きとして遊び心があるように感じられます。成功状態、報酬、お祝いに使用します。

予備動作

表示の前に期待感を高めます。ポップインの前に少し引く動き（100～150ms）を入れると、満足感のある演出になります。通知や実績に最適です。

演出

喜ばしい瞬間に注目を集めます。視覚的な階層を明確にして、楽しい要素に十分な注目が集まるようにします。お祝いのアニメーション中は、周囲を暗くします。

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

紙吹雪、パーティクル、お祝いのエフェクトに、自発的で自然な動きを作ります。ランダムな軌道は、自然でわくわくする印象を与えます。

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

要素を行き過ぎさせてから、弾むような二次動作で落ち着かせます。髪、リボン、装飾要素は、主な動作の後も動き続けるようにします。

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

左右非対称のイージングを使い、素早く動き始めて、ゆっくりと心地よく着地させます。cubic-bezier(0.34, 1.56, 0.64, 1) は、遊び心のあるオーバーシュートを生み出します。

アーク

弾むような曲線の軌道は、直線的な軌道よりも喜びを感じさせます。お祝いの際、要素は放物線を描いて移動するようにします。

二次動作

主なアニメーションに、きらめき、パーティクル、揺れを加えます。小さなハートを放つ「いいね」のハートは、喜びを増幅させます。

タイミング

素早く切れのあるタイミング（150～250ms）は、エネルギッシュな印象を与えます。短い動きの合間にわずかな間を入れると、リズムが生まれます。成功アニメーションは200～400msにします。

誇張

プロポーションや動きを、現実的な範囲より20～30％大きくします。大きく弾む動き、伸びた笑顔、誇張された反応を取り入れます。

立体感のある描画

伸縮する動きの間も、ボリュームを維持します。つぶれた要素は質量感を保つために横方向へ広がるようにします。これにより、物理的な実在感が生まれます。

魅力

丸みのある形、明るい色、滑らかな曲線を使います。タイミングや位置に左右非対称な要素を加えると、個性と魅力が生まれます。

タイミングの推奨値

要素	継続時間	イージング
ポップイン	200-300ms	ease-out-back
バウンス	300-500ms	spring(1, 80, 10)
紙吹雪	800-1200ms	ease-out
お祝い	400-600ms	ease-out-elastic

CSS イージング

--joy-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--joy-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--joy-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

使用する場面

• 成功の確認や完了
• 実績の解除や報酬
• オンボーディングのお祝い
• イースターエッグやサプライズ
• ポジティブなフィードバック状態
• ウェルカムアニメーション