0件の立て直し
条件を重ねて0件になった検索結果を、行き止まりにしない。「条件を1つ外すと何件になるか」をボタンで示し、押すとその場で結果が出る。近い候補も先に見せる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 0件の画面で一番効くのは「どの条件が効きすぎているか」を数字で見せること。外す前に件数が分かれば迷わない
- 近い候補は「何が違うか」を添えて出す。黙って似た商品を並べると、条件を無視されたと感じる
- 検索語は消さずに残す。打ち直しは最後の手段で、まず条件の方を疑ってもらう
コード（コピーして使えます）
<div class="zrr">
<div class="zrr-query">
<span class="zrr-kw">ワイヤレスイヤホン</span>
<div class="zrr-conds" id="zrr-conds" aria-label="適用中の条件"></div>
<button class="zrr-restore" id="zrr-restore" type="button" hidden>外した条件を戻す</button>
</div>
<p class="zrr-count" id="zrr-count" aria-live="polite"></p>
<section class="zrr-recover" id="zrr-recover" aria-label="条件を見直す">
<h3 class="zrr-h">条件を1つ外すと見つかります</h3>
<div class="zrr-btns" id="zrr-btns"></div>
<h3 class="zrr-h">近い候補</h3>
<ul class="zrr-near" id="zrr-near"></ul>
</section>
<ul class="zrr-list" id="zrr-list" aria-label="検索結果" hidden></ul>
</div>