空の状態こそがあなたの製品であり、後付けのものではありません。

製品において最も重要な画面は、何も表示されていない画面です。多くのチームは、この画面を最後にリリースし、デザインを最もおろそかにし、そしてその存在を忘れてしまいます。

初めてアプリを開いたとき、受信トレイは空、プロジェクトリストも空、検索結果も表示されず、ボードをクリアしたばかり。5つの異なる瞬間、5つの異なる空の画面。そして、ほとんどの製品はこれらを同じ問題として扱っています。

しかし、これらは同じ問題ではありません。5つの全く異なるデザイン画面であり、これらが組み合わさって、ユーザーが製品を使い続けるか、静かにタブを閉じるかを決定づけるのです。

なぜ空の画面が真の第一印象なのか

ユーザーはホームページで製品を判断するわけではありません。サインアップ後の2番目の画面、つまり魔法のような体験を期待していたのに、「まだ何もありません」という残念なイラストが表示された画面で判断するのです。

この瞬間こそが、製品の真髄を凝縮したものです。ユーザーに何が可能か、次に何をすべきか、そしてあなたがどれだけユーザーのことを考えているかを伝えます。正しく実装すればユーザーは興味を持ち、間違って実装すれば離脱し、どんなにメールで再アプローチしても戻ってきません。

優れた空の状態は、3つの役割を同時に果たします。機能の目的を伝え、製品の感情的なトーンを設定し、タブを閉じるよりも簡単な具体的な次のアクションをユーザーに提示します。

ほとんどの空の状態は、これらの役割を全く果たしていません。親しみやすい漫画を表示し、空の状態であることを謝罪し、ユーザーが自分で理解してくれることを期待するだけです。これはデザインではなく、ただの肩すくめです。

5種類の空の状態（そしてそれぞれに異なる対応が必要な理由）

すべての空の状態を同じように扱うことは、空の状態デザインにおける根本的な過ちです。ここでは、チームが失敗する頻度が高い順に、5つの異なる空の状態について説明します。

1. 初回起動時の空の状態 ユーザーはサインアップしたばかりで、この製品を初めて見ており、何も操作していないため画面には何も表示されていません。これは、製品において最も重要な空の状態です。

2. ゼロ状態（空） ユーザーは以前にも製品を利用したことがあるが、新規プロジェクト、新しいワークスペース、新しく作成したリストなど、特定の領域が自然に空の状態になっている。ユーザーは製品自体は知っているが、この領域については知らない。

3. クリア後の空 ユーザーは意図的に何かを空にした。受信トレイを空にし、すべてのタスクを完了し、すべてをアーカイブした。これは達成の瞬間であり、不在ではない。

4. エラー後の空 何らかのエラーが発生したため、画面が空になっている。データ取得が失敗した、接続が切断された、統合設定が誤っているなど。実際には問題がないにもかかわらず、ユーザーは製品が故障していると思い込んでいる。

5. 検索後の空 ユーザーがクエリを入力したが、結果がゼロだった。ユーザーは意図を持って操作し、労力を費やしたにもかかわらず、何も返されなかった。これは、適切な対応をすれば最も回復しやすい空の状態である。

それぞれの状態に応じて、説明、アクション、トーンの適切な組み合わせが求められる。初回起動時の状態は学習を促す必要があり、クリア後の状態は成功を祝う必要があり、検索が空の状態は提案を行う必要があります。これら5つの状態すべてに同じ汎用的な「何も見つかりませんでした」テンプレートを使用すると、4つの状態が無駄になってしまいます。

比較：各空状態が果たすべきことと避けるべきこと

並べて比較すると、違いが明らかになります。以下にチートシートを示します。

| 空状態の種類 | 表示されるタイミング | 果たすべきこと | 避けるべきこと |

|---|---|---|---|

| 初回起動時 | ユーザーがサインアップしたばかりで、まだ何も操作していない | サンプルデータまたはガイド付きの最初のタスクでコアアクションを学習させる | 悲しい顔文字と「始める」ボタン（目的地なし） |

| ゼロ状態 | 特定の領域は初めてだが、ユーザーは製品を知っている | 2つか3つの具体的なアクションを提案し、テンプレートを示唆する | オンボーディングツアー全体を繰り返す |

| クリア後 |ユーザーがリストを完了、アーカイブ、または空にした場合｜完了を祝い、次に実行すべき適切な操作を提示する｜ユーザーが何か間違った操作をしたかのように振る舞う｜

｜エラー（空）｜データの読み込みまたは同期に失敗した場合｜何が失敗したのかを分かりやすく説明し、再試行を促し、ステータスページへのリンクを提供する｜一般的な空の状態を表示し、何も問題がないかのように振る舞う｜

｜検索（空）｜ユーザーがクエリを入力したが、一致する結果がゼロだった場合｜検索内容を表示し、関連するクエリを提案し、作成を促す｜「結果が見つかりませんでした」と表示して行き止まりにする｜

表全体を通して、失敗モードがほぼ同じであることに注目してください。ほとんどの製品は、あらゆる空の状態に対して同じ一般的なメッセージをデフォルトで表示するため、ほとんどのアプリの空の状態はどれも同じような平凡な印象を与えます。

空の状態を効果的にする4つのデザイン手法

空の状態を効果的にする4つの手法があります。優れた空の状態は、これらのうち2つか3つを組み合わせて使用​​し、4つすべてを同時に使用することはありません。なぜなら、すべてが同時に使用されると情報が過剰になるからです。

1. サンプルデータ ユーザーが操作、編集、削除できる、現実的なサンプルコンテンツを画面にあらかじめ表示します。Stripeのダッシュボードにある「テストデータを表示」トグルスイッチは、まさに教科書通りの例です。

2. 推奨アクション 漠然とした「始める」ボタンではなく、ボタンやカードで具体的な次のステップを2～3個提示します。Notionの新規ページにテンプレートの提案を表示する方法は良いでしょう。

3. 説明図 データが入力された状態がどのように見えるかを視覚的に示すために、悲しい漫画ではなく、小さなプレビュー画像を使用します。受信トレイやボードがいっぱいになった状態をイメージさせるような小さな画像を用意します。

4. トーン設定コピー 製品の個性を確立し、このスペースの用途をユーザーに伝える3～12語の短いコピーを使用します。Linearの空の受信トレイのコピーは、ほとんどのランディングページよりも簡潔にブランドボイスを伝えています。

重要なのは、状態ごとに適切な組み合わせを選ぶことです。初回実行時にはサンプルデータと推奨アクション、クリア後には雰囲気作りのためのコピーとちょっとしたお祝い、検索が空の場合は提案と作成のオファーが必要です。状況に合わせて適切なアクションを選択しましょう。

この点をうまく実現している実例（そして参考にすべき点）

この考え方を最も早く理解するには、空の状態をデザイン上の課題として捉えている製品を研究することです。ここでは、優れた製品をいくつかご紹介します。

Linearの空の受信トレイ Linearは、空の受信トレイをちょっとした休暇のひとときとして捉えています。コピーは簡潔で、少しユーモラスで、ブランドイメージに合致しており、ビジュアルは謝罪的な印象を与えるのではなく、落ち着いた雰囲気です。「始める」ボタンは不要です。

Notionのテンプレート提案 Notionの新規ページは技術的には空ですが、決して空っぽには感じられません。カーソルはすぐに使える状態にあり、スラッシュコマンドのヒントが表示され、テンプレートの候補が状況に応じて表示されます。何もない空白の壁を見つめるのではなく、選択肢のメニューを見つめているのです。

FigmaのDraftsウォール 新しいFigmaアカウントでは、空のファイルリストは表示されません。サンプルファイル、チーム作成のヒント、最初のキャンバスへの明確なパスが示されたDraftsスペースが表示されます。製品を見ることで使い方を学ぶことができます。

Cron、現在はNotionカレンダーのオンボーディングカレンダー オンボーディングが完了すると、カレンダーには実際の接続済みイベントが表示されるだけでなく、キーボードショートカットのオーバーレイと、製品の特性を示すいくつかのサンプルイベントも表示されます。10秒以内に使い方を理解できます。

Things 3の最初のローンチ Thingsには、製品の使い方を学ぶためのオンボーディングプロジェクトが付属しています。各タスクがレッスンになっています。最後の項目を確認する頃には、必要な機能はすべて使い果たしており、空の状態こそがあなたの現実の生活です。

参考にすべきその他の製品（Granola、Superhuman、Stripe、Replit、ChatGPT）

さらにいくつかご紹介します。比較的新しい製品やAIツールに偏っていますが、これらの分野ではまだパターンが確立されていないためです。

Granolaの最初の文字起こしプロンプト Granolaは、文字起こしするものが何もない最初の会議が最も気まずい瞬間であることを理解しています。そのため、短いテストを録音するか、サンプル文字起こしをインポートしてAIの動作を確認できるようにしています。これにより、本来であれば製品が抱えるであろう「鶏と卵」の問題が解消されます。

Superhumanのオンボーディング Superhumanは、空の受信トレイを見る前に、実際の人間によるオンボーディングコールを実施しますが、アプリ内での初回起動時にもサンプルメールやキーボードショートカットのチュートリアルで使い方を学ぶことができます。アプリを一人で使うようになると、初期状態がむしろ機能のように感じられるようになります。

Stripeの空のダッシュボード Stripeでは、サインアップした瞬間にサンプルデータが入力されたダッシュボードが表示されます。「テストデータを表示中」という表示が明確に示され、ワンクリックで実際の空のアカウントに切り替わります。パスを見る前に、目的の画面が見えるようになっています。

Replitの空のワークスペース 新規のReplitワークスペースは空ではありません。スターターファイル、親しみやすい挨拶が表示されるコンソール、そして既に動作する実行ボタンを備えたコードエディタです。最初の10秒でコードを書き始めることができます。

ChatGPTの空のプロンプトページ ChatGPTの初期状態は、有名なテキストボックスが1つだけというシンプルなものですが、製品自体に文化的な魅力があるため、ある程度機能しています。新規ユーザー向けに、ページ下部に推奨プロンプトが表示されますが、これは最低限の機能です。 ChatGPTのブランドをお持ちでない場合は、ChatGPTの空の状態をコピーしないでください。

失敗例とその問題点

悪い空の状態は、いくつかの明確なパターンに分類されます。それらを特定できれば、出荷を中止できます。

悲しいイラスト 「まだ何もありません」というメッセージの横に、目が垂れ下がった愛らしいマスコットキャラクターが表示されています。Figmaでは可愛らしく見えますが、この製品では侮辱的に感じられます。ユーザーは悲しんでいるわけではなく、登録したばかりです。

どこにも繋がらない「始める」ボタン 大きなコールトゥアクションボタンをクリックすると、コンテキストもテンプレートも例もない、汎用的な作成フォームが開きます。ユーザーがクリックすると、空白のフォームが表示され、空の状態は2画面分も続いてしまいます。

行き止まりの状態 検索結果が何も表示されず、そこで話は終わりです。提案も関連結果も表示されず、検索した内容を作成する提案もありません。ユーザーが何かを入力しても、あなたは「いいえ」と答え、会話はそこで終わります。

無限の空白。AI製品によく見られる現象です。インターフェース全体が、プロンプトが表示されるのを待つだけの空の入力ボックスです。例も、デフォルト設定も、レールもありません。ユーザーが「こんにちは」と入力して、離脱します。

アクティベーションの計算：最初の60秒が最も重要な理由

すべての製品にはアクティベーションの瞬間があります。それは、ユーザーが製品の価値を実感する最初の行動を起こす瞬間です。最初のメッセージを送信する、最初のプロジェクトを作成する、最初の連絡先をインポートする、最初の出力を生成するなどです。

空白の状態とは、サインアップからアクティベーションまでの間の画面のことです。「まだ何もありません」という画面をユーザーが見つめている時間は、アクティベーションに費やせたはずの時間であり、離脱率は著しく高くなります。セッションの最初の60秒は、その後の60分間を合わせたよりも、ユーザーの定着率と強い相関関係があります。

だからこそ、サンプルデータや提案されたアクションは、ほぼ常に、何も表示されていない空白の画面よりも優れたパフォーマンスを発揮するのです。彼らは、従来の「何をすべきか決め、次に方法を考え、そして実行する」という手順から、「これをクリックして、何が起こるか見て、製品の使い方を学ぶ」という手順へと、アクティベーションのハードルを下げました。3つのステップが1つになったのです。

アクティベーション率が低い場合、製品全体の中で最も安価な解決策は、通常、空の状態を改善することです。オンボーディングの再設計、チュートリアル、メールシーケンスよりも安価です。画面に何か役に立つものを表示するだけで良いのです。

AIの視点：無限の空の状態への対応

AI製品には、特有の空の状態の問題があります。インターフェースは多くの場合、理論上は何でもできる単一の入力ボックスですが、実際にはユーザーが何を求めているのかを知るまで何もできません。これが無限の空の状態です。

ChatGPT、Claude、画像生成ツール、カーソルなど、あらゆるAIツールがこの問題に直面しています。単純な解決策は、「何でも聞いてください」と書かれた巨大な空白のテキストフィールドを用意することです。無限の可能性に直面したユーザーは、リスクの低い内容を入力し、一般的な応答を受け取り、製品の評価を「平凡」と判断します。

解決策は通常の製品と同じですが、より洗練されています。AIの得意分野を示す提案プロンプト、品質を実証する会話例や生成例、ユーザーが最初の操作に慣れるためのテンプレートなどを用意しましょう。Granolaの「テストミーティングを録音する」という手法を、AIのあらゆる機能に適用します。

入力ボックスを、ユーザーが書き始める文章ではなく、完成させようとしている文章として扱いましょう。前半部分を提示することで、無限に続く入力欄が誘導された最初の操作となり、ユーザーの利用率が向上します。

トーンとポストクリア：感情を込めた空の状態

多くのチームは初回実行で止まってしまいます。ポストクリアの状態こそ、製品がまるで気づいてくれた同僚のように感じられるようになる段階です。

トーンがすべてを左右します。 空の状態は、ユーザーが自信を持てない時に読み取られます。ユーザーは新規ユーザー、迷っているユーザー、何かを終えたばかりのユーザー、またはエラーが発生したユーザーです。金融アプリで皮肉っぽい空の状態を表示すると失礼に感じられ、クリエイティブツールで形式的な空の状態を表示すると堅苦しく、エラー発生時に明るい空の状態を表示すると鈍感に感じられます。空の状態を示すテキストは、文脈に応じて意図的に変化させつつ、一貫したトーンで記述しましょう。

**タスク完了後にはちょっとしたお祝いが必要です。**ユーザーがリストを完了し、すべてをアーカイブし、受信トレイを空にしました。Things 3は、すべてのタスクを完了すると小さな達成メッセージを表示します。Linearは、トリアージキューが空になったことを静かに祝います。ドーパミンは確かに分泌され、これは製品がユーザーに対して心から満足している数少ない瞬間のひとつです。

やりすぎは禁物です。5つのタスクを完了するたびに紙吹雪のアニメーションを表示すると、火曜日には飽きてしまいますが、簡潔で落ち着いた承認メッセージと、思慮深い「次は何をしましょうか？」という提案は、毎回効果的です。受信トレイが空になったら、その日の計画を立てることを提案しましょう。プロジェクトを完了したら、次のプロジェクトのレビューを提案しましょう。

エラーと検索：信頼を左右する空の状態

ユーザーが最も気にする2つの空の状態は、どちらもタスクの途中で発生し、ユーザーの意図が反映されるからです。

エラー時の空の状態は、信頼を築くための設計が不可欠です。 データの読み込みに失敗すると、多くの製品は一般的な空の状態を表示するか、エラーに見せかけたスタックトレースを表示します。どちらも信頼を損なう原因となります。一般的な空の状態の方が問題です。ユーザーは製品に不具合があることすら認識できず、空の受信トレイが実際の状態だと思い込んでしまい、二度と戻ってこなくなるからです。

適切な対応は、平易な言葉でエラーを伝えることです。何が失敗したのかを、ユーザー自身の言葉で説明しましょう。再試行の機会を与えたり、ステータスページへのリンクを提供したり、設定ミスを指摘したりしましょう。エラー時の空の状態が、データが入力されている状態の視覚構造を継承していれば、ユーザーは何が不足しているのかを理解できるため、さらに効果的です。

検索結果が空の場合、最も改善しやすい。 ユーザーが何かを入力したのだから、ユーザーが何を求めているかは明らかだ。「検索結果が見つかりませんでした」と悲しい顔文字を表示するのは、不適切な対応と言える。最低限の機能を持つバージョンは、検索クエリをそのまま表示し、関連する検索候補を提示する。優れたバージョンは、ユーザーが検索した内容を作成するよう提案する。さらに優れたバージョンは、検索クエリに基づいてテンプレート、アクション、またはヘルプ記事を提案する。

GitHub の検索結果が空の場合、検索クエリをタイトルにした課題の作成を提案することが多い。Notion はページの作成を提案する。Linear はバグ報告を提案する。検索結果が空の場合、「始める」ボタンが真価を発揮できる唯一の場面だ。なぜなら、目的の画面が明確だからだ。

自社製品の空の状態を監査する方法

カタログ化されていないものは修正できない。多くのチームは、実際に空の状態を数えてみると、その多さに驚く。以下の順序で監査を実行してください。

新規ユーザーとしてログインしたシークレットモードで、製品のすべてのページを開いてください。空白の画面があるすべての画面をスクリーンショットしてください。それらをスプレッドシートに、画面ごとに1行ずつ、種類、現在のコピー、現在のビジュアル、現在のアクションの列でリストアップしてください。

次に、それぞれの画面を5つの種類（初回実行、ゼロ状態、クリア後、エラー発生時、検索時）のいずれかに分類してください。ほとんどの製品には10～30個の空白状態があり、意図的に設計されたものは1つか2つしかないことがわかるでしょう。

それぞれの空白状態について、次の3つの質問を自問してください。この画面の用途を説明しているか、具体的な次のアクションを示しているか、製品の他の部分と調和しているか。すべてに「はい」と答えられる場合はそのままにし、どれか1つでも「いいえ」と答えられる場合は、その部分を修正して次に進んでください。

チームでこの作業を行う場合は、90分間を確保し、デザイナー、プロダクトマネージャー、そしてコピーライティングが苦手なエンジニアを1人招待してください。手順は非常にシンプルで、同じ週に結果をリリースできます。

最初の30分は、チームで監査を行い、画面を共有しながら、すべての空白部分を一つずつ確認していきましょう。それぞれの空白がどのタイプに該当するのか、議論を交わしてください。意見の相違は問題ありません。重要なのは対話そのものです。

次の30分は、トラフィックが最も多い3つの空白状態を選び、その場で書き直してください。トーン設定となる一文、提案するアクションを2つ、そしてサンプルデータを追加するかどうかの決定を盛り込みます。ビジュアルを完璧に仕上げようとする衝動を抑え、まずはコピーライティングに集中しましょう。

最後の30分は、担当者を決め、1週間以内のリリース目標を設定します。これを四半期ごとの取り組みにしないでください。空白状態は規模が小さく、限定的で、迅速にリリースできます。今週3つ、来週さらに3つリリースすれば、1ヶ月以内にアクティベーショングラフは改善されるでしょう。

空白状態は製品のボディランゲージです

マーケティングサイトは偽装できます。ホームページも偽装できます。しかし、空白状態は偽装できません。なぜなら、それは製品が約束を終え、実際に提供し始める瞬間だからです。

ユーザーが何も表示されていない画面にたどり着いたとき、あなたが下したすべての選択が露呈するのです。彼らのことを考えましたか？それともデフォルトのまま出荷しましたか？製品の使い方を教えましたか？それとも空っぽな状態を謝罪しましたか？人間らしい文章を書きましたか？それとも2008年の魔法使いのような文章を書きましたか？

空の状態を脚注ではなく、正面玄関のように扱いましょう。最後にではなく、最初に設計しましょう。毎月監査を行いましょう。専任の担当者を雇いましょう。

製品の中で最も見落とされがちな画面は、同時にユーザーが最も頻繁に目にする画面でもあります。その画面を最大限に活用しましょう。