空状態 · 空状態
親しみのあるイラスト付き空状態(受信箱が空)
受信箱や通知センターが空のときの画面UI。シンプルなイラスト・1 行のコピー・1 つの明確なCTAで、「何もない」状態を「次のアクションへ」変える設計。
プレビュー
概要
空状態(empty state)は、データがまだ存在しない画面です。受信箱が空、通知がゼロ、検索結果なし——一見すると「何も設計することがない」画面に見えます。しかし実際は逆で、空状態こそ多くのユーザーが最初に出会う画面です。アカウントを作った直後、すべてはゼロから始まる。つまり空状態は、プロダクトの第一印象そのものなのです。
真っ白な画面が呼ぶ不安
何も表示されない画面を見たユーザーは、無意識に問いを抱きます。「壊れているのか」「使い方を間違えたのか」「ここで何をすればいいのか」。この小さな不安が積み重なると離脱に繋がる。温度のあるイラストと一行のコピーは、まずその不安を打ち消す役割を持ちます。「これは正常な状態です」「あなたは何も間違えていません」——そう伝えてから、次の一歩を示すのです。
空状態は小さなランディングページ
優れた空状態は、状況を説明するだけで終わりません。「最初のメールを送ってみましょう」「チームを招待しましょう」といった、ただ一つの明確なCTAを提示する。これは実質的に、プロダクト内に置かれた小さなランディングページです。新規ユーザーにとっては自然なオンボーディングになり、既存ユーザーにとっては次の行動への合図になります。
仕上げの判断軸
CTAは必ず1つに絞ること。空っぽで心細い状態のユーザーに選択肢を3つ並べると、かえって動けなくなります。イラストは状況に合った穏やかなトーンで、ブランドのキャラクターと一致させる。コピーは短く、前向きに——「受信箱は空です」より「最初のメッセージを待っています」のほうが、同じ事実でも次の行動を誘います。
使いどころ
- SaaS管理画面の受信箱・通知センター
- タスクリスト・プロジェクト一覧の初期画面
- 検索結果・フィルター結果が0件のとき
- 履歴・アクティビティが無いダッシュボード
このデザインの分類
- カテゴリ
- 空状態
- スタイル
- プレイフル / ソフト / ハンドクラフト / ミニマル
背景と狙いどころ
AIへの指示文
SaaS の受信箱が空のときの空状態画面を作ってください。 要件: - 配色: ベース #fdf9f0 + 主色 #2a221a + アクセント #6c8aff(クール)+ 補助色 #ffb84a。 - 中央配置、上下に十分な余白。 - イラストはインライン SVG で大きめ(300px幅程度)。封筒・ハート・葉などの簡潔なシンボル。Stroke のみで線画。 - イラスト下に大きな見出し「受信箱は空です」。 - 短いコピー(30字程度)「お知らせは届いたらここに表示されます」。 - プライマリ CTA「お知らせ設定を確認する」。 - 補助リンク「詳しくは ヘルプ」。 - 上部に小さな breadcrumb 風メタ「Inbox / All」。 - フォント: 見出しは丸ゴ系、本文は Inter + Noto Sans JP。 - フルレスポンシブ。スマホでは余白を縮めてコンパクトに。
バリエーション
ダーク版
背景を暗色(#0e0e10)、テキストはオフホワイトに。 イラストの線色をアクセントブルー、補助色を発光イエローに。
検索結果ゼロ版
コピーを「『○○』に一致するメッセージはありません」に変更し、 検索キーワードのクリアと、フィルター解除の2つのリンクを下部に。
よくある質問
空状態に CTA は必要?
イラストは外注必須?
重要度の低い空画面に時間をかける価値ある?
関連するデザイン
ポラロイド写真ボード風のギャラリー
コルクボードに押しピンとマスキングテープで留めたポラロイド写真コレクションを再構築したギャラリー。手書き風キャプション・微妙な傾き・付箋メモで「私的な記憶」を訴求する尖った設計。
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。