保存した絞り込み
いまの絞り込み条件に名前を付けて保存し、チップで呼び出す。現在の条件と一致するチップは強調され、× で削除できる。条件を変えると強調が外れ、保存ボタンが再び現れる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 毎回同じ条件を組み直す作業は、繰り返し使う人ほど重い。保存は上級者のための機能なので、控えめな文字ボタンで置く
- 保存後は「どの保存条件が今の状態か」を見せる。強調が外れることで『条件を変えた』と分かり、上書き保存の判断ができる
- 名前は利用者が付ける。自動生成の名前（「キッチン・〜¥5,000・在庫あり」）は候補として先に入れておく
実装メモ
プレビュー内のメモリにだけ保持しています。実際のページでは利用者ごとのサーバー保存（ログイン前提）か localStorage に置き、件数上限と削除の確認を付けてください。
コード（コピーして使えます）
<div class="sfp">
<div class="sfp-presets-row">
<span class="sfp-plabel">保存した条件</span>
<div class="sfp-presets" id="sfp-presets"></div>
</div>
<div class="sfp-controls">
<label class="sfp-f"><span>カテゴリ</span><select id="sfp-cat"><option value="">すべて</option><option>キッチン</option><option>文具</option><option>インテリア</option><option>アウトドア</option></select></label>
<label class="sfp-f"><span>上限価格</span><select id="sfp-max"><option value="">指定なし</option><option value="1000">¥1,000</option><option value="3000">¥3,000</option><option value="5000">¥5,000</option><option value="10000">¥10,000</option></select></label>
<label class="sfp-f"><span>並び順</span><select id="sfp-sort"><option value="rec">おすすめ順</option><option value="cheap">安い順</option><option value="exp">高い順</option></select></label>
<label class="sfp-c"><input id="sfp-stock" type="checkbox"><span>在庫あり</span></label>
</div>
<div class="sfp-bar">
<p class="sfp-count" id="sfp-count" aria-live="polite"></p>
<button id="sfp-save" class="sfp-save" type="button">この条件を保存</button>
<form id="sfp-form" class="sfp-form" hidden>
<input id="sfp-name" class="sfp-name" type="text" maxlength="24" aria-label="条件の名前" autocomplete="off">
<button class="sfp-ok" type="submit">保存</button>
<button id="sfp-cancel" class="sfp-cancel" type="button">やめる</button>
</form>
</div>
<ul class="sfp-list" id="sfp-list" aria-label="商品"></ul>
</div>