【もーしょんでざいん】
モーションデザイン とは？
公開:
💡 「動き」でUIにストーリーを吹き込む演出家
📌 このページのポイント
- ボタンのホバーやページ遷移など、UI上の動きを設計する分野
- 視線誘導・状態変化のフィードバック・操作の因果関係を伝える3つの役割がある
- CSSアニメーション、Lottie、GSAPなどの技術で実装される
- Googleの「Material Motion」やAppleの「Human Interface Guidelines」が指針として有名
ひよこ モーションデザインって、ただアニメーションをつけるだけじゃないの？
ペンギン先生 いい質問だね。ただ動かすだけじゃなくて「なぜ動かすのか」を設計するのがモーションデザインだよ。たとえばボタンを押したときにちょっと沈む動きがあると、押せたことが直感的にわかるでしょ？
ひよこ おもしろい！'たしかに、動きがあると「反応してくれた」って安心するかも！'
ペンギン先生 そうそう。あとはページの切り替えで横にスライドすれば「次のページに進んだ」とわかるし、上からふわっと出てくれば「新しい情報が追加された」と伝わる。動きが意味を持つんだよ
ひよこ でも動きが多すぎると逆にうるさくならない？
ペンギン先生 ひよこ 実装するにはどんなツールを使うの？
ペンギン先生 CSSアニメーションで簡単なものはできるし、凝ったものならGSAPやFramer Motionが人気だね。デザイナーがAfter Effectsで作ったアニメをLottieでWeb上に再現する手法もよく使われてるよ
ひよこ パフォーマンスへの影響とかもあるのかな？
ペンギン先生 transformやopacityの変更はGPUで処理されるから軽いけど、widthやheightを動かすとレイアウト再計算が走って重くなる。だから「何をアニメーションさせるか」の選び方が実はパフォーマンスの鍵なんだよ
まとめ：ざっくりこれだけ覚えればOK！
「モーションデザイン」って出てきたら「UIに動きをつけて使いやすくする技術」と思えればだいたいOK！
📖 おまけ：英語の意味
「Motion Design」 ＝ 動きのデザイン
💬 映像業界の「モーショングラフィックス」がルーツで、それがUIデザインの世界にも広がったんだよ