motion-sensitivity について
視覚的な動きに敏感な人への不要なリスクを避けながら、モーションを使うためのデザインスキルです。避けるべき動き、動きを抑える設定への対応、安全なアニメーションの原則、確認項目を説明します。
主な機能
- 01点滅や動きがもたらすリスク
- 02prefers-reduced-motionへの対応指針
- 03目的別のモーション予算
- 04より安全なアニメーションの原則
- 05動画と動くコンテンツの確認項目
活用シーン
- 01危険な動きがないかインターフェースを監査
- 02動きを抑える設定にアニメーションを適応
- 03自動再生動画や動く背景を確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/motion-sensitivityを入力して読み込まれたか確認します。
詳細
モーション感受性に配慮したデザイン
害を引き起こすことなく、機能を果たすモーションをデザインしましょう。前庭障害のある人にとって、不適切なアニメーションは単に不快なだけではありません。数時間から数日続くめまい、吐き気、片頭痛、発作を引き起こす可能性があります。
対象となる人
- 前庭障害のある人（40歳以上の成人の推定35％）
- 視覚的な動きが片頭痛の引き金となる人
- 光過敏性てんかんのある人（点滅が発作を引き起こします）
- 脳震盪からの回復中の人
- 不安障害のある人（予期しない動きがストレスを高めます）
- 動揺病を経験している人
避けるべき危険なモーション
絶対に使用しない
- 1秒間に3回を超える速さで点滅するコンテンツ（発作のリスクがあります。これはWCAGレベルAの要件であり、任意ではありません）
- 速度が遅くても、広い範囲が点滅する表現
- ストロボ効果や脈動する効果
細心の注意を払って使用する
- パララックススクロール（前庭反応を引き起こします）
- スクロールジャッキング（標準のスクロール動作を上書きします）
- ビューポート全体を拡大縮小するズームアニメーション
- 回転する要素
- 自動で切り替わるカルーセルやスライドショー
- 背景動画
デザインパターン
prefers-reduced-motion を尊重する
これは最低限の対応です。必ず守ってください。
prefers-reduced-motion が設定されている場合：
- アニメーション付きの遷移を、即時の状態変更に置き換える
- 自動再生される動画とアニメーションをすべて停止する
- パララックス効果を無効にする
- スクロールをトリガーとするアニメーションを無効にする
- 必要不可欠なモーション（ローディングインジケーターなど）だけを残し、シンプルにする
モーションの予算
すべてのモーションが同じではありません。モーションは意図的に割り当てましょう。
- 必要不可欠なモーション： ローディングスピナー、プログレスバー、意味を伝える状態遷移。これらは残しつつ、シンプルにします。
- 役立つモーション： 理解を助けるホバー効果や控えめな遷移。残しますが、視差効果を減らす設定が有効な場合は即時に切り替わるようにします。
- 装飾的なモーション： 背景アニメーション、登場時の効果、パララックス。すべて削除します。
安全なアニメーションの原則
- アニメーションは短く保つ（遷移は300ms未満）
- 可能な場合は、位置の変化よりも不透明度や色の変化を使う（前庭への影響を抑えられます）
- 画面の広い範囲を同時にアニメーションさせない
- 動きのあるコンテンツにはすべて、再生／一時停止コントロールを用意する
- 何も自動再生しない。再生するかどうかはユーザーが選べるようにする
動画と動く背景
- モーションを伴う自動再生はしない。最初に静止したポスター画像を表示する
- 視認できる一時停止／停止ボタンを用意する
- 背景動画を使用する場合は、静止した代替表示を用意する
- 動画を一時停止した状態でも、コンテンツを完全に読めるようにする
評価のための質問
- インターフェースは prefers-reduced-motion を尊重していますか？
- 1秒間に3回を超える速さで点滅するコンテンツはありますか？
- すべてのアニメーションを一時停止、停止、または非表示にできますか？
- 動きを伴って自動再生されるコンテンツはありますか？
- パララックスやスクロールをトリガーとするアニメーションはありますか？静止した代替表示は用意されていますか？
コメント
Markdown 対応