#292
インタラクション・アニメーション
#292もーしょんでざいん
モーションデザイン
別名・表記:Motion DesignMotion Graphics
UIXHERO Definition
「動きの設計」。どんなアニメーションを、いつ、なぜ使うかを論理的に決めること。
概要
UXデザインの一部として定着しつつある領域。 静的なデザインカンプ（止め絵）だけでは表現できない「時間的な変化」や「インタラクションの質感」を定義する。 モーションデザイナーという専門職も増えている。
UXでの活用
- 振る舞いの学習: 要素がどのように動くか（物理挙動）を一貫させることで、ユーザーは「このアプリはこう動く」というルールを学習し、予測可能になる。
- ブランド人格の表現: 動きのキビキビ感（Snappy）や、柔らかさ（Bouncy）によって、「信頼できる」「楽しい」「未来的」といったブランドの性格を伝えることができる。
💡 使いどころ
静的な画面だけでは伝えきれない情報（状態遷移、階層構造など）を補完したい時。ブランドの世界観を動きで表現したい時。
⚠️ 注意点・誤用
「派手さ」よりも「機能性」を優先すべき。ユーザーが求めているのは、素早く目的を達成することであり、映画を見ることではない。アクセシビリティ（視差効果で酔う人のための減弱設定など）への配慮も必要。
具体例
- アプリ起動時のロゴアニメーション
- リスト項目を削除した時に、その項目が縮んで消え、下の項目が詰められる動き
出典・参考文献:
- Norman, D. A. (2013). The design of everyday things (Revised and expanded edition). Basic Books.
- Dan Saffer. (2013). Microinteractions: Designing with Details. O’Reilly Media.
- Google. (2023). Material Design – Motion. Google Design.
- Apple Inc. (2024). Human Interface Guidelines – Motion. Apple Developer Documentation.
関連する解説記事
関連する記事詳細が見つかりませんでした。