スケルトンスクリーン
Skeleton screen
別名: スケルトンローディング、Skeleton loading、Content placeholder、プレースホルダー
生態（さわってみる）
一言定義
データ読み込み中に、実際のレイアウトの骨組みだけを先に表示しておく灰色のプレースホルダー。
分類
使う場面
- 読み込み後のレイアウトがあらかじめわかっており、体感待ち時間を短く感じさせたいとき
- カード一覧やフィード等、繰り返し構造のコンテンツを読み込むとき
避ける場面
- 読み込み後のレイアウトが予測できない、または処理時間が非常に短いとき（→スピナー）
- 進捗の割合そのものを正確に伝える必要があるとき（→プログレスバー）
近縁種との比較
スピナーは「まだ何もわからない」ことを示す抽象的な待機表示であるのに対し、スケルトンスクリーン は読み込み後のレイアウトの形をあらかじめ見せることで、次に何が来るかをユーザーに予告し体感速度を 向上させる。読み込みにかかる時間の割合を正確に伝えたい場合は数値ベースのプログレスバーが適する が、スケルトンスクリーンは所要時間の見積もりが難しい非同期処理（カード一覧の取得など）に向いて おり、繰り返し構造を持つコンテンツと特に相性がよい。
実例リンク
アクセシビリティ
- role
- 読み込み中のコンテナに aria-busy="true"。完了したら aria-busy="false" にして実コンテンツと入れ替える
- 補足
- Bootstrapのみ入力欄のplaceholder属性と紛らわしい「Placeholder」という用語を使う。スケルトン自体は装飾なので aria-hidden="true" にして読み上げないようにするのが定石