Component Gallery

フィードバック

空の状態（Empty State）UIとは？

空の状態（Empty State）は、データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

空の状態（Empty State）は、データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。

自前UIプレビュー

空の状態の役割と状態を確認するための簡易プレビューです。外部サイトの画像転載ではなく、Component Gallery側で作成したHTML/CSS表現です。

使うべき場面

  • ・空の状態の役割が画面上で明確で、ユーザーの次の行動を支援したいとき。
  • ・同じUIパターンを複数画面で再利用し、学習コストを下げたいとき。
  • ・状態、エラー、読み込み、無効化などを一貫したルールで扱いたいとき。

使わない方がよい場面

  • ・単なる装飾として置くだけで、ユーザーの目的に関係しないとき。
  • ・既存のOS標準やフォーム要素で十分に伝わるのに、独自UIで複雑にしてしまうとき。
  • ・アクセシビリティやキーボード操作を担保できない状態で本番利用するとき。

構成要素

  • ・ラベルまたは主要テキスト
  • ・状態表現（通常、hover、focus、disabled、error、loading）
  • ・補助テキストまたはアイコン
  • ・操作後のフィードバック

アクセシビリティ

  • ・キーボードだけで操作できることを確認する。
  • ・フォーカス位置が視覚的に分かるようにする。
  • ・読み上げに必要なラベル、説明、状態をHTMLで表現する。
  • ・色だけに依存せず、テキストや形でも状態を伝える。

よくある失敗

  • ・見た目のバリエーションだけを増やし、使い分けルールがない。
  • ・エラー・空状態・読み込み中の表示が後回しになる。
  • ・モバイル幅でラベルやコード例がはみ出す。

デザインシステム比較

デザインシステム参照先見るポイント
Apple HIG公式を見るiOS/macOS文脈での操作感、階層、アクセシビリティを確認する基準。
Material 3公式を見るAndroid/Webでの状態表現、モーション、コンポーネント仕様を比較する基準。
Fluent UI公式を見る業務アプリ、管理画面、Microsoft製品に近いUIの比較基準。
shadcn/ui公式を見るReact + Tailwind CSSで実装する際の実用的な構成例。

実装例

Reactで空の状態を実装する

まずは意味のあるHTML構造とフォーカス状態を優先し、装飾は後から調整する。

export function EmptyStateExample() {
  return <div className="rounded-md border p-4">空の状態のUI</div>;
}

HTML/CSSで空の状態を設計する

AIに渡す前のワイヤーとして、役割・ラベル・状態を明示する。

<section class="ui-component" aria-label="空の状態">
  空の状態のUI
</section>

Flutterで空の状態を実装する

Material標準の状態・タップ領域・セマンティクスを優先して組み立てる。

class EmptyStateExample extends StatelessWidget {
  const EmptyStateExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const Card(child: Padding(padding: EdgeInsets.all(16), child: Text("空の状態のUI")));
  }
}

SwiftUIで空の状態を実装する

Apple標準の余白、Dynamic Type、VoiceOverでの読み上げを確認する。

struct EmptyStateExample: View {
  var body: some View {
    Text("空の状態のUI")
      .padding()
      .background(.regularMaterial)
      .clipShape(RoundedRectangle(cornerRadius: 8))
  }
}

AI実装プロンプト

実装プロンプト

空の状態（Empty State）を、アクセシビリティとキーボード操作を考慮してReact + Tailwind CSSで実装してください。使う場面、状態、エラー時の表示、モバイル表示も含めてください。

比較プロンプト

空の状態（Empty State）について、Apple HIG、Material Design、Fluent UI、shadcn/uiの設計思想の違いを比較し、どのプロダクトでどれを参考にすべきか整理してください。

関連コンポーネント

トースト（Toast）トースト（Toast）は、画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。スピナー（Spinner）スピナー（Spinner）は、非同期処理や読み込み中であることをアニメーションで示すコンポーネント。ローディング・インジケーター・プログレスとも呼ばれる。アラート（Alert）アラート（Alert）は、エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。スケルトン（Skeleton）スケルトン（Skeleton）は、コンテンツ読み込み中にレイアウトの骨格をアニメーション表示するプレースホルダーコンポーネント。スピナーより体感速度が速く感じられる。

関連画面

設定画面（Settings Screen）設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。ダッシュボード画面（Dashboard Screen）ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。

比較・実装レシピ

空の状態のデザインシステム比較Apple、Material、Fluent、shadcn/uiの見方を比較します。空の状態をReactで実装するReact + Tailwind CSS向けの実装レシピです。

関連ハブ

フィードバックUIフィードバックUIは、処理結果、エラー、読み込み、警告をユーザーに伝え、次の行動を判断できるようにするUIです。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

空の状態とは何ですか？

空の状態（Empty State）は、ユーザーが目的の操作や情報理解を進めるためのUIコンポーネントです。画面内での役割、状態、アクセシビリティを合わせて設計します。

空の状態を設計するときに最初に決めることは？

最初に決めるべきなのは、見た目ではなくユーザーが達成したい目的、表示する状態、操作後のフィードバックです。

空の状態の実装でよくある失敗は？

状態名やラベルが曖昧なまま装飾から作り始めることです。読み上げ、キーボード操作、エラー表示、モバイル幅を先に確認します。