スケルトンローダー（shimmer）
スケルトンローダーは、コンテンツが届く前に灰色のプレースホルダを表示し、光の帯がスーッと流れるシマー効果で「読み込み中」を伝える UX 手法です。各行は linear-gradient で薄灰色のグラデーションを作り、 background-size:200% 100% で本来の倍幅に引き伸ばしておきます。
解説
スケルトンローダーは、コンテンツが届く前に灰色のプレースホルダを表示し、光の帯がスーッと流れるシマー効果で「読み込み中」を伝える UX 手法です。各行は linear-gradient で薄灰色のグラデーションを作り、background-size:200% 100% で本来の倍幅に引き伸ばしておきます。そこへ @keyframes shimmer が background-position を横へ動かすことで、明るい部分がきらめきながら左右に流れて見えます。行の長さは幅違いのクラスやインライン width で変え、見出しと本文が並ぶカードらしいシルエットを再現しています。CSS のみで JavaScript は不要です。
役立つ場面
- 記事一覧・SNS フィード・カードリストの読み込み中
- API からデータが返るまでのプレースホルダ
- 真っ白な空白より体感速度を上げたい画面
シマーの速さは shimmer の秒数（既定 1.5s）で調整します。形は実際のコンテンツの形（タイトル幅・行数）に近づけるほど自然で、表示後のガタつきも減ります。色はグラデーションの灰色階調を背景色に合わせて変えてください。注意点として、いつまでも回り続けると不安を与えるため、データ取得後は速やかに本物のコンテンツへ差し替える設計が前提です。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
シマー（光の帯）の速さはどこで変えますか
@keyframes shimmerを呼び出すanimationの秒数（既定1.5s）で調整します。短くすると速く流れ、長くするとゆっくりになります。流れる帯はbackground-size:200%とbackground-positionの移動で作っています。
プレースホルダの形はどう合わせますか
行の高さや幅を実際のコンテンツに近づけるほど自然です。幅はsk-line--lgのようなクラスやインラインのwidth指定で変えられます。タイトルと本文の行数を実物に合わせると、読み込み後のガタつきが減ります。