スケルトン カードローダー
コンテンツがまだ読み込まれていない間、グレーの箱と帯で「ここに画像と文章が入る」と先に形だけ見せる、スケルトンスクリーンです。画像枠と 3 本の文章行を sk クラスで作り、それぞれに左右へ流れる明るい筋のアニメーションを当てています。
解説
コンテンツがまだ読み込まれていない間、グレーの箱と帯で「ここに画像と文章が入る」と先に形だけ見せる、スケルトンスクリーンです。画像枠と 3 本の文章行を sk クラスで作り、それぞれに左右へ流れる明るい筋のアニメーションを当てています。仕掛けは linear-gradient を横長（background-size: 200% 100%）に敷き、background-position をずらし続けることで、薄い光沢が左から右へ通り抜けるシマー効果を出しています。文章行の幅を 80%・60%・40% と少しずつ短くしてあるのも、本物の段落らしく見せる細かな工夫です。
実用が高い場面
- 記事一覧やフィードの読み込み待ち（空白より体感が速く感じる）
- SNS やダッシュボードのカード型コンテンツ
- API 取得を待つ間の一時表示として本物のレイアウトに重ねる
これは装飾ではなく UX 改善の定番で、真っ白やスピナーより完成後の構造を予感させるぶん待ち時間が短く感じられます。色味はグラデーションの 3 色を変えればダークテーマにも対応でき、流れる速さは animation の秒数で調整します。データが届いたら必ず実コンテンツに差し替え、支援技術には読み込み中だけ aria-busy="true" を付けると状態が伝わります。光沢は prefers-reduced-motion で抑えるのが望ましいです。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
ダークテーマでも使えますか？
使えます。sk クラスのグラデーションに使っている 3 色を、暗い背景に合うグレー系へ書き換えてください。土台になるカードの背景色も暗くすると、流れる光沢が自然になじみます。明暗のコントラストを少し残すと、シマーが見えやすくなります。
文章行の本数や長さは調整できますか？
行は sk--ln クラスの div で作っているので、HTML 上で増減できます。各行の長さは style の width で個別に指定しており、80%・60% のように少しずつ変えると本物の段落らしく見えます。実際のコンテンツの行数に近づけるのがコツです。