Web Design Lab ← ギャラリーへ
ローダー & スケルトン 中級

スケルトンスクリーン

読み込み中はプレースホルダを表示し、データ取得後に実コンテンツへフェードで差し替えるカードUI。商品リストやプロフィールの体感速度向上に使えます。

#css#javascript#skeleton#ux

ライブデモ

使用例（お題: カフェ MOON BREW）

この技法を「カフェ MOON BREW」というテーマのダミーサイトで実際に使った例です。

HTML 
<!-- MOON BREW：本日のおすすめメニュー。読み込み中はスケルトン→完了で実カードへ -->
<div class="mb-menu">
  <header class="mb-menu__bar">
    <span class="mb-menu__logo"><span class="mb-menu__moon">☾</span> MOON BREW</span>
    <span class="mb-menu__sub">本日のおすすめ</span>
  </header>

  <div class="mb-grid" id="mbGrid" data-state="loading">
    <!-- カードは状態でスケルトン/実体を切り替え -->
    <article class="mb-card">
      <div class="mb-skel" aria-hidden="true">
        <div class="mb-skel__thumb shimmer"></div>
        <div class="mb-skel__line shimmer" style="--w:80%"></div>
        <div class="mb-skel__line shimmer" style="--w:55%"></div>
        <div class="mb-skel__price shimmer"></div>
      </div>
      <div class="mb-real">
        <div class="mb-real__thumb" style="--img:url('https://picsum.photos/240/180?random=51')"></div>
        <h3 class="mb-real__name">ハニーカフェラテ</h3>
        <p class="mb-real__desc">深煎りエスプレッソに国産はちみつのコク。</p>
        <p class="mb-real__price">¥620</p>
      </div>
    </article>

    <article class="mb-card">
      <div class="mb-skel" aria-hidden="true">
        <div class="mb-skel__thumb shimmer"></div>
        <div class="mb-skel__line shimmer" style="--w:75%"></div>
        <div class="mb-skel__line shimmer" style="--w:60%"></div>
        <div class="mb-skel__price shimmer"></div>
      </div>
      <div class="mb-real">
        <div class="mb-real__thumb" style="--img:url('https://picsum.photos/240/180?random=52')"></div>
        <h3 class="mb-real__name">琥珀カプチーノ</h3>
        <p class="mb-real__desc">きめ細かなフォームと焦がしカラメルの香り。</p>
        <p class="mb-real__price">¥580</p>
      </div>
    </article>
  </div>

  <button class="mb-reload" id="mbReload" type="button">メニューを更新</button>
</div>
CSS 
/* MOON BREW：メニュー読み込み（スケルトン→実カード） */
:root {
  --cream: #f5ede1;
  --brown: #2b1d12;
  --amber: #c98a3b;
  --base: #e7dccb;
  --hi: #f7f1e6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 400px;
  display: grid;
  place-items: center;
  font-family: "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  background: var(--cream);
  color: var(--brown);
  overflow: hidden;
}

.mb-menu {
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

/* ヘッダー */
.mb-menu__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.mb-menu__logo {
  font-family: "Hiragino Mincho ProN", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.mb-menu__moon { color: var(--amber); }
.mb-menu__sub { font-size: 11px; color: var(--amber); letter-spacing: 0.12em; }

/* カードグリッド */
.mb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mb-card {
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(43, 29, 18, 0.08);
}

/* 状態で表示切り替え */
.mb-skel, .mb-real { display: contents; }
.mb-grid[data-state="loading"] .mb-real { display: none; }
.mb-grid[data-state="ready"] .mb-skel { display: none; }

/* スケルトン */
.mb-skel__thumb {
  height: 84px;
  border-radius: 12px;
  background: var(--base);
}
.mb-skel__line {
  height: 11px;
  width: var(--w, 100%);
  margin-top: 9px;
  border-radius: 6px;
  background: var(--base);
}
.mb-skel__price {
  height: 14px;
  width: 40%;
  margin-top: 10px;
  border-radius: 6px;
  background: var(--base);
}

/* シマー（光沢が流れる） */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--hi), transparent);
  animation: mb-shimmer 1.4s infinite;
}
@keyframes mb-shimmer { 100% { transform: translateX(100%); } }

/* 実コンテンツ */
.mb-real__thumb {
  height: 84px;
  border-radius: 12px;
  background: var(--img) center/cover no-repeat, var(--base);
}
.mb-real__name { margin: 9px 0 4px; font-size: 14px; }
.mb-real__desc { margin: 0; font-size: 11px; line-height: 1.5; color: #6d5b49; }
.mb-real__price { margin: 8px 0 2px; font-size: 15px; font-weight: 700; color: var(--amber); }

.mb-grid[data-state="ready"] .mb-real { animation: mb-fade 0.5s ease both; }
@keyframes mb-fade { from { opacity: 0; transform: translateY(5px); } }

/* 更新ボタン */
.mb-reload {
  align-self: center;
  border: 1px solid rgba(43, 29, 18, 0.18);
  background: #fff;
  color: var(--brown);
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.mb-reload:hover { background: var(--amber); color: #fff; border-color: var(--amber); }
.mb-reload:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  .shimmer::after { animation: none; opacity: 0.5; }
  .mb-grid[data-state="ready"] .mb-real { animation: none; }
}
JavaScript 
// MOON BREW メニュー：スケルトン → 実カードへ（疑似フェッチ・ループ可）
const grid = document.getElementById('mbGrid');
const reload = document.getElementById('mbReload');

// 一定時間後にデータ取得完了とみなす
function loadMenu() {
  if (!grid) return;
  grid.dataset.state = 'loading';
  setTimeout(() => { grid.dataset.state = 'ready'; }, 1700);
}

// 更新ボタンで再読み込み
reload?.addEventListener('click', loadMenu);

// 初回起動
loadMenu();

コード

HTML 
<!-- スケルトンスクリーン: 読み込み中はプレースホルダ、完了で実コンテンツへ差し替え -->
<div class="sk-stage">
  <div class="sk-card" id="skCard" data-state="loading">
    <!-- ローディング表示（スケルトン） -->
    <div class="sk-skeleton" aria-hidden="true">
      <div class="sk-thumb shimmer"></div>
      <div class="sk-lines">
        <div class="sk-line shimmer" style="--w:90%"></div>
        <div class="sk-line shimmer" style="--w:70%"></div>
        <div class="sk-line shimmer" style="--w:55%"></div>
        <div class="sk-chips">
          <span class="sk-chip shimmer"></span>
          <span class="sk-chip shimmer"></span>
        </div>
      </div>
    </div>
    <!-- 実コンテンツ（読み込み完了後） -->
    <div class="sk-real">
      <div class="sk-thumb sk-thumb--real"></div>
      <div class="sk-lines">
        <h3 class="sk-title">北欧デザインの椅子</h3>
        <p class="sk-text">職人が手仕上げしたオーク材のチェア。やわらかな曲線が長時間の座り心地を支えます。</p>
        <div class="sk-chips">
          <span class="sk-chip sk-chip--real">送料無料</span>
          <span class="sk-chip sk-chip--real">在庫あり</span>
        </div>
      </div>
    </div>
  </div>
  <button class="sk-reload" id="skReload" type="button">再読み込み</button>
</div>
CSS 
:root {
  --bg: #0f1226;
  --card: #1a1f3c;
  --line: #2a3160;
  --base: #232a55;
  --hi: #313a72;
  --accent: #7c8cff;
  --txt: #e8ebff;
  --muted: #9aa3d8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(1200px 400px at 50% -10%, #2a2f63 0%, transparent 60%),
    var(--bg);
  color: var(--txt);
}
.sk-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px;
}
.sk-card {
  width: 340px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
}
/* スケルトンと実体を状態で切り替え */
.sk-skeleton, .sk-real { display: contents; }
.sk-card[data-state="loading"] .sk-real { display: none; }
.sk-card[data-state="ready"]   .sk-skeleton { display: none; }

.sk-thumb {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  background: var(--base);
}
.sk-thumb--real {
  background:
    conic-gradient(from 200deg, #ffb86b, #ff7eb6, #7c8cff, #ffb86b);
}
.sk-lines { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sk-line {
  height: 12px;
  width: var(--w, 100%);
  border-radius: 6px;
  background: var(--base);
}
.sk-chips { display: flex; gap: 8px; margin-top: 6px; }
.sk-chip {
  width: 64px;
  height: 22px;
  border-radius: 999px;
  background: var(--base);
}
/* シマー（光沢が流れるアニメーション） */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--hi), transparent);
  animation: sk-shimmer 1.4s infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }

.sk-title { margin: 0; font-size: 16px; letter-spacing: .02em; }
.sk-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.sk-chip--real {
  width: auto;
  padding: 0 12px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  color: var(--accent);
  background: rgba(124, 140, 255, .14);
  border: 1px solid rgba(124, 140, 255, .35);
}
.sk-card[data-state="ready"] .sk-real { animation: sk-fade .5s ease both; }
@keyframes sk-fade { from { opacity: 0; transform: translateY(4px); } }

.sk-reload {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--txt);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.sk-reload:hover { background: var(--hi); }
.sk-reload:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .shimmer::after { animation: none; opacity: .5; }
  .sk-card[data-state="ready"] .sk-real { animation: none; }
}
JavaScript 
// スケルトン → 実コンテンツへ自動で切り替えるデモ
const card = document.getElementById('skCard');
const reload = document.getElementById('skReload');

// 一定時間後にデータ取得完了とみなす（疑似フェッチ）
function loadContent() {
  if (!card) return;
  card.dataset.state = 'loading';
  // 1.8秒後に ready へ
  setTimeout(() => { card.dataset.state = 'ready'; }, 1800);
}

// 再読み込みボタン
reload?.addEventListener('click', loadContent);

// 初回起動
loadContent();

🤖 AIエージェント用プロンプト

このままコピーしてAIに貼り付け「追加する場所」だけ書き換えればOK
あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「スケルトンスクリーン」の効果を追加してください。

# 追加してほしい効果
スケルトンスクリーン（ローダー & スケルトン）
読み込み中はプレースホルダを表示し、データ取得後に実コンテンツへフェードで差し替えるカードUI。商品リストやプロフィールの体感速度向上に使えます。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- スケルトンスクリーン: 読み込み中はプレースホルダ、完了で実コンテンツへ差し替え -->
<div class="sk-stage">
  <div class="sk-card" id="skCard" data-state="loading">
    <!-- ローディング表示（スケルトン） -->
    <div class="sk-skeleton" aria-hidden="true">
      <div class="sk-thumb shimmer"></div>
      <div class="sk-lines">
        <div class="sk-line shimmer" style="--w:90%"></div>
        <div class="sk-line shimmer" style="--w:70%"></div>
        <div class="sk-line shimmer" style="--w:55%"></div>
        <div class="sk-chips">
          <span class="sk-chip shimmer"></span>
          <span class="sk-chip shimmer"></span>
        </div>
      </div>
    </div>
    <!-- 実コンテンツ（読み込み完了後） -->
    <div class="sk-real">
      <div class="sk-thumb sk-thumb--real"></div>
      <div class="sk-lines">
        <h3 class="sk-title">北欧デザインの椅子</h3>
        <p class="sk-text">職人が手仕上げしたオーク材のチェア。やわらかな曲線が長時間の座り心地を支えます。</p>
        <div class="sk-chips">
          <span class="sk-chip sk-chip--real">送料無料</span>
          <span class="sk-chip sk-chip--real">在庫あり</span>
        </div>
      </div>
    </div>
  </div>
  <button class="sk-reload" id="skReload" type="button">再読み込み</button>
</div>

【CSS】
:root {
  --bg: #0f1226;
  --card: #1a1f3c;
  --line: #2a3160;
  --base: #232a55;
  --hi: #313a72;
  --accent: #7c8cff;
  --txt: #e8ebff;
  --muted: #9aa3d8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(1200px 400px at 50% -10%, #2a2f63 0%, transparent 60%),
    var(--bg);
  color: var(--txt);
}
.sk-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px;
}
.sk-card {
  width: 340px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
}
/* スケルトンと実体を状態で切り替え */
.sk-skeleton, .sk-real { display: contents; }
.sk-card[data-state="loading"] .sk-real { display: none; }
.sk-card[data-state="ready"]   .sk-skeleton { display: none; }

.sk-thumb {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  background: var(--base);
}
.sk-thumb--real {
  background:
    conic-gradient(from 200deg, #ffb86b, #ff7eb6, #7c8cff, #ffb86b);
}
.sk-lines { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sk-line {
  height: 12px;
  width: var(--w, 100%);
  border-radius: 6px;
  background: var(--base);
}
.sk-chips { display: flex; gap: 8px; margin-top: 6px; }
.sk-chip {
  width: 64px;
  height: 22px;
  border-radius: 999px;
  background: var(--base);
}
/* シマー（光沢が流れるアニメーション） */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--hi), transparent);
  animation: sk-shimmer 1.4s infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }

.sk-title { margin: 0; font-size: 16px; letter-spacing: .02em; }
.sk-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.sk-chip--real {
  width: auto;
  padding: 0 12px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  color: var(--accent);
  background: rgba(124, 140, 255, .14);
  border: 1px solid rgba(124, 140, 255, .35);
}
.sk-card[data-state="ready"] .sk-real { animation: sk-fade .5s ease both; }
@keyframes sk-fade { from { opacity: 0; transform: translateY(4px); } }

.sk-reload {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--txt);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.sk-reload:hover { background: var(--hi); }
.sk-reload:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .shimmer::after { animation: none; opacity: .5; }
  .sk-card[data-state="ready"] .sk-real { animation: none; }
}

【JavaScript】
// スケルトン → 実コンテンツへ自動で切り替えるデモ
const card = document.getElementById('skCard');
const reload = document.getElementById('skReload');

// 一定時間後にデータ取得完了とみなす（疑似フェッチ）
function loadContent() {
  if (!card) return;
  card.dataset.state = 'loading';
  // 1.8秒後に ready へ
  setTimeout(() => { card.dataset.state = 'ready'; }, 1800);
}

// 再読み込みボタン
reload?.addEventListener('click', loadContent);

// 初回起動
loadContent();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。
ローダー & スケルトン
各種スピナー集
リング・デュアル・オービット・バー・パルス・キューブの6種を純CSSで実装したスピナー詰め合わせ。用途に合うローディング表現をすぐ選べます。
ローダー & スケルトン
プログレスバー
不規則に進む疑似アップロードをパーセントとMB表示で見せる進捗バー。グラデーションが流れ完了状態も色で表現します。fetch進捗の可視化に最適。
ローダー & スケルトン
シマー効果
光沢グラデーションが左から右へ流れるプレースホルダのリスト。行ごとに位相をずらし波打たせた、ライトテーマのローディング表現です。
ローダー & スケルトン
ドットローダー集
バウンド・チャット入力中・波の3パターンのドットアニメーションを純CSSで実装。軽量で省スペースな待機表現として汎用的に使えます。
ローダー & スケルトン
円形カウントダウン
SVGリングのstroke-dashoffsetを操作し残り秒を可視化する円形タイマー。完了でリングと数字が赤に変化します。リダイレクトや自動遷移の予告に。
ローダー & スケルトン
無限ループローダー
SVGの∞パス上をグラデーションの発光線がstroke-dashで滑らかに周回するローダー。ブランド感のある待機演出として印象的に使えます。
ローダー & スケルトン
円形パーセントローダー
conic-gradientとrequestAnimationFrameでなめらかにカウントアップする円形プログレス。イージングと完了時のグロー演出付き。初回ローディング画面に。
ローダー & スケルトン
オープニング演出（イントロ→本編表示）
全画面のイントロ画面でブランド名とプログレスバーがカウントアップし、完了するとワイプ（clip-path）で本編コンテンツが現れる遷移演出。読み込みから本編へのつなぎを印象的に見せられます。「もう一度」ボタンでリプレイ可能。