フレームワーク活用ガイドひとことで言うと#
UIのアニメーションに「意味」を持たせるための設計ルール。モーションは装飾ではなく、「どこから来たのか」「何が変わったのか」「次に何が起きるのか」をユーザーに伝えるコミュニケーション手段。正しく使えば体験が滑らかになり、間違えると鬱陶しいだけになる。
押さえておきたい用語#
- イージング（Easing）
- アニメーションの加減速カーブ。ease-outは減速、ease-inは加速、リニアは等速。
- デュレーション（Duration）
- アニメーションの再生時間。UIでは100〜500msの範囲が一般的。
- マイクロインタラクション
- ボタンのリップルやトグルの切り替えなど、小さな操作に対する視覚的な反応。
- prefers-reduced-motion
- OSレベルでアニメーション軽減を希望するユーザー設定を検出するCSSメディアクエリ。
モーションデザイン原則の全体像#
こんな悩みに効く#
- アニメーションを入れたいが、何に、どれくらい使うべきかわからない
- 画面遷移がいきなり切り替わって、ユーザーが「今どこにいるか」を見失う
- ローディング中にユーザーが離脱してしまう
基本の使い方#
アニメーションには4つの目的がある。目的のないモーションは入れない。
- フィードバック — ボタンを押したら反応する（タップのリップル効果）
- 方向性 — 画面がどこから来てどこに行くかを示す（スライド遷移）
- 注目 — 重要な変化にユーザーの目を誘導する（バッジのバウンス）
- 待機 — 処理中であることを伝える（スケルトンスクリーン）
すべてのモーションに「なぜ必要か」を説明できるようにする。
モーションの「速さ」と「動き方」を統一する。
デュレーション（時間）の目安:
- マイクロインタラクション: 100〜200ms
- 画面内の変化: 200〜300ms
- 画面遷移: 300〜500ms
- 300ms以上 → ユーザーが「遅い」と感じ始める境界
イージング（動き方）:
- ease-out: 要素が画面に入るとき（最初速く、徐々に減速）
- ease-in: 要素が画面から出るとき（徐々に加速）
- ease-in-out: 画面内で位置が変わるとき
リニア（等速）は機械的に見えるので、原則として使わない。
モーションがすべてのユーザーにとって快適であることを確認する。
prefers-reduced-motionメディアクエリに対応し、アニメーションをOFFにできるようにする- 点滅する要素は1秒間に3回未満にする（てんかん発作のリスク）
- 大きな画面移動はアニメーションなしでも理解できる設計にする
- 自動再生のアニメーションには停止ボタンを設ける
モーションはあくまで「体験の補助」。モーションなしでも操作できることが前提。
具体例#
Before（モーションなし）:
- 「カートに追加」ボタンを押す → 画面上部のカートアイコンの数字が1増える
- ユーザーの60%が「カートに入ったかわからない」と回答
After（モーション追加）:
- ボタンタップ → リップルエフェクト（100ms / フィードバック）
- 商品画像のサムネイルがカートアイコンに向かって飛ぶ（300ms / 方向性）
- カートアイコンがバウンスして数字が更新される（200ms / 注目）
- 「カートに追加しました」のスナックバーが下からスライドイン（200ms）
結果: 「カートに入ったかわからない」の回答が60%から5%に減少（95%削減）。アニメーション合計800msだが、体感では一瞬で完了。
Before: データ読み込みに2.5秒。その間ローディングスピナーが回転するだけ。ユーザーの38%がページを離脱。
After: スケルトンスクリーンを導入。
- ページ構造のグレーのプレースホルダーを即座に表示（0ms）
- データが読み込まれた部分から順次フェードインで実データに切り替え（200ms / ease-out）
- 全体の読み込み時間は2.5秒のまま変更なし
結果: ページ離脱率が38%から14%に改善。実際の速度は変わらないが、「構造が先に見える」ことで体感待ち時間が短くなった。
Before: タスク一覧→詳細画面の遷移がカットイン（瞬間切り替え）。ユーザーの25%が「戻るボタンを押した後、どこに戻るかわからない」と回答。
After: 方向性を示すモーションを追加。
- タスクカードタップ → カードが画面いっぱいに拡大して詳細画面に遷移（350ms / ease-in-out）
- 戻る操作 → 詳細画面がカードサイズに縮小して一覧に戻る（300ms / ease-in-out）
- 一覧のスクロール位置はタップした位置を維持
結果: 「どこに戻るかわからない」が25%から3%に減少。一覧→詳細→一覧の回遊率が1.6倍に向上。
やりがちな失敗パターン#
- すべてにアニメーションをつける — ページのあらゆる要素がフェードイン・スライドインすると、ユーザーは目が疲れてうんざりする。「目的のないモーションは入れない」を徹底する
- デュレーションが長すぎる — 500msを超えるアニメーションは「待たされている」感覚になる。特に頻繁に行う操作（タブ切り替え、リスト展開など）は200ms以内に
prefers-reduced-motionを無視する — 前庭障害やモーション酔いを起こすユーザーがいる。OSの設定でモーション軽減を選んでいる場合は、アニメーションを無効化 or 最小限にする- 画面ごとにモーションの速度・イージングがバラバラ — 統一感のないモーションはプロダクト全体の品質感を下げる。モーショントークンとしてデザインシステムに定義する
まとめ#
モーションデザインは 「UIに動きをつける」 ことではなく、「動きで情報を伝える」こと。フィードバック・方向性・注目・待機の4つ の目的に基づいて設計し、タイミングとイージングを統一する。そしてアクセシビリティを忘れずに。目的のあるモーションは体験を滑らかにし、目的のないモーションはノイズになる。