UI Pattern
空状態（Empty State）の設計
空状態は、まだデータがない、検索結果がない、権限がないなどの状態で次の行動を示すUIパターンです。
30秒でわかる要点
空状態は、まだデータがない、検索結果がない、権限がないなどの状態で次の行動を示すUIパターンです。
設計ガイドライン
- ・何が起きているかを書く
- ・次にできる操作を示す
- ・検索条件や権限など原因を明示する
関連コンポーネント
空の状態（Empty State）空の状態（Empty State）は、データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-16
- レビュー状態
- 未レビュー
参照元
- W3C Web Content Accessibility Guidelines (WCAG)参照確認日: 2026-07-16
- WAI-ARIA Authoring Practices Guide参照確認日: 2026-07-16
- MDN Web Docs - Accessibility参照確認日: 2026-07-16
FAQ
空状態にイラストは必要ですか？
必須ではありません。まず必要なのは理由と次の行動です。イラストは理解を助ける場合だけ使います。