モバイルの絞り込みドロワー
スマホの商品一覧で「絞り込み」を押すと下からシートが出る。条件を変えるたびに「○件を表示」ボタンの数字が更新され、押すと閉じて一覧が切り替わる。閉じるだけなら変更は捨てる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- スマホの EC 一覧で下から出る絞り込みシート
- 「○件を表示」で押す前に結果の量を見せたい画面
- 適用まで一覧を変えず、閉じたら変更を捨てたい操作
- 避ける場面
- PC 幅が主（サイドバーのファセットを使う）
- 条件が1〜2個（インラインのチップで足りる）
- 構成要素
- 絞り込みボタン（バッジ）
- 背景
- シート（ハンドル・閉じる）
- 条件チップ
- リセット
- 適用ボタン（件数）
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- 無効
- 空
- キーボード
絞り込みボタンを Enter／Space で開くと閉じるボタンへフォーカス。Tab はシートの中で循環（閉じる・チップ群・チェック・リセット・適用）。チップ群は ←→↑↓ で選択を移動、Esc で閉じる（変更は捨てる）
- 支援技術
ボタンに aria-haspopup=dialog。シートは role=dialog・aria-modal・aria-hidden 切替、開いている間は背後を inert。チップは role=radiogroup／radio＋aria-checked＋roving tabindex。件数は aria-live
- 動き
シートが下から 280ms cubic-bezier(0.2,0.7,0.2,1) で上がる（出どころを示す）。reduced-motion で無効
デザインの要点
- 適用ボタンに件数を出すのは「押した先が0件」という最悪の体験を防ぐため。数字が減りすぎたらシートの中で戻せる
- シートの中の変更は「適用」まで仮の状態。背景をタップして閉じたら元に戻る。途中で一覧が変わると、何を変えたか追えない
- 絞り込みボタンには適用中の条件数をバッジで出す。一覧が短い理由が、ボタンを見るだけで分かる
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="fda-phone">
<header class="fda-head">
<div>
<h2 class="fda-title">商品一覧</h2>
<p class="fda-count" id="fda-count" aria-live="polite"></p>
</div>
<button id="fda-open" class="fda-open" type="button" aria-haspopup="dialog">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
絞り込み<span id="fda-badge" class="fda-badge" hidden></span>
</button>
</header>
<ul id="fda-list" class="fda-list" aria-label="商品"></ul>
<div id="fda-backdrop" class="fda-backdrop" hidden></div>
<section id="fda-sheet" class="fda-sheet" role="dialog" aria-modal="true" aria-label="絞り込み" aria-hidden="true">
<div class="fda-sheet-head">
<span class="fda-handle" aria-hidden="true"></span>
<div class="fda-sheet-bar">
<h3 class="fda-sheet-title">絞り込み</h3>
<button id="fda-close" class="fda-close" type="button" aria-label="閉じる">×</button>
</div>
</div>
<div class="fda-sheet-body">
<p class="fda-glabel">カテゴリ</p>
<div class="fda-chips" id="fda-cat" role="radiogroup" aria-label="カテゴリ"></div>
<p class="fda-glabel">価格</p>
<div class="fda-chips" id="fda-price" role="radiogroup" aria-label="価格"></div>
<label class="fda-toggle"><input id="fda-stock" type="checkbox"><span>在庫ありのみ</span></label>
</div>
<div class="fda-sheet-foot">
<button id="fda-reset" class="fda-reset" type="button">リセット</button>
<button id="fda-apply" class="fda-apply" type="button">件を表示</button>
</div>
</section>
</div>