prefers-reduced-motionに対応したアクセシブルなアニメーション
モーションに敏感なユーザーのためにアニメーションを無効化または低減し、アクセシビリティ要件に対応します。
「prefers-reduced-motionに対応したアクセシブルなアニメーション」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
動きを減らす理由
前庭障害やてんかんなどの症状があるユーザーにとって、アニメーションが有害になる場合があります。CSSには、システム設定を検出して尊重するためのprefers-reduced-motionメディアクエリが用意されています。
prefers-reduced-motionクエリ
クエリの値は次のとおりです。
no-preference— ユーザーが設定を指定していませんreduce— ユーザーがOSの設定で動きを減らしています
<div class="box"></div>
最終手段（非推奨）
すべてのアニメーションを停止する、よく見られるものの粗い実装です。これでは、方向感覚を乱さない有用な動きの手がかりまで取り除いてしまいます。
<div class="box"></div>
より良い方法：動きをオプトインにする
より安全なパターンは、動きに関する設定をしていないユーザーに対してのみアニメーションを定義し、デフォルト状態では動かさないことです。
<button class="btn">Button</button>
<div class="card">Card</div>
アニメーションの種類を切り替える
動きを減らしたいユーザーには、方向感覚を乱す動き（translate、scale、rotate）を、アクセスしやすい代替手段（opacity、color）に置き換えます。
<div class="card demo-hover">Hover me</div>
無限アニメーション
無限アニメーション（スピナーや脈動する表示）は特に問題になりやすいものです。静的な代替表示を用意してください。
<div class="spinner"></div>
パララックス効果
パララックススクロールは、強い乗り物酔いのような症状を引き起こすことがあります。動きを減らしたいユーザーには、必ず無効にしてください。
<div class="parallax">Parallax section</div>
JavaScriptからのアクセス
Web Animations APIやスクロールライブラリを使う場合は、JavaScriptで設定を確認してください。
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAGと動き
WCAG 2.3.3（AAA）では、操作によって開始されたアニメーションを無効にできることが求められます。この基準を満たすために、prefers-reduced-motionを使う方法が推奨されています。
動きを減らした状態のテスト
Chrome DevToolsのRenderingタブで「Emulate CSS prefers-reduced-motion: reduce」を有効にすると、OSの設定を変更せずにテストできます。macOSでは「システム環境設定」→「アクセシビリティ」→「視差効果を減らす」を選択します。
意図を記録する
アニメーションが機能目的か、単なる装飾目的かを説明するコメントを記述してください。機能目的のアニメーション（処理や進行状況を示すもの）にはアクセス可能な代替手段を用意し、装飾目的のものは単純に削除できます。
クイックチェック
カードをホバーしたときに浮き上がる効果をprefers-reduced-motionに対応させる最適な方法はどれですか。
振り返り
prefers-reduced-motion: reduceを使って、動きに対する過敏さを検出します。すべてのアニメーションを停止するのではなく、動かない状態をデフォルトにし、no-preferenceクエリ内でのみ動きをオプトインさせてください。動きを減らしたいユーザーには、方向感覚を乱すtransformアニメーションをopacityやcolorのトランジションに置き換えます。DevToolsのエミュレーションを使ってテストしてください。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「prefers-reduced-motionに対応したアクセシブルなアニメーション」レッスンは無料ですか？
はい。「prefers-reduced-motionに対応したアクセシブルなアニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「prefers-reduced-motionに対応したアクセシブルなアニメーション」で何を学びますか？
モーションに敏感なユーザーのためにアニメーションを無効化または低減し、アクセシビリティ要件に対応します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「prefers-reduced-motionに対応したアクセシブルなアニメーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- @keyframesの構文とanimationプロパティ
- アニメーションの方向・フィルモード・反復
- アニメーションの連結とシーケンス化
- prefers-reduced-motionに対応したアクセシブルなアニメーション