エンプティステート Empty State

データが存在しない場合に表示するプレースホルダー画面。ユーザーに次のアクションを案内する。

使用場面: 検索結果ゼロ、初期状態のリスト、エラー発生時など、コンテンツが空の場面 採用例: Notion, Dropbox

ライブデモ

プロジェクトがまだありません
新しいプロジェクトを作成して、チームとコラボレーションを始めましょう。
使い方を見る →

ソースコード

<div class="demo-empty">
  <div class="demo-empty-illustration">
    <svg class="demo-empty-svg" viewBox="0 0 120 100" fill="none">
      <rect x="20" y="20" width="80" height="60" rx="8" stroke="var(--ui-primary)" stroke-width="2" stroke-dasharray="4 4" opacity="0.4"/>
      <circle cx="60" cy="45" r="12" fill="color-mix(in srgb, var(--ui-primary) 15%, transparent)" stroke="var(--ui-primary)" stroke-width="2"/>
      <line x1="50" y1="65" x2="70" y2="65" stroke="var(--ui-primary)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
      <line x1="45" y1="72" x2="75" y2="72" stroke="var(--ui-primary)" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
    </svg>
  </div>
  <div class="demo-empty-title">プロジェクトがまだありません</div>
  <div class="demo-empty-desc">新しいプロジェクトを作成して、チームとコラボレーションを始めましょう。</div>
  <button class="demo-empty-btn">&#43; プロジェクトを作成</button>
  <div class="demo-empty-link">使い方を見る &rarr;</div>
</div>
.demo-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 32px 16px;
}
.demo-empty-illustration { margin-bottom: 20px; }
.demo-empty-svg { width: 120px; height: 100px; }
.demo-empty-title {
  font-size: 18px; font-weight: 700; color: #333;
  margin-bottom: 8px;
}
.demo-empty-desc {
  font-size: 14px; color: #888; max-width: 320px;
  margin-bottom: 20px; line-height: 1.5;
}
.demo-empty-btn {
  padding: 10px 24px; font-size: 14px; font-weight: 600;
  color: #fff; background: var(--ui-primary);
  border: none; border-radius: 8px; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.demo-empty-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.demo-empty-link {
  margin-top: 12px; font-size: 13px;
  color: var(--ui-primary); cursor: pointer;
}
.demo-empty-link:hover { text-decoration: underline; }

AIプロンプト

Basic 
エンプティステートをHTML/CSSで作ってください。データがない時にイラスト、メッセージ、アクションボタンを中央に表示します。
Custom 
以下の仕様でエンプティステートを実装してください。
- 中央配置でSVGイラスト＋テキスト＋CTAボタン
- 3パターン（初期状態、検索結果なし、エラー発生）を切替可能
- プライマリカラー: #2563eb
- ボタンにホバーアニメーション
- サブリンクを下部に配置
- レスポンシブ対応
Advanced 
コンテキスト適応型のエンプティステートを実装してください。
- コンテキスト別の表示（初期化/検索結果0件/フィルタ結果0件/エラー/権限なし）
- SVGイラストのアニメーション（微細な動き）
- 段階的な案内表示（初回はオンボーディング、2回目以降は簡潔表示）
- ダークモード対応
- prefers-reduced-motion対応
- スクリーンリーダー向けの適切なメッセージ
- スロット方式でカスタムコンテンツを注入可能
← カタログに戻る