#017
心理学・認知バイアス
#017あにめーしょん
アニメーション
別名・表記:AnimationUI Animation
UIXHERO Definition
「動き」。ユーザーの操作に対するフィードバックや、システムの状態変化を伝えるための視覚効果。
概要
ディズニーの「アニメーションの12原則」などが有名だが、UIアニメーションにおいても物理法則（重力、慣性など）を意識することで、自然で心地よい動きを作ることができる。 Googleのマテリアルデザインでは、アニメーションに「意味」を持たせること（Informative, Focused, Expressive）が推奨されている。
UXでの活用
- 変化の認識: 新しい要素がどこから現れたのか（右からスライドインしたのか、下からポップアップしたのか）を示すことで、ユーザーは空間的な位置関係を理解しやすくなる。
- アテンション（注意喚起）: 動くものは本能的に目で追ってしまう性質を利用し、ユーザーに見せたい重要な情報へ視線を誘導する。
💡 使いどころ
ユーザーの視線誘導を行いたい時、操作の結果をわかりやすく伝えたい時、待ち時間のストレスを軽減したい時。
⚠️ 注意点・誤用
「動けばいい」わけではない。意味のない過剰なアニメーションは、ユーザーの邪魔になる（認知的負荷）。また、動きが遅すぎると操作の妨げになる。
具体例
- 画面遷移時のフェードイン・フェードアウト
- ローディングスピナー（読み込み中の回転）
- トグルスイッチのON/OFFの動き
出典・参考文献:
- Norman, D. A. (2013). The design of everyday things (Revised and expanded edition). Basic Books.
- Saffer, D. (2013). Microinteractions: Designing with Details. O’Reilly Media.
- Google. (2014). Material Design Guidelines: Motion. Google.
- Thomas, F., & Johnston, O. (1981). The Illusion of Life: Disney Animation. Disney Editions.