スケルトンスクリーンとは何ですか？

コンテンツの読み込み中に、実際のレイアウトに近い灰色のプレースホルダーを表示するUIパターンです。くるくる回るスピナーよりも体感の待ち時間を短く感じさせる効果があります。

スケルトンスクリーンのポイントは？

読み込み中にコンテンツの骨組み（灰色のブロック）を表示するローディングパターン。スピナーに比べて体感待ち時間を短く感じさせ、ユーザーの離脱を防ぐ効果がある。Facebook・YouTube・Slackなど多くの有名サービスで採用されている

【すけるとんすくりーん】

💡 「もうすぐ届くよ」と骨格だけ先に見せる、待たせ上手なUI

📌 このページのポイント

スケルトンスクリーンとスピナーの比較

ひよこ

スケルトンスクリーンって、あの灰色のブロックがチカチカしてるやつ？

ペンギン先生

そうそう！YouTubeやFacebookを開いたとき、サムネイルやテキストの場所に灰色の四角が表示されるでしょ？あれがスケルトンスクリーンだよ

ひよこ

くるくる回るスピナーじゃダメなの？

ペンギン先生

スピナーだと「いつ終わるか分からない」感じがするけど、スケルトンスクリーンは「もうすぐこの形でコンテンツが表示されるよ」と予告してくれるから、心理的な待ち時間が短く感じるんだよ

ひよこ

実装は難しいの？

ペンギン先生

CSSだけでも作れるよ。コンテンツと同じレイアウトで灰色の背景にアニメーション（シマー効果）を付けるだけ。React用のライブラリもたくさんあるから、意外と導入しやすいんだ

ひよこ

どんなときに使うのがいいのかな？

ペンギン先生

APIからデータを取得して表示するページ、特にカード型のリストや記事一覧と相性がいいよ。逆に1秒以内に表示できるなら無理に入れなくても大丈夫。チラつきが逆に気になることもあるからね

まとめ：ざっくりこれだけ覚えればOK！

「スケルトンスクリーン」って出てきたら「読み込み中に骨組みだけ先に見せるUI」と思えればだいたいOK！

📖 おまけ：英語の意味

「Skeleton Screen」＝骨格の画面

💬 コンテンツの「骨格（スケルトン）」だけを先に表示するから、この名前がついたんだよ