「検索バーを置けばいい」と思っていた。テキストを入力する場所と検索ボタン、それだけでいいと。
Google Stitch で検索UIを設計しようとしたとき、最初のプロンプトに「検索バーを追加してください」と書いた。生成された画面を見て、「確かにこれでも機能はするけど、何かが足りない」と思った。
検索という行為がどれだけ多くの状態と文脈を持っているか——クリックひとつで考え込んだ。この記事はその気づきの記録だ。
結論から言うと
一言で言えば、検索UIは「入力前・入力中・入力後・結果なし・結果あり」という複数の状態をセットで設計するものであり、Google Stitch はそのすべての状態のたたき台を効率的に生成するために使える。「検索バーひとつ」ではなく「検索体験のすべての状態」を設計することが、良い検索UIの条件だ。
検索UIとは何か
検索UIとは、ユーザーがサービス内のコンテンツや商品・情報を探すための UI のことだ。シンプルな検索バーから、フィルター・オートコンプリート・サジェスト・高度な絞り込み機能まで、サービスの性質によって求められる複雑さは大きく異なる。
ECサイトの商品検索、ドキュメントサービスの全文検索、SaaSの機能検索、動画サービスのコンテンツ検索——それぞれ異なる要件を持つが、共通しているのは「ユーザーが何かを探したいという意図を持ってここに来る」という点だ。
検索UIの5つの状態
良い検索UIを設計するには、以下の5つの状態をすべて考慮する必要がある。
状態1（入力前）：検索バーがフォーカスされる前の状態。プレースホルダーテキストのみ表示。
状態2（入力中）：ユーザーがキーワードを入力している状態。オートコンプリートのドロップダウンが表示されることが多い。
状態3（検索実行後・結果あり）：検索結果が表示されている状態。ヒット件数・並び替え・フィルターが含まれる。
状態4（結果なし）：検索キーワードに一致する結果がない状態。エンプティステートとして設計が必要。
状態5（ローディング）：検索実行後、結果が返ってくるまでの待ち状態。スケルトンスクリーンが有効。
Stitch でプロンプトに「5状態を生成してください」と明示することで、これらすべてのたたき台を一度に作れる。
オートコンプリートのUI設計
検索UIの中でも、オートコンプリート（入力中にサジェストが表示される機能）のUIは特に設計の難易度が高い。
Stitch でオートコンプリートを生成する
プロンプト例：「ECサイトの検索バー・入力中の状態。検索フィールドにユーザーが「ニット」と入力したとき表示されるオートコンプリートドロップダウン。リストに5件のサジェスト：「ニット セーター」「ニット カーディガン」「ニット 帽子」「ニット ベスト」「ニット パンツ」。各サジェストの左に検索アイコン・右に「→」アイコン。最下部に「ニット」で検索するオプション（全件検索）。ドロップダウンは角丸8px・影付き・白背景。」
このプロンプトで、入力中の状態を視覚化した検索UIが生成される。オートコンプリートのリストの視覚的なデザインをたたき台レベルで確認できる。
実際に使ってみて分かったのは、Stitch は「画面の特定の状態」を詳細に描写するほど、意図に近い出力が得られるということだ。「検索バーを追加」という抽象的な指示より、「入力中の状態・オートコンプリートが表示された状態」という具体的な状態の描写が、精度の高い生成につながる。
検索結果の「次の画面」をStitchに提案させる
Stitch 2.0では、現在の画面から「次に表示される可能性の高い画面」を提案する機能がある（Google Labs 公式発表、2026年3月）。検索バーの画面を生成した後、「この画面のユーザーが検索を実行したら次に表示される画面を生成してください」と指示すると、検索結果ページのデザインが自動的に提案される。
このフロー生成機能を使うことで、「検索バー→オートコンプリート→検索結果→詳細ページ」という連続した画面遷移を、Stitch 2.0のマルチスクリーンキャンバスで確認できる。
検索結果ページの設計
検索結果ページは、ユーザーの意図に最も素早く応えるために設計される。結果の表示形式・フィルター・ソート・ページネーションの設計が、ユーザーの「目的の情報にたどり着けるか」を左右する。
検索結果のレイアウトパターン
検索結果の表示形式には主に3つのパターンがある。リスト表示（縦1列・情報量多め）・グリッド表示（2〜4列・サムネイル重視）・地図表示（位置情報サービス向け）だ。
ECサイトや画像サービスはグリッド表示が向いており、記事・ドキュメントサービスはリスト表示が向いている傾向がある。Stitch でどちらのパターンも素早く生成して比較できるため、「このサービスにはどちらが合うか」の議論をビジュアルベースで進められる。
「結果なし」のエンプティステート
検索結果が0件だったとき、「見つかりませんでした」だけで終わるUIはユーザーを詰まらせる。良い「結果なし」画面には次の要素が含まれる。
検索キーワードの確認：「〇〇の検索結果はありませんでした」と入力キーワードを表示して、意図しない入力ミスに気づかせる。
スペルチェック提案：「もしかして：△△」という代替キーワードの提案。
関連コンテンツへの誘導：「〇〇に関連するカテゴリを見る」というリンク。
検索条件の緩和提案：「フィルターを解除して再検索する」というCTA。
Stitch でこれらを含む「結果なし」画面のプロンプトを書くと、ユーザーを行き止まりにしない設計のたたき台が生成される。
よくある質問（FAQ）
Q1. グローバル検索とローカル検索の違いは何ですか？
グローバル検索はサービス全体を横断して検索するもの（ヘッダーの検索バーなど）。ローカル検索は特定のページ・カテゴリ内のみを検索するものです。どちらを設計するかによって、検索結果ページの設計も変わります。Stitch でプロンプトに「サービス全体のグローバル検索」または「この商品カテゴリ内のフィルター検索」と明示することで、適切なUIが生成されます。
Q2. 検索フィルターのUIはStitchで設計できますか？
設計できます。「検索結果ページ左サイドバーにフィルターパネル：カテゴリ選択（チェックボックス）・価格範囲スライダー・評価フィルター（星マーク）・ブランド絞り込み（チェックボックス）。選択中のフィルターは検索結果上部にタグ表示（×で個別削除可）。」というプロンプトで、フィルター付きの検索結果ページが生成されます。
Q3. モバイルの検索UIでデスクトップと大きく変わる点は何ですか？
モバイルではフィルターを常時表示する余裕がないため、「フィルターボタンをタップして展開するドロワー型」が多く使われます。また、オートコンプリートのドロップダウンは画面幅全体に広がる表示の方が使いやすいです。Stitch でモバイル版の検索UIを生成するときは「フィルターはドロワー型・オートコンプリートはフルスクリーン表示」と指定することで、スマートフォンに適した設計が出力されます。
Q4. 検索履歴・最近見たアイテムの表示UIはStitchで設計できますか？
設計できます。「検索バーをフォーカスしたとき（入力前の状態）に表示されるドロップダウン：上部に「最近の検索」（3件・×で削除可）・下部に「よく検索されているキーワード」（5件）」というプロンプトで、パーソナライズされた検索ドロップダウンのUIが生成されます。
Q5. 音声検索のUIはStitchで設計できますか？
音声入力ボタンの視覚的なデザインは生成できます。「検索フィールドの右端にマイクアイコン（タップで音声入力開始）。録音中は赤いパルスアニメーション」というプロンプトで、音声検索対応の検索バーUIが生成されます。ただし実際の音声認識機能の実装はエンジニアの作業になります。
注意点・失敗しやすいポイント
1. 検索バーだけ置いて「完成」と思わない
検索UIは「バーを置くこと」が目的ではない。ユーザーが何かを探している意図に応えることが目的だ。バーだけ置いて終わりにせず、5状態すべてをStitchで設計することを習慣にすること。
2. オートコンプリートのレイテンシを設計に含める
オートコンプリートは入力のたびにAPIリクエストが発生する。ネットワークが遅い環境では、サジェストが出てくるまでのローディング状態もUIとして設計が必要だ。「入力後200ms後にサジェストが表示されるまでのローディングインジケーター（スピナーまたはスケルトン）」をプロンプトに含めること。
3. 「検索できる範囲」をユーザーに伝える
「何が検索できるか」をユーザーが知らないと、的外れなキーワードを入力して「見つからない」と感じる。プレースホルダーテキストや検索バー近くの補足テキストで「商品名・カテゴリ・ブランドで検索できます」と伝えることで、ユーザーの検索精度が上がる。Stitch のプロンプトにこの補足テキストを明示すること。
まとめ：「検索バーひとつ」の向こうに、設計の世界がある
Google Stitch で検索UIを設計してみて、「検索バーを置く」という行為の背後にどれだけ多くの設計判断が積み重なっているかを実感した。
入力前の状態・入力中の状態・結果あり・結果なし・ローディング——5つの状態を意識して設計するだけで、ユーザーが「迷わずに目的にたどり着ける」体験の質が変わる。
Stitch はその5状態のたたき台を、1つのプロンプトで揃えてくれる。「検索バーを追加してください」と書いていた頃の自分に、「それだけじゃ終わらないよ」と伝えたい。
