§15-01
Skeleton loader
読み込み中にコンテンツの形を灰色で示す。
空白やスピナーより何がどこに現れるかが先に分かり、待ち時間が短く感じられる。一覧やカードなど形が決まった領域の読み込みに使う。
実装のポイントスケルトンは実コンテンツと同じ寸法で組み、読み込み完了時のレイアウトシフトを防ぐ。読み込み中は領域に aria-busy=true を付ける。
- アニメーション
- タイマー
§15
パフォーマンス feedback
Perceived Performance
- Patterns
- 12
- Demos
- 12
§15-04
Progress bar (定量)
処理の進み具合を割合で示す。
時間のかかる処理がどこまで進んだかを伝える。アップロードや変換のように所要時間がある程度分かる処理に向く。
実装のポイント進捗は role=progressbar と aria-valuenow/min/max で公開し、残り時間の目安を出すと待ちの不安が減る。100% 到達後は完了状態に切り替える。
- タイマー
- アニメーション
§15-05
Indeterminate progress
所要時間が不明な処理の進行中を示す。
処理が止まっていないことを伝え、利用者の再操作を防ぐ。進捗率を計算できない通信や初期化に使う。
実装のポイント所要時間が読めない処理にだけ使い、分かった時点で定量バーに切り替える。left ではなく transform で動かし、prefers-reduced-motion では静止表示にする。
- CSS のみ
- アニメーション
§15-06
Optimistic UI
通信の完了を待たずに結果を先に表示する。
操作の結果をすぐ画面に反映し、通信待ちを感じさせない。いいねや既読など、失敗が少なく取り消しも容易な操作で効果が大きい。
実装のポイント送信直後に仮 ID で一覧へ追加し、確定時にサーバー ID で置き換える。楽観更新は失敗時のロールバックと再送導線を先に設計しておく。
- 楽観的更新
- 非同期
§15-07
Stale-while-revalidate (subtle 更新)
保存済みの内容を先に表示し、更新後に差し替える。
再訪時に待たずに前回の内容を見られ、最新化は背景で済む。頻繁に開くダッシュボードや一覧で、体感速度を上げたいときに使う。
実装のポイントキャッシュ済みの値を即表示し、再検証中は控えめなインジケーターだけ出す。値が変わったときだけ差分を強調し、フォーカス復帰時にも再検証する。
- 非同期
- タイマー
§15-08
Prefetch on hover
リンクに触れた時点で次のページを先読みする。
クリック後の表示を速く感じさせる。ページ間の移動が多い一覧や記事サイトで、読み込み待ちを縮めたいときに使う。
実装のポイントhover から 100〜300ms 待ってから先読みし、通過しただけのポインタで無駄打ちしない。focus でも同様に発火させ、低速回線や Save-Data 時は抑止する。
- 非同期
- タイマー
§15-09
Lazy load (画像)
画面に入る直前に画像を読み込む。
初期表示を速くし、見られない画像の通信量を節約する。画像が多い長いページや一覧で効く。
実装のポイントIntersectionObserver に rootMargin を付けて手前で読み込みを始め、表示後は unobserve する。aspect-ratio で領域を確保し、loading=lazy も検討する。
- ブラウザ API
§15-10
Suspense fallback
読み込み中の領域だけを代替表示に置き換える。
ページ全体ではなく読み込み中の部分だけ代替表示にし、残りは先に使える。重い部品が一部だけあるページで、待ち時間の体感を短くする。
実装のポイントSuspense 境界は独立して読み込める単位で切り、fallback は最終レイアウトと同じ寸法にする。境界を細かくしすぎると段階的なちらつきが増える。
- 非同期
§15-11
エラーバウンダリ + retry ボタン
一部の描画エラーを囲い込み、再試行ボタンを出す。
一部の失敗で画面全体が白くならず、該当箇所だけやり直せる。外部データに依存するウィジェットが並ぶ画面で効く。
実装のポイント境界は機能単位で置き、エラー時は fallback に再試行ボタンを出して resetErrorBoundary で再描画する。エラー内容は画面に生で出さずログ送信する。
- 状態管理
§15-12
Offline indicator
ネット接続が切れたことをバナーで知らせる。
操作が反映されない原因が通信にあると気づかせる。移動中の利用や不安定な回線で、エラーの原因を誤解させない。
実装のポイントnavigator.onLine と online/offline イベントで状態を購読し、復帰時に短く知らせて消す。バナーは role=status で読み上げ、オフライン中の操作の扱いを明記する。
- ブラウザ API