空状態 · 空状態

親しみのあるイラスト付き空状態(受信箱が空)

プレビュー

vibe.itlibra.com/preview/playful-empty-inbox/

概要

空状態(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 は必要?
必要です。"何もない"だけで終わらせると離脱率が上がります。次に何をすべきか1つだけ提示するのが鉄則です。
イラストは外注必須?
シンプルな線画なら自前で十分。Tabler Icons や Lucide の大型版で代用も可能です。CSS で太く描画すれば手作り感も出ます。
重要度の低い空画面に時間をかける価値ある?
重要です。空状態はユーザーが何度も目にする画面なので、ここの体験がプロダクトへの愛着に直結します。