prefers-reduced-motionへの正しい対応
動きを減らす設定への正しい対応
prefers-reduced-motion：CSS、JavaScript、Reactのパターン | We.Inc
動きを減らす設定をCSSとJavaScriptで検出し、自分の設定をその場で確認できます。アニメーションを削除するのではなく、大きな動きをフェードに置き換えるパターンをコピーして使えます。
prefers-reduced-motionは、訪問者が端末に動きを減らすよう設定しているかを伝えるCSSのメディア特性です。値はno-preferenceとreduceの2つです。パララックス、ズーム、スライドなどの大きな動きをクエリで囲み、値がreduceのときは短いフェードに置き換えるか、アニメーションなしにします。
この設定をオンにする場所
- Windows 11
- 設定 > アクセシビリティ > 視覚効果 > アニメーション効果（オフ）
- macOS
- システム設定 > アクセシビリティ > ディスプレイ（または動作）> 視差効果を減らす
- iOS
- 設定 > アクセシビリティ > 動作 > 視差効果を減らす
- Android 9以降
- 設定 > ユーザー補助 > アニメーションの削除
- Firefox（テスト用）
- about:configでui.prefersReducedMotionを1に設定
動きを減らす設定をオンにするのは、スライド、ズーム、パララックスがめまい、吐き気、頭痛を引き起こすことがあるからです。前庭障害のある人には特に影響が大きくなります。下のバッジは自分の端末の設定をその場で読み取り、デモでは同じアニメーションを通常版と動きを減らした版で表示するので、比べてからパターンを選べます。
- バッジを確認します。端末が現在報告している値が表示され、設定を変えると更新されます。
- プレビューのスイッチを使うと、システムの設定を変えずにデモの動きを減らした版を確認できます。
- サイトのアニメーションの作り方に合ったCSS、JavaScript、Reactのパターンをコピーします。
- 削除ではなく、減らしましょう。短い不透明度のフェードなら、画面上を移動させずに何かが変わったことを伝えられます。
- 動きは追加の演出として書きましょう。アニメーションを@media (prefers-reduced-motion: no-preference)の中に入れれば、安全な版がデフォルトになります。
- 自動再生の動画やカルーセルには、動きの設定に関係なく一時停止の操作も必要です。
- Chromeの開発者ツールでは、レンダリングパネルからこの設定をエミュレートでき、システムを変えずにテストできます。
- スクロールで発動する効果も対象です。大きなパララックスやスクロールの乗っ取りは、最も多い苦情の原因です。
よくある質問
このメディア特性にはどんな値がありますか？
2つあります。訪問者が何も設定していない場合のno-preferenceと、動きを減らすよう求めている場合のreduceです。@media (prefers-reduced-motion)とだけ書くと、reduceを指定したのと同じ意味になります。
JavaScriptでこの設定を確認するには？
window.matchMedia("(prefers-reduced-motion: reduce)")を呼び出し、そのmatchesプロパティを読み取ります。ページを開いている間に設定が変わったときに対応するには、返されたオブジェクトにchangeイベントのリスナーを追加します。
reduceが設定されたら、すべてのアニメーションをオフにすべきですか？
いいえ。求められているのは動きを減らすことで、ページを止めることではありません。色の変化、短いフェード、進捗表示は残し、スライド、拡大縮小、回転、パララックスなどの動きは削除するか小さくしましょう。
動きを減らす設定への対応はWCAGで必須ですか？
WCAG 2.3.3「インタラクションによるアニメーション」（レベルAAA）では、操作によって起こる動きは、不可欠な場合を除いてオフにできることが求められています。システムの設定に従うことは、これを満たす方法の1つとして挙げられています。これとは別に、2.2.2「一時停止、停止、非表示」（レベルA）は、自動的に始まる動きを対象としています。
Tailwindで動きを減らす設定に対応するには？
設定がない場合にだけアニメーションを適用するにはmotion-safe:バリアントを、reduceが設定されているときに上書きするにはmotion-reduce:を使います。たとえばmotion-safe:animate-bounceのように書きます。
問題を起こす動き
- 問題になるのは、画面の大部分を占める動きや、訪問者が起こしていない方向への動きです。パララックス背景、ページ全体のズーム、スライドするページ遷移、回転する要素、スクロールに合わせて跳ねるコンテンツなどが該当します。
- ボタンの色の変化やチェックボックスのチェックのように、ユーザーの操作で始まる小さく短いフィードバックが問題になることはまれで、たいていはそのままで構いません。
動きなしを基本にしたCSS
- 多くのサイトは、最後にreduceのクエリを追加して、すべての再生時間をほぼゼロにしています。これでも機能しますが、アニメーションの見落としが起きやすく、animationendイベントを待つスクリプトではイベントが即座に発火してしまいます。
- 動きを「設定なし」のクエリの中に書けば、デフォルトが逆になります。ブラウザーが設定を報告しない人には引き続き動きが表示され、書き忘れたものは落ち着いた版にフォールバックします。
スクリプトとライブラリ
- CSSのクエリは、JavaScript、canvas、スムーズスクロールの呼び出しで始まるアニメーションには届きません。element.animate()や、behavior: smoothを指定したscrollIntoViewを呼ぶ前に、メディアクエリを確認しましょう。
- 設定は最初に1回読み取り、その変更イベントを購読しましょう。そうすれば、閲覧の途中で設定を切り替えた人にも、再読み込みなしで対応できます。
CSSのパターン
追加の演出としての動き
カードがスライドインするのは、設定がない場合だけです。それ以外の人には穏やかなフェードが表示されます。
既存サイトのためのセーフティネット
すべてのアニメーションを書き直せない場合に便利です。再生時間をなしではなくほぼゼロにするため、animationendやtransitionendのイベントは引き続き発火します。
JavaScriptとReact
設定を読み取り、変更に追従する
matchMediaはライブのリストを返します。訪問者が設定を切り替えると、その変更イベントが発火します。
Reactフック：usePrefersReducedMotion
サーバー上ではtrueから始まるため、ブラウザーが値を返すまでは何もアニメーションしません。
各効果を何に置き換えるか
動きを減らした代替案
- スライドやズームのページ遷移
- クロスフェード、または即時の切り替え
- スクロールで要素が飛び込んでくる
- その場での短いフェードイン
あなたの動きの設定
バッジはJavaScriptのメディアクエリ照合で端末の設定を読み取り、プレビューのスイッチではシステムを変えずに動きを減らしたアニメーションを確認できます。
プレビューモード
自分の設定に従う
通常の動きをプレビュー
動きを減らした版をプレビュー
もう一度再生
動きを減らした版：その場での短いフェード。
通常の動き：パネルが飛び、回転し、大きくなります。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る