スケルトンローディング
このスケルトンローディングは、読み込み中の画面に「これから出てくる要素の形」を灰色の枠で先に見せる待機表示です。丸いアバター部分と、太さの違う複数の横線でコンテンツの骨格を再現しています。CSS のみで動き、 @keyframes shimmer による background-position の移動で、左から右へ…
解説
このスケルトンローディングは、読み込み中の画面に「これから出てくる要素の形」を灰色の枠で先に見せる待機表示です。丸いアバター部分と、太さの違う複数の横線でコンテンツの骨格を再現しています。CSS のみで動き、@keyframes shimmer による background-position の移動で、左から右へ光が流れるシマー効果を作っています。JavaScript は不要です。
使う場面
- 記事一覧やプロフィールカードなど、データ取得に少し時間がかかる箇所
- くるくる回るスピナーより、完成形を予感させたいとき
- 画像や非同期コンテンツの読み込み中の体感待ち時間を下げたいとき
線の幅や数、アバターのサイズを変えれば、実際のカード構成に合わせて形を寄せられます。配色は #e2e8f0 付近の薄いグレーが自然です。動きが苦手な利用者に配慮し、prefers-reduced-motion ではシマーを止めて静止表示にすると親切です。データが届いたら、このスケルトンを実コンテンツに置き換えてください。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
JavaScript は必要ですか？
いいえ。表示自体は CSS のアニメーションだけで動きます。ただし、データ取得が完了したタイミングでスケルトンを実際のコンテンツに差し替える処理は、別途 JavaScript 側で行うのが一般的です。
スピナーとどちらを使うべきですか？
出てくる内容の形が決まっている一覧やカードでは、完成形を予感させるスケルトンのほうが体感の待ち時間を短く感じさせやすいです。形が読めない短い処理にはスピナーが向きます。