スケルトンスクリーン Skeleton Screen

コンテンツの読み込み中にレイアウトのプレースホルダーを表示する。UXの体感速度を向上させる。

使用場面: コンテンツ読み込み中の待機画面、初期ロード時 採用例: Facebook, YouTube

ライブデモ

ソースコード

<div class="demo-skeleton-examples">
  <div class="demo-skeleton-card">
    <div class="demo-skeleton-image demo-skeleton-shimmer"></div>
    <div class="demo-skeleton-card-body">
      <div class="demo-skeleton-line demo-skeleton-shimmer" style="width:60%;"></div>
      <div class="demo-skeleton-line demo-skeleton-shimmer" style="width:90%;"></div>
      <div class="demo-skeleton-line demo-skeleton-shimmer" style="width:40%;"></div>
    </div>
  </div>
  <div class="demo-skeleton-list">
    <div class="demo-skeleton-list-item">
      <div class="demo-skeleton-avatar demo-skeleton-shimmer"></div>
      <div style="flex:1;">
        <div class="demo-skeleton-line demo-skeleton-shimmer" style="width:50%;"></div>
        <div class="demo-skeleton-line demo-skeleton-shimmer" style="width:80%;height:8px;"></div>
      </div>
    </div>
    <div class="demo-skeleton-list-item">
      <div class="demo-skeleton-avatar demo-skeleton-shimmer"></div>
      <div style="flex:1;">
        <div class="demo-skeleton-line demo-skeleton-shimmer" style="width:70%;"></div>
        <div class="demo-skeleton-line demo-skeleton-shimmer" style="width:60%;height:8px;"></div>
      </div>
    </div>
  </div>
</div>
.demo-skeleton-examples { display: flex; gap: 24px; flex-wrap: wrap; }
.demo-skeleton-shimmer {
  background: linear-gradient(90deg, #e5e7eb 25%, color-mix(in srgb, var(--ui-primary) 6%, #f3f4f6) 50%, #e5e7eb 75%);
  background-size: 200% 100%; animation: demo-shimmer 1.5s infinite;
}
@keyframes demo-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.demo-skeleton-card {
  width: 200px; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
}
.demo-skeleton-image { height: 100px; }
.demo-skeleton-card-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.demo-skeleton-line { height: 12px; border-radius: 6px; }
.demo-skeleton-list { display: flex; flex-direction: column; gap: 14px; min-width: 220px; }
.demo-skeleton-list-item { display: flex; gap: 12px; align-items: center; }
.demo-skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }

AIプロンプト

Basic 
スケルトンスクリーンをHTML/CSSで作ってください。コンテンツ読み込み中のプレースホルダーです。
Custom 
以下の仕様でスケルトンスクリーンを実装してください。
- シマーアニメーション（左から右への光の流れ）
- カード型スケルトン（画像 + テキスト行）
- リスト型スケルトン（アバター + テキスト）
- プライマリカラー: #2563eb（シマーの光部分に微量使用）
- 角の丸み
- コンテンツの形状に合わせた要素
Advanced 
パフォーマンス最適化されたスケルトンを実装してください。
- CSSのみ（JSなし）でアニメーション
- will-change, transform ベースでGPU加速
- prefers-reduced-motion でアニメーション停止（静的グレー表示）
- aria-busy="true" + aria-label="読み込み中"
- コンテンツが読み込まれたらフェードトランジションで切り替え
- 複数パターン（記事、プロフィール、テーブル行）
- CSS Custom Properties でカスタマイズ可能
- @layer でCSS優先度を管理
← カタログに戻る