保存した絞り込み
いまの絞り込み条件に名前を付けて保存し、チップで呼び出す。現在の条件と一致するチップは強調され、× で削除できる。条件を変えると強調が外れ、保存ボタンが再び現れる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- SaaS の一覧で同じ絞り込みを繰り返す上級者向け
- 現在の条件と一致する保存条件を強調したい画面
- 自動生成の名前を候補にして保存させたい操作
- 避ける場面
- 条件が1〜2個で組み直しが軽い一覧
- ログインが無く保存先を持てない画面
- 構成要素
- 保存条件チップ（×付き）
- 条件セレクト
- チェックボックス
- 件数
- 保存ボタン
- 名前入力フォーム
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- 空
- キーボード
Tab でチップ・×・セレクト・チェック・「この条件を保存」を移動。保存を押すと名前欄へフォーカス（自動名を選択済み）、Enter で保存、「やめる」で閉じる。× で削除後は隣のチップ（無ければ保存ボタン）へフォーカス
- 支援技術
適用チップは aria-pressed で現在の条件と一致を示す。× は aria-label「〜を削除」。件数は aria-live=polite。名前欄は aria-label
- 動き
なし
デザインの要点
- 毎回同じ条件を組み直す作業は、繰り返し使う人ほど重い。保存は上級者のための機能なので、控えめな文字ボタンで置く
- 保存後は「どの保存条件が今の状態か」を見せる。強調が外れることで『条件を変えた』と分かり、上書き保存の判断ができる
- 名前は利用者が付ける。自動生成の名前（「キッチン・〜¥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>