ファセット絞り込み
ブランド・素材・色のチェックボックスで絞り込む。1つ選ぶたびに他のファセットの件数が再計算され、0件になる選択肢は淡色で押せなくなる。PC は左サイドバー、狭い幅は上に積む。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 件数の再計算は「他のファセットの条件を掛けた上で、この値を選んだら何件か」。同じファセット内は OR なので自分の条件は掛けない
- 0件は消さずに淡色で残す。消えると「さっきあった選択肢がどこへ行ったか」を探させてしまう
- 選択中の条件は結果側の先頭にも出す。サイドバーを見上げなくても、いま何で絞れているかが分かる
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="fsc-wrap">
<div class="fsc">
<aside class="fsc-side" aria-label="絞り込み">
<div class="fsc-facet" data-facet="brand"><h3 class="fsc-h">ブランド</h3><ul class="fsc-opts"></ul></div>
<div class="fsc-facet" data-facet="mat"><h3 class="fsc-h">素材</h3><ul class="fsc-opts"></ul></div>
<div class="fsc-facet" data-facet="color"><h3 class="fsc-h">色</h3><ul class="fsc-opts"></ul></div>
</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>