フレームワーク活用ガイド
押さえておきたい用語
- イージング: アニメーションの加減速パターン。ease-in-out（ゆっくり始まりゆっくり終わる）が自然で最も使われる
- 持続時間（Duration）: アニメーションの長さ。UIでは100〜500msが推奨。300msが標準的
- フォーカス誘導: アニメーションで視線を特定の要素に導く手法
- 空間的連続性: 画面遷移で要素が「どこから来てどこに行くか」を示し、ユーザーの空間認識を保つ技術
1
モーションの目的を定義
フィードバック・案内・誘導・楽しさのどれかを明確に → イージングの選定
こんな悩みに効く#
- 「画面遷移が唐突でユーザーが空間的な位置を見失う」
- 「操作のフィードバックが不足して不安を感じさせている」
- 「アニメーションを入れたいが、どこにどう使えばいいか分からない」
使い方#
モーションの役割を明確にする
アニメーションを追加する前に「このモーションは何のためか」を定義する。操作のフィードバック（即時反応）、空間の案内（遷移の方向）、注意の誘導（新着通知）、楽しさ（達成の祝福）の4つから選ぶ。目的のないアニメーションは邪魔になる。
イージングを適切に選ぶ
直線的な動き（linear）は機械的で不自然だ。操作のフィードバックにはease-out（素早く始まり緩やかに終わる）、画面遷移にはease-in-out（緩やかに始まり緩やかに終わる）が自然な印象を与える。
持続時間を設定する
速すぎると認識できず、遅すぎると待たされる。フィードバック系は100〜200ms、遷移系は200〜400ms、注意誘導系は300〜500msが目安だ。500msを超えるアニメーションはユーザーの操作速度を妨げる。
アクセシビリティへの配慮を忘れない
前庭障害（めまい等）のあるユーザーのために、
prefers-reduced-motionメディアクエリに対応し、モーションを無効化できるようにする。重要な情報はアニメーションに頼らず、静的にも伝わる設計にする。具体例#
メッセージアプリ — 送信フィードバックの改善
状況: メッセージ送信時に「送信完了」の表示が唐突に出現し、「送れたのか分からない」という声があった。特にネットワーク遅延時にユーザーが連続タップしてしまう問題。
適用プロセス:
- 送信ボタンタップ時にリップルエフェクト（100ms）→吹き出しが下からスライドイン（200ms, ease-out）→送信中のスピナー→チェックマークの出現（200ms）の一連のフローを設計
- 送信中はボタンを非活性化し、スピナーで「処理中」を明示
- 送信完了のチェックマークに微小なバウンスアニメーションを追加し、成功の実感を強化
成果: 連続タップによる重複送信が92%減少。ユーザーテストで「送信の安心感」が5段階中3.0→4.6に向上した。
ECアプリ — 商品リストからの遷移
状況: 商品リストから詳細画面への遷移が「パッと切り替わる」だけで、ユーザーが「今どこにいるのか」を見失い、「戻る」操作が増えていた。
適用プロセス:
- 商品カードの画像を共有要素（Shared Element）として、リストから詳細画面への遷移でスムーズに拡大するアニメーション（300ms, ease-in-out）を実装
- 戻る操作では逆方向に縮小し、元のカード位置に戻るアニメーションで空間的連続性を確保
- 遷移中に背景をクロスフェードし、視覚的な断絶を防止
成果: 「戻る」操作の連続タップ（迷い行動）が38%減少。商品詳細の滞在時間が15%増加し、カート追加率も7%向上した。
学習アプリ — 達成モーションの設計
状況: レッスン完了時に「完了」とテキストが表示されるだけで、達成感がなかった。ユーザーの学習モチベーションが低下し、継続率が伸び悩んでいた。
適用プロセス:
- レッスン完了時に3段階のアニメーションシーケンスを設計：(1)スコア表示のカウントアップ（400ms）→(2)星のバウンスイン（300ms）→(3)紙吹雪エフェクト（500ms）
- 連続達成時は追加の「連続記録バッジ」がスライドインするモーションを追加
prefers-reduced-motion対応として、モーション無効時は静的な完了画面を表示
成果: レッスン完了後の「次のレッスン開始率」が28%向上。SNSでの完了画面シェアが増加し、オーガニック流入にも貢献した。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| 目的のないアニメーション | 装飾的な動きは操作の邪魔になる | 4つの役割のいずれかに当てはまらなければ追加しない |
| 持続時間が長すぎる | ユーザーが「待たされる」と感じる | 500ms以下、フィードバック系は200ms以下に抑える |
| イージングがlinear | 機械的で不自然な印象を与える | ease-outまたはease-in-outを使う |
| アクセシビリティ未対応 | 前庭障害のあるユーザーにめまいを引き起こす | prefers-reduced-motionに必ず対応する |
まとめ#
モーションデザインは「動き」を通じてUIに意味と快適さを加える技術だ。フィードバック・空間案内・注意誘導・楽しさの4つの役割を明確にし、イージングと持続時間を適切に設定する。「なぜ動くのか」 を説明できないアニメーションは追加しない。アクセシビリティへの配慮（prefers-reduced-motion対応）も忘れず、全ユーザーにとって快適な体験を設計する。