ファセット絞り込み
ブランド・素材・色のチェックボックスで絞り込む。1つ選ぶたびに他のファセットの件数が再計算され、0件になる選択肢は淡色で押せなくなる。PC は左サイドバー、狭い幅は上に積む。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- ブランド・素材・色など複数軸で絞る EC の一覧
- 選ぶたびに他軸の件数を再計算したい検索結果
- PC は左サイドバー・狭い幅は上に積む絞り込み
- 避ける場面
- 軸が1〜2個しかない（チップで足りる）
- 件数の再計算にサーバー往復が要り遅延が出る一覧
- 構成要素
- ファセット見出し
- チェックボックス（件数付き）
- 件数
- 適用中タグ
- 結果リスト
- 持っている状態
- 通常
- ホバー
- フォーカス
- 無効
- 空
- キーボード
Tab でチェックボックスと適用中タグを順に移動。Space で選択を切替（再描画後も同じ箱にフォーカスが残る）、タグは Enter で解除
- 支援技術
サイドバーは aria-label=絞り込み、各ファセットは fieldset／legend、結果は aria-label=検索結果。件数は aria-live=polite。解除タグは aria-label「軸: 値 を解除」。0件は disabled＋淡色＋数字 0
- 動き
なし
デザインの要点
- 件数の再計算は「他のファセットの条件を掛けた上で、この値を選んだら何件か」。同じファセット内は OR なので自分の条件は掛けない
- 0件は消さずに淡色で残す。消えると「さっきあった選択肢がどこへ行ったか」を探させてしまう
- 選択中の条件は結果側の先頭にも出す。サイドバーを見上げなくても、いま何で絞れているかが分かる
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="fsc-wrap">
<div class="fsc">
<aside class="fsc-side" aria-label="絞り込み">
<fieldset class="fsc-facet" data-facet="brand"><legend class="fsc-h">ブランド</legend><ul class="fsc-opts"></ul></fieldset>
<fieldset class="fsc-facet" data-facet="mat"><legend class="fsc-h">素材</legend><ul class="fsc-opts"></ul></fieldset>
<fieldset class="fsc-facet" data-facet="color"><legend class="fsc-h">色</legend><ul class="fsc-opts"></ul></fieldset>
</aside>
<section class="fsc-main" aria-label="検索結果">
<div class="fsc-bar">
<p class="fsc-count" id="fsc-count" aria-live="polite"></p>
<div class="fsc-active" id="fsc-active"></div>
</div>
<ul class="fsc-list" id="fsc-list"></ul>
</section>
</div>
</div>