検索・絞り込み
探す・絞る・見つからないときの立て直し。
探す・絞る・見つからなかったときに立て直す部品のカテゴリ。即時検索と一致ハイライト、フィルタチップ、ファセットの件数再計算、並び替え、最近の検索、グループ分けサジェスト、価格レンジ、検索演算子、そして0件からの立て直しと「もしかして」がある。原則はヒックの法則。選択肢が多いほど決めるのに時間がかかるので、検索と絞り込みの仕事は「候補を減らして見せる」ことにある。ただし減らしすぎて0件にした瞬間に行き止まりになるので、このカテゴリの半分は0件を防ぐ・戻す仕掛けでできている。商品一覧や記事一覧の探しにくさを直すときに引く。
使い分け語で探すなら instant-search-highlight、属性で絞るなら filter-chips-multi（少数）か faceted-sidebar-counts（多数）、モバイルは filter-drawer-apply。件数は results-count-live で見せ、0件は zero-results-recovery を先に用意する。
まず見る3件
- 入力
即時検索＋一致ハイライト
Search Term Highlighting
入力のたびに記事一覧を絞り込み、一致した文字を <mark> で強調する。件数はライブで更新され、空白区切りの複数語は AND で効く。0件では言い換えを促す。
- 一致箇所を強調すると「なぜこれが出たか」が説明され、利用者は結果を疑わずに済む
- 件数は「14件中 3件」と母数つきで出す。母数がないと絞り込めたのか減っただけか分からない
- 0件の文言には検索語をそのまま返し、次の一手（別の言葉）を添える。行き止まりにしない
- JS
- クリック
ファセット絞り込み実例あり
Faceted Navigation
ブランド・素材・色のチェックボックスで絞り込む。1つ選ぶたびに他のファセットの件数が再計算され、0件になる選択肢は淡色で押せなくなる。PC は左サイドバー、狭い幅は上に積む。
- 件数の再計算は「他のファセットの条件を掛けた上で、この値を選んだら何件か」。同じファセット内は OR なので自分の条件は掛けない
- 0件は消さずに淡色で残す。消えると「さっきあった選択肢がどこへ行ったか」を探させてしまう
- 選択中の条件は結果側の先頭にも出す。サイドバーを見上げなくても、いま何で絞れているかが分かる
- JS
- クリック
0件の立て直し
No Results Recovery
条件を重ねて0件になった検索結果を、行き止まりにしない。「条件を1つ外すと何件になるか」をボタンで示し、押すとその場で結果が出る。近い候補も先に見せる。
- 0件の画面で一番効くのは「どの条件が効きすぎているか」を数字で見せること。外す前に件数が分かれば迷わない
- 近い候補は「何が違うか」を添えて出す。黙って似た商品を並べると、条件を無視されたと感じる
- 検索語は消さずに残す。打ち直しは最後の手段で、まず条件の方を疑ってもらう
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| 即時検索＋一致ハイライト Search Term Highlighting | 入力 | JS | 記事・FAQ など数十〜数百件の一覧を打ちながら絞る画面・一致した理由を見せたい検索（<mark> で強調） | default / hover / focus / empty |
| 複数選択フィルタチップ Multi-Select Filter Chips | クリック | JS | EC の商品一覧でカテゴリ・価格帯・在庫を重ねて絞る・群の中は OR・群をまたぐと AND にしたい絞り込み | default / hover / focus / active / disabled / empty |
| ファセット絞り込み Faceted Navigation | クリック | JS | ブランド・素材・色など複数軸で絞る EC の一覧・選ぶたびに他軸の件数を再計算したい検索結果 | default / hover / focus / disabled / empty |
| 並び替えメニュー Sort Menu with FLIP Reorder | クリック | JS | 商品カードの並びを価格・評価・新着で切り替える一覧・現在の並び順をボタン文言に常に出したい画面 | default / hover / focus / active |
| 最近の検索 Recent Searches | 入力 | JS | 同じ語を繰り返し探す EC・アプリ内検索・入力が空のときに前回の検索を再利用させたい欄 | default / hover / focus / empty |
| グループ分けサジェスト Grouped Search Suggestions | ホバー | JS | 商品・カテゴリ・記事など種類の違う候補を出す検索・行き先（商品ページ／一覧）を候補ごとに示したい欄 | default / hover / focus / active / empty |
| 0件の立て直し No Results Recovery | クリック | JS | 条件を重ねた EC 検索が0件になったとき・どの条件を外せば何件かを数字で示したい画面 | default / hover / focus / empty |
| 価格レンジ＋数値入力 Dual-Handle Range with Inputs | ドラッグ | JS | 価格帯・面積など数値の上下限で絞る EC・不動産検索・スライダーと数値入力を双方向に同期させたい欄 | default / focus / active |
| 検索演算子のヒント Search Operator Tokens | 入力 | JS | メール・Issue など from: is: で絞る高度な検索・演算子を覚えさせずに打ち始めで教えたい欄 | default / hover / focus / active / empty |
| 結果プレビュー付き検索モーダル Search Dialog with Preview Pane | クリック | JS | 社内ドキュメントなど開く前に中身を確かめたい検索・⌘K で開くコマンド型の検索 | default / hover / focus / active / empty |
| モバイルの絞り込みドロワー Filter Bottom Sheet | クリック | JS | スマホの EC 一覧で下から出る絞り込みシート・「○件を表示」で押す前に結果の量を見せたい画面 | default / hover / focus / active / disabled / empty |
| 結果件数のライブ更新 Live Result Count | クリック | JS | 条件を変えるたびに件数を問い合わせる検索フォーム・連続した変更を 300ms のデバウンスで1回にまとめたい画面 | default / focus / loading / empty |
| もしかして Did You Mean | 入力 | JS | かな違い・打ち間違いで0件になる記事検索・辞書にある語だけを候補に出したい訂正提案 | default / hover / focus / empty |
| 保存した絞り込み Saved Filter Presets | クリック | JS | SaaS の一覧で同じ絞り込みを繰り返す上級者向け・現在の条件と一致する保存条件を強調したい画面 | default / hover / focus / active / empty |
すべての見本（14件）
- 入力
即時検索＋一致ハイライト
Search Term Highlighting
入力のたびに記事一覧を絞り込み、一致した文字を <mark> で強調する。件数はライブで更新され、空白区切りの複数語は AND で効く。0件では言い換えを促す。
- JS
- クリック
複数選択フィルタチップ実例あり
Multi-Select Filter Chips
カテゴリ・価格帯・在庫のチップで商品を絞り込む。同じ群の中は OR、群をまたぐと AND。各チップに「今押したら何件か」を出し、0件は押せない色にする。
- JS
- クリック
ファセット絞り込み実例あり
Faceted Navigation
ブランド・素材・色のチェックボックスで絞り込む。1つ選ぶたびに他のファセットの件数が再計算され、0件になる選択肢は淡色で押せなくなる。PC は左サイドバー、狭い幅は上に積む。
- JS
- クリック
並び替えメニュー
Sort Menu with FLIP Reorder
「並び替え」ボタンでメニューを開き、価格・評価・新着を選ぶと商品カードが FLIP で滑らかに入れ替わる。ボタンには現在の並びを常に表示する。
- JS
- 入力
最近の検索
Recent Searches
検索欄にフォーカスすると直近の検索語が並ぶ。行の × で1件ずつ消せ、「履歴を消す」で全部消える。Enter で検索すると先頭に追加され、重複はまとめられる。
- JS
- ホバー
グループ分けサジェスト
Grouped Search Suggestions
入力に応じて候補を「商品／カテゴリ／記事」の見出し付きで出す。↑↓ で見出しをまたいで移動し、Enter で確定。何が起きるかは行の右に「商品ページ」「一覧」と示す。
- JS
- クリック
0件の立て直し
No Results Recovery
条件を重ねて0件になった検索結果を、行き止まりにしない。「条件を1つ外すと何件になるか」をボタンで示し、押すとその場で結果が出る。近い候補も先に見せる。
- JS
- ドラッグ
価格レンジ＋数値入力実例あり
Dual-Handle Range with Inputs
2つのハンドルと「下限・上限」の数値入力が双方向に連動する価格フィルタ。ドラッグでも直接入力でも同じ値になり、該当件数がその場で更新される。矢印キーでも動く。
- JS
- 入力
検索演算子のヒント実例あり
Search Operator Tokens
メール検索で from: is: before: を打ち始めると演算子のヒントが出て、確定するとチップ（トークン）になる。トークンと本文の語を組み合わせて一覧が絞られる。Gmail 型。
- JS
- クリック
結果プレビュー付き検索モーダル
Search Dialog with Preview Pane
ボタンか ⌘K で検索モーダルを開き、左の結果リストを ↑↓ で辿ると右にプレビューが出る。空のときは「最近開いた」と「おすすめ」。Enter か「開く」で確定、Esc で閉じる。
- JS
- クリック
モバイルの絞り込みドロワー実例あり
Filter Bottom Sheet
スマホの商品一覧で「絞り込み」を押すと下からシートが出る。条件を変えるたびに「○件を表示」ボタンの数字が更新され、押すと閉じて一覧が切り替わる。閉じるだけなら変更は捨てる。
- JS
- クリック
結果件数のライブ更新
Live Result Count
条件を変えると件数がスケルトンになり、少し置いて数字に戻る。連続した変更はデバウンスで1回のリクエストにまとめ、aria-live で件数の変化を読み上げる。右上に変更回数とリクエスト回数を出す。
- JS
- 入力
もしかして
Did You Mean
「ぶらうざ」のようなかな違い・打ち間違いで0件になったとき、辞書との編集距離が近い語を「もしかして: ブラウザ」と提案する。押すとその語で検索し直す。
- JS
- クリック
保存した絞り込み
Saved Filter Presets
いまの絞り込み条件に名前を付けて保存し、チップで呼び出す。現在の条件と一致するチップは強調され、× で削除できる。条件を変えると強調が外れ、保存ボタンが再び現れる。
- JS