ゲームのアニメーション：12原則をUIに使う
遊びをつくる執筆にClaudeを使用しています。
アニメーションの12原則は、1981年にディズニーのアニメーターが体系化した動きの法則です。キャラクターを生き生き見せるための知恵として生まれましたが、ゲームのUIボタン・メニュー・通知バナーといった画面要素にも、そのまま応用できます。 「ボタンを押したときに何か動かしたい」と思っても、ただ拡大・縮小するだけでは安っぽく見えることがあります。12原則のうちどれをどの場面に使うかを知っていると、同じ工数でも動きの説得力がまったく変わります。この記事では、UI制作に特に効く原則を選んで、具体的な使い方と数値の目安を示します。
UIアニメーションで使用頻度が高い6つの原則
12原則すべてをUIに使うわけではありません。キャラクターアニメーション寄りの「フォロースルー」「オーバーラッピングアクション」なども使えますが、まずは次の6つを押さえると実用上は十分です。
スクワッシュ＆ストレッチ（Squash and Stretch）物体が変形することで質感と重さを伝える原則です。ボタンを押したときに縦をわずかに潰して横を広げる（例：縦0.9倍・横1.1倍）だけで、「押された」という物理的な感触が画面上に生まれます。変形量は5〜15%の範囲に抑えると、誇張しすぎずに済みます。
アンティシペーション（Anticipation）主な動作の前に小さな逆方向の動きを入れる原則です。画面外からスライドインするメニューなら、表示直前に2〜3px逆方向へずらしてから本方向に動かします。視聴者の目が次の動きを「予感」するため、突然現れる印象が薄れます。
イーズイン・イーズアウト（Slow In and Slow Out）動きの始まりと終わりをゆっくりにする原則です。CSSでいうeaseやease-in-outがこれにあたります。リニア（一定速度）で動かしたときより自然で、オブジェクトに重みを感じさせます。UIでは終わりをゆっくりにする（ease-out）と「着地した」感が強くなり、始まりをゆっくりにする（ease-in）と「離れた」感が出ます。
フォローイング（Follow Through）メインの動作が止まった後、一部が少し動き続ける原則です。通知バナーが画面上部に滑り込んで止まるとき、止まった直後にわずかに跳ね返る動き（オーバーシュート）を加えると、バナーに「質量」が生まれます。跳ね返り量は移動距離の5〜10%、時間は50〜80ms程度が目安です。
タイミング（Timing）フレーム数（Web開発ではミリ秒）が動きの重さや速度感を決める原則です。UIの場合、操作への応答は100〜200ms、メニューの開閉は200〜300ms、画面遷移は300〜500msが、「速すぎず・待たせすぎない」とされる一般的な目安です。これより短いと変化に気づきにくく、長いと操作が重く感じられます。
セカンダリアクション（Secondary Action）メインの動作を補う副次的な動きを加える原則です。ボタンのテキストがフェードインするとき、テキスト自体も2〜3px下から上へ小さくスライドさせると、メインのフェードを引き立てます。セカンダリはあくまで補助なので、メインより目立ってはいけません。
失敗しやすい使い方と判断基準
原則を正しく使っていても、組み合わせ方や量を間違えると逆効果になります。
全部乗せは避ける。 スクワッシュ＆ストレッチ＋アンティシペーション＋フォローイングを同一ボタンに全部入れると、一回のクリックで動きが多すぎてうるさくなります。一つのUIパーツに使う原則は、基本的に1〜2つまでに絞ります。
操作の妨げにしない。 アンティシペーションで逆方向に動かす時間が長すぎると、「ボタンを押したのに反応が遅い」と感じさせます。アンティシペーションの所要時間は50ms以内が安全です。
繰り返しトリガーに注意する。 ホバー（マウスオーバー）など、短時間に何度も発火しうるイベントにスクワッシュを入れるときは、アニメーションが完了するまで再トリガーしないようにするか、途中から再生する処理を入れます。これを怠るとアニメーションがループして止まらなくなる場合があります。
アクセシビリティを確認する。 点滅・激しい動きは前庭障害を持つユーザーに影響することがあります。OSやブラウザには「動きを減らす」設定（prefers-reduced-motion）があるので、CSSでこのメディアクエリを書いてアニメーションを抑制できるようにしておくことを検討してください。
実装で使う技術の選び方
原則の知識を持っていても、実装する技術が合っていないと表現しきれないことがあります。
CSSアニメーション・CSS Transitionは、単純なイーズイン・イーズアウト、フェード、スライド、軽いスケール変形であれば十分です。cubic-bezier()を使えばカスタムのイージングカーブも指定できるので、フォローイングの跳ね返りも再現できます。
JavaScriptのアニメーションライブラリ（GreenSock/GSAPなど）は、複数プロパティを時間軸上で細かく制御したいとき、またはスクワッシュ＆ストレッチのように複数の変形を同時に管理したいときに向いています。CSSだけで書くと管理が複雑になる動きをシンプルなコードで書けます。ライセンスや利用条件は公式サイトで最新の条件を確認してください。
Canvas・WebGLを使ったゲームでは、フレームループの中で自前の補間関数（lerp）を使うことが多いです。この場合、イーズアウトならvalue += (target - value) * 0.2のような一次遅れフィルタが手軽ですが、終点にぴったり到達しないため、閾値を決めてスナップする処理が必要です。
原則を試す最小の手順
- 対象を一つ選ぶ。 まず最も目立つUI要素（メインボタンなど）一つに絞ります。
- 「何を伝えたいか」を言葉にする。 「押された感触」「画面に着地した感」など、その動きが伝えるべき物理的な印象を一文で書きます。
- 対応する原則を一つ選ぶ。 上記の言葉に最も近い原則を選び、他は使いません。
- 数値を小さく始める。 スケールなら±5%、時間は100msから試して、段階的に調整します。
- 動きなしと比較する。 アニメーションをオフにした状態と並べて確認し、「有無でどちらが明確か」で判断します。よくなっていないと感じたら削除します。
この手順を一つのUIパーツで完成させてから次に移ると、全体のトーンが揃いやすくなります。複数のパーツで同時に試すと、動きの統一感が崩れる原因になります。
次の行動
手元のゲームまたはプロトタイプで、最もよく押されるボタン一つを選び、イーズアウト（ease-out）のスケールアニメーション（0.95→1.0、150ms）だけを加えてみてください。動きを入れる前後の印象を比べることが、原則を体感する最短経路です。HTMLとCSSで作ったゲームはアソバースにそのまま投稿・公開できるので、完成したら実際のプレイヤーの反応も確かめてみてください。
参考資料
- "The Illusion of Life: Disney Animation"（Frank Thomas・Ollie Johnston 著）
- MDN Web Docs「CSS アニメーション」
- MDN Web Docs「prefers-reduced-motion」
- Web Content Accessibility Guidelines（WCAG）― W3C
