UIアニメーション時間の決め方
アニメーションが速すぎると変化を認識しにくく、遅すぎるとUIが重く感じられます。人間が自然と感じるインタラクションのフィードバックは100〜300msの範囲に集中しています。移動距離が短く小さな要素ほど速く、画面全体をカバーする大きなコンポーネントほどゆっくり設定するのが原則です。
イージングカーブも重要です。ease-outは最初に速く始まり減速するため、要素が自然に着地する感覚を生み出します。表示アニメーションに特に適しています。ease-inはゆっくり始まり速く終わるため、非表示アニメーションに向いています。
アクセシビリティの配慮
CSSメディアクエリprefers-reduced-motion: reduceを確認し、アニメーションを軽減または無効にしてください。前庭障害のあるユーザーは過剰なモーションで気分が悪くなることがあります。
よくある質問
ボタンクリックのアニメーションはどのくらいの速さが適切ですか？
100〜150msが適切です。100ms未満は認識しにくく、200msを超えると反応が遅く感じられます。
モーダル表示の推奨時間は？
200〜300msを推奨します。非表示は150〜200msに短縮すると待ち時間を減らせます。
ページ遷移の推奨時間は？
300〜400msを推奨します。500msを超えるとユーザーは遅いと感じます。