Google Stitch で「何もない画面」を設計してみたら、UIにとって一番大切なことを考えるようになった

2026.04.14

Google Stitch でUIを作っていると、「コンテンツが入った状態」の画面ばかり作りがちだ。

カードがたくさん並んだダッシュボード、投稿が積み重なったタイムライン、商品が埋め尽くす一覧ページ——それらを作ることに集中して、気がつくと設計から漏れているものがある。「何もない状態の画面」だ。

サービスに初めてログインして、まだデータが何もないとき。検索したが結果が見つからなかったとき。エラーが発生してコンテンツが表示できないとき。ユーザーはその画面に必ず出会う。でもその画面を、私はずっと後回しにしていた。

Stitch で「空状態」のUIを真剣に設計するようになってから、UIデザインで本当に大切なことを考えるようになった気がしている。その話を書く。

結論から言うと

空状態（Empty State）UIとは、「ユーザーが次に何をすべきかを最も直接的に伝えられる画面」だ。コンテンツがないからこそ、デザインの言葉がユーザーに届きやすい。「何もない」を放置するのではなく、「だから次はこうしよう」と語りかけるUIにすることが、ユーザーのサービス継続率を大きく左右する。

空状態UIとは何か

Empty State の定義と種類

空状態UIとは、表示すべきコンテンツが存在しない場面で表示されるUIのことです。「エンプティステート（Empty State）」とも呼ばれ、ユーザー体験設計において重要だが見落とされやすいUIカテゴリだ。

空状態UIには主に以下の種類がある。

初回表示時：ユーザーがまだ何もデータを作っていない状態（新規登録直後のダッシュボードなど）
ゼロ件検索：検索やフィルタリングの結果が0件だった状態
削除後：すべてのアイテムを削除した後の状態（タスクをすべて完了・削除した後など）
エラー状態：接続エラー・権限エラーなどでコンテンツが表示できない状態
オフライン状態：インターネット接続がない場合の表示

これらはすべて「コンテンツがない画面」だが、ユーザーへの語りかけ方はそれぞれ異なる。初回表示は「さあ始めましょう」、ゼロ件検索は「条件を変えて試してみましょう」、エラーは「問題が起きました、こうすると解決できます」——それぞれに最適なメッセージと次のアクションがある。

なぜ空状態UIは後回しにされやすいのか

空状態UIが後回しにされる理由は、「コンテンツがない状態は例外だ」という思い込みがあるからだと思う。

でも実際には、新規登録ユーザーは必ず「初回の空状態」を経験する。検索機能を使うユーザーは、条件を絞るたびに「ゼロ件結果」に出会う可能性がある。エラーは想定外ではなく、必ず起きるものだ。

「例外」ではなく「必ず起きること」として設計に組み込むことが、空状態UIの本質だ。Stitch でのUI設計でこの視点を持つようになってから、「コンテンツが入った状態」と「空の状態」を必ずセットで生成するようになった。

Stitch で空状態UIを設計したときの発見

「空のダッシュボード」を作ってみた

SaaS ツールの新規登録直後のダッシュボードを設計していた。まず「データが入った状態」を作った。グラフ、カード、通知——画面が情報で満たされた状態だ。

次に「初回ログイン直後（データがゼロの状態）」をプロンプトで指定した。「タスク管理ツールの初回ダッシュボード。まだタスクが何もない状態。中央に大きなイラストと『最初のタスクを作ってみましょう』のメッセージ。下に『タスクを作成する』ボタン」

Stitch が生成した空状態の画面を見たとき、「データが入った状態」より心が動いた。理由は、空状態の画面の方が「ユーザーへの語りかけ」が直接的だからだと気づいた。コンテンツがないぶん、メッセージとボタンだけに集中できる。

それ以来、空状態UIの「メッセージの言葉」に時間をかけるようになった。「タスクがありません」と表示するだけの画面と、「プロジェクトの第一歩を踏み出しましょう。最初のタスクを作成してください」と語りかける画面では、ユーザーが感じるサービスへの印象が全く違う。

「ゼロ件検索」の設計が意外と奥深かった

検索結果が0件だったときの画面も、Stitch で設計してみると奥深さに気づく。

単に「検索結果が見つかりませんでした」とだけ表示する設計と、「『〇〇』に一致するものは見つかりませんでした。キーワードを変えて試してみましょう（キーワードをクリアするボタン付き）」と表示する設計では、ユーザーが次にとるアクションが変わる。

さらに、「もしかして：△△」のようなスペルミス提案や「こちらのカテゴリはいかがですか？」のようなレコメンデーションを空状態に含めるかどうかは、サービスの規模と開発コストによる。設計段階で「ゼロ件検索に何を表示するか」を決めておかないと、実装時に「スペルミス提案はどうしますか？」という問いが出てきて手戻りが生じる。Stitch で2パターン（シンプル版・レコメンデーション付き版）を生成して事前に合意しておくことが重要だ。

空状態UIを設計するときの3つの要素

1. ビジュアル（イラスト・アイコン）

空状態UIで最も視覚的に印象を決めるのがイラストやアイコンだ。

初回設定の空状態：「これから始まる」感を演出する前向きなイラスト（ロケット、芽吹く植物、スタート地点など）
ゼロ件検索：「見つからなかった」を示す表情のないキャラクターや虫眼鏡のアイコン
エラー状態：「問題が起きた」を示す警告系のアイコン（ただし過度に不安を煽らない）

Stitch でイラストを含む空状態UIを生成するとき、「中央に〇〇のシンプルなイラスト（線画スタイル）」と指定するとそれらしいものが生成される。ただしイラストの品質は Stitch の専門領域ではないため、本番制作では専用のイラストライブラリ（unDraw・Storyset など）から調達することをお勧めする。

2. メッセージ（テキスト）

空状態UIのメッセージは「見出し + 補足テキスト」の2層構造にするのが一般的だ。

見出しは「今の状況を短く説明する」（例：「まだタスクがありません」「条件に合う結果がありません」）。補足テキストは「なぜこうなっているのか、次に何をすればいいか」を具体的に説明する（例：「右上の『作成』ボタンから最初のタスクを追加してみましょう」）。

Stitch でメッセージを含む空状態UIを生成するとき、見出しと補足テキストを具体的にプロンプトに書き込むと、意図したメッセージがデザインに反映される。「空状態のメッセージは何でもいい」と指定を省くと、Stitch が汎用的な英語テキストを使うことがある。

3. アクションボタン

空状態UIに「次のアクション」を示すボタンを含めることで、ユーザーの離脱を防ぐ設計になる。

初回ログイン後の空状態なら「最初の○○を作成する」ボタン、ゼロ件検索後なら「検索条件をリセット」ボタン、エラー後なら「再試行」ボタン——それぞれの状況に応じた具体的なアクションラベルをつけることが重要だ。「OK」「閉じる」のような汎用的なラベルではなく、「次に何をすればいいか」が一目でわかるラベルにすること。

Stitch で Google が提唱する「状態設計」を活用する

「ハッピーパス以外を定義する」という考え方

Google Stitch の設計指針として、「状態（States）を定義して Happy Path だけに終わらない設計をする」という考え方がある。具体的には、Empty（空）・Loading（読み込み中）・Error（エラー）・Success（成功）の各状態を明示的に設計することが推奨されている。

Stitch でプロンプトに「この画面の Empty State バージョン」「この画面の Loading バージョン」「この画面の Error バージョン」を明示的に指定することで、4つの状態を個別に生成できる。この4枚を並べてプロトタイプに含めることで、実装チームへの仕様共有が格段にスムーズになった。

4状態を一度に並べて生成する方法

Stitch の無限キャンバスを活用して、「同一画面の4つの状態（Empty・Loading・Error・Success）を横並びで生成」というプロンプトを書くと、1回の生成で全状態のデザインをまとめて確認できる。

実際にこのアプローチで通知一覧画面の4状態を生成したとき、「Loading状態のスケルトンスクリーンのデザインは専用の検討が必要」という気づきが生まれた。空状態・エラー・成功は生成できたが、スケルトンスクリーンは動きがないと「グレーの帯が並んでいる謎の画面」に見えてしまう問題を、設計段階で発見できた。

FAQ

Q1. 空状態UIはすべての画面に必要ですか？

すべての画面には必要ありませんが、「コンテンツ一覧・ダッシュボード・検索結果・通知一覧」など、コンテンツが動的に変わる画面には必ず設計することをお勧めします。静的なページ（会社概要・利用規約など）には空状態は発生しないため不要です。

Q2. 空状態UIにイラストは必ず必要ですか？

必須ではありませんが、イラストやアイコンがあると画面の「空っぽ感」が和らぎ、ユーザーの感情的な反応が改善される傾向があります。ただしイラストのスタイルがサービス全体のトーンと合っていないと逆効果になることもあります。シンプルなアイコン1つ＋メッセージで十分なケースも多く、過度に凝ったイラストは不要です。

Q3. 「ゼロ件検索」の空状態に「おすすめ」を表示するべきですか？

サービスによります。ECサイトや動画配信のような「探す体験」が中心のサービスでは、ゼロ件検索時に関連カテゴリや人気商品を表示することで離脱を防ぐ効果があります。一方、ビジネスツールや管理システムの検索では、おすすめより「条件をリセットする」「別のキーワードで試す」というシンプルな誘導の方がユーザーには親切です。サービスの目的とユーザーの検索意図から判断しましょう。

Q4. エラー状態のUIはどの程度詳細に設計すべきですか？

最低限として「エラーメッセージ（何が起きたか）」「再試行ボタン（次のアクション）」「サポートへの連絡方法（解決できない場合）」の3要素を含めることをお勧めします。エラーコードを表示するかどうかは、ユーザーが技術者かどうかで判断します。一般ユーザー向けのサービスでは「エラーコード 503」より「しばらく経ってからもう一度お試しください」の方が親切です。

Q5. Google Stitch でエラー状態の画面を生成するときのプロンプト例は？

「通知一覧画面のエラー状態。中央に警告アイコン（三角形に!マーク、オレンジ色）。見出し『通知を読み込めませんでした』。補足テキスト『接続を確認してもう一度お試しください』。プライマリボタン『再試行』」というプロンプトが有効です。エラーの種類（ネットワーク・権限・サーバーエラー）によってメッセージを変えるため、エラー状態を1パターンだけ作るのではなく複数パターンを生成しておくと実装への引き継ぎが完全になります。

Q6. 空状態のコピー（文章）はどのように考えればいいですか？

空状態のコピーで意識すべきは「ユーザーへの共感→状況の説明→次のアクション」の3ステップです。例：「まだ何もありません（共感）→ タスクを作成すると、ここに表示されます（説明）→ 最初のタスクを作る（アクション）」。「○○がありません」だけで終わらず、「だから次はこうしよう」まで語りかけることが離脱防止につながります。