「Designing in the Browser」、ホストを務める Una Kravets へようこそ。インタラクティブなタッチ操作は、デジタル環境においてユーザーを理解するうえで非常に効果的ですが、意図とは逆に、ユーザーが方向感覚を失い、不満を感じてしまうユーザーもいます。
ここからは、これを回避する方法と、かわいらしいアニメーション SVG とボタンのホバー表示を組み込み、目の前にたくさんのアニメーションを目にしたときにちょっとした不快感を抱かせる可能性のあるユーザーもサイトを楽しませる方法についてご説明します。「prefers-reduced-motion」メディアクエリを使用してウェブサイトへのアニメーションを徐々に強化する方法と、シンプルな「アニメーションの縮小」スイッチを作成する方法を紹介します。
リンク:
- メディアクエリ 5 → https://goo.gle/2RVQxLw
- ベースカード フリップのデモ → https://goo.gle/3mSd1vf
- Preference Reduced Motion のデモ →https://goo.gle/2G9hgl8
- [Reduce Motion] チェックボックスのデモ → https://goo.gle/306S1XM
ブラウザでのデザイン → https://goo.gle/2NeLxjI
Chrome Developers に登録 → https://goo.gle/ChromeDevs