動きをひかえめにする設定に寄りそう

ここまで、ページに動きをつける道具をそろえてきました。最後に覚えたいのが、その動きを苦手な人がいるという事実と、その人たちへの寄りそい方です。作った動きを一行も無駄にせず、必要な人にだけ届ける方法があります。

動きが苦手な人がいる

画面の大きな動きで、めまいや乗り物酔いのような症状が出る人がいます。体質によるもので、がまんでどうにかなるものではありません。そのため各OSには動きをひかえめにする設定が用意されています。

• iPhone/iPad：設定→アクセシビリティ→動作→「視差効果を減らす」
• Windows：設定→アクセシビリティ→視覚効果→「アニメーション効果」をオフ
• Mac：システム設定→アクセシビリティ→ディスプレイ→「視差効果を減らす」

この設定をオンにしている人のブラウザは、ページに「動きを減らしてほしい」という合図を送ってくれます。

合図はメディアクエリで届く

合図の受け取り方は、画面幅で見た目を変えたときと同じ@mediaです。条件が「画面の幅」から「利用者の設定」に変わっただけ。

.fade-in {
  animation: fade-in 0.8s ease both;
}

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

「ふだんはfade-inのアニメーションを再生。ただし動きを減らす設定の人には再生しない」という意味になります。

動きを見てみよう

本物はOSの設定にブラウザが自動で反応しますが、このデモではボタンで疑似的に切り替えます。

まとめて止めるコピペも覚えておく

動きを1つずつ止めるのが基本ですが、ページ全体の動きをまとめて止める書き方もあります。

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

*は「すべての要素」という意味のセレクタ。手軽ですが、乱暴でもあります。

動きは「なくても伝わる」飾りに

いちばんの根本対策は、作るときから動きがなくても内容が伝わるようにしておくことです。動きは味つけであって、情報そのものを動きだけに担わせない。この考え方は、色だけに頼らないという配色の鉄則と同じです。

このレッスンのまとめ

1. 画面の動きで体調を崩す人がいて、OSには「動きを減らす」設定がある
2. その合図は@media (prefers-reduced-motion: reduce)で受け取り、animation: noneなどで止める
3. 動きはなくても内容が伝わる飾りとして作るのが根本のマナー

これでWebアニメーションのコースはおしまいです。transition・transform・@keyframes・きっかけとの組み合わせ、そして今回の寄りそい方——動きの道具と心がまえがひと通りそろいました。ページの主役級のボタンやカードから、少しずつ動きを足してみてください。