prefers-reduced-motionを考慮したアニメーションの作り方【アクセシビリティ対応】

prefers-reduced-motionとは？

prefers-reduced-motion は、ユーザーがデバイスやOSの設定で「アニメーションを減らす」オプションを選択しているかを判定するメディアクエリです。

例：CSSでの基本的な使い方

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

このコードは、アニメーションやスムーズスクロールを無効化します。

CSSでのアニメーション制御

通常のアニメーションを prefers-reduced-motion に応じて切り替えるには、以下のように記述します。

例：フェードインアニメーションの分岐

.element {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* アニメーションを無効にする場合 */
@media (prefers-reduced-motion: reduce) {
    .element {
        animation: none;
        opacity: 1;
    }
}

JavaScriptでの対応方法

CSSだけでは制御できないアニメーションやJSライブラリを使用している場合は、JavaScriptでも対応が可能です。

例：アニメーションをスキップする条件分岐

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

if (!prefersReducedMotion) {
    document.querySelector('.box').animate([
        { transform: 'translateX(0)' },
        { transform: 'translateX(100px)' }
    ], {
        duration: 500,
        fill: 'forwards'
    });
}

このように、条件分岐でアニメーションの実行を制御できます。

ライブラリの対応状況と対策

多くのアニメーションライブラリ（GSAPやAOSなど）も prefers-reduced-motion を考慮できます。

AOS（Animate On Scroll）の例

if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    AOS.init({ disable: true });
} else {
    AOS.init();
}

実装チェックリスト（詳細版）

• CSSアニメーションの制御
  • @media (prefers-reduced-motion: reduce) を使って、アニメーション・トランジション・スムーズスクロールを無効化しているか
  • 重要な要素には animation: none と opacity: 1 などで静的状態を明示しているか
• JavaScriptアニメーションの分岐
  • window.matchMedia('(prefers-reduced-motion: reduce)') を使ってアニメーションを条件分岐しているか
  • Web Animations API や setInterval / requestAnimationFrame を使った演出に適用しているか
• スクロールアニメーション対応
  • CSSで scroll-behavior: auto を適用してスムーズスクロールを無効化しているか
  • JavaScriptライブラリ（e.g. scrollIntoView({ behavior: 'smooth' })）の使用箇所も条件分岐しているか
• アニメーションライブラリの設定
  • AOS, GSAP, Anime.js などのライブラリに disable オプションや条件付き初期化を実装しているか
  • 外部ライブラリが prefers-reduced-motion に対応していない場合は代替策を検討しているか

まとめ：すべてのユーザーにやさしいアニメーションを

アニメーションは魅力的な演出の一つですが、ユーザーによっては不要・不快になることもあります。prefers-reduced-motion を用いた実装により、より多くの人が快適に使えるサイトづくりを目指しましょう。ちょっとした対応が、Webアクセシビリティの大きな一歩になります。り、より多くの人が快適に使えるサイトづくりを目指しましょう。ちょっとした対応が、Webアクセシビリティの大きな一歩になります。