なぜ必要か
視覚と前庭の不一致で酔いが生じます(Bos et al., 2008)。WCAG 2.2の2.3.3。ダークモード同様にシステム設定に従います。
実装
prefers-reduced-motion(MDN, n.d.)と技法C39、iOS・Androidの設定確認(Apple, n.d.)。
消すより置き換える
アニメーションは連続性を伝えます(Chang & Ungar, 1993)。フェードに替え、マイクロインタラクションは残します(web.dev, n.d.)。
よくある質問
- 全部止めるべき?
- いいえ、大きな動きを減らしフェードに。
- テスト方法は?
- 設定をオンにして主要画面を確認。
出典確認日:2026-10-27
参考文献
- MDN Web Docs. (n.d.). prefers-reduced-motion. OS設定を読むメディアクエリです。
- Apple. (n.d.). Motion. Human Interface Guidelines. iOSの動きの指針です。
- web.dev. (n.d.). prefers-reduced-motion: Sometimes less movement is more. 代替表現の例です。
- W3C. (n.d.). C39: Using the CSS prefers-reduced-motion query to prevent motion. WCAG Techniques. 公式の達成方法です。
- Bos, J. E., Bles, W., & Groen, E. L. (2008). A theory on visually induced motion sickness. Displays, 29(2), 47–57. https://doi.org/10.1016/j.displa.2007.09.002 視覚誘発性酔いの理論です。
- Chang, B.-W., & Ungar, D. (1993). Animation: From cartoons to the user interface. In Proceedings of UIST '93 (pp. 45–55). ACM. https://doi.org/10.1145/168642.168647 連続性を伝えるアニメーションです。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 2.3.3の基準です。
