S-008 Feedback simple

How to create a empty state 空状態表示の作り方

Empty state UI with illustration and description for zero-data cases. データがない場合に表示するイラスト付きのエンプティステート。

ライブデモ Live Demo

データが見つかりません No data found

まだプロジェクトが作成されていません。新しいプロジェクトを作成して始めましょう。 You haven't created any projects yet. Create a new project to get started.

新規作成 Create New

アイコンサイズ (Size) Icon Size (px)

アイコン色 (Color) Icon Color

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Empty state UI with illustration and description for zero-data cases.

データがない場合に表示するイラスト付きのエンプティステート。

どこで使うかWhere to use

web application, marketing page

空の検索結果、空のカート、未完了タスクリスト、新規ユーザーオンボーディング

特徴Key features

Empty state illustration with icon, heading, body text, and CTA button. Communicates zero-data states clearly. Flexible layout adapts to any container size. Easily customizable icon, copy, and button.

アイコン・見出し・本文・CTAボタンを持つ空の状態イラスト。ゼロデータ状態を明確に伝達。柔軟なレイアウトが任意のコンテナサイズに適応。アイコン・コピー・ボタンを簡単にカスタマイズ可能。

調整可能パラメータ Adjustable Parameters

Parameter	Default	Description
`--icon-size`	—	Icon size
`--icon-color`	—	Icon color

実装コード Implementation Code

// react/S-008.jsx
import './S-008.css';

export default function EmptyState({ icon = '📂', title, description, actionText, onAction }) {
  return (
    <div className="empty-container">
      <div className="empty-icon">{icon}</div>
      <h3 className="empty-title">{title}</h3>
      <p className="empty-description">{description}</p>
      {actionText && (
        <button className="empty-action" onClick={onAction}>{actionText}</button>
      )}
    </div>
  );
}

/* react/S-008.css */
/* S-008: React styles */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  border: 1px solid #e0e4f0;
  border-radius: 16px;
}

.empty-icon {
  width: 120px;
  height: 120px;
  background: #f5f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 48px;
  color: #5c6184;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.empty-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #1d2242;
}

.empty-description {
  color: #5c6184;
  max-width: 300px;
  margin: 0 0 24px;
  line-height: 1.6;
}

.empty-action {
  background: #5c6ac4;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.empty-action:hover {
  background: #4f5cb3;
  transform: translateY(-2px);
}

import './S-008.css';

export default function EmptyState({ icon = '📂', title, description, actionText, onAction }) {
  return (
    <div className="empty-container">
      <div className="empty-icon">{icon}</div>
      <h3 className="empty-title">{title}</h3>
      <p className="empty-description">{description}</p>
      {actionText && (
        <button className="empty-action" onClick={onAction}>{actionText}</button>
      )}
    </div>
  );
}

/* S-008: React styles */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  border: 1px solid #e0e4f0;
  border-radius: 16px;
}

.empty-icon {
  width: 120px;
  height: 120px;
  background: #f5f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 48px;
  color: #5c6184;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.empty-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #1d2242;
}

.empty-description {
  color: #5c6184;
  max-width: 300px;
  margin: 0 0 24px;
  line-height: 1.6;
}

.empty-action {
  background: #5c6ac4;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.empty-action:hover {
  background: #4f5cb3;
  transform: translateY(-2px);
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

A centered flexbox column holds an SVG icon (or illustration), an h2 heading, a p description, and an optional CTA button. The icon uses muted color (--muted) and a large size (80-120px). The heading and body are centered with max-width for readability. The CTA guides users to the next action.

センタリングされたflexboxカラムがSVGアイコン（またはイラスト）・h2見出し・p説明・オプションのCTAボタンを保持。アイコンはミュートカラー（--muted）と大きいサイズ（80〜120px）を使用。見出しと本文は読みやすさのためmax-widthでセンタリング。CTAがユーザーを次のアクションに誘導。

カスタマイズ方法Customization

Swap the generic icon for a context-specific SVG (empty inbox, no results, etc.). Vary the copy based on why the state is empty (no items created, no search results, no permissions). Add a subtle background illustration or pattern behind the empty state.

汎用アイコンをコンテキスト固有のSVG（空の受信トレイ、結果なし等）に交換。空の状態の理由に基づいてコピーを変える（アイテムが作成されていない、検索結果なし、権限なし）。空の状態の後ろに微妙な背景イラストやパターンを追加。

注意点Caveats

Empty states are informational — ensure the heading and body text are descriptive enough for screen reader users to understand why the state is empty and what action to take. Do not use empty states for error conditions — use an error state component instead.

空の状態は情報提供的なものです — スクリーンリーダーユーザーが空の状態の理由と取るべきアクションを理解するために見出しと本文テキストが十分に説明的であることを確認してください。エラー状態に空の状態を使用しないでください — 代わりにエラー状態コンポーネントを使用してください。

よくある質問 Frequently Asked Questions

How to customize the empty state? Empty Stateをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the empty state in React? ReactでEmpty Stateを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of empty state? Empty Stateのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.

以下のUIパターンを実装してください。

- パターンID: S-008
- パターン名: 空状態表示
- 参照URL: https://devsnips.dev/snippets/empty-state/
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: S-008
- Pattern Name: Empty State
- Reference URL: https://devsnips.dev/snippets/empty-state/
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]