エンプティステートとは

一覧や検索結果に表示するものが 1 件もないときに見せる、イラストと説明文、行動ボタンのまとまり。

概要

検索結果が 0 件だったときや、通知やお気に入りがまだ 1 件も無いときなど、表示するデータが無い状態をそのまま空白にせず、状況を説明するイラストと文章で伝える部品です。「何も無い」ことを伝えるだけでなく、次に何をすればよいか（検索条件を変える、最初の項目を作るなど）を促すボタンを添えるとより親切になります。

別名

表記ゆれ：エンプティステート、空状態、データなし表示、empty state

英語の “empty state”（空の状態）をそのままカタカナにした呼び方が、デザインの現場ではよく使われます。

AI への伝え方

「データが無いときのエンプティステートを作って」で通じます。どんな行動ボタンを添えるか（検索条件をリセットする、新規作成するなど）を伝えると仕様がぶれません。

似たパーツとの違い

「エラーページ」はページ自体が見つからない・表示できないという状況を伝えるのに対し、エンプティステートはページは正しく表示されているが中身（データ）が無いという状況を伝える違いがあります。

デモ

データがありません

条件に一致する項目が見つかりませんでした。検索条件を変えてお試しください。

コード

HTML

<div class="empty-state-demo">
  <svg class="empty-state-demo__illustration" viewBox="0 0 120 100" aria-hidden="true">
    <rect x="20" y="30" width="80" height="56" rx="6" fill="none" stroke="#b3b3b3" stroke-width="3" />
    <path d="M20 46h80" stroke="#b3b3b3" stroke-width="3" />
    <line x1="45" y1="62" x2="75" y2="62" stroke="#e6e6e6" stroke-width="4" stroke-linecap="round" />
    <line x1="50" y1="72" x2="70" y2="72" stroke="#e6e6e6" stroke-width="4" stroke-linecap="round" />
    <circle cx="60" cy="18" r="10" fill="none" stroke="#0017c1" stroke-width="3" />
    <line x1="56" y1="18" x2="64" y2="18" stroke="#0017c1" stroke-width="3" stroke-linecap="round" />
  </svg>
  <p class="empty-state-demo__title">データがありません</p>
  <p class="empty-state-demo__text">条件に一致する項目が見つかりませんでした。検索条件を変えてお試しください。</p>
  <button type="button" class="empty-state-demo__button">検索条件をリセット</button>
</div>

CSS

.empty-state-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  font-family: sans-serif;
  color: #333333;
}

.empty-state-demo__illustration {
  width: 100px;
  height: 84px;
  margin-bottom: 8px;
}

.empty-state-demo__title {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #212121;
}

.empty-state-demo__text {
  margin: 0 0 16px;
  max-width: 320px;
  font-size: 13px;
  color: #666666;
  line-height: 1.7;
}

.empty-state-demo__button {
  padding: 8px 18px;
  border: 1px solid #0017c1;
  border-radius: 8px;
  background: #fff;
  color: #0017c1;
  font-size: 13px;
  cursor: pointer;
}

.empty-state-demo__button:hover {
  background: #f2f2f2;
}