スケルトンシマー — 動きの伝え方辞典

skeleton screen / shimmer

スケルトンシマー

実コンテンツと同じ形の骨組みの上を光の帯がループで走り、「読み込み中で、もうすぐ出る」を伝える定番。スピナーと違いレイアウトを先に約束するため、体感待ち時間と読み込み後のガタつきを同時に減らせる。

01 — Demo video

Play live →

02 — Prompt template

読み込み中のプレースホルダに skeleton shimmer を実装してください。

- 実コンテンツと同じレイアウト・同じ寸法の骨組み(角丸矩形と円)を薄いグレーで置く
- 各ブロックに 105deg の linear-gradient(透明→ハイライト→透明)を background-size: 200% 100% で敷き、光の帯の幅はブロック幅の {{width}}% にする
- background-position をCSSキーフレームで動かし、{{speed}}s 周期・linear・無限ループで左から右へ光を通す(JS不要)
- 骨組みの寸法は実コンテンツと一致させ、差し替え時のレイアウトシフトをゼロにする
- 読み込みが終わったら周期の完了を待たず即座に実コンテンツへ差し替える
- prefers-reduced-motion 時はシマーを止め、静止したスケルトンのみ表示する

読み込み中のプレースホルダに skeleton shimmer を実装してください。

- 実コンテンツと同じレイアウト・同じ寸法の骨組み(角丸矩形と円)を薄いグレーで置く
- 各ブロックに 105deg の linear-gradient(透明→ハイライト→透明)を background-size: 200% 100% で敷き、光の帯の幅はブロック幅の {{width}}% にする
- background-position をCSSキーフレームで動かし、{{speed}}s 周期・linear・無限ループで左から右へ光を通す(JS不要)
- 骨組みの寸法は実コンテンツと一致させ、差し替え時のレイアウトシフトをゼロにする
- 読み込みが終わったら周期の完了を待たず即座に実コンテンツへ差し替える
- prefers-reduced-motion 時はシマーを止め、静止したスケルトンのみ表示する

読み込み中のプレースホルダに skeleton shimmer を実装してください。

- 実コンテンツと同じレイアウト・同じ寸法の骨組み(角丸矩形と円)を薄いグレーで置く
- 各ブロックに 105deg の linear-gradient(透明→ハイライト→透明)を background-size: 200% 100% で敷き、光の帯の幅はブロック幅の {{width}}% にする
- background-position をCSSキーフレームで動かし、{{speed}}s 周期・linear・無限ループで左から右へ光を通す(JS不要)
- 骨組みの寸法は実コンテンツと一致させ、差し替え時のレイアウトシフトをゼロにする
- 読み込みが終わったら周期の完了を待たず即座に実コンテンツへ差し替える
- prefers-reduced-motion 時はシマーを止め、静止したスケルトンのみ表示する

03 — Params

speed(シマーの周期 s) — 範囲 0.6〜3 / 初期 1.4
光が1回走る周期。1.2〜1.6sが目安。速いと焦らせ、2s超は止まって見える瞬間ができる。
width(光の幅 %) — 範囲 10〜60 / 初期 30
ブロック幅に対するハイライトの割合。20〜35%が上品。広すぎると点滅に見える。

04 — Vocab

スケルトンスクリーン — 実コンテンツの骨組みを先に見せる読み込みUI。何がどこに出るかを予告するため、スピナーより体感待ち時間が短い。
シマー(shimmer) — 骨組みの上を走る光の帯。「処理が進行中」を伝えるのはこの動きで、これが無い静止スケルトンは故障と区別がつかない。
レイアウトシフト(CLS) — 読み込み後にレイアウトがずれる量。骨組みを実寸で作れば差し替え時のずれをゼロにできる。
background-position — 敷いたグラデーションをずらして光を動かす手軽な方式。要素数が多い画面では::after+translateXの方が描画負荷が軽い。

05 — NG → OK examples

言い方: 「「ローディング中はそれっぽいプレースホルダを出しといて」」

なぜNG: 形も動きも未定義。実コンテンツと寸法の違う灰色の箱が並び、読み込み完了時に画面全体がガタッとずれる。光が走らない静止した箱は「壊れて止まっている」ようにも見える。

言い方: 「「skeleton shimmerを実装。実UIと同寸の骨組みに105degのグラデーションをbackground-size 200%で敷き、background-positionのキーフレームで1.4s linear無限ループ、光の幅は30%、reduced-motion時は静止」」

なぜOK: 寸法一致・グラデーションの角度・周期・CSSのみで完結する実装方式まで指定している。「実UIと同寸」の一言がレイアウトシフトを防ぐ。