Bootstrapで理解する動きの配慮！prefers-reduced-motionとトランジション調整の基本

動きの配慮：prefers-reduced-motionとトランジションの調整

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのアニメーションって便利ですけど、人によっては動きが強すぎるって聞いたことがあります。」

先生

「そうなんだ。動きが多い画面は、眩暈（めまい）を起こしやすい人や、画面酔いしやすい人にとって負担になることがあるからね。」

生徒

「そんな人にも優しくするには、どうしたらいいんですか？」

先生

「Bootstrapには“動きを控えめにする仕組み”が元々あって、特別なCSSを書かなくてもある程度は自動で配慮できるんだよ。」

1. prefers-reduced-motionとは？OSが持つ“動きを減らす”設定

最近のスマートフォンやパソコンには「アニメーションを少なくする」という設定があります。これは、画面の動きによって酔いやすい人・動きが苦手な人のための機能です。この設定は prefers-reduced-motion としてWebサイト側にも伝わるため、サイトはユーザーの好みに合わせて動きを調整できます。

Bootstrapはこの設定を自動的に読み取り、動きが少ないほうが良いと判断されたときは、アニメーションの時間を短くしたり、そもそも動かさないように調整します。つまり、特別なコードを書かなくても、ある程度アクセシビリティに配慮できるわけです。

初心者の方でも「OSの設定がWebの動きに影響する」と知っておくと、アクセシビリティの理解が深まります。

2. Bootstrapのアニメーションは“fadeクラス”が中心

Bootstrapでよく見るふわっとした動きは、ほとんどの場合 .fade クラスによるものです。モーダル、アラート、トースト、ドロップダウンなど、多くのコンポーネントで使われています。

この .fade クラスを外すだけで、アニメーションのないシンプルな表示になります。独自CSSを一切使わずに動きを減らせるので、初心者にも扱いやすい方法です。


<h2 class="mb-3">モーダルのアニメーション比較デモ</h2>
<p>左は <strong>fade あり</strong>、右は <strong>fade なし</strong> のモーダルです。</p>

<!-- ボタン -->
<div class="d-flex gap-3">
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalFade">
    アニメーションあり（fade）
  </button>

  <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modalNoFade">
    アニメーションなし
  </button>
</div>

<hr>

<!-- fade ありモーダル -->
<div class="modal fade" id="modalFade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content p-3">
      <h5 class="modal-title">fade あり</h5>
      <p>ふわっと表示されます。</p>
      <button class="btn btn-outline-secondary" data-bs-dismiss="modal">閉じる</button>
    </div>
  </div>
</div>

<!-- fade なしモーダル -->
<div class="modal" id="modalNoFade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content p-3">
      <h5 class="modal-title">fade なし</h5>
      <p>アニメーションなしで即表示されます。</p>
      <button class="btn btn-outline-secondary" data-bs-dismiss="modal">閉じる</button>
    </div>
  </div>
</div>

ブラウザ表示

このように、Bootstrapはクラス指定だけで動きをコントロールできるため、アクセシビリティの調整がとても簡単です。

3. prefers-reduced-motionが有効な場合、Bootstrapはどう変わる？

ユーザーのOSが「動きを減らす」設定になっていると、Bootstrapはアニメーションをほぼゼロに近い速度で実行します。見た目としては“ほぼ動きが無い”状態です。

逆に「動きを減らさない」設定の場合は、通常どおり自然なアニメーションが行われます。このようにBootstrapは、ユーザーの環境に合わせて自動で優しいUIへ切り替えてくれます。

これは初心者でも理解しやすいアクセシビリティのポイントで、特別なCSSを書く必要はありません。

4. よく使うコンポーネントごとの“動きを減らすコツ”

ここでは、Bootstrapでよく使うUIが、どのような動きに依存しているか、そして動きを控えめにしたいときの考え方を説明します。すべてBootstrapのclassだけで対応できます。

● モーダル（Modal）

モーダルは .fade を外すだけでアニメーションなしになります。画面酔いしやすいユーザーにも配慮できます。

● アコーディオン（Collapse）

開閉時のスライド動作も、prefers-reduced-motion が有効なユーザーには短く調整されます。特別な設定は不要です。

● カルーセル（Carousel）

カルーセルは動きが激しめなので注意が必要です。自動スライドを止めたい場合は data-bs-interval="false" を使えば動きません。


<h3 class="mt-5">アコーディオン：アニメーション比較（あり／なし）</h3>

<div class="row g-4">

  <!-- アニメーションあり -->
  <div class="col-md-6">
    <h5>アニメーションあり</h5>
    <div class="accordion" id="accWith">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accWith1">
            開く（スライドあり）
          </button>
        </h2>
        <div id="accWith1" class="accordion-collapse collapse">
          <div class="accordion-body">アニメーションありのパネルです。</div>
        </div>
      </div>
    </div>
  </div>

  <!-- アニメーションなし -->
  <div class="col-md-6">
    <h5>アニメーションなし</h5>

    <style>
      /* collapse 開閉アニメーションを完全に無効化 */
      .no-ani.collapsing {
        transition: none !important;
      }
      .no-ani.collapse.show {
        transition: none !important;
      }
    </style>

    <div class="accordion" id="accNoAni">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accNoAni1">
            開く（即開く）
          </button>
        </h2>
        <div id="accNoAni1" class="accordion-collapse collapse no-ani">
          <div class="accordion-body">アニメーションなしのパネルです。</div>
        </div>
      </div>
    </div>

  </div>
</div>

ブラウザ表示