アニメーションを抑える設定とCSSのprefers-reduced-motion

PCで作業をしているときやWebサイトを見ているときに「このサイト動くものが多すぎて見にくいな」「動きのあるものを早く情報を得たいな」と思ったことはありませんでしょうか？
今回はこのような動きを抑える設定とOS側で設定された場合のWebサイト側の対応についてまとめていきます。

アニメーションを抑える設定方法

アニメーションを抑える設定は、使っているOS側で制御することができます。これは動きがあることがユーザーにとって好ましくない状況を防ぐための機能になります。
各OSごとの設定方法は以下の通りです。

アニメーション無効化時のCSS設定

アニメーションを無効化設定されている場合には、Webサイト側でもその設定を見て、動きを切り替えることが可能ですので、ユーザーのためを考えると設定しておくほうがよいでしょう。
アニメーション無効化設定をした際の対応は一律でアニメーション関連のCSSを停止する、代替の表現をするという方法があり、各社によって対応方法は変わるかと思います。また、どの程度まで対応するか？そもそも対応が必要なのか？も意見が分かれるところではあるかと思いますので、各社、各自での判断になってくるでしょう。

CSS設定prefers-reduced-motion

アニメーション無効化時のCSS設定はprefers-reduced-motionで設定します。
設定できる項目は以下2つです。

• no-preference・・・ユーザーが何も設定してないことを示す
• reduce・・・ユーザーがアニメーション無効に関する設定を行なっていることを示す

これらを使って、CSSを設定すると以下のようになります。

@media (prefers-reduced-motion: no-preference) {
  // アニメーションに関する設定が無効化されていない場合の処理を以下に記載
}

上記のように記載しておくことで、アニメーション無効化についての設定が何もない場合にのみ動きのあるWebサイトへと対応が可能です。

まとめ

簡単ですが、アニメーション関連の設定とアニメーション無効化設定がある場合のCSS対応を記載しました。基本的にはユーザーが使いにくいと感じる場合に設定されるアニメーション設定ですが、バッテリーを抑える方法として、アニメーション設定の無効化を紹介している記事もあり、意外と多くの方が設定している項目かもしれません。
一定数のユーザーが設定しているものと認識した前提でWebサイト制作にも活かしていきたいですね。