web-motion-auditor

Web モーション監査

ワークフロー

1. アプリを実行するか、開きます。
2. アニメーション状態を確認します：読み込み、ホバー、フォーカス、クリック、ルート遷移、スクロール、空の状態／読み込み中／成功／エラー。
3. アクセシビリティを確認します：
   • prefers-reduced-motion
   • フォーカスの可視性
   • 読み取りや操作を妨げるモーションがないこと
4. デスクトップとモバイルの幅でパフォーマンスを確認します。
5. 可能であればスクリーンショットや動画を撮影します。
6. モーション品質の評価基準で採点します。
7. ファイルへの参照を含む具体的な修正案を提示します。

よくある修正

• トランジションを短くします。
• レイアウトへの負荷が大きいプロパティではなく、transform／opacityを使用します。
• スタガーの数を減らします。
• 動きを抑える設定用の分岐を追加します。
• 装飾的なモーションを、状態を説明するモーションに置き換えます。
• 複雑なストーリー性のあるモーションは、Remotionまたは制御されたヒーローシーンに移します。