複数選択フィルタチップ
カテゴリ・価格帯・在庫のチップで商品を絞り込む。同じ群の中は OR、群をまたぐと AND。各チップに「今押したら何件か」を出し、0件は押せない色にする。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- EC の商品一覧でカテゴリ・価格帯・在庫を重ねて絞る
- 群の中は OR・群をまたぐと AND にしたい絞り込み
- 押す前に「何件になるか」を見せたい画面
- 避ける場面
- 選択肢が10件を超える群（チップが折り返して読めない）
- 1つしか選べない条件（ラジオ／セグメントを使う）
- 構成要素
- 件数
- すべて解除
- 群ラベル
- チップ（件数付き）
- 結果リスト
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- 無効
- 空
- キーボード
Tab でチップと「すべて解除」を順に移動、Enter／Space で切替（再描画後も同じチップにフォーカスが残る）。0件のチップは disabled で飛ばされる
- 支援技術
各群は role=group＋aria-label。チップは aria-pressed で選択を示す。件数は aria-live=polite。0件は disabled と数字 0 で色以外でも分かる
- 動き
背景・枠色 150ms（押した状態の切替）。reduced-motion で無効
原則認知負荷
デザインの要点
- 群の中は OR・群をまたいで AND が利用者の直感。「キッチンと文具」は両方見たいが「〜¥2,000」は必ず守りたい
- チップの件数は「他の群の条件を保ったまま自分を足したら何件か」で計算する。押した後の後悔を先回りで消す
- 「すべて解除」は条件が1つでもあるときだけ出す。何もしていない画面にリセットは要らない
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="fcm">
<div class="fcm-head">
<p class="fcm-count" id="fcm-count" aria-live="polite"></p>
<button id="fcm-reset" class="fcm-reset" type="button" hidden>すべて解除</button>
</div>
<div class="fcm-group" role="group" aria-label="カテゴリ">
<span class="fcm-glabel">カテゴリ</span>
<div class="fcm-chips" id="fcm-cat"></div>
</div>
<div class="fcm-group" role="group" aria-label="価格帯">
<span class="fcm-glabel">価格帯</span>
<div class="fcm-chips" id="fcm-price"></div>
</div>
<div class="fcm-group" role="group" aria-label="在庫">
<span class="fcm-glabel">在庫</span>
<div class="fcm-chips" id="fcm-stock"></div>
</div>
<ul class="fcm-list" id="fcm-list" aria-label="商品"></ul>
</div>