Skeleton Screenとは？読み込み中に画面の形を見せる方法

確認日：2026年10月19日

参照したオンライン文書の版番号：未確認

Skeleton Screenは情報が届く前に、見出しや画像が入る場所を仮の形で示す表示です。待つ間に画面の構成を伝え、内容が届いたら本来の要素へ切り替えます。

Skeleton Screenとは

何もない画面や、画面全体の中央で回る印だけではどこに何が出るか分かりません。Carbon Design Systemが示すのは、基本の構造を先に表示し、内容を後から読み込む使い方です。MUIのSkeletonには文字、円、四角形などの形があり、実際のカードに近い配置を作れます。

スケルトンは通信を速くする機能ではありません。読み込み中の内容が入る位置を示すものです。実際の画面と形が大きく違うと、読み込み後に配置が変わり、かえって読みにくくなります。

左は記事カード、右は人物の一覧を想定した架空の画面です。記事カードでは画像と見出し、人物一覧では丸い写真と名前の位置だけを残しています。色と動きを抑え、内容より先に仮の形が目立ちすぎないようにしました。

記事カードと人物一覧で、実際の配置に合わせてスケルトンの形を変えた画面例

読み込みに失敗した場合は仮の形を消し、失敗の説明と再試行を表示します。データが0件だった場合も、スケルトンを残さず空の状態へ切り替えてください。

Carbon Design Systemの公式図版では、表とダッシュボードという異なる構造に仮の形を合わせています。この節の引用画像は出典元の著作物で、当サイトのCC BY 4.0の対象外です。

見出しの位置を短い灰色の帯で示し、行は罫線だけを残しています。表の列数と行の並びが先に分かり、読み込み後の配置を予想しやすい例です。

画面上部のナビゲーションと操作ボタンを表示し、データが入る表だけを仮の形にしています。画面のすべてを一律に灰色へ変えず、使える部分と待つ部分を分けた例です。

MUIのSkeleton実例には文字や画像を待つ場所に合わせて形を変えた図もあります。

動きを付ける場合は目立ちすぎない速さにし、動きを減らす設定にも配慮が必要です。読み込みが終わった後は仮の要素を操作対象として残さないようにします。

プロンプトの例

記事一覧を作ってください。取得中は実際のカードと同じ位置に画像、見出し、説明文のスケルトンを表示します。成功したら記事に置き換え、0件なら空の状態を、失敗したら再試行を表示してください。