検索結果ページ
上に検索語と件数、左にファセット（カテゴリ／価格帯／在庫）、右に結果カードと並び替え。チェックを入れるたびに件数と一覧が更新され、0件なら条件を外す提案を出す。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- EC・カタログの検索結果と絞り込み
- ファセットの件数を先に見せて空振りを防ぐ画面
- 0 件時に条件を外す提案を出したい検索
- 避ける場面
- 絞り込み軸が 1 つも無い単純な検索
- 地図や画像が主の探索型 UI
- 構成要素
- 検索欄
- 件数
- ファセット（カテゴリ／価格帯／在庫）
- 並び替え
- 結果カード（サムネ／題／抜粋／メタ）
- 0 件表示
- 持っている状態
- 通常
- ホバー
- フォーカス
- 空
- キーボード
Tab で検索欄→ファセットのチェック→条件クリア→並び替え select→結果リンクの順。Space でチェック、Enter で再検索。狭幅は「絞り込み」で開閉し、開くと先頭のチェックへ焦点
- 支援技術
form role=search＋隠した label。件数は aria-live=polite。ファセットは fieldset/legend で各件数に隠し文「件」を添え、0 件の選択肢は淡色＋その数字で分かる。在庫は文字、0 件は文言＋解除ボタン
- 動き
なし
デザインの要点
- 件数は検索語のすぐ隣に置く。「128 件」が見えて初めて絞り込む動機が生まれる
- ファセットの各項目に件数を添え、0 件になる選択肢は淡色にする。押してから空振りさせない
- 結果カードは題・抜粋・メタ（価格・評価・店）の 3 段で固定し、走査のリズムを揃える
- スマホはファセットを「絞り込み」ボタンに畳み、開いたパネルの中で件数を先に見せる
コード（コピーして使えます）
<div class="sr-app">
<header class="sr-head">
<form class="sr-form" id="sr-form" role="search">
<svg class="sr-glass" viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="m13 13 4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
<label class="sr-sr" for="sr-q">検索</label>
<input class="sr-q" id="sr-q" type="search" value="ノイズキャンセリング イヤホン" autocomplete="off">
</form>
<p class="sr-count" id="sr-count" aria-live="polite"></p>
</header>
<div class="sr-body">
<button type="button" class="sr-filter-toggle" id="sr-filter-toggle" aria-expanded="false" aria-controls="sr-facets">絞り込み<span class="sr-filter-n" id="sr-filter-n" hidden></span></button>
<aside class="sr-facets" id="sr-facets">
<fieldset class="sr-facet"><legend class="sr-legend">カテゴリ</legend>
<label class="sr-opt"><input type="checkbox" data-f="cat" value="完全ワイヤレス"><span>完全ワイヤレス</span><span class="sr-n" data-n="cat:完全ワイヤレス"></span></label>
<label class="sr-opt"><input type="checkbox" data-f="cat" value="ヘッドホン"><span>ヘッドホン</span><span class="sr-n" data-n="cat:ヘッドホン"></span></label>
<label class="sr-opt"><input type="checkbox" data-f="cat" value="ネックバンド"><span>ネックバンド</span><span class="sr-n" data-n="cat:ネックバンド"></span></label>
</fieldset>
<fieldset class="sr-facet"><legend class="sr-legend">価格帯</legend>
<label class="sr-opt"><input type="checkbox" data-f="price" value="low"><span>〜¥10,000</span><span class="sr-n" data-n="price:low"></span></label>
<label class="sr-opt"><input type="checkbox" data-f="price" value="mid"><span>¥10,000〜¥30,000</span><span class="sr-n" data-n="price:mid"></span></label>
<label class="sr-opt"><input type="checkbox" data-f="price" value="high"><span>¥30,000〜</span><span class="sr-n" data-n="price:high"></span></label>
</fieldset>
<fieldset class="sr-facet"><legend class="sr-legend">その他</legend>
<label class="sr-opt"><input type="checkbox" data-f="stock" value="1"><span>在庫あり</span><span class="sr-n" data-n="stock:1"></span></label>
</fieldset>
<button type="button" class="sr-clear" id="sr-clear">条件をすべて外す</button>
</aside>
<main class="sr-main">
<div class="sr-toolbar">
<label class="sr-sort-label">並び替え
<select class="sr-sort" id="sr-sort"><option value="rel">関連順</option><option value="cheap">価格が安い順</option><option value="rating">評価が高い順</option></select>
</label>
</div>
<ul class="sr-results" id="sr-results"></ul>
<div class="sr-zero" id="sr-zero" hidden>
<p class="sr-zero-title">条件に合う商品がありません</p>
<p class="sr-zero-sub">条件を 1 つ外すと見つかることがあります。</p>
<button type="button" class="sr-zero-btn" id="sr-zero-btn">最後に付けた条件を外す</button>
</div>
</main>
</div>
</div>