シマー効果

光沢グラデーションが左から右へ流れるプレースホルダのリスト。行ごとに位相をずらし波打たせた、ライトテーマのローディング表現です。

#css#animation#skeleton#shimmer

ライブデモ

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

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

HTML

<!-- MOON BREW：豆ラインナップ。読み込み中はシマーのプレースホルダ→完了で実リスト -->
<div class="mb-beans">
  <header class="mb-beans__bar">
    <span class="mb-beans__logo"><span class="mb-beans__moon">☾</span> MOON BREW</span>
    <span class="mb-beans__sub">本日の焙煎</span>
  </header>

  <ul class="mb-list" id="mbList" data-state="loading">
    <!-- スケルトン行（シマーが流れる） -->
    <li class="mb-row mb-row--skel" aria-hidden="true"><span class="mb-row__ico shimmer"></span><span class="mb-row__body"><span class="mb-row__l shimmer" style="--w:70%"></span><span class="mb-row__l shimmer" style="--w:45%"></span></span><span class="mb-row__tag shimmer"></span></li>
    <li class="mb-row mb-row--skel" aria-hidden="true"><span class="mb-row__ico shimmer"></span><span class="mb-row__body"><span class="mb-row__l shimmer" style="--w:62%"></span><span class="mb-row__l shimmer" style="--w:50%"></span></span><span class="mb-row__tag shimmer"></span></li>
    <li class="mb-row mb-row--skel" aria-hidden="true"><span class="mb-row__ico shimmer"></span><span class="mb-row__body"><span class="mb-row__l shimmer" style="--w:75%"></span><span class="mb-row__l shimmer" style="--w:40%"></span></span><span class="mb-row__tag shimmer"></span></li>
    <li class="mb-row mb-row--skel" aria-hidden="true"><span class="mb-row__ico shimmer"></span><span class="mb-row__body"><span class="mb-row__l shimmer" style="--w:66%"></span><span class="mb-row__l shimmer" style="--w:52%"></span></span><span class="mb-row__tag shimmer"></span></li>

    <!-- 実データ -->
    <li class="mb-row mb-row--real"><span class="mb-row__ico">◗</span><span class="mb-row__body"><b>エチオピア イルガチェフェ</b><span>華やかな柑橘とフローラル</span></span><span class="mb-tag">浅煎り</span></li>
    <li class="mb-row mb-row--real"><span class="mb-row__ico">◗</span><span class="mb-row__body"><b>グァテマラ アンティグア</b><span>チョコのコクと心地よい余韻</span></span><span class="mb-tag">中煎り</span></li>
    <li class="mb-row mb-row--real"><span class="mb-row__ico">◗</span><span class="mb-row__body"><b>ケニア ニエリ AA</b><span>ジューシーな果実味と明るい酸</span></span><span class="mb-tag">中煎り</span></li>
    <li class="mb-row mb-row--real"><span class="mb-row__ico">◗</span><span class="mb-row__body"><b>マンデリン トバコ</b><span>重厚なボディとスパイシーさ</span></span><span class="mb-tag">深煎り</span></li>
  </ul>
</div>

CSS

/* MOON BREW：豆リスト読み込み（シマー → 実データ） */
:root {
  --cream: #f5ede1;
  --brown: #2b1d12;
  --amber: #c98a3b;
  --base: #e7dccb;
  --hi: #f9f4ea;
}

* { 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-beans {
  width: 330px;
  background: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 14px 34px rgba(43, 29, 18, 0.1);
}

.mb-beans__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(43, 29, 18, 0.08);
}
.mb-beans__logo {
  font-family: "Hiragino Mincho ProN", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.mb-beans__moon { color: var(--amber); }
.mb-beans__sub { font-size: 11px; color: var(--amber); letter-spacing: 0.12em; }

.mb-list { list-style: none; margin: 8px 0 0; padding: 0; }

/* 状態でスケルトン/実データを切替 */
.mb-list[data-state="loading"] .mb-row--real { display: none; }
.mb-list[data-state="ready"] .mb-row--skel { display: none; }

.mb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(43, 29, 18, 0.06);
}
.mb-row:last-child { border-bottom: 0; }

/* 行ごとに位相をずらして波打たせる */
.mb-row--skel:nth-child(1) .shimmer::after { animation-delay: 0s; }
.mb-row--skel:nth-child(2) .shimmer::after { animation-delay: 0.18s; }
.mb-row--skel:nth-child(3) .shimmer::after { animation-delay: 0.36s; }
.mb-row--skel:nth-child(4) .shimmer::after { animation-delay: 0.54s; }

.mb-row__ico {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--base);
}
.mb-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mb-row__l { height: 10px; width: var(--w, 100%); border-radius: 5px; background: var(--base); }
.mb-row__tag { flex: none; width: 44px; height: 18px; 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: mb-shimmer 1.5s infinite;
}
@keyframes mb-shimmer { 100% { transform: translateX(100%); } }

/* 実データの見た目 */
.mb-row--real .mb-row__ico {
  display: grid;
  place-items: center;
  color: var(--amber);
  font-size: 18px;
  background: rgba(201, 138, 59, 0.12);
}
.mb-row--real b { font-size: 13.5px; }
.mb-row--real .mb-row__body span { font-size: 11px; color: #6d5b49; }
.mb-tag {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--brown);
  background: rgba(43, 29, 18, 0.06);
}
.mb-list[data-state="ready"] .mb-row--real { animation: mb-fade 0.5s ease both; }
@keyframes mb-fade { from { opacity: 0; transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  .shimmer::after { animation: none; opacity: 0.5; }
  .mb-list[data-state="ready"] .mb-row--real { animation: none; }
}

JavaScript

// MOON BREW 豆リスト：シマー → 実データ（疑似フェッチ・自動ループ）
const list = document.getElementById('mbList');

// 読み込み演出を一巡させる
function cycle() {
  if (!list) return;
  list.dataset.state = 'loading';
  // 1.8秒読み込み → 完了表示
  setTimeout(() => { list.dataset.state = 'ready'; }, 1800);
}

// 完了から少し置いて再びローディングへ（ループ）
setInterval(() => {
  if (list && list.dataset.state === 'ready') cycle();
}, 4200);

// 初回起動
cycle();

コード

HTML

<!-- シマー効果: 光沢が左から右へ流れるプレースホルダのリスト表示 -->
<div class="sh-stage">
  <div class="sh-list">
    <div class="sh-row">
      <div class="sh-avatar"></div>
      <div class="sh-body">
        <div class="sh-bar" style="--w:60%"></div>
        <div class="sh-bar" style="--w:90%"></div>
        <div class="sh-bar" style="--w:75%"></div>
      </div>
      <div class="sh-badge"></div>
    </div>
    <div class="sh-row">
      <div class="sh-avatar"></div>
      <div class="sh-body">
        <div class="sh-bar" style="--w:50%"></div>
        <div class="sh-bar" style="--w:85%"></div>
        <div class="sh-bar" style="--w:65%"></div>
      </div>
      <div class="sh-badge"></div>
    </div>
    <div class="sh-row">
      <div class="sh-avatar"></div>
      <div class="sh-body">
        <div class="sh-bar" style="--w:70%"></div>
        <div class="sh-bar" style="--w:95%"></div>
        <div class="sh-bar" style="--w:55%"></div>
      </div>
      <div class="sh-badge"></div>
    </div>
  </div>
</div>

CSS

:root {
  --bg: #f4f6fb;
  --card: #ffffff;
  --base: #e7ebf3;
  --sheen: #f7f9fd;
  --shadow: rgba(60, 80, 130, .12);
}
* { 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(700px 360px at 50% -10%, #e6ecff 0%, transparent 60%),
    var(--bg);
}
.sh-stage { padding: 22px; width: 100%; display: grid; place-items: center; }
.sh-list {
  width: min(460px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sh-row {
  display: grid;
  grid-template-columns: 56px 1fr 40px;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 10px 26px var(--shadow);
}
/* シマーの土台: 流れる光沢グラデを背景アニメで表現 */
.sh-avatar, .sh-bar, .sh-badge {
  background: linear-gradient(100deg, var(--base) 30%, var(--sheen) 50%, var(--base) 70%);
  background-size: 200% 100%;
  animation: sh-slide 1.5s ease-in-out infinite;
}
.sh-avatar { width: 56px; height: 56px; border-radius: 50%; }
.sh-body { display: flex; flex-direction: column; gap: 9px; }
.sh-bar { height: 11px; width: var(--w, 100%); border-radius: 6px; }
.sh-bar:first-child { height: 13px; }
.sh-badge { width: 40px; height: 40px; border-radius: 11px; }

/* 行ごとに位相をずらして波打たせる */
.sh-row:nth-child(2) .sh-avatar,
.sh-row:nth-child(2) .sh-bar,
.sh-row:nth-child(2) .sh-badge { animation-delay: .2s; }
.sh-row:nth-child(3) .sh-avatar,
.sh-row:nth-child(3) .sh-bar,
.sh-row:nth-child(3) .sh-badge { animation-delay: .4s; }

@keyframes sh-slide {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-avatar, .sh-bar, .sh-badge { animation: none; background: var(--base); }
}

JavaScript

// このデモは純CSSのシマーアニメーションのみで動作するため JS は不要

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

このままコピーしてAIに貼り付け「追加する場所」だけ書き換えればOK

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「シマー効果」の効果を追加してください。

# 追加してほしい効果
シマー効果（ローダー & スケルトン）
光沢グラデーションが左から右へ流れるプレースホルダのリスト。行ごとに位相をずらし波打たせた、ライトテーマのローディング表現です。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- シマー効果: 光沢が左から右へ流れるプレースホルダのリスト表示 -->
<div class="sh-stage">
  <div class="sh-list">
    <div class="sh-row">
      <div class="sh-avatar"></div>
      <div class="sh-body">
        <div class="sh-bar" style="--w:60%"></div>
        <div class="sh-bar" style="--w:90%"></div>
        <div class="sh-bar" style="--w:75%"></div>
      </div>
      <div class="sh-badge"></div>
    </div>
    <div class="sh-row">
      <div class="sh-avatar"></div>
      <div class="sh-body">
        <div class="sh-bar" style="--w:50%"></div>
        <div class="sh-bar" style="--w:85%"></div>
        <div class="sh-bar" style="--w:65%"></div>
      </div>
      <div class="sh-badge"></div>
    </div>
    <div class="sh-row">
      <div class="sh-avatar"></div>
      <div class="sh-body">
        <div class="sh-bar" style="--w:70%"></div>
        <div class="sh-bar" style="--w:95%"></div>
        <div class="sh-bar" style="--w:55%"></div>
      </div>
      <div class="sh-badge"></div>
    </div>
  </div>
</div>

【CSS】
:root {
  --bg: #f4f6fb;
  --card: #ffffff;
  --base: #e7ebf3;
  --sheen: #f7f9fd;
  --shadow: rgba(60, 80, 130, .12);
}
* { 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(700px 360px at 50% -10%, #e6ecff 0%, transparent 60%),
    var(--bg);
}
.sh-stage { padding: 22px; width: 100%; display: grid; place-items: center; }
.sh-list {
  width: min(460px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sh-row {
  display: grid;
  grid-template-columns: 56px 1fr 40px;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 10px 26px var(--shadow);
}
/* シマーの土台: 流れる光沢グラデを背景アニメで表現 */
.sh-avatar, .sh-bar, .sh-badge {
  background: linear-gradient(100deg, var(--base) 30%, var(--sheen) 50%, var(--base) 70%);
  background-size: 200% 100%;
  animation: sh-slide 1.5s ease-in-out infinite;
}
.sh-avatar { width: 56px; height: 56px; border-radius: 50%; }
.sh-body { display: flex; flex-direction: column; gap: 9px; }
.sh-bar { height: 11px; width: var(--w, 100%); border-radius: 6px; }
.sh-bar:first-child { height: 13px; }
.sh-badge { width: 40px; height: 40px; border-radius: 11px; }

/* 行ごとに位相をずらして波打たせる */
.sh-row:nth-child(2) .sh-avatar,
.sh-row:nth-child(2) .sh-bar,
.sh-row:nth-child(2) .sh-badge { animation-delay: .2s; }
.sh-row:nth-child(3) .sh-avatar,
.sh-row:nth-child(3) .sh-bar,
.sh-row:nth-child(3) .sh-badge { animation-delay: .4s; }

@keyframes sh-slide {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-avatar, .sh-bar, .sh-badge { animation: none; background: var(--base); }
}

【JavaScript】
// このデモは純CSSのシマーアニメーションのみで動作するため JS は不要

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

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。

ライブデモ

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

コード

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

同じカテゴリの技法