#326
UI設計パターン
#326れいてんし
レイテンシ (遅延)
別名・表記:LatencyNetwork Latency遅延
UIXHERO Definition
「通信の遅れ」。光回線でもゼロにはならない物理的な移動時間。「通信開始から応答を受け取るまでの時間」RTT（Round Trip Time）。
概要
「帯域幅（Bandwidth）」を道路の幅（車線数）とするなら、「レイテンシ（Latency）」は目的地までの距離や信号待ちの時間である。 どんなに広い道路でも、距離が遠ければ到着に時間がかかる。 UXにおいては、通信環境が悪い場所（地下鉄など）でもアプリがフリーズしないようにハンドリングすることが重要である。
UXでの活用
- 楽観的UI（Optimistic UI）: レイテンシを隠蔽するためのテクニック。「いいね！」ボタンを押した時、サーバーからの完了レスポンスを待たずに、画面上では即座にハートマークを点灯させることで、ユーザーに遅延を感じさせない。
- プレイスホルダー: 画像などの重いデータを読み込む際、先に低解像度の画像や色付きの枠を表示しておき、レイアウトのガタつき（Layout Shift）を防ぐ。CLS（Cumulative Layout Shift）の防止にもつながる。
💡 使いどころ
ネットワーク環境が不安定なモバイルアプリのUXを議論する時。クラウドゲーミングやビデオ会議など、リアルタイム性が求められるサービスを設計する時。
⚠️ 注意点・誤用
帯域幅（Bandwidth）とは別物。いくら回線が太くても（大量のデータを送れても）、距離が遠ければレイテンシは大きくなる（光の速度には限界があるため）。
具体例
- 海外のサーバーに接続した時のラグ
- ボタンを押してから反応が返ってくるまでのタイムラグ
出典・参考文献:
- Nielsen, J. (1993). Usability Engineering. Academic Press.
- Nielsen, J. (2010). Response Times: The 3 Important Limits. Nielsen Norman Group.
- Card, S. K., Moran, T. P., & Newell, A. (1983). The Psychology of Human-Computer Interaction. Lawrence Erlbaum Associates.
- Miller, R. B. (1968). Response Time in Man-Computer Conversational Transactions. AFIPS Fall Joint Computer Conference.
- Google. (2020). Core Web Vitals.