検索UIの設計：入力・絞り込み・0件表示と戻る操作

検索機能は、商品や記事が多いWebサイトで目的の情報へ進むための入口になります。使いやすくするには、検索欄の見つけやすさだけでなく、入力候補、結果の絞り込み、検索し直すときの操作まで一続きで考えることが大切です。

検索は、カテゴリやメニューでたどるナビゲーションの設計を補うものです。検索対象を伝えたうえで、入力した言葉、適用中の条件、表示中の結果が食い違わないようにします。ここでは「防水ジャケット」を探す場面で、5つの基本原則と検索後の流れを具体化します。

1. よくある検索機能のUIデザイン

基本となる検索UIは、キーワードを入力する欄と、検索を実行するボタンなどで構成されます。身近なサイトを比べると、検索できる対象や入力候補の出方など、目的に応じた違いが分かります。

検索欄の横に「検索」というラベルや虫眼鏡のアイコンがあると、何をする場所なのかを伝えやすくなります。ただし、見慣れた形にするだけでは十分ではありません。入力後に何が起きるのか、結果から戻ったときに条件が残るのかも設計します。

2. 良い検索UIデザインの原則

検索欄を置く範囲、位置、幅、実行方法、検索対象の説明という5つの観点から確認しましょう。すべてのサイトに同じ配置を適用するのではなく、検索の重要度と利用場面に合わせて調整します。

2.1 原則1：検索の入口を一貫した場所に置く

商品や記事を探しながらページを行き来するサイトでは、関連するページから検索へ戻れるようにします。ヘッダーなど共通の場所に入口を置くと、移動後に探し直す負担を減らせます。

一方、購入の最終確認など、特定の操作に集中させたい画面では、検索欄を常に大きく表示する必要はありません。検索へ戻る必要性と、今の作業を中断する影響を考え、入口の見せ方を決めましょう。

2.2 原則2：検索の重要度に合った位置を選ぶ

検索が主要な操作なら、ヘッダーの中央やページ上部など、見つけやすく入力しやすい位置を検討します。右上への配置も選択肢ですが、すべての画面で最適とは限りません。

たとえば商品数の多いECサイトでは検索欄を広く見せ、狭い画面では専用の検索画面を開く方法も考えられます。ロゴやメニューとの関係を確認し、キーボードでも迷わず入力欄へ移動できるようにします。

2.3 原則3：入力内容を確認しやすい幅を確保する

検索フィールドは、入力するキーワードを確認・修正できる幅にします。長ければ長いほどよいのではなく、よく使われる語句と画面幅に合わせて調整しましょう。

たとえば「防水ジャケット メンズ 軽量」のように条件を加える場合、末尾しか見えない狭い欄では内容を見直しにくくなります。長い語句を入力したときの横スクロールやカーソル移動も含め、途中の言葉を修正できるかを確認します。

2.4 原則4：虫眼鏡のアイコンと検索ボタンを使う

虫眼鏡は検索を表すアイコンとして広く使われています。「検索」という文字と組み合わせると、入力欄と実行ボタンの役割を伝えやすくなります。

アイコンだけのボタンを使う場合も、支援技術から分かる名前を付け、キーボードで操作できるようにします。また、ボタンが検索欄を開くのか、入力済みの語句で検索を実行するのかを混同させないことが重要です。

2.5 原則5：検索できるものを表示する

検索できる対象が分かるラベルや補足文を置きます。商品だけを探せるのか、記事やヘルプも含むのかを示すと、入力する言葉を考えやすくなります。

ECサイトなら「商品名・カテゴリで検索」といった説明が考えられます。プレースホルダーは入力すると消えるため、必要な説明をそこだけに置かず、入力中も検索対象が分かるようにしましょう。

3. サジェスト・レコメンド・フィルターを使い分ける

検索を支える機能には、入力する言葉を補うサジェスト、商品や記事を提案するレコメンド、結果の条件を絞るフィルターがあります。同じ「おすすめ表示」に見えても役割は異なるため、必要な場面に合わせて使い分けます。

3.1 サジェスト表示

サジェスト（suggest）は、入力中の語句に応じて検索候補を提示する機能です。商品名を正確に覚えていない人や、どんな条件を追加すればよいか迷う人を支えます。

Googleなどの検索で見かける入力候補がその一例です。商品検索なら「防水」と入力した時点で「防水ジャケット」などを提示できます。候補の選択と検索実行が同時なのか、欄への補完だけなのかを明確にし、選択中の候補を見分けられるようにしましょう。

候補を上下キーで移動し、Enterで選び、Escapeで閉じる場合は、それぞれの結果を決めておきます。候補を閉じても入力済みの語句は残すなど、通常の文字編集を妨げない設計にします。W3CのComboboxパターン（英語）を参考に、採用した動作をキーボードと支援技術でも確認してください。

3.2 レコメンド表示

レコメンド（recommend）は、商品や記事などの閲覧先を推薦する機能です。入力する検索語句の候補とは分けて示し、選ぶと語句が補完されるのか、商品詳細などへ移動するのかを伝えます。

探す対象がまだ決まっていない人には、関連する商品やカテゴリが手がかりになります。一方、商品名を決めて検索している人には、推薦が入力欄や結果を覆うと妨げになります。表示量と位置を調整し、推薦を選ばずに検索を続けられるようにします。

3.3 フィルター機能

フィルターは、検索結果をカテゴリ、価格、サイズなどの条件で絞る機能です。漠然と探している人だけでなく、必要な条件がはっきりしている人にも役立ちます。現在適用している条件と解除方法を分かるように示します。

たとえば「防水ジャケット」の検索後にサイズと価格を絞り、商品詳細から戻っても検索語句と条件が残っていれば、比較を続けやすくなります。更新中は読み込み中であることを示し、通信の失敗を「0件」と表示しないようにします。条件に合う商品がない場合は、語句を残したまま価格やサイズの条件を解除できるようにしましょう。

4. 商品検索を、結果の確認から探し直しまで設計する

架空の衣料品店で「防水ジャケット」を検索する例です。最初の結果は12件、サイズMを選ぶと4件、さらに価格の上限を10,000円にすると0件になるものとします。件数と価格は設計用の例です。利用者が途中で条件を変えても、何を検索しているかを見失わない画面にします。

4.1 検索語句と、追加した条件を分ける

検索欄には「防水ジャケット」を残し、その下に「サイズ：M」「10,000円以下」を適用中の条件として表示します。条件を取り消す操作は、それぞれの条件の近くに置きます。「すべてクリア」が検索語句まで消すのか、フィルターだけを解除するのかも、ラベルと動作をそろえて決めます。

この例では「絞り込みを解除」をフィルターだけに作用させます。商品自体を探し直したい人は検索欄を変更でき、価格だけを緩めたい人は価格条件だけを解除できます。異なる目的を一つのリセット操作へ押し込めないことが大切です。

4.2 0件・読み込み中・通信失敗を別の表示にする

0件の画面に無関係なおすすめ商品だけを並べると、条件に合った結果なのか判断できません。代替候補を見せる場合は、元の条件と何が違うかを示します。「価格条件を外した商品」のように理由が分かれば、利用者は条件を変えるかどうかを選べます。

入力やフィルターを続けて変更した場合は、結果見出しと一覧が同じ検索を指すことも重要です。新しい語句が欄にあるのに古い検索の結果だけを確定表示しないよう、更新中の見せ方と採用する結果を開発者に伝えます。

4.3 商品詳細から戻っても比較を続けられるようにする

Mの4件から一つの商品を開き、詳細を読んで一覧へ戻る場面を用意します。戻ったときには検索語句、サイズ、並び順、可能な範囲で一覧の位置を保ちます。毎回すべての商品へ戻ってしまうと、同じ条件を設定し直すことになります。

URLを共有したときにどの条件まで再現するかも決めておきます。アカウントにひも付く履歴と、共有できる検索条件は同じではありません。画面設計では、URLから直接開いた状態と、詳細画面から戻った状態を別々に用意すると、必要な情報を整理できます。

4.4 モバイルでは絞り込みの適用時点を明確にする

狭い画面でフィルターを別のパネルにまとめる場合は、選ぶたびに適用するのか、「結果を表示」でまとめて適用するのかを統一します。後者なら、パネル内で選んだ条件と、現在の一覧に適用済みの条件を区別してください。「閉じる」を押しただけで設定が保存されるのか破棄されるのかも、途中で変えないようにします。

日本語入力では、文字変換の確定と検索の実行が続く場面があります。変換を確定したつもりで別の候補や検索結果へ移動しないよう、入力欄と候補の操作を実装した画面で確かめます。見た目を確認するプロトタイプと、文字入力の動作確認は役割を分けます。

5. Pixsoで検索の画面と遷移を組み立てる

Pixsoでは、検索欄、候補、結果一覧を同じファイル内で設計できます。完成画面を並べるだけでなく、「入力する」「候補を選ぶ」「条件を解除する」という操作で何が変わるかを確認しましょう。

5.1 同じ商品情報で5つの画面を作る

「入力候補」「検索結果12件」「Mで絞った4件」「価格条件を加えた0件」「通信失敗」をフレームに分けます。検索欄とフィルターは共通のコンポーネントにし、同じラベル、語句、選択状態を使います。0件の画面だけ検索欄が消えるなど、状態によって探し直す入口がなくならないか見てください。

Pixsoのプロトタイプ機能で、条件の適用、価格条件の解除、商品詳細から一覧へ戻る流れをつなぎます。これは検索画面と遷移を検討する作業です。実際の検索精度、応答速度、日本語入力のイベント処理は、実装側の検索で確認します。

5.2 見つからなかった後の行動をレビューする

レビュー担当者には、「防水ジャケットをMサイズ、10,000円以内で探し、見つからなければ価格条件だけを外してください」と伝えます。検索語句まで消してしまう、再試行の代わりに条件を変更する、詳細から戻ると比較位置を失う、といった問題がないかを見ます。

画面上の該当箇所へコメントを残し、条件を解除した後の件数や、戻ったときに維持する項目を同じファイルで共有します。見た目の変更に加え、何を残し、何を更新するかを説明できると、開発への引き継ぎも具体的になります。

Pixsoで検索UIを設計

入力後の行動までつながる検索UIにする

検索UIでは、入口を見つけ、語句を入力し、結果を絞り、必要なら条件を直して探し直せることが大切です。サジェスト、レコメンド、フィルターの役割を分け、0件と通信失敗を混同しない表示にします。利用者が次に直せる条件を残しておけば、見つからなかった場面からも検索を続けられます。