CSSで配慮あるWeb体験を！prefers-reduced-motionの使い方と実装例（アニメーションをやめさせる）

5月 19, 2025 5月 19, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

近年、Webサイトにおけるアニメーションの活用が一般的になり、動きのあるUIがユーザー体験の向上に一役買っています。
ですが、すべての人がその「動き」を快適に感じているとは限りません。

視覚的な刺激に敏感な方の中には、アニメーションによって酔いや不快感を覚えるケースもあります。

そこで重要になるのが、ユーザーの設定に応じてアニメーションを抑制するCSSの機能、prefers-reduced-motionです。
今回は、この機能の基本から実装例まで、初心者の方にもわかりやすく解説していきます。

prefers-reduced-motionとは？

prefers-reduced-motionは、OS側で設定されている「モーションを控えたい」意向をCSSで検知するためのメディアクエリです。
ユーザーがmacOSやiOS、Windowsなどの設定で「視差効果を減らす」や「アニメーションを最小限にする」と指定している場合、対応したスタイルを適用できます。

以下が基本的な書き方です。

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

これにより、すべての要素に対するアニメーションやトランジションが無効化され、より静的な表示が可能になります。
ユーザーの快適性を損なわずに、誰にとっても見やすいWebを提供するという視点が求められています。

実践：アニメーションを自動オフにする

たとえば、マウスホバーで要素がスライドするような効果をつけていた場合でも、以下のように制御が可能です。

.box {
  transition: transform 0.4s ease;
}
.box:hover {
  transform: translateY(-10px);
}
@media (prefers-reduced-motion: reduce) {
  .box {
    transition: none;
  }
}

このようにprefers-reduced-motionを使えば、設定を切り替えるだけで動きを抑えたスタイルに自動対応できます。
JavaScriptなどを使わずに、CSSだけで完結するのも大きなメリットです。

使いどころの具体例

ページ遷移時のフェードイン・フェードアウト効果
スクロール連動で動くヘッダーや背景
カルーセルなどの自動再生コンテンツ
常に動き続けるアニメーション背景

視覚的に強い演出は、魅力的である一方で、人によっては目が疲れたり混乱を招くこともあります。
動きに対して選択肢を持たせることで、ユニバーサルなWeb体験に近づけます。

さらに一歩進んだ工夫：アニメーションを切り替える

完全にアニメーションをオフにするだけでなく、「控えめなアニメーション」に切り替えるという方法もあります。
以下のように工夫することで、演出を維持しつつユーザーに配慮した体験が可能です。

/* 通常の動き */
.button {
  transition: transform 0.3s ease;
}
.button:hover {
  transform: scale(1.05);
} /* モーション軽減設定の人には軽めに */
@media (prefers-reduced-motion: reduce) {
  .button:hover {
    transform: scale(1.01);
  }
}

完全停止ではなく「縮小演出」のみにすることで、ブランドイメージやUIの動きも守りつつ、ユーザーの快適性にも配慮できます。