モーションデザインの原則:2026年、インターフェースは本来どう動くべきか

モーションは、現代のインターフェースデザインで最も乱用されているツールです。どのチームもアニメーションのリールは出荷するのに、モーションシステムを出荷するチームはほとんどありません。その結果、跳ね、揺れ、パララックスしながらユーザーの邪魔をするプロダクトが生まれます。本来なら削るべきだったモーションです。

このペーパーは、現場デザイナー版です。モーションが存在する価値を持つかどうかを決める7つの原則、議論に終止符を打つデュレーションとイージングのリファレンス、そして実際のユーザーテストに耐えるパターンの短いリストをまとめました。Dribbbleのループも、ブランドフィルムもありません。ユーザーの時間を尊重するプロダクトモーションだけです。

モーションデザインとは実際には何か

モーションデザインとは、プロダクトの「振る舞いのレイヤー」です。 要素がどう現れ、どう消え、どう反応し、時間の中でどう関係し合うか。うまくいけば、モーションはコピーを1語も足さずに、ユーザーに「今どこにいるか」「どこから来たか」「どこへ行けるか」を伝えます。

まずければ、モーションは「このデザイナーはFramerを使えたんだな」ということだけを伝えます。装飾的なアニメーション、終わらないスプリング、音付きで自動再生されるヒーロー動画は、衣装が違うだけで同じ過ちです。モーションは注意力、帯域、アクセシビリティを消費します。その請求書に見合う価値が必要です。

視覚的ヒエラルキーデザインの記事では、目が静的なページをどう読むかを扱いました。モーションは、その次のレイヤーです。目に、どこを見るかだけでなく、いつ見るかまで伝えます。

モーションの仕事は2つだけ

出荷されたプロダクトのあらゆるアニメーションは、2つの仕事のどちらかを担っています。どちらも担っていないなら、それは装飾であり、パフォーマンスレビューで真っ先に削られるものです。

仕事その1:状態変化を伝える。 待機中だったボタンが押された。存在しなかったモーダルが開いた。空だった行にデータが入った。モーションは、新しい状態へ瞬間的に切り替わる代わりに遷移を見せることで、変化を読み取れるようにします。

仕事その2:視線を導く。 ユーザーが進むボタンをタップしたので、新しい要素が右からスライドインする。カードが保存されたので、下部ナビへ縮んでいく。モーションは、ドキュメントを読ませることなく、プロダクトの空間モデルをユーザーに教えます。

状態を伝えるわけでも視線を導くわけでもないモーションは、ユーザーの注意をタダで奪っています。削りましょう。

---

プロダクトモーションの7つの原則

これらがレバーです。組み合わせて引けば、モーションは意図的に見えます。何も引かなければ、プロダクトは硬く感じられます。引きすぎれば、おもちゃになります。

原則1:磨く前に目的

すべてのアニメーションは、1つの問いに答えます。このモーションがなかったら、ユーザーは何を失うのか。答えが「何も」なら、それは装飾です。答えが「何が起きたか理解できなくなる」なら、そのモーションは構造的で、残します。

「ここにちょっとアニメーションを足そう」から始めるデザイナーは、騒がしいプロダクトを出荷します。「これが一瞬で切り替わったら、ユーザーは何を見逃すか」から始めるデザイナーは、生きているプロダクトを出荷します。

原則2:デュレーションはインパクトに比例させる

小さな出来事には短いアニメーション。大きな出来事には長めのアニメーション。

ボタンの押下は100ミリ秒未満で完了させます。ページ遷移は最大400ミリ秒。ビューポート全体を占有するモーダルなら500ミリ秒まで許容できます。それを超えると、初回は映画的に感じても、10回目の操作では遅く感じます。

デュレーション表:

プロダクト(マーケティングページではなく)で500 msを超えるものは、リピートユーザー全員にかかる税金です。初回は映画的。100回目は拷問です。

原則3:イージングが感情を運ぶ

リニアな動きはロボットです。現実世界は直線的には動かないので、そう動くインターフェースは機械的に感じられます。モーションを人間らしくするのはイージングカーブです。

プロダクトワークの9割は、3つのイージングでカバーできます。

• Ease-out:画面に入ってくる要素用。始まりが速く、終わりが遅い。物体が所定の位置に落ち着くというユーザーの期待に合います。
• Ease-in:画面から出ていく要素用。始まりが遅く、終わりが速い。要素が去る前に、退場を認めるようにユーザーに見せます。
• Ease-in-out:ある場所から別の場所へ動く要素用。両端がなめらか。物理的な慣性に合います。

スプリングカーブは4つ目の選択肢で、慎重に使います。スプリングは遊び心があり、フレンドリーな声を持つコンシューマーアプリに向いています。金融ソフト、医療、あるいはオーバーシュートが不安定さに見えるプロダクトには不向きです。

原則4:モーション設定を尊重する

すべてのプロダクトは、prefers-reduced-motionの経路を出荷します。 前庭障害、片頭痛、注意の過敏さを持つユーザーは、他のユーザーが楽しむモーションで害を受けます。この設定を無視するのはスタイルの選択ではなく、アクセシビリティの失敗です。

ルールは、設定がオンのときにモーションを完全に取り除くことではありません。距離ベースのモーションを、不透明度ベースのモーションに置き換えることです。

40ピクセルスライドインするカードは、フェードインするカードになります。状態変化は伝わり、前庭への刺激は取り除かれます。アクセシビリティ監査全体のどこに位置づくかは、ウェブアクセシビリティチェックリストの解説を参照してください。

原則5:プロダクト全体で一貫させる

モーションは、1つのプロダクトが1組の判断をしたように感じられなければなりません。イージングとデュレーションが違う2つの画面は、2つのプロダクトを縫い合わせたように感じられます。何がおかしいのか言葉にできなくても、ユーザーは気づきます。

解決策はモーションシステムです。デュレーションは3〜5個。イージングも3〜5個。

motion.short、motion.medium、motion.long、ease.enter、ease.exit、ease.standard のような名前付きトークンにします。これらがカラーやタイプのトークンと並んでどこに置かれるかは、デザインシステムガイドの解説で扱っています。

2026年において、モーショントークンは任意ではありません。チームが大きくなってもモーションがバラけないようにする唯一の方法です。3人のチームが自己流のアニメーションを出荷すれば、3つの意見からなるシステムができます。次の採用者が4つ目を足します。20画面目には、プロダクトに一貫した振る舞いのレイヤーはありません。

原則6:モーションは空間モデルに従う

すべてのプロダクトには、暗黙の地図があります。新しい画面は右にある。詳細ビューはカードからズームインする。オーバーレイは上から降りてくる。ナビゲーションドロワーは、それが属する画面の端から出てくる。

モーションは、その地図を補強します。ユーザーがタップしたカードからズームインする詳細画面は、空間的な連続性を教えます。同じ詳細画面が上から落ちてくると、暗黙の地図を壊すのでユーザーは混乱します。

デザイナーがこれを間違えるとき、ほぼ必ず、フローの文脈ではなく単独でアニメーションを選んでいます。テストはこうです。すべての遷移を、一貫した空間メタファーまでたどれるか。たどれないなら、そのモーションは教えているのではなく、飾っています。

原則7:モーションには予算がある

すべてのアニメーションは、CPU、バッテリー、注意力を消費します。それぞれに予算を組みましょう。

CPUとバッテリーの予算とは、transformとopacityだけをアニメーションさせ、width、height、top、leftのようなレイアウトを発生させるプロパティを避けることです。モダンブラウザはtransformとopacityをGPUで処理するので、安上がりです。レイアウト系プロパティをアニメーションさせると再計算が走り、ミドルレンジのAndroid端末でパフォーマンスが崩壊します。

注意力の予算とは、同時に動くアニメーションを制限することです。動くのは、ほぼ常に一度に1つ。2つでもかなり多く、3つは邪魔です。

スクロールのたびにすべての要素がアニメーションするページは、デザインされたページではなく、集中力の落とし穴です。スクロール連動アニメーションがたいてい台無しにするパフォーマンス指標は、Core Web Vitalsの用語集で扱っています。

---

存在意義のあるパターン

Dribbbleに溢れる数十のモーションパターンのうち、プロダクトワークを本当に良くするのはごく一部です。残りは衣装です。

入力時のマイクロインタラクション

押すと2ピクセル沈むボタン、状態間をスプリングで切り替わるトグル、バリデーション失敗時にそっと揺れる入力欄。これらは、あらゆるプロダクトで最も安価で最も効果的なモーションです。コピーなしで、150ミリ秒未満のうちに、ユーザーの問い(システムは聞こえたか)に答えます。

すべての主要なコントロールにマイクロインタラクションを持たせましょう。ボタン、トグル、入力欄、チェックボックス、ラジオ、スライダー。コントロールがユーザーのタッチに目に見えて反応しなければ、バックエンドが速くてもプロダクトは遅く感じられます。これらのインタラクションを規定するアクセシビリティのルールは、フォーカス状態の用語集で扱っています。

リストのスタガー表示

項目間に50 msのスタガーを入れてフェードインするカードのリストは、意図的に見えます。同じリストが一度に現れると、唐突に見えます。スタガーは、初回レンダリングで数百ミリ秒増えても、ほぼ常に価値があります。

上限は4項目です。4つ目以降は、フォールドの下でスタガーを続け、残りはユーザーのスクロールに任せます。20項目を順番にスタガーすると遅く感じられ、どのみちユーザーはほとんど見ていません。

共有要素のトランジション

ユーザーがタップしたカードが、詳細ビューのヘッダーになる。サムネイルが拡大してフル画像になる。これらのトランジションは、空間モデルを大胆かつ安価に教えてくれて、現代のプロダクトワークで最も印象的に感じられる唯一のモーションパターンです。エンジニアリングコストもかかるので、多くのチームは削ってしまいます。その瞬間が重要なとき(オンボーディング、主要なコンバージョンフロー、看板機能)には、そのコストを払いましょう。

時間を尊重するプログレスインジケーター

長い処理でリアルタイムに進むプログレスバー。読み込みに300 msを超えるデータにはスケルトンスクリーン。スピナーは、スケルトンだとちらつくような1秒未満の処理にだけ。進捗のモーションは、信頼のモーションです。待っているユーザーが唯一気にすること、つまりシステムが動いていることを伝えます。

意味のあるローディング状態

ローディング状態はデザインの不在ではなく、それ自体がひとつのデザインです。最も遅い部分で全体を止めるのではなく、段階的にコンテンツを見せる方法は、プログレッシブディスクロージャーの用語集で扱っています。

---

警戒すべきモーションの失敗

モーションレビューで見つかる失敗は、いつも同じです。プロダクトがこのどれかを抱えて出荷されるなら、モーションシステムが、デザインの残りを台無しにしています。

ヒーローでの自動再生動画。 注意を乗っ取り、パフォーマンスを落とし、reduced-motionの設定に違反します。静止画か、ユーザー操作で再生する形に置き換えましょう。

誰も頼んでいないパララックス。 パララックスは、本文にブランドカラーを使うことのモーション版です。スクリーンショットでは高級に見え、実機では乗り物酔いに見えます。

すべての状態変化でのバウンス。 スプリングモーションはスパイスであって、食材ではありません。すべてのボタンが跳ね、すべてのカードがバネ仕掛けで、すべてのモーダルがオーバーシュートするプロダクトは、優先順位をつけられないプロダクトです。スプリングは、ユーザーに感じてほしい瞬間のために取っておきましょう。

サーバーに勝つトランジション。 データが200 msで届くのに500 msかかる画面遷移は、実際より遅い印象をプロダクトに与えます。モーションは実際の処理に合わせるか、後ろに付くべきで、水増ししてはいけません。

ループする背景アニメーション。 永遠に動く背景は、永遠に気を散らします。ユーザーが視線を戻すたびに、集中が途切れます。ループさせるのは、モーションそのものが目的のとき(ステータス、可視化、ハートビートインジケーター)だけです。

---

システムの中のモーション

モーションは、カラーやタイプと並んでデザインシステムの中に属します。終盤の磨き上げレイヤーとして扱うから、多くのプロダクトが一貫性のないモーションを出荷するのです。システムを所有するチームが、モーショントークンも所有します。

最小限のモーショントークンセット:

名前を付け、ドキュメント化し、デザイントークンレイヤーの変数として出荷します。プロダクト内の新しいアニメーションはすべて、これらのトークンのどれかを使うか、使わない理由を文書に残します。5人のデザイナーと20人のエンジニアのチームでモーションの一貫性を保つのは、この規律です。

モーションデザインのレビュー方法

すべてのアニメーションを、出荷前に4つの問いにかけましょう。

状態変化を伝えているか、視線を導いているか。 どちらでもないなら、削る。

デュレーション表に収まっているか。 長ければ、攻めすぎに感じるまで短くして、そこから一段階戻す。

トークンを使っているか。 手作りなら、システムからズレていきます。トークンにリファクタリングするか、却下する。

prefers-reduced-motionを通るか。 設定を切り替える。それでもモーションが前庭反応を引き起こすなら、不透明度だけで作り直す。

4つの問い。1アニメーションあたり5分。ほとんどのプロダクトはどれも問わずに出荷されます。だから、ほとんどのプロダクトは、デザインされたのではなく、飾り付けられたように感じられるのです。

ローンチ後の監査でモーションのズレを詫びるのではなく、出荷時にこのレビューを回すチームがほしいなら、Brainyに依頼してください。私たちは、最初の画面からモーションをシステムの中に置いて、ブランド、ウェブ、プロダクトUIを作ります。

2026年の条件下でのモーション

3つの変化が重要です。モーションは、そのすべてを生き延びなければなりません。

AI駆動のインターフェースは、従来のUIより多く動く。 ストリーミング応答、ライブの推論トレース、動的なツール呼び出しが、絶え間ない繊細なモーションを生みます。ルールは、AIのモーションは予測可能に、プロダクトのモーションは穏やかにすること。すべてが一度にアニメーションすれば、何も重要には見えません。

スクロール連動アニメーションは、いまやブラウザの機能。 CSSのscroll-timelineにより、JavaScriptなしでスクロール位置に基づくアニメーションが作れます。これは新しいレバーですが、多くのチームはスクロールで動かす要素が多すぎて誤用しています。ルールは、1ページにスクロール連動アニメーションは1つ。たいていはヒーロー、ときにCTAです。

アクセシビリティ規制が厳しくなっている。 欧州アクセシビリティ法(European Accessibility Act)や同様の法律により、reduced-motionは「あれば嬉しい」ものではなく、強制力を持つものになりました。reduced-motionの経路なしでプロダクトを出荷するのは、デザイン上の意見ではなく、コンプライアンスリスクです。該当する基準は、WCAGの用語集で扱っています。

---

FAQ

最も重要なモーションデザインの原則は何ですか?

磨く前に目的、インパクトに合ったデュレーション、感情を運ぶイージング、モーション設定への配慮、プロダクト全体での一貫性、空間モデルへの意識、そして厳格なパフォーマンスと注意力の予算。7つの原則を組み合わせることが、存在意義のあるモーションを生みます。どれか1つだけでは足りません。

UIアニメーションはどのくらいの長さにすべきですか?

ほぼすべてのプロダクトのインタラクションで、100〜500ミリ秒です。フィードバックのアニメーション(ホバー、押下)は100〜150 ms。小さな状態変化は150〜300 ms。ページとモーダルの遷移は300〜500 ms。それより長いと、初回は映画的に感じても、リピートユーザーへの税金になります。

モーションデザインとアニメーションの違いは何ですか?

モーションデザインはプロダクトの振る舞いのレイヤーで、アニメーションはそれを生み出すために使う視覚的な技法です。モーションデザインは、そのアニメーションがどんな状態変化を伝え、なぜ必要なのかを問います。アニメーションは、その動きがどう見えるかを問います。モーションデザインは戦略、アニメーションは技術です。優れたプロダクトワークには両方が必要です。

すべてのインタラクションにアニメーションが必要ですか?

いいえ。すべての主要なコントロール(ボタン、トグル、入力欄)は、ユーザーがタッチへのフィードバックを期待するので、マイクロインタラクションの恩恵を受けます。二次的な要素は違います。テストはこうです。アニメーションを削って、ユーザーが情報を失うかを見る。失わないなら、削ったままにします。

prefers-reduced-motionとは何で、どう扱えばいいですか?

ユーザーがモーションを減らしたいことを示すオペレーティングシステムの設定で、多くは前庭や注意の理由によるものです。正しい扱いは、モーションを完全に取り除くことではなく、距離ベースのアニメーションを不透明度ベースのアニメーションに置き換えることです。状態変化は伝わり、前庭への刺激は取り除かれます。

モーションシステムはどう作りますか?

まず、3つのデュレーションと3つのイージングを名前付きトークンとして用意します。それぞれがどこで使われるかをドキュメント化します。コードレビューでトークンの使用を徹底します。トークンを追加するのは、既存のセットでは本当に間違ったモーションになるときだけで、デザイナーの一回限りの好みに合わせるためではありません。軸ごとに3〜5個のトークンがあれば、通常プロダクトには十分です。

モーションは機能ではなく、クラフトである

優れたモーションを持つプロダクトは、生きているように感じられます。それを持たないプロダクトは硬く感じられます。モーションが多すぎるプロダクトは、デモリールのように感じられます。その3つの距離はわずかで、最初のものにたどり着く唯一の道は、厳しいルールと正直なレビューを備えたシステムです。

7つの原則を組み合わせて引きましょう。デュレーション表の中に収まりましょう。イージングは意図を持って選びましょう。カラーやタイプのトークンの隣に、モーションのトークンレイヤーを出荷しましょう。

すべてのアニメーションを、出荷前に4つの問いにかけましょう。そうして生まれたプロダクトは、頑張ったようには見えません。考え抜いたように見えます。

ブランド、ウェブ、プロダクトUIをひとつのプロジェクトとして、この規律で回すチームがほしいなら、Brainyに依頼してください。モーションを、毎回、第一級のシステム上の意思決定として扱います。

関連記事

• 視覚的ヒエラルキーデザイン
• デザインシステムガイド
• ウェブアクセシビリティチェックリスト
• FigmaからDevへのデザインハンドオフ