動きを減らす設定に対応するCSS｜表示が消える例と修正を検証

ページの動きを減らす対応では、アニメーションを止めた後も、文章やリンクが読めて操作できる状態を残します。CSSのprefers-reduced-motionは、その切り替えに使える条件です。停止の指定を一行足すだけで済ませず、表示前の透明度や位置も確かめます。

制作会社様の実装・検収担当に向けて、展示会ページの案内が下から現れる架空の例を作りました。既存のメインビジュアルの見せ方を選ぶ記事とは分け、今回は動きを止めたときに情報が消えるCSSの失敗と修正を扱います。実在する催事や顧客案件ではありません。

「動きを減らす」設定でも、来場案内を読めるようにする

OSやブラウザーには、画面の動きを減らしたいという利用者の希望を伝える設定があります。prefers-reduced-motion: reduceはその希望に応じるCSSの条件で、すべての利用者が動きを禁止しているという意味ではありません。大きな移動や拡大を伴う演出は、静止した表示へ置き換える候補になります。

たとえば、展示会の日時と来場案内リンクをふわっと表示するデザインなら、動きを減らす設定では最初から同じ情報を表示します。通常版と静止版の二つをデザイン・実装担当で確認し、静止版から日時や行き先を省かない仕様にします。

animationを止めるだけでは、透明な初期状態が残る

/* 問題例：通常はアニメーションの終点で表示する */
.panel {
  opacity: 0;
  transform: translateY(24px);
  animation: reveal .6s ease-out forwards;
}
@keyframes reveal {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
}

この例のopacityは透明度、transformは表示位置の指定です。通常はアニメーションの終点で不透明になり、その状態をforwardsで残します。しかしreduceでanimationを無効にすると、終点へ進まず、初期値のopacity: 0が残ります。日時もリンクも画面から見えなくなりました。

さらに、透明にする指定はリンクをキーボード操作から外しませんでした。問題例ではTabキーで見えないリンクへ移動できました。見た目だけでなく、どこを操作しているか分からなくなる問題もあります。

動きを止めたときの透明度と位置を明示する

/* 修正例：上の問題例のreduce用ルールを置き換える */
@media (prefers-reduced-motion: reduce) {
  .panel {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

修正後は動かさずに案内を表示します。既存サイトへ適用するときは、この例のクラス名や数値をそのまま追加する前に、元のCSSで何を隠し、何を動かしているか確認してください。transitionやJavaScriptで動かす部品は、このanimationの指定だけでは止まりません。

新しく実装するなら、基本のCSSを読める静止状態にし、no-preferenceの条件内だけで演出を追加する方法もあります。JavaScriptの読み込みや演出の開始に失敗しても、重要情報を読める構成を基準にできます。

PC・スマホ幅で、表示とリンク操作を試す

2026年11月14日、IABのChrome 157.0.0.0でローカル試験を行いました。PC幅1280px、スマホ幅390pxにし、開発用のメディア条件をno-preferenceとreduceへ切り替えています。OSの設定そのものを変更した試験や、スマートフォン実機の試験ではありません。

試験条件	問題例	修正例
通常設定・両画面幅	終了後に表示	終了後に表示
reduce・両画面幅	透明度0で見えない	透明度1で表示
reduce・キーボード	PCで見えないリンクへ移動	両幅でリンクが見え、Enterで案内へ移動

両画面幅でページ全体の横はみ出しはなく、修正例ではアニメーション名がnone、表示位置がtransform: noneになりました。公開前の検収では、設定を変えてページを開き直す場合と、表示中に変える場合も確認します。Safari・Firefox、実機タッチ操作、読み上げ、複雑なスクロール連動演出は今回未検証です。

自動切り替えの停止ボタンとは分けて検収する

動きを減らす設定への対応は、自動で切り替わるスライド等の一時停止操作を省く理由にはなりません。演出の対象、停止・再開、操作位置、静止版でも残す情報を部品ごとに決めます。この短いCSS例だけで、サイト全体のアクセシビリティに適合したとは判定できません。

GreenCodingには、支給デザインのCSS実装、既存演出の表示調整、PC・スマホ幅とキーボードでの動作確認を相談できます。対象ページと動く箇所、静止版で残したい情報、確認するブラウザーを共有すると、修正・検証する範囲を具体的に決められます。

参照した公式資料

W3C WAI：動きを減らす設定に応じるCSSの手法／W3C：prefers-reduced-motionの定義（作業草案）／W3C WAI：一時停止・停止・非表示の解説。確認日：2026年11月14日。新機能の発表ではなく、既存の仕様と手法に基づく実装例です。