ユーザ設定でアニメーションの有無を変える?「prefers-reduced-motion」の紹介!

今回はユーザが設定をするだけでアニメーションの有無を切り替えできるメディアクエリを紹介します!これは先日リリースされたGoogle Chrome 74でも実装されたものになります!ちなみにFireFoxなどではすでに実装されていましたね。

はじめに

この機能はユーザ側のPCに設定されている視差効果の有無を取得してスタイルを当てていくメディアクエリになります。

ちょっと分かりづらいので具体例を出していきます。

例えば、こんなアニメーションがあったとします。

See the Pen xNxBQy by カノト (@kanoto) on CodePen.

左右にゆらゆら揺れているだけの要素です。

あるユーザからしてみれば「すげーー!!」ってなるかもしれないですが、別のユーザからしてみれば「酔いそう...(ウップ)」となるかもしれません。

これをユーザ設定で動かなく出来れば便利ですよね!!

このメディアクエリはこういった問題をクリアするために使用できます!

「prefers-reduced-motion」の使い方

それでは、実際に使ってみましょう!!

といっても簡単で、CSS上に以下のように記述するだけです。


  @media (prefers-reduced-motion: reduce) {
    .reduce {
      animation: none;
    }
  }

この例で言うと、「reduce」クラスをアニメーションしている要素につけるとユーザ設定でアニメーションの有無を制御できるようになります。

勘の良い方は気付いたかもしれないですが、アニメーション以外でも設定可能です!

以下のように記述すれば、トランジションをOFFに出来ますし、


  @media (prefers-reduced-motion: reduce) {
    .reduce {
      transition: none;
    }
  }

以下のように記述すれば、フォントのサイズを大きくできます。


@media (prefers-reduced-motion: reduce) {
  .reduce {
    font-size: 120%;
  }
}

とはいえ、「prefers-reduced-motion」はアニメーションなどの動きを制御すると定義されているので、あくまでもアニメーションに注力して実装したほうがいいかと思います。

ユーザの想定外の部分が変化すると、UX的にも良ろしくないですからねw

ユーザ設定ってどうやるの???

上では「prefers-reduced-motion」の使い方を紹介したのですが、「いや、ユーザ設定ってなんだよ!?」って思った方がいると思います。

このユーザ設定というのは、みなさんがお使いのOSごとに設定していきます。

ずっとブラウザの設定だと思ってました・・・。

それでは、OSごとに設定方法を見ていきましょう!

Windows 10 の場合

まず「ctrl + U」で設定画面を開きます。

するとディスプレイの設定画面が開くと思うのでその中にある「Windowsにアニメーションを表示する」で設定できます。

「オン」にすると「prefers-reduced-motion: reduce」が発動しません

「オフ」にすると「prefers-reduced-motion: reduce」が発動します

Mac OSの場合

Macの場合はアクセシビリティのディスプレイにある「視差効果を減らす」で設定できます。

「オン」にすると「prefers-reduced-motion: reduce」が発動します

「オフ」にすると「prefers-reduced-motion: reduce」が発動しません

Androidの場合

Androidで設定する場合は「開発者向けオプション」出すことが必要です。

「設定」→「端末情報」へアクセスして「ビルド番号」を連続でタップします。

すると、「開発者になりました!!」的なメッセージが表示されて、「開発者向けオプション」が追加されます。

「設定」→「開発者向けオプション」にアクセスします。

その中に「Animator再生時間スケール」をタップすると下のような画面が出てくるかと思います。

「オフ以外 」にすると「prefers-reduced-motion: reduce」が発動しません

「オフ」にすると「prefers-reduced-motion: reduce」が発動します

iOSの場合

「設定」→「一般」→「アクセシビリティ」の中にある「視差効果を減らす」を開きます。

その中にある「視差効果を減らす」で切り替えることができます。

「オン 」にすると「prefers-reduced-motion: reduce」が発動します

「オフ」にすると「prefers-reduced-motion: reduce」が発動しません

これって、一般ユーザはわからないんじゃ・・・。

ということで最後までありがとうございました~~!!