検索結果ページ
上に検索語と件数、左にファセット（カテゴリ／価格帯／在庫）、右に結果カードと並び替え。チェックを入れるたびに件数と一覧が更新され、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>