#224
UI設計パターン
#224ぱふぉーまんす
パフォーマンス (Performance)
別名・表記:PerformanceWeb Performance表示速度
UIXHERO Definition
「速さは正義」。0.1秒の遅延が、ユーザーの満足度と売上を下げる。
概要
UXにおけるパフォーマンスには、以下の3つの側面がある。
- 実測時間（Objective Time）: 実際に何秒かかったか（LCP、FIDなど）。
- 体感時間（Perceived Time）: ユーザーが「速い」と感じるか、「遅い」と感じるか。
- 許容時間（Tolerance）: ユーザーが待てる限界の時間（約3秒で40%が離脱すると言われる）。
UXでの活用
- 体感速度の向上:
- スケルトンスクリーン: コンテンツの読み込み中に枠組みだけを先に表示し、「読み込んでいる感（進行感）」を演出する。
- 楽観的UI（Optimistic UI）: サーバーのレスポンスを待たずに、操作した瞬間に成功した画面を表示する（「いいね」ボタンなど）。
- Core Web Vitalsの改善: Googleが定めるUXの重要指標（LCP: 読み込み速度、INP: 応答性、CLS: 視覚的安定性）を計測し、改善する。
- 画像の最適化: WebP形式の使用や遅延読み込み（Lazy Loading）により、初期表示を高速化する。これはサステナビリティ（転送量の削減）にも繋がる。
💡 使いどころ
サイトが重い、離脱率が高い、SEOの順位が下がった時。GoogleのCore Web Vitals指標を改善したい時。
⚠️ 注意点・誤用
速さだけを追求して、機能やデザイン（表現力）を犠牲にしすぎないこと。バランスが重要だが、モバイル環境ではパフォーマンスが最優先されることが多い。
具体例
- Amazon（読み込みが0.1秒遅れると売上が1%下がる）
- Google（検索結果の表示が0.5秒遅れるとトラフィックが20%減少する）
出典・参考文献:
- Steve Souders, High Performance Web Sites
- Google Web Vitals