【UIパーツ大全】エンプティステート[empty state]参考パーツ一覧

「エンプティステート（Empty State）」は軽視されがちな要素ですが、ユーザー体験を左右する重要なUIパーツの一つです。本記事ではエンプティステートの役割と効果的な設計ポイントを解説し、実際の参考になるUIパーツの例を一覧形式で紹介します。

エンプティステートとは？

エンプティステート（Empty State）とはアプリやWebサービス上で「データがまだ存在しない状態」を示す画面です。例えば以下のような状況が該当します。

• 初めてアプリを開いたとき（データが何もない）
• 検索結果が0件だった場合
• フィルターで何もヒットしなかったとき
• 削除などの操作で全データが消えた直後

単なる「空のスペース」ではなく、ユーザーに次のアクションを促すための「ナビゲーションポイント」として設計すべきUIです。

エンプティステートの役割

ユーザーに状況を説明する

• なぜ画面に何も表示されていないのか、明確な理由を提示します。

次のアクションを示す

• 例えば「新しいタスクを作成してください」など、具体的な次のステップを提示。

サービスの価値を伝える

• 初回ユーザー向けにサービスの目的や価値を強調する場所として活用。

ブランドイメージの強化

• イラストやトーンをブランドに合わせて調整することで、世界観を統一できます。

良いエンプティステートの条件

簡潔なメッセージ
→ 一目で状況が把握できる短い文章を使う。

視覚的ヒント
→ イラストやアイコンで感覚的にも「空」を表現。

行動を促すCTA（Call To Action）
→ たとえば「＋新規作成」など、すぐに行動できるボタンを配置。

ネガティブ感を減らす工夫
→ 「データがありません」と突き放すのではなく、前向きな言い回しで表現。

エンプティステートのデザインパターン一覧

具体的なエンプティステートのデザイン例をカテゴリ別に紹介します。各例には設計の意図やベストプラクティスも添えています。

初回起動時のエンプティステート

パターン例

• イラスト＋「まだ〇〇がありません」＋「新規追加ボタン」
• アニメーション付きの説明ツアーを表示

ベストプラクティス

• 不安を与えない言葉選び
• 操作方法やメリットを視覚的に説明
• ボタンに色をつけてクリック誘導を明確に

検索結果ゼロ時

パターン例

• 虫眼鏡のアイコン＋「一致する結果はありません」
• 「キーワードを変えてみてください」などのヒント

ベストプラクティス

• 否定的な表現を避ける
• 検索補助機能（例：人気のキーワード）と組み合わせる

フィルタリング結果が空の場合

パターン例

• スマートに「フィルター条件が厳しすぎるかも？」と示唆
• 「フィルターをリセット」ボタンの設置

ベストプラクティス

• ユーザーの設定を否定せず、やさしく導く
• 条件の一部を可視化するUIがあると親切

エラーハンドリング用エンプティステート

パターン例

• 雲のイラスト＋「読み込みに失敗しました」＋「再読み込み」ボタン

ベストプラクティス

• 原因は詳しく説明せず、次のステップを示す
• 再試行できるUIアクションを必ず用意

削除後・完了後のエンプティステート

パターン例

• 「おめでとうございます！すべて完了しました」＋ガッツポーズのキャラ
• 「ここには何もありません。リラックスしてOK！」

ベストプラクティス

• 作業完了をポジティブに演出
• 次のアクションへの動線も忘れずに（例：別のタスクへ誘導）

エンプティステートライブラリ

以下のデザインシステムやライブラリでも、質の高いエンプティステートパーツが収録されています。

まとめ

エンプティステートは単なる空白の画面ではなく、ユーザーの体験をスムーズにするためのナビゲーションです。効果的なエンプティステートはユーザーに安心感を与え、目的達成への道筋を示します。

良いエンプティステートをデザインすることは結果的にサービス全体のUXを底上げすることに直結します。

今後のUI設計においては情報が「ない」状態にも価値を持たせることを忘れずに設計していきましょう。