スケルトンローディング

解説

データ読み込み中に、コンテンツの形だけを灰色のプレースホルダーで先に見せる演出です。丸いアバター枠と数本のテキスト行を flex で縦に並べ、それぞれに横方向のグラデーションを敷いています。background-size を横長にし、@keyframes でその位置を左右に動かすことで、淡い光が左から右へ流れるシマー（きらめき）効果が生まれます。これにより「いま読み込んでいる」ことが伝わり、待ち時間が短く感じられます。CSSのみで動作し、JavaScriptは不要です。

使うと良い場面

• 一覧やカードの読み込み待ちでレイアウト崩れを防ぐ
• プロフィールやコメントの取得中の仮表示
• 画像読み込みが遅い箇所のつなぎ表示

枠の大きさや行数は実際の中身に合わせると、読み込み完了後の見た目との差が小さく自然です。グラデーションの色を変えれば暗い背景にも馴染みます。本物のコンテンツが届いたら必ず差し替える 設計が前提で、出しっぱなしにしないことが大切です。延々と光り続けると不安を与えるため、読み込みが長引く場合はエラーや再試行の案内に切り替える配慮が必要です。動きが苦手な利用者へは prefers-reduced-motion でシマーを止め、無地の灰色にする手もあります。

使用例・適したシーン

• データ取得中の表示
• 送信ボタンクリック後のフィードバック
• 画像読み込み待ち