Webサイトやアプリのちょっとした動き――ボタンを押したときのフィードバック、画面が切り替わる瞬間、リストが並ぶ順番。これらの「UIモーション」には、実は明確な設計原則があります。今回はイージング（動きの緩急）とデュレーション（時間の長さ）の基本、段階演出（スタッガー）のコツ、見落とされがちなアクセシビリティ対応、そしてAIコーディングツールにモーション実装を頼むときの伝え方までを整理します。
モーションには「仕事」がある
UIアニメーションは装飾ではありません。良いモーションには必ず役割があります。フィードバック（操作が受理されたことを伝える）、方向づけ（次に何が起きるかを予告する）、フォーカス誘導（視線をどこに向けるか）、連続性（画面遷移の前後関係をつなぐ）の4つです。逆に言えば、この4つのどれにも当てはまらない「なんとなく動かしてみた」演出は、ユーザーの操作を待たせるだけのノイズになりがちです。
イージングの選び方：ease-in/out/in-outの使い分け
Material Design 3 のモーションガイドでは、要素の動きを「画面に入る」「画面から出る」「画面内で変化する」の3パターンに分け、それぞれ異なるイージングカーブを当てることを推奨しています。等速直線（linear）はUIではほぼ使いません。
| シーン | 推奨イージング | 体感 |
|---|---|---|
| 要素が画面に入る（entry） | ease-out（減速） | 勢いよく現れて自然に止まる |
| 要素が画面から消える（exit） | ease-in（加速） | すっと画面外へ抜けていく |
| 画面内での位置・状態変化 | ease-in-out（標準カーブ） | 滑らかに加速・減速する |
| 常時ループ・機械的な動き | linear（等速） | 基本的にUIでは避ける |
デュレーションの目安：長すぎても短すぎてもダメ
アニメーションの時間は「短すぎると唐突」「長すぎると鈍重」に感じられます。目安としては、マイクロインタラクション（ボタンのホバーなど）は100ms前後、画面遷移などの標準的なトランジションは200〜300ms、どれだけ長くても500msを超えると「待たされている」感覚が生まれると言われています。
| 用途 | デュレーションの目安 |
|---|---|
| マイクロインタラクション（ボタン、トグル） | 約100ms |
| 要素の出現・消失、パネルの開閉 | 200〜300ms |
| 大きな画面遷移・レイアウト変化 | 300〜500ms（上限500ms程度） |
移動距離が長い要素や大きな面積を占める要素ほど、わずかに長めのデュレーションが自然に感じられます。transformとopacity以外のプロパティ（widthやtopなど）をアニメーションさせるとレイアウト再計算が発生し、カクつきの原因になりやすい点にも注意が必要です。
段階演出（スタッガー）でリズムを作る
リストやカード一覧が表示される際、全要素を同時に動かすのではなく、わずかな遅延を付けて順番にアニメーションさせる手法を「スタッガー（stagger）」と呼びます。視線を上から下、あるいは左から右へと自然に誘導でき、画面全体に「揃った」印象を与えられます。CSSでは各要素のanimation-delayをcalc()やsibling-index()で位置に応じてずらす方法があり、ReactなどではMotion（旧Framer Motion）のstagger()ユーティリティを使うと簡単に実装できます。ただし要素数が多い一覧でスタッガーを効かせすぎると、表示完了までの体感時間が伸びてしまうため、遅延の合計は数百ms程度に収めるのが無難です。
アクセシビリティ：prefers-reduced-motionを忘れない
アニメーションは万人にとって心地よいものではありません。前庭障害（めまいやバランス感覚の異常）を持つ人にとって、大きな動きやパララックス、常時ループするアニメーションは強い不快感や吐き気の原因になり得ます。OSレベルの設定を検知できるprefers-reduced-motionメディアクエリを使えば、「モーションを減らす」設定を有効にしているユーザーにだけ演出を控えめにできます。すべてのアニメーションを無効化する必要はなく、拡大・回転・視差効果をフェードや色の変化に置き換えるだけでも十分な配慮になります。JavaScriptで制御しているカルーセルや自動スクロールも、同じ設定を尊重するべきです。
実装はどれで？ CSS駆動アニメーション vs Motion(旧Framer Motion)
2025〜2026年にかけて主要ブラウザに実装が揃ったCSSのスクロール駆動アニメーションとView Transitions APIは、JavaScriptを追加せずブラウザのコンポジタ上で動くため、軽量かつ滑らかです。一方で、ドラッグ操作やスプリング（バネ）の物理演算、分岐のある複雑な演出は依然としてJavaScriptライブラリの得意分野です。
| 手法 | 得意なこと | 注意点 |
|---|---|---|
| CSSスクロール駆動アニメーション / View Transitions API | スクロール連動演出、ページ遷移、軽量・高速 | Firefoxはクロスドキュメント遷移が2026年時点で発展途上 |
| Motion（旧Framer Motion）など JSライブラリ | ドラッグ、スプリング物理演算、複雑な状態分岐 | バンドルサイズが数十KB増え、パフォーマンスに影響しうる |
「まずCSSでできないか」を検討し、ジェスチャーや物理演算が必要な場面だけJSライブラリを足す、という判断が2026年時点でのバランスの良い選び方と言えそうです。
AIにモーション実装を頼むときのコツ
Claude CodeやAIサイトビルダーにアニメーション実装を依頼すると、根拠のないデュレーションやイージング、reduced-motion対応の欠落が起きがちです。プロンプトに次のような条件を明示すると、ここまで紹介した原則に沿った実装になりやすくなります。
- 「entry要素はease-out、exit要素はease-inで」のようにイージングの種類を指定する
- デュレーションを「200ms前後」のように数値で指定する
- 「
prefers-reduced-motion: reduceのときは演出を無効化またはフェードのみにして」と明示する - アニメーション対象を「transformとopacityのみ」に限定するよう伝える
主な情報源
- Easing and duration – Material Design 3
- prefers-reduced-motion – MDN Web Docs
- stagger – Motion Docs
- CSS scroll-driven animations – MDN Web Docs
- View Transition API – MDN Web Docs
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。