【もーしょんでざいん】
モーションデザイン とは？
最終更新:
💡 「動き」でUIにストーリーを吹き込む演出家
動きの目的、タイミング、速さや変化の仕方を設計すること。UIやWebサイトでは、操作への反応や画面の関係を伝え、理解を助けるために使う。
📌 このページのポイント
- ボタンへの反応やページ遷移など、UI上の動きを目的に合わせて設計する
- 視線誘導・状態変化のフィードバック・操作の因果関係を伝える、といった役割がある
- 時間やイージングを調整し、待たせすぎない・気を散らさない動きにする
- 動きを減らす設定への対応や、動き以外でも意味が伝わる設計を考える
ひよこ モーションデザインって、ただアニメーションをつけるだけじゃないの？
ペンギン先生 ただ動かすだけでなく「何を伝えるために動かすか」を設計するんだ。たとえば、押したボタンが少し沈む動きは、操作を受け付けたことを伝える手がかりになるよ。
ひよこ たしかに、動きがあると「反応してくれた」ってわかるね！
ペンギン先生 ほかにも、カードが広がって詳細になる動きなら、一覧と詳細の関係を示せるね。ただし、押した反応と処理の完了は別。保存が終わったことは、完了メッセージなどでも伝えよう。
ひよこ でも動きが多すぎると逆にうるさくならない？
ペンギン先生 そのとおり。動かす距離や要素の大きさ、目的に合わせて時間を決めるよ。また、prefers-reduced-motionで利用者の希望を読み取り、不要な移動や拡大を止めるなどの対応も大切なんだ。
ひよこ 実装するにはどんなツールを使うの？
ペンギン先生 WebならCSSのtransitionやanimationで動きを作れるよ。イージングは途中の速さの変わり方のこと。出だしや終わりを調整し、操作の意味が伝わるように設計するんだ。
ひよこ パフォーマンスへの影響とかもあるのかな？
ペンギン先生 あるよ。transformやopacityはレイアウト再計算などを避けやすい一方、widthやheightの変更はレイアウトに影響する。ただしtransformなら必ず軽いわけではないので、対象の数や画面を含め、開発者ツールで確認しよう。
まとめ：ざっくりこれだけ覚えればOK！
「モーションデザイン」って出てきたら「UIに動きをつけて使いやすくする技術」と思えればだいたいOK！
📖 おまけ：英語の意味
「Motion Design」 ＝ 動きのデザイン
💬 Motionは「動き」。UIでは、何をどう動かすと状態や関係が伝わるかを設計することだよ。