【すけるとんすくりーん】
スケルトンスクリーン とは？
最終更新:
💡 内容を待つ間に、配置の骨組みを見せる
読み込み中に、これから表示する内容の形や配置に近い仮の枠を見せるUI。記事の画像や見出しの場所などを予告できます。データ取得自体を速くする機能ではなく、待ち時間の受け止め方や使いやすさは画面・利用者・実装によって変わります。
📌 このページのポイント
- 読み込み中の画像や文章の位置を仮の形で示す
- 内容の配置が予測できるカードや一覧などで使いやすい
- 通信時間や処理時間そのものを短縮する機能ではない
- 読み込み成功・空データ・失敗の状態を分けて用意する
- 動きや読み上げへの配慮も含めて実装する
ひよこ スケルトンスクリーンって何？
ペンギン先生 内容が読み込まれる前に、画像や文字が入る場所を仮の枠で示すUIだよ。記事カードなら、画像の四角や見出しの短い帯を先に見せる。完成した内容を装うのではなく、まだ読み込み中だと分かる表示にするんだ。
ひよこ スピナーとどう違う？
ペンギン先生 スピナーは処理中だと知らせる印。スケルトンは、それに加えて何がどこへ出るかを示せる。両者は選択肢であって、必ずスピナー→スケルトンの順で表示するものではないよ。読み込む内容や配置が予測できる場合に向いている。
ひよこ 表示が速くなるの？
ペンギン先生 データ取得や処理が速くなるわけではないよ。画面の構造を先に伝える効果は期待できるが、必ず待ち時間が短く感じられたり、離脱が減ったりするとは限らない。ちらつきや実際の内容とのずれも含め、利用する画面で確かめよう。
ひよこ 灰色の枠を動かせば完成？
ペンギン先生 動きは必須ではなく、静止表示もできるよ。完成時の画像や文字に近い寸法を用意すると、切り替わったときの配置の変化を抑えやすい。ただし枠だけで読み込み状態を読み上げてくれるとは限らないので、必要な状態の説明も用意する。
ひよこ 読み上げではどう伝える？
ペンギン先生 読み込み中の説明を用意し、装飾的な枠を操作対象にしない。更新される領域にaria-busyを使う場合は、更新中をtrue、完了後をfalseに戻す。これは更新の扱いを支える属性で、付けるだけで「読み込み中」と必ず読み上げる仕組みではないよ。
ひよこ 通信が失敗したら？
ペンギン先生 仮の枠を出し続けず、失敗したことと再試行などの選択肢を示そう。0件という正常な結果も、読み込み中やエラーと区別する。短い処理でのちらつき、長く待つときの説明、動きを控えたい人への配慮も考えるんだ。
もっと詳しく知りたい人へ
何秒以上なら必ず使う、という基準はある？
このパターンを使うすべての画面に共通する秒数はありません。配置が分かることの利点、切り替えのちらつき、実際の待ち時間、利用者の操作を見て判断します。処理の進捗を測れる場合は、進捗表示が適していることもあります。
まとめ：ざっくりこれだけ覚えればOK！
「スケルトンスクリーン」って出てきたら「内容の配置を予告する読み込み表示」と思えばだいたいOK！
📖 おまけ：英語の意味
「Skeleton Screen」 ＝ 骨格の画面
💬 内容の代わりに、画面の骨組みに当たる形を先に表示することを表す名前です。