モバイルの絞り込みドロワー
スマホの商品一覧で「絞り込み」を押すと下からシートが出る。条件を変えるたびに「○件を表示」ボタンの数字が更新され、押すと閉じて一覧が切り替わる。閉じるだけなら変更は捨てる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 適用ボタンに件数を出すのは「押した先が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>