スケルトンローディングカード
これはデータ取得中の待ち時間に、内容の輪郭だけを薄く見せておくスケルトンローディングカードです。サムネイル枠とテキスト 3 行を実物と同じ配置で並べ、淡いグレーのブロックで仮表示します。光沢が左から右へ流れる演出は @keyframes sk-shimmer で background-position を動かして作…
解説
これはデータ取得中の待ち時間に、内容の輪郭だけを薄く見せておくスケルトンローディングカードです。サムネイル枠とテキスト 3 行を実物と同じ配置で並べ、淡いグレーのブロックで仮表示します。光沢が左から右へ流れる演出は @keyframes sk-shimmer で background-position を動かして作っており、linear-gradient の明るい帯がブロック上を繰り返し横切ります。JavaScript は不要で、CSS アニメーションだけで動きます。行の長さは --title や --short の修飾クラスで変え、実際の文章量に近い見た目にしています。
使う場面
- API からカード一覧を取得して描画する前の待ち時間
- 画像の読み込みに時間がかかる商品一覧や記事一覧
- 体感の待ち時間を減らして離脱を防ぎたい画面
実装では、データが届いたらこのスケルトンを本物のカードに差し替えます。色は linear-gradient のグレー 3 色を背景に合わせて調整でき、流れる速さは sk-shimmer の 1.6s を変えれば速くも遅くもできます。注意点として、動きが苦手な利用者向けに prefers-reduced-motion で光沢を止め、静かなグレー表示に切り替える配慮を入れると親切です。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
スケルトン表示と本物のカードはどう入れ替えますか？
データの取得が終わったタイミングで、このスケルトン要素を取得した内容のカードに差し替えます。サンプルは見た目だけなので、表示と切り替えの制御は読み込み処理側で行ってください。
光沢が流れる速さは変えられますか？
変えられます。sk-shimmer アニメーションの時間（既定は 1.6 秒）を短くすると速く、長くするとゆっくり流れます。色味は背景のグラデーション 3 色で調整できます。