検索結果 · 検索結果ページ
絞り込みと件数を先に見せる商品検索結果
左に絞り込み、上に適用中の条件、右にカードグリッドを置いた通販の検索結果ページ。各選択肢に件数を添えてゼロ件を踏ませない設計で、属性が構造化された商材の探索に向きます。
プレビュー
概要
絞り込み検索の考え方は、通販より半世紀以上前の図書館情報学から来ています。インドの図書館学者ランガナタンが1930年代に提唱したコロン分類法は、資料を一本の階層に押し込むのではなく、素材・場所・時間といった複数の面から同時に指定する方式でした。この「面（ファセット）で切る」発想が、2000年代に電子商取引へ持ち込まれ、いま私たちが当たり前に使っている左側の絞り込み欄になりました。
248件は、そのままでは選べない
検索結果が248件あると表示されたとき、人がやるのは全部を見ることではありません。自分の判断基準を思い出す作業です。容量はどれくらい必要か、予算はいくらまでか、いつ届いてほしいか。絞り込み欄の本当の役割は条件を入力させることではありません。判断基準を先に一覧して見せることにあります。だから群の見出しは、社内の属性名ではなく買う人の言葉で書く必要があります。そして各選択肢に件数を添えるかどうかで、体験は決定的に変わります。件数が無ければ、ユーザーは条件を足すたびに0件を引く賭けをすることになるからです。
崩れる形選択肢に件数を出さない
利用者は条件を足すたびに0件を引く賭けをすることになります。行き止まりに当たった時点で、絞り込み自体をやめてしまいます。
効く形各選択肢に件数を添える
選ぶ前に結果の大きさが分かります。群の見出しも社内の属性名ではなく買う人の言葉で書くと、判断基準の一覧としてそのまま読めます。
効く商材と、効かない商材
この形が力を発揮するのは、属性がはっきり構造化されている商材です。家電の消費電力、アパレルのサイズ、住まいの駅からの距離、求人の年収。数値や区分で言い切れるものが多いほど、絞り込みは正確に効きます。逆に、絵画や小説のように価値が属性に還元しにくいものでは、細かい絞り込み欄はほとんど使われません。そうした領域では、条件を刻むより、似たものを提示する方向に設計をずらすべきです。
迷いを減らす細部
適用中の条件は、結果の上に必ず出したままにしてください。何で絞ったかを忘れたまま「思ったより少ない」と感じるのが、離脱のいちばん多い経路です。並び替えの初期値は関連度にします。安い順を既定にすると、検索語との一致が弱い商品が先頭に並んでしまう。
0件の画面には、条件を一つ外した場合の件数を添えた提案を必ず置いてください。行き止まりを作らないことが、検索結果ページの最後の仕事です。
検索結果の構成要素
使いどころ
- 属性が構造化された商材（家電・アパレル・食品など）の通販検索
- 求人・不動産・旅行のように条件で絞り込む前提のサービス
- 結果件数が数十件を超え、一覧しただけでは選べない規模の在庫
- 社内ドキュメントやナレッジベースの横断検索
このデザインの分類
- カテゴリ
- 検索結果
- スタイル
- ミニマル / SaaS / コーポレート / クール
背景と狙いどころ
AIへの指示文
通販サイトの商品検索結果ページを作ってください。 要件: - 配色: 背景 #f7f8fa、カード白、境界 #e3e7ee、文字 #1c2333、 補助文字 #5b6478。アクセントは青 #1f6feb 一色に絞る。 - 上部に固定の検索バー。入力欄には検索語が入った状態で、 右端に消去ボタンを置く。フォーカス時は青い輪郭を出す。 - 検索バーの下に、パンくず → 見出し → 件数の順で置く。 見出しは「『検索語』の検索結果」の形にし、検索語だけを青にする。 件数は「248 件中 1 〜 8 件を表示（0.12 秒）」のように所要時間まで出す。 - その下に、適用中の絞り込みを削除ボタン付きのタグとして横並びにし、 右端に「すべて解除」を置く。ここは常に見える位置に固定する。 - 本体は960px以上で「左248pxの絞り込み + 右の結果グリッド」の2段組。 未満では絞り込みを結果の上へ縦積みにする。 - 絞り込みは価格帯・容量・ブランド・配送・評価の5群。 各選択肢の右端に該当件数を薄い文字で必ず添える。 選択済みはチェックを塗り、文字を濃くして太字にする。 選択肢が多い群には「さらに N 件を表示」を置く。 - 結果カードは1枚あたり、画像・商品名2行・価格・評価と件数・配送表示。 商品名の中で検索語に一致した部分は薄い黄色でハイライトする。 割引や在庫僅少はカード左上のバッジで出す。 - 最下部にページ送り。現在ページを青で塗り、途中は省略記号で畳む。 - 日本語の letter-spacing は 0、line-height は見出し1.5・本文1.8。 - HTML + CSS のみ。商品画像はグラデーションの背景に絵文字で代用する。
バリエーション
1行1件のリスト型にする
結果グリッドを、1行1件の横並びリストに変えてください。 左に正方形の画像、右に商品名・説明文2行・価格・評価を置きます。 カードグリッドより1件あたりの情報量が増えるので、 説明文と在庫状況を追加し、代わりに1画面あたりの件数は減らします。 求人や不動産のように、比較に文章が要る商材向けの形です。
結果0件の状態にする
同じ枠組みのまま、検索結果が0件の状態を作ってください。 グリッドの位置に、条件を緩める提案を3つ置きます。 「配送条件を外すと 42 件」のように、外した場合の件数を必ず添えます。 併せて、表記ゆれの候補と、同じ分類の人気商品6件を下に並べてください。 行き止まりを作らないことが、この状態の唯一の目的です。
絞り込みを横帯に変える
左側の絞り込みを、結果の上に横並びのドロップダウン帯として置き直してください。 各ドロップダウンは閉じた状態では「容量 ▾」のように名前だけを出し、 開くと選択肢と件数を一覧します。選択中は青い枠と選択数の丸バッジを付けます。 画面の横幅を結果に全部使えるので、1行に並ぶ商品を増やしたいときに向きます。
よくある質問
選択肢の横に件数を出すのはなぜ必要なのですか。
絞り込みは左と上のどちらに置くべきですか。
検索語のハイライトは色を強くしたほうがいいですか。
並び替えの初期値は何にすべきですか。
ページ送りと無限スクロールはどちらがいいですか。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
図書館カード目録風の検索結果
図書館の目録カード（カードカタログ）を再構築した検索結果ページ。請求記号・ISBN・在庫スタンプ・蔵書印で「アーカイブの権威」と「網羅性」を演出する尖ったSERP設計。
B2Bコーポレートの機能紹介セクション
B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。
1画面を大きく見せる資産管理アプリの紹介
端末を1台だけ大きく置き、周囲にUIの断片を浮かせるアプリ紹介セクション。数字そのものを主役にする構図で、家計簿・投資・ヘルスケアなど「自分の数値」を扱うアプリに向く設計。