#018
インタラクション・アニメーション
#018あにめーしょんのじゅうにげんそく
アニメーションの12原則
別名・表記:12 Principles of AnimationDisney's 12 Principles
UIXHERO Definition
「ディズニーの魔法のレシピ」。動きをリアルに、魅力的に見せるための12の鉄則。
概要
1981年の著書『The Illusion of Life: Disney Animation』で紹介された。 UIデザインで特によく使われるのは、以下の原則である。
- Squash and Stretch（潰しと伸ばし）: オブジェクトの弾力性や重さを表現する。
- Anticipation（予備動作）: 何かが起こる前触れを示す。
- Slow In and Slow Out（スローイン・スローアウト）: イージングのこと。
※これらの原則は、キャラクターアニメーション向けに体系化されたものであり、UIでは文脈に応じて一部を抽象化して用いる。
UXでの活用
- フィードバックの強化: ボタンを押した時の「押し込んだ感（Squash）」や、スワイプした時の「慣性（Slow Out）」は、操作の手触り（Hapticsに近い感覚）を視覚的に提供する。
- 生命感: 無機質なインターフェースに、生き物のような温かみや愛嬌を与えることができる。
💡 使いどころ
UIアニメーションをより洗練させたい時。単なる移動や変化ではなく、感情や重み、質感を表現したい時。
⚠️ 注意点・誤用
全てをUIに適用すると、過剰でコミカルになりすぎる（例：誇張しすぎたSquash and Stretch）。UIはあくまで「道具」なので、使いやすさを損なわない範囲で取り入れる。
具体例
- Squash and Stretch（潰しと伸ばし）：ボタンを押した時に少し凹む表現。
- Anticipation（予備動作）：大きなアクションの前に、少し逆に動く（溜めを作る）。
- Follow Through and Overlapping Action（追随と及ぶ動作）：リストをスクロールして止まった時、中身が少し遅れて止まる。
出典・参考文献:
- Thomas, F., & Johnston, O. (1981). The Illusion of Life: Disney Animation. Disney Editions.
- Norman, D. A. (2013). The design of everyday things (Revised and expanded edition). Basic Books.
- Google. (2014). Material Design Guidelines: Motion. Google Design.
関連する解説記事
関連する記事詳細が見つかりませんでした。