Figmaで画面を設計するとき、ダミーデータが綺麗に入った「理想的な画面」ばかりを作り込んでしまうことはありませんか？
自分も以前は、整ったカードやリストが並ぶ完成状態ばかりを熱心に作っていました。

しかし実際のプロダクトでは、ユーザーが最初に目にするのはデータが1件も入っていない初期画面です。
ここでユーザーが迷ってしまうと、操作を諦めてそのまま離脱してしまう大きな要因になります。

1. なぜ「何もない画面」でユーザーは離脱してしまうのか？

1-1. 理想状態（Ideal State）ばかりを作り込む落とし穴

UIデザインの実務では、どうしても情報が満たされた「理想状態（Ideal State）」から作業を進めがちです。
魅力的なサムネイル画像や整ったテキストを配置したアートボードは、見栄えも良く完成度が高く見えます。

しかし、ユーザーが新しくアプリを使い始めた瞬間は、登録したタスクもブックマークも何ひとつ存在しない状態です。
画面上に何も表示されない初期状態を考慮していないと、開発フェーズで画面が真っ白なままリリースされてしまいます。

自分も以前、ステージング環境の実機を触って初めて「最初は何もない状態だった」と気づき、慌てて追加設計した経験があります。
デザインツール上の見た目だけでなく、データが存在しない初期段階の体験まで設計することが大切です。

1-2. 「データがありません」が引き起こす3つの不安

エンプティステートで最も避けるべきなのは、画面中央に「データがありません」とだけ書かれたテキストを置くことです。
このような素っ気ない表示は、ユーザーにいくつかの心理的負担を与えてしまいます。

第一に、システムの通信障害や不具合が起きたのではないかという誤解を招きます。
第二に、自分が直前の操作を間違えてしまったのではないかという操作への不安を与えてしまいます。
そして第三に、次に何をすれば画面が進むのかが分からず、操作を諦めて離脱してしまいます。

何もない画面は、単なる空白ではなく「ユーザーが次に取るべき操作へ誘導する画面」として設計する必要があります。
画面の状態を体系的に捉える考え方については、こちらの記事でも詳しく整理しています。

モーダル・ボトムシートの使い分け基準｜スマホで失敗しないUI選定ルール

スマホUIでモーダル、ボトムシート（ハーフモーダル）、ドロワー、画面遷移のどれを使うべきか迷っていませんか？操作の不可逆性と情報量の2軸で整理したUI選定マトリクスや、親指操作・キーボード干渉を防ぐ実装の黄金律を現役デザイナーが詳しく解説します。

2. 押さえておきたいエンプティステートの3大パターン

エンプティステートが発生する状況は、大きく3つの基本パターンに分類できます。
それぞれの文脈によってユーザーの心理や求める情報が異なるため、適切なアプローチを選ぶことが重要です。

2-1. パターン1：初回利用時（First Use / Onboarding）

アカウントを作成した直後や、特定の機能を初めて開いたときに表示される初期登録前の状態です。
プロジェクト一覧、作成したドキュメント、お気に入りリストなどが該当します。

このパターンの主な目的は、機能の価値を端的に伝え、ユーザーに「最初の一歩」を踏み出してもらうことです。
単に「項目がありません」と伝えるのではなく、作成すると何ができるのかを説明し、明確な作成ボタンを配置します。

NotionやSlackなどの優れたプロダクトでは、初回画面にテンプレートの選択肢や作成ガイドを表示しています。
何もない初期画面を前にユーザーが迷ってしまわないよう、最初のアクションを後押しする設計が有効です。

2-2. パターン2：タスク完了・消去後（User Cleared / Inbox Zero）

ユーザーがすべての未処理タスクを片付けたときや、通知をすべて確認したときに表示される処理完了の状態です。
メールアプリの「受信トレイ（Inbox Zero）」や、タスク管理ツールの「今日のタスク」などが典型例です。

この状態におけるユーザーの心理は、初回利用時とは異なり「やりきった達成感」や「安堵感」があります。
そのため、エラーや未登録のような表現ではなく、前向きな達成感を伝える演出が適しています。

「すべてのタスクが完了しました」といった前向きな完了メッセージを表示します。
必要に応じて、新しいタスクの追加や、過去の履歴を確認できる控えめな導線を添えておくと親切です。

2-3. パターン3：検索・フィルター結果ゼロ（No Results）

ユーザーがキーワード検索を実行したり、絞り込みフィルターを適用したりした結果、一致するデータが0件（検索結果0件）だった状態です。
ECサイトの商品一覧や、管理画面のデータ検索などで頻繁に発生します。

検索結果ゼロの画面で最も重要なのは、ユーザーを「行き止まり（Dead End）」に追い込まないことです。
「一致する商品はありません」で終わらせてしまうと、ユーザーはその場で探索を終了してしまいます。

検索条件をワンタップで解除できる「フィルターをクリアする」ボタンを用意することが基本です。
さらに、入力キーワードの表記揺れへの対策や、人気の検索キーワード、おすすめ商品を提示すると、離脱を防ぎやすくなります。

2-4. 【重要】混同しやすい「Error State（エラー状態）」との境界線

UI設計の実務において、エンプティステートと最も混同されやすいのが通信障害や権限不足などのエラー状態（Error State）です。
一部の解説ではエラーをエンプティの一種として扱うこともありますが、UI Stackの設計体系において両者は全く異なる状態として明確に区別されます。

エンプティステートは「画面に表示すべきデータが未登録、または合致しない状態」であり、システム自体は正常に動作しています。
一方でエラー状態は「通信の切断や権限不足によって、データの取得・処理そのものが中断された障害」です。

ユーザーの心理も「最初の一歩を踏み出したい」「探索をやり直したい」という能動的な感情から、「何が起きたのか分からない」「不具合ではないか」という不安や戸惑いへと大きく変化します。
そのため、案内すべき画面要素も全く異なります。

エラー画面では前向きな新規作成CTAではなく、客観的な原因の案内と、再読み込み（リトライ）や権限申請などの復旧導線を最優先で配置する必要があります。
「データが存在しないこと」と「データの取得に失敗したこと」を混同せず、別の画面ステートとして切り分けて設計することが重要です。

3. 離脱を防ぐエンプティステート「3つの基本構成要素」

エンプティステートを機能的な画面にするためには、視覚的な階層と情報の整理が必要です。
優れたエンプティ画面は、基本的に以下の3つの要素で構成されています。

3-1. ① 状況を伝える視覚要素（グラフィック・アイコン）

画面の中央上部に配置するイラストやアイコンは、画面の状況を直感的に把握させる役割を持ちます。
ユーザーがパッと見た瞬間に「ここは検索結果の画面だな」「タスクの一覧だな」と文脈を認識させます。

注意したいのは、複雑すぎるグラフィックや過剰に大げさな表現を避けることです。
悲しげな表情のキャラクターや警告を連想させる赤いマークは、ユーザーに失敗感を与えてしまいます。

プロダクトのトンマナに合った、シンプルで清潔感のある2Dグラフィックや淡いトーンのアイコンを採用します。
主役はあくまでユーザーのアクションであるため、視覚要素が主張しすぎないバランスを意識します。

3-2. ② 前向きで明快なテキスト（見出し＋説明文）

視覚要素のすぐ下には、何が起きているかを端的に伝える「見出し（タイトル）」と詳細を補足する「説明文」を配置します。
文字情報を2層に分けることで、ユーザーは素早く要点を理解できます。

見出しは短く、事実を前向きに表現することがポイントです（例:「最初のプロジェクトを作成しましょう」）。
説明文では、なぜその状態なのか、どうすれば解決するのかを1〜2文で具体的に案内します。

「右上のボタン、または下のボタンから追加できます」のように、物理的な操作位置を補足するのも効果的です。
ユーザーが次に取るべき行動を迷わずイメージできるよう、平易な言葉で記述します。

3-3. ③ 次のアクションへ導くCTAボタン（Primary & Secondary導線）

エンプティステートで最も重要な要素が、次の行動へ直接案内するCTAボタンです。
説明文を読んだユーザーが、その場で迷わず操作を実行できるように配置します。

初回利用画面であれば「新規作成」、検索結果ゼロであれば「フィルターをリセット」が主要アクションになります。
ボタンの文言も「OK」や「送信」のような曖昧なものではなく、「最初のタスクを作成」のように具体的に書きます。

必要に応じて、補助的なアクション（例:「テンプレートを見る」）を控えめなSecondaryボタンとして配置します。
操作の優先度を保つためのボタン設計については、こちらのガイドでも詳しく解説しています。

ボタンのUIデザイン設計ガイド｜Primary・Secondary優先度と44pt基準

画面内の視線誘導と主要アクションを迷わせないボタンの優先度設計（Primary/Secondary）や、タップしやすい44pt基準の具体的なルールを解説します。

4. 実務で失敗しないための設計ルールと注意点

エンプティステートを実装するにあたって、現場で起こりがちな落とし穴と対策をまとめます。
画面設計の初期段階からこれらを考慮しておくことで、手戻りのない画面を作ることができます。

4-1. イラストが巨大すぎてCTAが画面外に押し出される問題

PC画面向けにデザインしたエンプティ画面をそのままスマートフォン画面に移植した際、レイアウト崩れが発生しやすいです。
イラストを大きく配置しすぎた結果、肝心のCTAボタンがファーストビューから見切れてしまいます。

スマートフォンなどの縦長画面では、イラストの縦幅をコンパクトに抑えることが必須です。
画面全体の高さに対して、イラスト・見出し・説明文・CTAボタンが1画面に収まるよう余白を計算します。

場合によっては、モバイル端末ではイラストを非表示にし、アイコンとテキスト主体の構成に切り替える判断も有効です。
画面サイズに依存せず、常に最も重要なCTAボタンがユーザーの視界に入る状態を維持します。

4-2. ユーザーを責めるような文言を避ける

テキストを作成する際は、ユーザー側に落ち度があるかのような否定的な言葉遣いを徹底して排除します。
「入力が間違っています」「検索条件が無効です」といった表現は、ユーザーに不快感を与えてしまいます。

常にシステム側の客観的な視点と、前向きな案内を意識することが大切です。
「入力内容をご確認ください」「キーワードのスペルを変えてお試しください」のように、次の操作への助言に言い換えます。

丁寧すぎる堅苦しい敬語よりも、直感的に意味を理解できる簡潔なトーンを心がけます。
表現を少し見直すだけでも、ユーザーの操作ストレスを大幅に軽減できます。

4-3. 迷ったときのエンプティステート設計判定フロー

新しい画面を設計する際、どのエンプティパターンを適用すべきか迷ったときは、以下の手順で整理します。

1. データが空である原因は何か？
   – ユーザーがまだ何も作っていない → パターン1（初回利用）：作成ボタンと価値説明を配置。
   – ユーザー自身がすべて処理し終えた → パターン2（タスク完了）：達成メッセージと次の一手を提示。
   – 絞り込み条件に一致しなかった → パターン3（検索ゼロ）：フィルター解除と検索補助を配置。
   – 通信や権限の問題である → 【対象外】Error State（エラー状態）：データ空画面ではなくエラー画面として再試行導線を配置。

ワイヤーフレーム作成の段階からこれらの状態を仕様として盛り込んでおくことで、エンジニア連携もスムーズになります。
ワイヤーフレームの組み立て手順については、こちらの記事もあわせて参考にしてみてください。

初心者向け！ワイヤーフレームの作り方完全ガイド｜要件整理からFigma手順まで

要件定義から情報設計、Figmaでの具体的なコンポーネント配置まで、手戻りを防ぐワイヤーフレームの制作フローを実践的に整理します。

5. まとめ：初期状態の考慮がプロダクトの離脱を防ぐ

エンプティステートは、単なる「データがないときの予備画面」ではありません。
ユーザーが新しくプロダクトに触れ、次に何をすべきかを迷わず判断するための重要な画面仕様です。

1. 初回利用時：機能の価値を伝え、最初の一歩を踏み出す作成CTAを用意する
2. タスク完了後：達成感を肯定し、次の行動を任意で選べる控えめな導線を添える
3. 検索結果ゼロ：条件クリアボタンや代替キーワードを提示し、行き止まりを回避する

これら3大パターンと「イラスト・テキスト・CTAボタン」の3大要素を押さえ、さらに通信障害などのエラー状態（Error State）と明確に切り分けておくことで、実装時の手戻りを防ぎ、ユーザーのスムーズな継続利用を支援できます。

終わりに

何もない初期状態の設計は、ダミーデータが揃った理想画面のデザインに比べて見落とされがちです。
しかし、仕様策定やワイヤーフレームの段階からエンプティステートを組み込んでおくことで、開発連携が格段にスムーズになり、リリース後の離脱も防ぐことができます。

今回整理した判定フローや画面構成のポイントを、日々のUI設計の実務にぜひ役立ててみてください。

参考リンク

• Nielsen Norman Group: Empty State Interface Design
• Material Design: Empty states guidelines

The post エンプティステートUI設計ガイド｜離脱を防ぐ3パターンと3つの構成要素 first appeared on デザペディア.