Component Gallery

Glossary

空状態とエラー状態の違い

Empty State vs Error State

30秒でわかる要点

空状態はデータがない通常状態、エラー状態は処理失敗や取得失敗で本来の内容を表示できない状態です。

使い分けのポイント

  • ・空状態は次の行動を提案する
  • ・エラー状態は原因と復旧方法を示す
  • ・両方を同じ「ありません」で済ませない

関連コンポーネント

空の状態（Empty State）空の状態（Empty State）は、データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。アラート（Alert）アラート（Alert）は、エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。

運営・更新・参照元

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

参照元

FAQ

空状態とエラー状態の違いはどう使い分けますか？

空状態はデータがない通常状態、エラー状態は処理失敗や取得失敗で本来の内容を表示できない状態です。 実装時は、ユーザーが何を判断・入力・移動したいのかを基準に選びます。

空状態とエラー状態の違いでよくある誤解は何ですか？

空状態は次の行動を提案する

空状態とエラー状態の違いをチームで統一するには？

デザインシステムやUI用語集で推奨名、別名、使う場面、使わない場面を明記し、画面レビュー時に同じ呼称を使います。