web design uiMay 1, 20269 min read

エンプティステートこそがプロダクトだ

エンプティステートは仕上げの磨きではない。アクティベーションの接点であり、第一印象であり、ユーザーが本物のデータを目にする前にリテンション曲線が崩れるかどうかを決める画面だ。

By Boone
XLinkedIn
Empty States Are the Product

プロダクトで最も重要な画面は、何も載っていない画面だ。ダッシュボードではない。設定ページでもない。データが存在する前に、ユーザーが最初に降り立つ画面だ。その画面はプロダクト全体を1フレームに圧縮したものなのに、多くのチームは後回しにしている。

エンプティステートは、手が空いている誰かに割り振られる。虫眼鏡を持った人のストックイラストと「まだ何もありません」という一文が付いて終わりだ。そしてリリースして、アクティベーションが伸びない理由を不思議がる。エンプティステートは磨きではなかった。プロダクトそのものだった。あなたは間違ったプロダクトを作ってしまったのだ。

エンプティステートはアクティベーションの接点だ

アクティベーションはダッシュボードでは起きない。エンプティステートで起きる。 ユーザーが、このプロダクトは2回目のセッションに値するかを決めるのはそこだ。

新規ユーザーはあなたのロードマップも事例も見ない。見るのはロゴが載った空白の画面と、「で、次はどうすれば?」という小さな声だけだ。その画面が次に何を語るかが、そのままプロダクトになる。エンプティステートは、彼らがこれまでに使った唯一のプロダクトなのだ。

Linearはそれを理解している。空の受信箱は「Issueはありません」ではない。キーボードショートカットがひとつ、明確な次のアクションがひとつ、そして気を配る人たちが作ったツールの中にいるという感覚が、緻密に構成されたキャンバスに収まっている。エンプティステートがアクティベーションで、ダッシュボードはご褒美だ。

すべてのエンプティステートが語っていること

エンプティステートとは、システムが他に語ることがないときに口を開く瞬間だ。そこで何を言うかが、ブランドになり、このプロダクトが自分をどう扱うかというユーザーの第一印象になる。

悪いエンプティステートは、データがないことを謝る。良いものは、ユーザーが目的を持ってここに来たと想定し、次の一手を渡す。違いは姿勢だ。片方は「すみません、ここには何もありません」と言う。もう片方は「ここからこう始まります」と言う。

Notionの空白ドキュメントは、業界で最も洗練された例だ。やわらかなプロンプト、スラッシュメニューのヒント、即座に入るキーボードフォーカス。イラストもウェルカム画面もない。入力するという行為がアクティベーションで、エンプティステートがプロダクトだ。

デザイナーが間違え続ける5つの型

多くのチームは「エンプティステート」をひとつのデザイン課題として扱う。実際には5つある。それぞれ現れる瞬間が違い、リテンションで果たす役割が違い、失敗する理由も違う。

5枚のラベル付きカードが横に並んだボクセル図。各カードがエンプティステートの型を表す:初回起動、結果なし、権限なし、接続なし、AI出力なし
5枚のラベル付きカードが横に並んだボクセル図。各カードがエンプティステートの型を表す:初回起動、結果なし、権限なし、接続なし、AI出力なし

1. データゼロ、初回起動

ユーザーがプロダクトを初めて開いたときに見る画面。プロジェクトも、ドキュメントも、履歴もない。アプリの中で最も賭け金が高いエンプティステートであり、たいてい最も放置されている。

Cursorの初回起動画面は教科書だ。エディタウィンドウがひとつ、やわらかなプロンプト、キーボードですぐ打てるように準備されたサンプルコマンド。ツアーも、ツールチップの行列も、「Cursorへようこそ」のモーダルもない。ユーザーはすでに作業の中にいる。

Figmaの新規ファイルのキャンバスも、違う調子で同じことをやっている。すっきりした無限のキャンバス、手の届くツールバー、置いたままの場所にあるカーソル。5段階のチェックリストと「ワークスペースを接続してください」の壁で始まるプロダクトと比べてみてほしい。片方はツールに感じる。もう片方は宿題に感じる。

2. フィルターで結果ゼロ

ユーザーは具体的な何かを求めたのに、プロダクトには見せるものがない。信頼が試される瞬間だ。エンプティステートは検索を受け止め、実行されたことを確認し、次の一手を示さなければならない。

Linearは有効なフィルター、1行の説明、はっきりした「フィルターをクリア」アクションを見せる。Stripeの支払いダッシュボードも、日付範囲で結果が出なかったときに同じことをする。ページは消えない。説明して、それから提案する。

失敗パターンは行き止まりだ。「結果が見つかりません」。以上。文脈も逃げ道もない。ユーザーはプロダクトが作り出した状態にはまり込み、プロダクトはそこから抜け出す手助けを拒む。

3. 権限ゼロ

誰もデザインしないのに、誰もがリリースしているエンプティステート。ユーザーはアクセス権のない画面にたどり着き、プロダクトは好奇心を罰する。403、「権限がありません」の一行、行き止まり。

良いバージョンはユーザーを尊重する。誰がアクセスを付与できるかを説明し、ワンクリックの「アクセスをリクエスト」ボタンを用意し、次に何が起きるかを伝える。Slackは、メンバーでない人がプライベートチャンネルをクリックしたときにこれをやる。エンプティステートが壁を扉に変える。

4. 接続ゼロ

ユーザーはプロダクトを開いたが、まだ何にも接続されていない。支払いが発生する前のStripe。デプロイ前のVercel。チャンネルがまだ実体を持たない新しいSlackワークスペース。アプリ内で最も離脱リスクが高い。ユーザーは空っぽのプロダクトを見つめていて、それを埋めると決めたわけではないからだ。

Stripe Atlasの「まだ支払いはありません」の状態は見事だ。悲しい顔の空グラフは出てこない。ダッシュボードが将来表示するアクティビティの種類を見せ、最初の連携へと促し、次に必要なAPIキーへ直接リンクする。

Vercelの空のプロジェクト一覧は、虚無の正反対だ。デプロイボタン、インポートの選択肢、サンプルテンプレートが同じ画面に並ぶ。最初のデプロイがアクティベーションイベントで、エンプティステートは滑走路だ。

5. AI出力ゼロ

新しい型で、ほとんどのプロダクトが失敗している。ユーザーはプロンプトを送ったのに、システムが返すものがない。モデルがタイムアウトしたか、入力が不十分だったか、出力のレールにブロックされた。

悪いバージョンは「申し訳ありません、問題が発生しました」と言う。良いバージョンは具体的だ。なぜ何も返らなかったのか、ユーザーは何を変えられるのか、再試行の道はあるのか。Loomの初回録画フローは似た問題をうまく扱っている。録画のアップロードに失敗したとき、エンプティステートが失敗を説明し、ファイルを失わずに即座に再試行できるようにする。AIがコアサーフェスになったとき、オンボーディング全体の形がどう変わるかは、AIプロダクトのオンボーディングデザインの解説で扱っている。

すべてのエンプティステートに必要なもの

強いものは5つの要素を共有している。どれかを欠くと、画面は謝罪モードに逆戻りする。

  1. 文脈。 ユーザーが何を見ているのか、なぜ空なのかを明示する。「まだIssueはありません」では足りない。「このサイクルにIssueはありません。Cで最初の1件を追加しましょう。」これが仕事をしている画面だ。
  2. アクション。 主要なアクションはひとつ、キーストロークもひとつ、ボタンもひとつ。何をすべきかを3文で説明しているなら、デザインが間違っている。
  3. ボイス。 他に語ることがないときのシステムの声は、ブランドの他の部分と一致していなければならない。親しみやすいプロダクトの中で無機質なエラー調が出てくると、魔法が解ける。
  4. ヒエラルキー。 タイトル、1行の説明、主要アクション、任意のサブリンク。本物のビジュアルヒエラルキーが働く4要素。それ以上はノイズだ。
  5. モーション。 画面が生きているというやわらかな合図。点滅するカーソル、控えめなCTAのパルス、小さく動く矢印。プロダクトがユーザーを待っているという信号だ。

エンプティステートを殺す失敗パターン

他の何よりも多くのエンプティステートを殺す6つのパターンがある。

雑なイラスト。 クリップボードを持った漫画のキャラ。望遠鏡。宙に浮く宇宙飛行士。これらは画面がやるべき仕事の代わりを務め、ちゃんとしたコピーを書くほど本気ではないプロダクトだと知らせてしまう。

行き止まりの状態。 次のステップがない「まだ何もありません」。逃げ道のない404。アクセスへの道がない403。次のアクションがないエンプティステートはすべて、リテンションの漏れ口だ。

説教するエンプティステート。 このセクションが何をするのかを説明する長い段落。ユーザーはプロダクトを使いに来たのであって、チュートリアルを読みに来たのではない。エンプティステートに3段落が必要なら、画面に説明を足すのではなく、プロダクトの説明を減らすべきだ。

インボックスゼロの罠。 「最初のアクション」のフローより先に、「すべて完了」のお祝いをデザインしてしまうこと。Superhumanは何か月もの本物の作業でインボックスゼロを勝ち取っている。多くのプロダクトは勝ち取らずにお祝いだけを真似し、ユーザーは初日から子ども扱いされたと感じる。

「まだ何もありません」という逃げ。 3語、文脈なし、アクションなし、ボイスなし。デザイナーが諦めたことのエンプティステート版だ。この文字列があなたのプロダクトに載っているなら、リテンションはすでに崩れている。

すべての型で同じ汎用品。 初回起動、結果なし、権限なし、接続なしで、ひとつのコンポーネントを使い回す。型ごとに賭け金は違う。単一のコンポーネントでは、どれも平板にならざるを得ない。

エンプティステート監査

カメラに向かって傾いた、縦に積まれたチェックリストカードのボクセル表現。各行にコーラルのチェックボックスと白いテキストバーがあり、監査の実施を示唆している
カメラに向かって傾いた、縦に積まれたチェックリストカードのボクセル表現。各行にコーラルのチェックボックスと白いテキストバーがあり、監査の実施を示唆している

すべてのエンプティステートを、次の7つの問いに通してほしい。全部にはっきり「はい」と答えられないなら、その画面は未完成だ。

  1. 画面は、ユーザーが今どこにいて、なぜ空なのかを伝えているか? ラベル、1行の説明、理由。推測させるなら、画面は読み込まれる前に失敗している。
  2. 主要なアクションはちょうどひとつか? 競合するボタンが2つではない。ヒエラルキーとコントラストで明白になったひとつのアクション。この画面の実質的なヒーローセクションとして扱う。
  3. ボイスはプロダクトの他の部分と一致しているか? データが入った画面の隣で声に出して読む。トーンが変わるなら、そのエンプティステートは別のブランドを着ている。
  4. 次のステップは1回のキー入力かクリックで達成できるか? 「設定へ行って、接続して、戻ってくる」ではない。一手で済ませる。それより長いなら、エンプティステートが引き受けるべき作業だ。
  5. 画面は放置されたものではなく、生きていると感じられるか? カーソル、パルス、プレースホルダー、ヒント。静止した空白は、正しく動いていても壊れて見える。
  6. 画面は型に固有のものか? 型ごとに賭け金もコピーも違う。使い回しの汎用コンポーネントは、仕組みではなく悪臭だ。
  7. ユーザーがこの画面しか見なかったとして、プロダクトを売り込めているか? 答えがノーなら、そのエンプティステートは役目を果たしていない。しかも、多くの新規ユーザーがプロダクトを判断するのはこの画面だ。

すべてのエンプティステートがこの7つを通過するプロダクトは、頑張らなくてもアクティベートする。他のすべては、すでに説得を終えた画面の上に積み重なっていく。

原則を選び、それから画面を出荷する

エンプティステートは仕上げの層ではない。荷重を支える層だ。2026年に勝つプロダクトは、最初の画面、結果ゼロのページ、未接続のダッシュボードが、すでにユーザーが登録したプロダクトそのものに感じられるものだ。マーケティングページ版はランディングページデザインの原則で、プロダクトの残りがどう続くかはウェブデザインの原則で扱っている。

ダッシュボードから先にデザインするのはやめよう。何も載っていない画面から始めよう。ダッシュボードはご褒美だ。エンプティステートは取引そのものだ。

よくある質問

エンプティステートとゼロステートの違いは何ですか?

ほとんどのチームでは同じ意味だ。「ゼロステート」は、特に初回起動でデータがないシナリオを指す傾向がある。「エンプティステート」はより広く、フィルター結果、権限の壁、AIの失敗など、期待されるコンテンツが存在しないあらゆる画面を含む。原則は同じだ。

すべてのエンプティステートにイラストは必要ですか?

いいえ。ほとんどは不要だ。イラストが正当化されるのは、情報を運ぶとき、ブランドが必要とするトーンを作るとき、複雑な初回起動の説明を視覚的に支えるときだ。クリップボードを持った親しみやすい漫画は装飾であり、デザインではない。イラストなしで画面が機能するなら、なしで出荷しよう。

エンプティステートのコピーはどう書けばいいですか?

最大でも2文。1文目は、ユーザーが何を見ていて、なぜ空なのかを伝える。2文目は、次の一手を、能動態で動詞を使って伝える。形容詞と謝罪はすべて削る。声に出して読む。テンプレートのように聞こえたら、書き直そう。

まず空の画面をデザインしよう

何も載っていない画面が、すべてを決める。ダッシュボードも連携機能も、意図してデザインしたわけではないかもしれない第一印象の上に乗っている。その画面を正しく作るコストは、1週間余分にかかる程度だ。間違えたときのコストは、誰にも説明できないリテンション曲線だ。

エンプティステートを最後の後始末ではなく、プロダクトの一部としてデザインするチームが欲しいなら、Brainyに依頼してください。私たちは、ユーザーが最初に見る画面が、ユーザーの記憶に残る画面になるプロダクトを作っています。

Want a product where the empty states do the selling instead of the apologizing? Brainy designs first-run flows and zero states as part of the product, not as cleanup.

Get Started

More from Brainy Papers

Keep reading