アクセシビリティ向上！prefers-reduced-motionの使い方

Webサイトに滑らかなアニメーションやパララックス（視差効果）を導入すると、一気にモダンで洗練された印象になります。
しかし、過度な動きや視覚効果は一部のユーザーに画面酔いなどの体調不良を引き起こす原因になります。

アニメーション表現の魅力を損なわずに、すべての人が快適に使えるWebサイトを実装するためにどうすればいいでしょうか。
その解決策となるのがprefers-reduced-motionです。

アニメーションにアクセシビリティ配慮が必要な理由

派手なアニメーション演出や表現は閲覧したユーザーに大きなインパクトを与える一方で、見る人によっては以下のような悪影響を及ぼすことがあります。

体調不良・めまい：画面全体の大きな揺れにより、めまいや頭痛を引き起こす
画面酔い：画面上の急激な移動や変化によって気分が悪くなる
注意欠陥：動きが視覚的なノイズとなり、コンテンツの読解に集中できなくなる

「画面酔い」を引き起こしやすいアニメーションの具体例

Webサイト制作でよく使われる演出の中にも、注意が必要なものが多くあります。

画面全体がスクロールと違う速度で動く背景
ページ遷移時の激しいズームイン・ズームアウト
勢いよく動く大きな移動アニメーション
背景で自動再生され続ける動画やスライドショー

情報を探したいだけなのにアニメーションによって体調を崩してしまう、こうしたリスクを避けるためにiOSやAndroid、macOS、Windowsといった主要なOSには「画面の動きを抑える設定」が用意されています。

prefers-reduced-motionとは

ユーザーがこの「画面の動きを抑える設定」を有効にすると、有効にした設定をブラウザを通してCSS側で受け取り、演出を自動的に切り替えます。

参考：prefers-reduced-motion – CSS: カスケーディングスタイルシート | MDN

CSSでの基本的な書き方

prefers-reduced-motionとはCSSのメディアクエリの一つです。
以下のようにメディアクエリを用いて記述します。

/* ホバー時に上に浮くアニメーションを設定 */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}

/* ユーザーが「動きを抑える」設定をしている場合 */
@media (prefers-reduced-motion: reduce) {
  .card {
    /* 動き（transform）は無効化し、影の変化だけ残す */
    transition: box-shadow 0.3s ease;
  }
  .card:hover {
    transform: none;
  }
}

この記述により、ユーザーの設定状態によってマウスホバー時の挙動が以下のように変化します。

通常時：カードが上へ浮き上がり、同時に影がつきます。
動きを抑える設定時：浮き上がるアニメーションが無効化され、影の変化だけでホバーしたことを直感的に伝えます。

JavaScriptでの実装例

JavaScriptで制御している場合も、matchMediaを使えば同様の判定ができます。

const cards = document.querySelectorAll('.card');
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    if (prefersReducedMotion.matches) {
      // 動きを抑え、影の変化だけで反応を伝える
      card.animate(
        [{ boxShadow: '0 0 0 rgba(0, 0, 0, 0)' }, { boxShadow: '0 5px 5px rgba(0, 0, 0, 0.15)' }],
        { duration: 300, fill: 'forwards' }
      );
    } else {
      // 通常時は浮き上がるアニメーション
      card.animate(
        [{ transform: 'translateY(0)' }, { transform: 'translateY(-8px)' }],
        { duration: 300, fill: 'forwards' }
      );
    }
  });

  // マウスが離れたときに元に戻す
  card.addEventListener('mouseleave', () => {
    if (prefersReducedMotion.matches) {
      // 影を元に戻す
      card.animate(
        [{ boxShadow: '0 5px 5px rgba(0, 0, 0, 0.15)' }, { boxShadow: '0 0 0 rgba(0, 0, 0, 0)' }],
        { duration: 300, fill: 'forwards' }
      );
    } else {
      // 位置を元に戻す
      card.animate(
        [{ transform: 'translateY(-8px)' }, { transform: 'translateY(0)' }],
        { duration: 300, fill: 'forwards' }
      );
    }
  });
});

prefers-reduced-motion実装時の注意点

prefers-reduced-motion を使う際の注意点があります。

注意点1：一括で無効にしない

全要素に対して* { animation: none !important; }と一括での無効化はしない方がよいです。

ローディング用のくるくる回るアイコンやプログレスバーなど、必要なアニメーションまで静止してしまい、ユーザーは「通信エラーでフリーズしたのか、処理中なのか」がわからなくなります。

注意点2：「なくす」のではなく「安全な代替演出に置き換える」

アニメーションに対するアクセシビリティの理想的な対応は、アニメーションを完全になくすことではありません。

「体調不良を起こすような過度な位置移動や視差効果を抑え、柔らかいフェードインなど安全な演出に置き換える」ことが大切です。

まとめ

「動きで惹きつける演出」と「誰もが安心して使える配慮」は、prefers-reduced-motionを活用することで両立できます。

動きをすべてなくしてしまうのではなく、「安全で心地よい表現」への視点を持って、すべてのユーザーが快適に閲覧できるWebサイトを目指しましょう。

アクセシビリティ向上！prefers-reduced-motionの使い方