そのアニメーション、本当に必要ですか？─ 「動きすぎて気持ち悪い」を防ぐCSSの書き方

おはようございます！株式会社ファストコーディングの働くおかんです。

先日、上の子（小学生）と一緒にあるキャンペーンサイトを見ていたんです。画面を開いた瞬間、ロゴがくるくる回って、背景がグラデーションでうねって、テキストが左右から飛んできて、スクロールするたびにカードがフワフワ浮かんでくる。

そしたら子どもが「ママ、これ動きすぎて気持ち悪い。見てると目が回る」って。

正直、私もちょっと酔いそうでした。デザインは凝っていてきれいなんですけど、全部が動いていると情報が頭に入ってこないんですよね。

この体験がきっかけで、「アニメーションの量」について改めて考えるようになりました。今回は、CSSアニメーションを入れすぎないための考え方と、ユーザーが「動きを減らしたい」と設定したときに対応する方法をご紹介します。

アニメーションが多すぎると何が起きるか

「アニメーションがあった方がリッチに見える」というのは事実なんですが、多すぎると逆効果になることがあります。

ユーザーが感じる問題：

• 画面酔い（前庭機能障害を持つ方は、画面の動きで吐き気やめまいを感じることがあります）
• 注意力が分散して、肝心の内容が読めない
• 操作したいボタンがアニメーション中で押せない
• ページが重くてスクロールがカクつく

特に前庭機能障害は、40歳以上の成人の約35%が何らかの形で経験するとされている（*1、米国の調査データ）ほど珍しくない症状です。「画面の動きで気持ち悪くなる」のは、体質の問題であって好みの問題ではありません。

だからといって「アニメーションを全部なくせ」という話ではないんです。大事なのは、動きを減らしたいユーザーに選択肢を用意することです。

prefers-reduced-motion とは

実は、OSレベルで「視覚効果を減らしたい」という設定ができるんです。

• macOS: システム設定 → アクセシビリティ → ディスプレイ →「視差効果を減らす」（※macOS Sequoia以降は アクセシビリティ → モーション）
• iOS: 設定 → アクセシビリティ → 動作 →「視差効果を減らす」
• Windows: 設定 → アクセシビリティ → 視覚効果 →「アニメーション効果」をオフ
• Android: 設定 → ユーザー補助 →「アニメーションの削除」（※メーカーにより設定の場所が異なる場合があります）

この設定をオンにしているユーザーに対して、CSSで「アニメーションを控えめにする」ことができるのが prefers-reduced-motion です。

CSSでの実装方法

基本の書き方

/* 通常時のアニメーション */
.hero-title {
  animation: slideIn 0.8s ease-out;
}

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
}

/* 動きを減らしたいユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .hero-title {
    animation: none;
  }

  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) のブロック内に書いたスタイルは、ユーザーがOSで「視覚効果を減らす」を設定している場合だけ適用されます。設定していないユーザーには通常通りアニメーションが表示されます。

もうひとつのアプローチ：「動きなし」を基本にする

上の書き方だと、アニメーションを追加するたびにreduceの中にも打ち消しを書く必要があります。アニメーションが多いサイトだと管理が大変なんですよね。

逆転の発想で、「動きなし」を基本にして、「動きOK」のユーザーにだけアニメーションを付ける方法もあります。

/* 基本状態：アニメーションなし */
.hero-title {
  /* 静的な表示 */
}

.card {
  /* ホバー効果なし */
}

/* 動きOKのユーザーにだけアニメーションを付ける */
@media (prefers-reduced-motion: no-preference) {
  .hero-title {
    animation: slideIn 0.8s ease-out;
  }

  .card {
    transition: transform 0.3s ease;
  }

  .card:hover {
    transform: translateY(-8px);
  }
}

この書き方の良いところは、新しいアニメーションを追加するときに no-preference のブロック内に書くだけで済むこと。「アニメーションを減らす」ための打ち消しコードを書かなくて良いので、漏れが起きにくいです。

個人的にはこっちの方がおすすめです。

JavaScriptでの対応

CSSだけでは対応しきれないケース（スクロール連動のアニメーション、Lottieアニメーションなど）には、JavaScriptで設定を検知する方法があります。

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

if (motionQuery.matches) {
  // 動きを減らしたいユーザー向けの処理
  console.log('reduced motion enabled');
} else {
  // 通常のアニメーション処理
  console.log('motion OK');
}

// ユーザーが設定を変更した場合にも対応
motionQuery.addEventListener('change', (event) => {
  if (event.matches) {
    // アニメーションを停止
  } else {
    // アニメーションを再開
  }
});

window.matchMedia() で設定値を取得して、条件分岐できます。change イベントを監視すれば、ユーザーがリアルタイムで設定を変更した場合にも対応できます。

「減らす」とは「なくす」ではない

ここで注意したいのは、prefers-reduced-motion: reduce は「アニメーションを全部オフにしろ」という意味ではないということです。

W3Cの仕様では「ユーザーが不要な動きを最小限にしたい」という意図であり、必要な動きまで消す必要はありません。

たとえば、以下のような使い分けが考えられます。

ポイントは「装飾的な動き」は減らし、「機能的な動き」は残すということです。

実際のプロジェクトで対応してみて

夜、子どもが寝た後にコーヒーを飲みながら、自分が過去に担当したサイトを prefers-reduced-motion 対応で見直してみました。

正直、ドキッとしました。スクロールアニメーションが8箇所、ホバーエフェクトが12箇所、自動再生のスライダーが2箇所。全部が同時に動くと、確かにうるさいです。

実際にmacOSで「視覚効果を減らす」をオンにしてサイトを見ると、アニメーションが全く効いていない状態で、逆に少し味気ない。ここで大事なのは「全部消す」のではなく「装飾的な動きだけ消す」調整をすることでした。

対応後にクライアントに報告したところ、「アクセシビリティ対応って具体的にこういうことなんですね」と言っていただけました。意外と、クライアント自身も「動きが多すぎるかも」と感じていたみたいです。

まとめ

今回のポイントは以下の3つです：

• アニメーションは「あればリッチ」だけど「多すぎると逆効果」。画面酔いや注意力分散の原因になる
• prefers-reduced-motion で、動きを減らしたいユーザーに配慮できる。CSSだけで対応可能
• 「全部消す」のではなく「装飾的な動き」だけ減らし、「機能的な動き」は残す

おすすめの実装方法は、「動きなし」を基本にして @media (prefers-reduced-motion: no-preference) でアニメーションを追加するアプローチです。漏れが起きにくくて管理が楽です。

自分のサイトで一度 prefers-reduced-motion をオンにして確認してみてください。「思ったより動いてた」と気づくかもしれません。

株式会社ファストコーディングでは、アクセシビリティに配慮したコーディングやUI/UXの改善をお手伝いしています。「うちのサイト、動きすぎかも？」と気になった方は、ぜひお問い合わせフォームからご相談ください！

参考文献

*1 Agrawal Y, et al. “Disorders of Balance and Vestibular Function in US Adults” Archives of Internal Medicine, 2009. NHANES 2001-2004データに基づく40歳以上の米国成人の調査（https://pubmed.ncbi.nlm.nih.gov/19468085/）