Webサイトのアニメーションが無効になる
Webサイトに動きをつけるアニメーションはユーザーの目を引いたり、操作の心地よさを高めたりするために欠かせない演出です。
しかし、せっかく作り込んだアニメーションが一部のユーザーにはまったく動いていないというケースがあります。
これは視覚効果(視差効果)を減らす設定の影響です。
例えば、以下はICS MediaのNumberFlowによる数字のアニメーションですが、一部のユーザーの環境では数字が変わるだけで、スムーズなアニメーションは行われません。
これはCSSの「prefers-reduced-motion: reduce」の設定により、視覚効果を減らす設定をしているユーザーにはアニメーションがオフになるようにしているためです。
/* アニメーションの例 */
.foo {
transform: translateX(100px);
transition: transform 0.5s ease;
}
/* 「視覚効果を減らす」設定をしている場合は無効化 */
@media (prefers-reduced-motion: reduce) {
.foo {
transform: none;
transition: none;
}
}NumberFlowなどの有名なアニメーションライブラリだと「prefers-reduced-motion: reduce」が設定されていることが多いです。
視覚効果を減らす設定とは
Windows, Mac, iOSなどのOSには、画面の激しい動きや、ピカピカ光るフラッシュ、立体的なスクロール効果などを抑える「視覚効果を減らす」設定が用意されています。
Windowsだと「アクセシビリティ > 視覚効果」の「アニメーション効果」、Macだと「アクセシビリティ > 視差効果」の「視差効果を減らす」の設定が該当します。
世の中には画面の激しい動きやズーム、視差効果などを見ると、めまいや吐き気、頭痛を引き起こしてしまうユーザーがいます。
また、シンプルに「アニメーションがあると動作が重くなる」という理由でこの機能を有効にしている人も少なくありません。
Webサイト側は設定を検知して知らせるべき
OS側の設定でアニメーションがオフになっている場合、Webサイトによってはアニメーションが発生しないことで「バグかな？」と誤解してしまうことがあります。
そのため、もしアニメーションが重要なWebサイトであるなら、「アニメーションが無効です。」とユーザーに明示的に知らせる設計が効果的です。
/* <div class="motion-status">視覚効果を減らす設定がオンになっているため、アニメーションが無効です。</div> */
.motion-status {
display: none
}
@media (prefers-reduced-motion: reduce) {
.motion-status {
display: block;
padding: 8px 12px;
border-radius: 6px;
background-color: #fff3cd;
color: #856404;
font-size: 14px;
word-break: auto-phrase;
}
}↓ 視覚効果をオフにすると、この下に「視覚効果を減らす設定がオンになっているため、アニメーションが無効です。」の警告が表示されるようにしましたので試してみてください。
まとめ
「アニメーションが動かない」というのは、バグではなくユーザーの意図を尊重したWebサイトの正しい挙動です。
これからのWeb開発では見た目の美しさだけでなく、あらゆる人が快適に閲覧できるアクセシビリティの設計が不可欠です。
しかし、アニメーションが無効化されているとバグだと誤解されるケースがあるため、Webサイトによっては「アニメーションが無効です。」とユーザーに知らせたほうが良いです。
