Frontend Academy · レッスン

prefers-reduced-motion への対応

prefers-reduced-motion メディアクエリを検出し、動きを少なくするよう求めているユーザーに対してアニメーションを無効化または縮小します。

レッスン 4/413 ステップ

「prefers-reduced-motion への対応」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

prefers-reduced-motion メディア機能

UIの動きによって、吐き気やめまい、発作が起きるユーザーもいます。そうしたユーザーはOSでモーションを減らす設定にしています。prefers-reduced-motion メディア機能はこの設定を検知し、CSSで対応できるようにします。

CSSでモーション軽減を検知する

反対のメディアクエリでアニメーションを囲みます。通常はアニメーションを適用し、モーションを減らしたいユーザーに対して上書きまたは無効化します。

/* Apply animation by default */
.spinner {
  animation: spin 1s linear infinite;
}

/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

「削減」であって「なし」ではない原則

prefers-reduced-motion: reduce は、モーションを完全になくすという意味ではありません。一部の動きは、重要なUIの状態変化を伝えます。アニメーションを完全に削除するのではなく、速度を落としたり、クロスフェードのように単純化したりします。

@media (prefers-reduced-motion: reduce) {
  .modal {
    /* Replace scale + fade with just fade */
    animation: fadeOnly 0.1s linear;
  }
  @keyframes fadeOnly {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

最終手段: すべてのアニメーションを無効にする

モーション軽減を希望するユーザーに対して、すべてのトランジションとアニメーションをグローバルに無効化する方法がよく使われます。個々のアニメーションを調整できていない場合でも、安全な基本方針になります。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

JavaScriptでモーション軽減を検知する

matchMedia APIを使うと、JavaScriptで設定を検知できます。canvasのアニメーションやJavaScriptで制御する動き、動画の自動再生を制御する場合に便利です。

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReduced.matches) {
  // skip gsap or canvas animations
} else {
  startAnimation();
}

// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
  if (e.matches) stopAnimations();
  else startAnimations();
});

スクロール動作と自動再生

モーション軽減を希望するユーザーに対しては、スムーズスクロールも無効にします。scroll-behavior: auto を使用してください。動画の自動再生を停止し、コンテンツを点滅させたり、ストロボのように明滅させたりしないでください。

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

// In JS:
if (!prefersReduced.matches) {
  element.scrollIntoView({ behavior: 'smooth' });
} else {
  element.scrollIntoView(); // instant
}

WCAG 2.3.3 — インタラクションによるアニメーション

WCAG 2.3.3（レベルAAA）では、ユーザーの操作によって開始される動きを無効にできることが求められます。prefers-reduced-motion を尊重することで、この基準を満たし、前庭障害のあるユーザーのアクセシビリティを向上させられます。

モーション軽減のテスト

Chrome DevToolsで、レンダリングパネル（3点メニュー → その他のツール → レンダリング）を開き、「CSSメディア機能 prefers-reduced-motion をエミュレート」を切り替えます。リリース前に、このモードでUIをテストしてください。

実践: 安全なアニメーションパターン

モーションに配慮したアニメーションをデフォルトで適用し、簡単にグローバルで無効化できるように囲みます。

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .alert {
    animation: slideIn 0.3s ease;
  }
}

フォーカスアニメーションは維持する

フォーカスインジケーター（どの要素にフォーカスがあるかを示すリング）は、モーション軽減を希望するユーザーに対しても削除してはいけません。キーボードナビゲーションに不可欠で、通常は前庭障害を引き起こす動きではないためです。

ライブラリと prefers-reduced-motion

一般的なアニメーションライブラリ（Framer Motion、GSAP、Anime.js）には、モーション軽減のサポートが組み込まれています。Framer Motion の useReducedMotion() フックを使うと、Reactで複雑なアニメーションを条件付きで無効化できます。

クイックチェック

UIの動きを減らしたいというユーザーの設定を検知するCSSメディア機能はどれですか。

対話的なレッスンで答える

まとめ: prefers-reduced-motion

前庭や神経系の健康上の理由から、より少ない動きを必要とするユーザーもいます。@media (prefers-reduced-motion: reduce) を使ってアニメーションを無効化または単純化します。JavaScriptでは matchMedia で検知します。最終手段として、グローバルに animation/transition-duration を 0.01ms に設定できます。WCAG 2.3.3 でも推奨されています。DevToolsのレンダリングパネルでテストしてください。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 41
レッスン: 163

無料で学習を始めるコース全体を表示

よくある質問

「prefers-reduced-motion への対応」レッスンは無料ですか？

はい。「prefers-reduced-motion への対応」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「prefers-reduced-motion への対応」で何を学びますか？

prefers-reduced-motion メディアクエリを検出し、動きを少なくするよう求めているユーザーに対してアニメーションを無効化または縮小します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「prefers-reduced-motion への対応」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る