playfulness-fun

遊び心のある楽しいアニメーション

人を楽しませ、驚かせ、操作を心から楽しいものにするアニメーションを作成します。

感情的な目標

遊び心のある動きは、予想外でユーモラスな動きによって操作を促します。個性があり、表情豊かに反応し、ユーザーを笑顔にするアニメーションが楽しさを生み出します。

遊び心のためのディズニーの原則

つぶしと伸ばし

大きく誇張します（25-40%）。ゴムのような、カートゥーン風の物理法則です。オブジェクトに生き生きとした反応を感じさせます。ビーチボールのように弾ませます。

予備動作

大げさな溜めの動きを加えます（150-250ms）。コミカルなタイミング――大きな見せ場には大きな前振りを入れます。要素は動き出す前に「考える」ように見せます。

演出

劇的に見せます。状況説明とオチを明確にします。遊び心のある瞬間に余裕を持たせ、気づいてもらえるようにします。

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

自発性を大切にします。揺れる軌道や予測できない跳ね方を取り入れます。キャラクターや要素に自分の意思があるように見せます。

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

大きく弾むフォロースルーを加えます。行き過ぎ、揺れ、落ち着きの動きを取り入れます。カートゥーンのキャラクターが滑りながら止まるような動きです。

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

行き過ぎを伴う非対称な動きにします。素早く動き出し、弾むように着地します。弾力のある効果には cubic-bezier(0.68, -0.55, 0.265, 1.55) を使用します。

アーク

大げさで弾む曲線を使います。ジャンプには高い弧を、個性を出すにはくねくねした軌道を使います。直線的な動きは避けます。

二次アクション

たっぷり加えます。揺れ、きらめき、表情などを取り入れます。要素同士が反応し合うようにします。インターフェース全体が生き生きと感じられるようにします。

タイミング

変化をつけ、表情豊かにします（100-500ms）。素早い動きや、ゆっくりとした予備動作を取り入れます。間や一時停止を使い、コミカルなタイミングを演出します。

誇張

大きく誇張します（30-50%）。動きをカートゥーンのようなレベルまで押し上げます。感情的には真実味のある、現実にはありえない物理法則を使います。

立体感のある描画

変形させても魅力を保ちます。伸びた要素もかわいらしく見えるようにします。効果を出すためにボリュームを変化させます。

魅力

丸く親しみやすい形、明るく鮮やかな色、大きな目、表情豊かな形を使います。あらゆる要素に個性を持たせます。

タイミングの推奨値

要素	継続時間	イージング
バウンス	400-600ms	spring(1, 60, 8)
揺れ	300-400ms	ease-in-out
ポップ	150-250ms	ease-out-back
つぶし	100-150ms	ease-out

CSS イージング

--play-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--play-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
--play-wobble: cubic-bezier(0.45, 0.05, 0.55, 0.95);

楽しいアニメーション

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes boing {
  0% { transform: scale(1); }
  30% { transform: scale(1.25, 0.75); }
  50% { transform: scale(0.85, 1.15); }
  70% { transform: scale(1.05, 0.95); }
  100% { transform: scale(1); }
}

使用する場面

• ゲームやゲーミフィケーション
• 子ども向けインターフェース
• ソーシャルメディアのリアクション
• オンボーディングチュートリアル
• 空の状態
• イースターエッグ
• カジュアルアプリ
• エンターテインメントプラットフォーム