prefers-reduced-motionは「アニメーション全停止」ではない｜仕様が求める範囲
アクセシビリティ対応の指摘を受けて、スタイルシートの末尾にこんな数行を追加したことはないでしょうか。
@media (prefers-reduced-motion: reduce) {
{
animation: none !important;
transition: none !important;
}
}この対応は「やらないより良い」かもしれません。ただ、これが仕様の求めていることだと理解していると、別の問題が起きます。動きが情報を運んでいた箇所では、動きを消した結果として情報も消えるからです。モーダルがどこから現れたのか、削除した行がどこへ消えたのか、画面の変化が一瞬で切り替わるだけでは分からなくなる。設定をオンにしたユーザーが求めたのは、その情報の欠落ではありません。
仕様の定義文を読むと、求められているのは全停止ではないことが分かります。
30秒で要点
prefers-reduced-motionは「非本質的な動き（non-essential motion）を最小化してほしい」というユーザーの要求を検出するためのもの。値はno-preferenceとreduceの2つreduceの定義は、該当する種類のモーションベースのアニメーションを「取り除く、または置き換える（removes or replaces）」インターフェースを好む、という通知。置き換えという選択肢が仕様の文面に明示されている- WCAG 2.2の達成基準2.3.3（レベルAAA）は、満たす手段を「いずれか1つを選べばよい」としており、OSやブラウザの設定を活用する方法もその1つに挙げられている
- 「不可欠（essential）」の定義は2条件のAND。「意味があるから残す」だけでは不可欠の根拠にならない
- 判断軸は「情報を運ぶ動きは置き換える／装飾の動きは削除する」。一律停止は、この仕分けを飛ばしている状態
prefers-reduced-motion が検出しているのは何か
まず定義を確認します。W3Cが公開しているMedia Queries Level 5（W3C Working Draft、文書日付 2026年2月19日）の§12.1に、このメディア特性の定義があります。
The prefers-reduced-motion media feature is used to detect if the user has requested the system minimize the amount of non-essential motion it uses.
訳すと、「ユーザーがシステムに対して、使用する非本質的な動きの量を最小化するよう要求したかどうかを検出するために使われる」となります。値は no-preference と reduce の2つで、no-preference は「ユーザーがシステムに何の設定も伝えていない」状態を指し、条件判定では偽として評価されます。
そして reduce の定義が、この記事の中心です。
Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that either trigger discomfort for those with vestibular motion sensitivity, or distraction for those with attention deficits.
ここから読み取れることは2つあります。
1つめは、対象が限定されていること。 「その種類のモーションベースのアニメーション」とあります。具体的には、前庭系（からだの平衡感覚をつかさどる器官）の動き感受性を持つ人に不快を引き起こす種類、または注意欠陥のある人の注意を散らす種類です。すべてのアニメーションではありません。
2つめは、手段が2つ挙げられていること。 「removes or replaces」——取り除く、または置き換える。置き換えは仕様の文面に書かれた選択肢であり、実装者が勝手に用意した妥協案ではありません。
つまり { animation: none !important } は、仕様が要求していることではありません。ただし、仕様がそれを禁止しているわけでもありません。ここは「要求されていない」という範囲で理解するのが正確です。
なぜ「全部止める」という解釈が広まりやすいのか
定義文を読めば分かることなのに、なぜ一律停止が定番の対応として扱われやすいのでしょうか。理由は仕様の難しさより、設定の名前と実装のかたちが素直に対応してしまうことにあると考えています。
設定名は "reduced motion"（動きを減らす）です。これを実装に落とすとき、最も手数が少なく、最も検証しやすいのは全停止です。全停止なら「動いているものがないこと」を目で見て確認できます。一方で「置き換えた」状態の検証は、置き換え先が適切かという判断を含むため、合否が一目では決まりません。検証しやすい方が選ばれると、仕様が何を求めているかの確認は後回しになります。
さらに、一律停止は「やりすぎる方向のミス」に見えるため、心理的なブレーキもかかりにくい。多めに止めておけば安全だ、という感覚です。しかし、やりすぎの方向にも失敗があります。動きが運んでいた情報が落ちるという失敗です。これは設定をオンにしているユーザーの画面でしか起きないため、作った側の画面では見えません。
WCAG 2.2が扱っている範囲と、扱っていない範囲
もう1つの一次情報として、W3CのUnderstanding SC 2.3.3: Animation from Interactionsを確認します。
この達成基準の本文は次のとおりです。
Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
操作によって引き起こされるモーションアニメーションは、そのアニメーションが機能または伝達される情報に不可欠でない限り、無効化できること。レベルはAAAです。AAAはWCAGのレベル区分の最上位にあたります。
ここで押さえておきたいのが、この基準が扱う範囲です。同じページには、2.3.3と2.2.2の線引きが明記されています。
| 達成基準 | 適用される場面 |
|---|---|
| 2.3.3 Animation from Interactions | ユーザーの操作が非本質的なアニメーションを開始する場合 |
| 2.2.2 Pause, Stop, Hide | ウェブページが、意図的なユーザー操作への応答としてではなく「自動的に」アニメーションを開始する場合 |
棚卸しをするとき、この2つを混ぜると議論が噛み合わなくなります。先に「誰がその動きを始めたか」で仕分けておくと、どちらの基準の話をしているかが固定されます。
満たす手段は「いずれか1つ」でよい
実装の負担を見積もるうえで重要な記述があります。W3Cの解説ページは、2.3.3を満たす手段について "Choose any one of the following solutions"（以下のいずれか1つを選びなさい）と書き、3つを挙げています。
- 不要なアニメーションを使わない（Avoid using unnecessary animation）
- ユーザー操作起因の非本質的アニメーションをオフにする操作を提供する
- ユーザーエージェント（ブラウザ）またはOSの reduce motion 機能を活用する
3つすべてを実装する必要はありません。___no-preference0___ への対応は3番目にあたります。設計の段階で「そもそもこの動きは要るのか」を問い直す1番目が選べる場面もあります。
なお、レベルAAAという事実と、それが法令や調達要件で義務になっているかどうかは別の話です。後者は本記事が参照した情報源には書かれていないため、ここでは扱いません。見積もりや要件定義でレベルの扱いを決める必要がある場面については、「アクセシビリティ対応」の見積もりが噛み合わない理由で版とレベルの確認手順を整理しています。
「不可欠だから残す」と言える条件は2つある
2.3.3の本文には "unless the animation is essential"（そのアニメーションが不可欠でない限り）という除外条件があります。この「不可欠」が曖昧なままだと、残したい動きをすべて不可欠と呼べてしまいます。
W3Cの用語定義は次のとおりです。
essential: if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform
2つの条件が and でつながっています。
- 取り除いた場合に、コンテンツの情報または機能を根本的に変えてしまう
- かつ、その情報および機能を、適合する他の方法では達成できない
実務で効いてくるのは2番目です。「この動きには意味がある」は1番目の主張でしかありません。同じことを別の表現——短いフェード、即時の切り替え、テキストでの明示——で伝えられるなら、2番目を満たさないため不可欠とは言えません。つまり「不可欠」は、動きの重要度ではなく代替手段の有無で決まります。
この読み方をすると、不可欠と呼べる動きはかなり少なくなります。それは困った結論ではありません。代替手段があるなら、仕様が挙げているもう一方の選択肢、つまり「置き換える」がそのまま使えるということです。
なお同じページには「motion animation」の定義も置かれています。「動きの錯覚を作り出す、または滑らかな遷移の感覚を与えるために、状態間にステップを追加すること」、つまり状態Aから状態Bへ途中のステップを挟んで見せること全般です。
動きを2種類に分けると、判断が止まらなくなる
ここまでの一次情報を踏まえると、実装時の判断軸は次のかたちに整理できます。
その動きは、情報を運んでいるか。
| 動きの性質 | 対応 | 具体例 |
|---|---|---|
| 情報を運んでいる | 置き換える（動きの量を減らした別表現にする） | パネルがどこから開いたかを示す遷移、項目が追加・削除された位置の提示、処理が進行中であることの表示 |
| 情報を運んでいない | 削除する | 装飾目的の浮遊・回転、画面の見た目を賑やかにするための反復的な動き |
置き換えの方向は「動きそのものをやめる」ではなく「動きの量を減らす」です。位置が大きく移動する遷移を短いフェードにする、長い移動を即時の切り替えにする、といった形です。何に置き換えるのが適切かは、その動きが運んでいた情報が何だったかで決まります。
この仕分けは、設計の段階でやるほど安くなります。公開後に例外を足していく作業は、どの動きが何を伝えていたかの記録が残っていない状態で始まるためです。動きに意図を持たせる設計そのものは、マイクロインタラクションの設計ガイドで扱っています。
棚卸しの分母と分子を決める
「対応がどこまで進んだか」を共有したい場合は、数え方を先に決めておきます。
- 分母：対象ページに存在するアニメーションの数（___
no-preference1___ または ___no-preference2___ が実際に適用されている箇所を1つと数える） - 分子：そのうち「情報を運ぶ／運ばない」の仕分けが済み、対応（置き換えまたは削除）を決めた数
- 単位：箇所
分母を決めずに「reduced motion 対応は何%終わりましたか」と尋ねても、答える側は何を基準にすればよいか分かりません。この数え方だと、一律停止は「分母の全件に同じ対応を当てた状態」であり、仕分けの分子はゼロだと分かります。進捗の見え方が変わります。
確かなこと、まだ確かではないこと
確かなこと：ここまでに引用した定義文——___no-preference3___ が非本質的な動きの最小化要求を検出するものであること、___no-preference4___ が「取り除く、または置き換える」であること、2.3.3がレベルAAAであること、満たす手段が択一でよいこと、essential が2条件のANDであること——は、いずれも本文中にリンクした2つのW3Cページで直接確認できます。
まだ確かではないこと：Media Queries Level 5は Working Draft（作業草案）という段階の文書です。文書日付は2026年2月19日で、今後の改訂で文面が変わる可能性があります。定義文を根拠に実装方針を決める場合は、参照した日付を記録しておくのが安全です。
本記事で確認していないこと：各ブラウザ・各OSでの ___no-preference5___ の実装状況、「motion animation」の定義に色の変化やぼかしが含まれるかどうか、具体的な実装テクニックのコード例。いずれも上記2ページでは確認できていないため、ここでは書きません。実装に入る前にこれらが必要になった場合は、それぞれの一次情報を別途あたってください。
自分でも試せる、最小の検証
手元のサイトを1ページ選び、OSの「視差効果を減らす」「アニメーションを減らす」設定をオンにして開いてみてください。確認するのは「動きが止まっているか」ではなく、次の1点です。
動きが止まったことで、分からなくなったことがないか。
パネルがどこから開いたか、どの項目が追加されたか、処理が進んでいるのか終わったのか。もし分からなくなっている箇所が1つでもあれば、その動きは情報を運んでいたということです。そこが、削除ではなく置き換えを検討すべき箇所です。逆に、何も分からなくならなかった箇所については、一律停止のままで問題ありません。
1ページ・5分で、仕分けの必要な箇所が特定できます。
判断の土台として押さえておくこと
- ___
no-preference6___ が求めているのは、非本質的な動きの削除または置き換え。全停止は仕様の要求ではない（禁止されているわけでもない） - 動きを「情報を運ぶ／運ばない」で分け、前者は置き換え、後者は削除に振り分ける。この仕分けを飛ばすと、情報が落ちることに気づけない
- 「不可欠」を主張するには、情報・機能が根本的に変わることと、他の方法では達成できないことの2条件が要る。代替手段があるなら不可欠とは言えない
- ユーザー操作で始まる動き（2.3.3）と自動で始まる動き（2.2.2）は別の達成基準として扱われている。仕分けの最初の軸はここ
- 参照した仕様は草案段階。定義文を根拠にするときは、参照日を残しておく
アクセシビリティの全体像から順に押さえたい場合は、Webアクセシビリティの完全ガイドが実装の優先順位の考え方から扱っています。
自社サイトの動きをどう仕分けるか、どこから手をつけるかを整理したい場合は、状況を言語化するところから始めることができます。
状況を整理する（15分）より深く学ぶ
- 「アクセシビリティ対応」の見積もりが噛み合わない理由：どの規格の、どの版・どのレベルに準拠するかの確認手順
- Webアクセシビリティの完全ガイド：実装の優先順位とWCAGの基本的な考え方
- マイクロインタラクションの設計ガイド：動きに意図を持たせる設計の考え方
参考資料・引用元
- W3C, "Media Queries Level 5", W3C Working Draft, 19 February 2026, §12.1 prefers-reduced-motion. https://www.w3.org/TR/mediaqueries-5/
- W3C WAI, "Understanding SC 2.3.3: Animation from Interactions (Level AAA)". https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html