2025年8月04日·1 分
アプリのセットアップ完了を促す空の状態デザイン
混乱を減らし、ユーザーを次の成功するセットアップステップに導く空の状態デザインパターン。すぐに使えるコピー、レイアウト、チェックリストを紹介します。
混乱を減らし、ユーザーを次の成功するセットアップステップに導く空の状態デザインパターン。すぐに使えるコピー、レイアウト、チェックリストを紹介します。
白紙の画面は中立ではありません。人はそこで次に何をすべきか推測し始め、手順を飛ばしたのか、製品が動いていないのかと不安になります。セットアップ中のその一瞬は高くつきます。「始めよう」という気持ちが「後で戻ってこよう」になってしまいます。
空の状態とは、ユーザーが何も作成・インポート・接続していないために表示する内容がないときの画面です。読み込み画面でもエラーメッセージでも権限の警告でもありません。価値が現れる直前の瞬間であり、アプリがユーザーを最初の意味のある結果に導く必要がある場面です。
良い空の状態にはひとつの仕事があります：ユーザーをできるだけ考えさせずに次の成功するアクションに動かすことです。「成功」が重要です。次のステップは実際の成果（最初のプロジェクト、接続されたデータソース、作成された最初のアイテム）を生むべきで、行き詰まるような入力フォームや漠然とした製品ツアーではいけません。
こうした瞬間はチームが思うより頻繁に発生します：サインアップ後の初回ログイン、新しく作ったワークスペース、まだアイテムがない機能タブ（プロジェクト、顧客、ファイル）、あるいはインポートがスキップされて何も存在しないセットアップ経路などです。
空の状態がうまく機能すれば、次の3つの質問に素早く答えます。
例：Koder.aiでは新しいユーザーが新しいワークスペースを開くとまだアプリがありません。強い空の状態は何も作られていないことを率直に伝え、「最初のアプリを作成する」といった明快な次のアクションを提示し、小さな安心メモ（例：ソースコードのエクスポートやスナップショットが開始後に使えること）を添えます。目標は「ここには何もない」から「最初の動く結果に到達できる」へと変えることです。
初めてのユーザーにとって、空の画面はアプリが止まったか自分が何かを間違えたのではないかという感覚になります。人は差をすぐに埋めようとし、大抵はあなたに有利でない方向に想像します。
多くの人は心の中で同じ問いを立てています。
こうした疑問の裏にある感情が行動を左右します。不確実さは人を立ち止まらせます。間違えることへの恐れは主要ボタンから遠ざけます。明確な次のステップが数秒で示されないと、いらだちからアプリを閉じてしまうこともあります。
初回ユーザー向けの空の状態とパワーユーザー向けの空の状態は解くべき問題が異なります。初回ユーザーは用語も知らないため文脈と安全性が必要です。戻ってきたユーザーは速度を求め、素早く別のアイテムを作る、データをインポートする、慣れた操作を繰り返す手段を欲しがります。
セットアップ用の空の状態はエラーや読み込みとは異なります。読み込みは「待ってください、何かが進んでいます」を示し、エラーは「何かが失敗しました、理由はこれです」を示します。セットアップは「まだ何もありません、それは正常です。始め方はこちらです」を伝えます。
具体例：誰かがKoder.aiの新しいワークスペースで空のProjectsページを開いたとき、彼らは機能について考えているわけではありません。「プロンプトから始めるか、コードをインポートするか、テンプレートを選ぶか、それで何か壊れないか？」と考えています。空の状態はそれに答え、ドキュメントに誘導する必要はありません。
良い空の状態は空に見えません。標識のように振る舞います：「ここはこういう場所です、次にここをクリックしてください」。
ほとんどのセットアップフローで機能する構造は3つの部分から成ります。
説明は短く保ってください。画面を説明するのに段落が必要なら、それはユーザーに考えさせすぎです。1〜2の短い文を目標に、例えば「最初のプロジェクトを追加」や「最初のワークスペースを作成」のような平易な言葉を使います。
次に、主要ボタンで次のステップを明確にします。3つの同等のボタンを並べると、ユーザーはページの意味を理解する前に道を選ばされることになります。もし代替手段（インポート、テンプレート、スキップ）を提供するなら、主要アクションより視覚的に控えめにしてください。
安心の一行はよくある不安を取り除きます：間違えるかもしれない、時間を無駄にするかも、技術的なスキルが必要かも、など。次に何が起きるか、あとでどう戻せるかを短く伝えるほうが、長い説明より効きます。
初回の「Projects」画面の例文：
タイトル： 最初のプロジェクトを始める
説明： Projectsはアプリのセットアップとリリースを管理します。
主要アクション： プロジェクトを作成
安心文： 約2分で完了します。名前はいつでも変更できます。
もし製品がチャットやインポート、テンプレートなど複数の開始方法をサポートするなら、デフォルトは「作成」にして、「インポート」「テンプレートを使う」は下に二次的に配置してください。
空の状態が失敗するのはコピーが機能を説明することに終始し、ユーザーが得られる結果を示していないときです。言葉はすばやく次の問いに答えるべきです：この画面は何か？ なぜここで何かすべきか？ 次に何をすべきか？
見出しの単純なフォーミュラは成果 + 対象です。結果と作るものを名前にし、内部の機能名ではなく結果を示します。
本文ではそれが何か + なぜ重要かを1〜2文で示してください：
"顧客はあなたが販売する相手です。今1件追加すると請求書送付や入金管理が始められます。"
CTAは動詞で始め、具体的な名詞を含めてください。「Get started」のような曖昧な文言は避けます。
リスクを感じやすい選択肢のそばにマイクロコピーを置きましょう。短い安心文は長い説明より効きます。
もしあなたの製品が出力を自動生成するタイプなら（Koder.aiのような場合）、ユーザーにコミットではないことを伝えます：「最初のドラフトを作成します。配備前に確認・編集できます。」
空の状態は看板のように読めるべきで、ポスターのように情報過多にしてはいけません。レイアウトは一目で理解して行動できる明確な順序を必要とします。
視線の流れに合わせたシンプルな階層を使いましょう：見出し、短い一文、主要CTA、そして静かな二次アクション（インポート、テンプレート、スキップ）。
主要ボタンはメッセージの近くに置いてください。ユーザーが読んでスクロールしてから判断するようだと、止まってしまうことが多いです。よく使われるパターンは見出し＋本文＋CTAのタイトなブロックを作り、そのブロックとナビゲーションやフッターなど他要素との間に余白をとることです。
アイコンや小さなイラストはスキャンを助けますが、意味がなければ逆効果です。「No projects yet」のそばにフォルダアイコンがあるのは有用ですが、ランダムなマスコットはそうではありません。イラストを使うなら小さくして、見出しの上に配置してCTAと競合しないようにします。
最も強力なパターンのひとつは成功のプレビューを小さく見せることです：サンプルカード、テーブルのデモ行、フェードした例のタイルなど。Koder.aiのようなツールなら、空の「Apps」画面にサンプルのアプリタイル（名前、ステータス、最終更新）を1つ表示して、ユーザーが何を作るのか瞬時に理解できるようにします。
空の画面に来た人は通常、以下の3つを求めています：新規作成、データの持ち込み、またはスターターで素早く始めたい。良い空の状態はそれらの道を明確に示し、ユーザーに調べさせたり迷わせたりしません。
最初の本当の勝利が新しいものを作ること（プロジェクト、ワークスペース、ページ、最初のレコード）なら「作成」をリードにします。これはユーザーが短時間で終えられ、アクションが元に戻せる場合に最適です。
作成に時間がかかるなら、それを小さな最初のステップに分けてください（例えば「ドラフトを作成」）。ロックイン感を与えずに前進させることが重要です。
多くの新規ユーザーが既存のシステムやファイル、アカウントを持っているなら「インポート」を前面に出します。空の状態では何がインポート可能かと、インポート後に得られるもの（フィールドがマッピングされ項目が作成されるなど）を示してください。
文脈に応じて主要CTAを選ぶ実用的な方法があります。ユーザーがマイグレーションに関するコンテンツから来たならImportを強調し、空の「新規プロジェクト」ボタンをクリックして来たならCreateを強調し、セットアップが複雑ならTemplateを強調します。
テンプレートは共通の出発点があり、ユーザーが設計より適応を望む場合に使います。テンプレート名は「Sales pipeline」「Weekly planner」のように成果で名付け、機能名で呼ばないでください。
「サンプルデータで試す」のような安全なオプションを用意すると恐れが減ります。削除できることを明示してください。チャット主導のビルダー（Koder.aiのような）では、サンプルプロジェクトがユーザーに作るものの形を示す役割を果たします。
空の画面は中立ではありません。良い空の状態は次の成功アクションを明確に、安心させ、手早く感じさせます。
例：誰かが新しいCRMのContactsタブを開いたら最速の勝利は「最初の連絡先を追加する」です。名前＋メールだけに絞り、フォールバックとして「CSVをインポート」を提供し、後でフィールドを更新できると安心させます。
多くの「詰まる」空の状態は、次の動作を危険か不明瞭に見せてしまうことが原因です。
同等に見える3つのボタンを出すとユーザーは止まります。主要アクション1つと二次アクション1つを選んで、その他は「その他のオプション」に隠しましょう。
「強力なダッシュボード、柔軟な役割、高度な設定」では今すべきことが分かりません。クリック後に得られる結果に置き換えます。
例：
長いフォームはコミットメントに感じられます。必要なら後で尋ねてください。まずは目に見えるものが生まれる最小のステップに絞ります。
名前・会社規模・役職・目的を初回に全部聞く代わりに「プロジェクト名」だけを最初に尋ね、残りは最初の画面ができてからオプションにします。
ユーモアは場所を選びますが、ユーザーが明確さを必要とする場面では避けてください。「ここには何もないよ」では時間の無駄です。クリック後に何が起きるか、何が起きないかを正確に述べてください。
一部のユーザーはスクラッチから作れない場合があります。現実的なバックアップを用意してください：インポート、テンプレート、サンプルなど。例えばKoder.aiのようなツールでアイデアがない場合、「サンプルアプリから始める」で作業可能な画面まで誘導できます。
新規ユーザーは画面を見て5秒以内に、その画面が何で、なぜ重要なのか、次に何をすべきかを理解できるべきです。
安心文は躊躇を行動に変える力があります。CTAの近くに「後で変更できます」「確定するまでは公開されません」といった短い一文を置き、落ち着いた具体性を持たせてください。
簡単なテスト：同僚に画面を5秒見せてから主要ボタンをクリックしたら何が起きると思うか答えさせてください。答えられなければ、コピーや階層を絞り込みます。
チャット主導のビルダー（Koder.aiのような）でセットアップフローを作る場合も同じチェックリストが当てはまります。空の状態は1つの成功する次のアクションを招くように：テンプレートから始める、データをインポートする、または編集可能な最初の動作版を生成するなど。
ソロの創業者がKoder.aiにサインアップして新しいワークスペースを開きます。Projects画面にはゼロのアプリしかなく、「良い見本」が分かりません。
空のテーブルではなく、短い約束、明確な次のステップ、小さな安全メモを表示します。以下はコピーとCTAの一例です（所要時間は検証すべきプレースホルダーです）。
Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.
[Create your first app]
Secondary: Import existing code | Browse templates
Note: You can export the source code anytime.
創業者がCreate your first appをクリックすると、次の画面は「何を作っていますか？」という簡単な質問と単一の入力欄、さらに2つの例示プロンプト（例：「小さな代理店向けCRM」「サインアップ付きのランディングページ」）を提示します。道筋は狭く保ってください：明確な1フィールド、明確な1ボタン。
画面2は機能・ページ・データの簡単なプランレビューになり、その後ビルドステップと動作するプレビューが続きます。最初の成功はプレビューで実際に何か操作できるとき（レコードを追加する、テストのサインアップを送るなど）です。
データが存在するようになると、戻ってきたユーザーは同じ空の状態をもう見ません。Projects画面は「最近のアプリ」ビューに切り替わり、目立つクイックアクション（例：New app）と、小さなアクション（SnapshotsやDeployなど）を表示します。
効果を知るために追うべき指標の例：
今週は1つのセットアップフローを改善してください。離脱が大きい箇所か、新規ユーザーが最初に通る箇所を選びます。その空の状態を書き直して次の3つの質問に素早く答えるようにします：これは何か？ なぜ今やるべきか？ 次にどこをクリックするか？
変更は小さく保ってください。オンボーディング全体を再設計するのではなく、最初の成功アクションを明白にするのが目的です。
短い1週間プランの例：
一つの勝ちを得たら標準化します。空の状態の社内パターンを短く作りましょう：間隔、見出しスタイル、アイコン／イラストのルール、CTAレイアウトの一貫性。チームが同じ構造に従えば、ユーザーは一度学べばどこでも速く動けます。
新しいアプリを作ってセットアップ手順を素早くプロトタイプしたいなら、Koder.ai (koder.ai)はPlanning Modeでフローの草案を作り、最初のバージョンを生成して実際に人がどこで止まるかを見ながら反復するのに役立ちます。
空の状態とは、ユーザーが何も作成・インポート・接続していないために表示するコンテンツがない画面のことです。画面の目的を説明し、次に成功につながるアクションを示すべきで、ユーザーに推測させるのは避けましょう。
読み込み中の画面は「待ってください、何かが進行中です」を示し、エラーは「何かが失敗しました、理由は〜」と伝えます。セットアップ用の空の状態は「ここにはまだ何もありません、それは正常です」と示し、ユーザーが作成・インポート・テンプレートから開始して最初の実際の成果に到達できるよう導きます。
下の3点に素早く答えられることを目標にしてください：この画面は何か、なぜ空なのか、次に何をすべきか。数秒で理解できなければ、ユーザーは不安になったり去ったりします。
単純な構成を使いましょう：その領域が何のためかを短く説明する文、明確な主要アクション、そして不安を和らげる一行の保証です。文章は短く、ユーザーがクリック先をすぐに理解できるようにします。
基本は1つの主要ボタンを置き、他は明確に二次的にします。複数の同等に見えるボタンを並べると、どれが正しい道かわからずユーザーは固まります。
「作成」は、最初の可視的な勝利（最初のプロジェクトやレコード）が手早く得られる場合に先頭に出します。ユーザーが既に別の場所にデータを持っている場合は「インポート」を、速さが重要で既製の出発点が有効な場合は「テンプレート」を先に出します。
見出しは「成果 + 対象」の形が分かりやすいです（例：「最初のプロジェクトを作成」）。本文は1文で「それが何か + それがなぜ重要か」を示して、クリック後の結果を予測できるようにします。
見出し、短い一文、主要ボタンをタイトにまとめて視覚的階層を明確にします。二次アクションは控えめに配置し、主ボタンをページの下に押し込んだり探させたりしないでください。
CTA付近に短い安全策を置いて不安を和らげます。例：「後で変更できます」「確定するまでは公開されません」など。Koder.aiのようなツールなら、スナップショットやロールバック、エクスポート可能であることを付け加えると安心感が増します。
空の画面が表示された回数、主要CTAのクリック率、そしてそのマイルストーン達成率を追いましょう。さらに、初回成功までの時間や空の状態から次のステップへの離脱率も見ると、クリックはされているが結果に結びついていない問題を見つけられます。