検索結果 · 検索結果ページ

絞り込みと件数を先に見せる商品検索結果

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/storefront-search-results/
完全無料・著作権フリー(CC0)· 料金¥0 · 商用利用・改変自由

プレビュー

画面に合わせる

指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。

vibe.itlibra.com/preview/storefront-search-results/

AIへの指示文

通販サイトの商品検索結果ページを作ってください。

要件:
- 配色: 背景 #f7f8fa、カード白、境界 #e3e7ee、文字 #1c2333、
  補助文字 #5b6478。アクセントは青 #1f6feb 一色に絞る。
- 上部に固定の検索バー。入力欄には検索語が入った状態で、
  右端に消去ボタンを置く。フォーカス時は青い輪郭を出す。
- 検索バーの下に、パンくず → 見出し → 件数の順で置く。
  見出しは「『検索語』の検索結果」の形にし、検索語だけを青にする。
  件数は絞り込み後の実件数・現在の表示範囲・掲載した見本数を表示し、架空の所要時間は出さない。
- その下に、適用中の絞り込みを削除ボタン付きのタグとして横並びにし、
  右端に「すべて解除」を置く。ここは常に見える位置に固定する。
- 本体は960px以上で「左248pxの絞り込み + 右の結果グリッド」の2段組。
  未満では絞り込みを結果の上へ縦積みにする。
- 絞り込みは価格帯・容量・ブランド・配送・評価の5群。
  各選択肢の右端に該当件数を薄い文字で必ず添える。
  選択済みはチェックを塗り、文字を濃くして太字にする。
  選択肢が多い群には「さらに N 件を表示」を置く。
- 結果カードは1枚あたり、画像・商品名2行・価格・評価と件数・配送表示。
  商品名の中で検索語に一致した部分は薄い黄色でハイライトする。
  割引や在庫僅少はカード左上のバッジで出す。
- 最下部にページ送り。現在ページを青で塗り、途中は省略記号で畳む。
- 日本語の letter-spacing は 0、line-height は見出し1.5・本文1.8。
- HTML + CSS とJavaScript。掲載した架空の8商品だけをページ内で検索・絞り込み・並び替えし、1ページ6件で送る。入力を外部送信・保存しない。JavaScriptなしでは全件を表示し、動かない操作を無効にする。商品画像はグラデーションの背景に絵文字で代用する。

バリエーション

1行1件のリスト型にする

結果グリッドを、1行1件の横並びリストに変えてください。
左に正方形の画像、右に商品名・説明文2行・価格・評価を置きます。
カードグリッドより1件あたりの情報量が増えるので、
説明文と在庫状況を追加し、代わりに1画面あたりの件数は減らします。
求人や不動産のように、比較に文章が要る商材向けの形です。

結果0件の状態にする

同じ枠組みのまま、検索結果が0件の状態を作ってください。
グリッドの位置に、条件を緩める提案を3つ置きます。
「配送条件を外すと 42 件」のように、外した場合の件数を必ず添えます。
併せて、表記ゆれの候補と、同じ分類の人気商品6件を下に並べてください。
行き止まりを作らないことが、この状態の唯一の目的です。

絞り込みを横帯に変える

左側の絞り込みを、結果の上に横並びのドロップダウン帯として置き直してください。
各ドロップダウンは閉じた状態では「容量 ▾」のように名前だけを出し、
開くと選択肢と件数を一覧します。選択中は青い枠と選択数の丸バッジを付けます。
画面の横幅を結果に全部使えるので、1行に並ぶ商品を増やしたいときに向きます。

このプレビューのコード

HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。架空の商品8件を検索・絞り込み・並び替えする見本です。価格・容量・ブランド・配送・評価と実件数、条件解除・ページ送りを試せます。購入・決済・お気に入り保存・外部送信は行いません。

CC0 · 改変・商用利用自由 · revision 9b619481ec89

コードを表示
<!doctype html>
<!-- Vibehaus · CC0 · 架空の検索デモ。外部依存・送信・永続保存なし。 -->
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>絞り込み付きの商品検索結果 — Vibehaus プレビュー</title>
    <style>
      :root {
        --ink: #1c2333;
        --muted: #5b6478;
        --quiet: #8b94a7;
        --bg: #f7f8fa;
        --card: #ffffff;
        --line: #e3e7ee;
        --line-strong: #cfd6e2;
        --accent: #1f6feb;
        --accent-soft: #eaf1fe;
        --sale: #d92d20;
        --font: "Inter", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
          "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
      }

      * { box-sizing: border-box; }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: var(--font);
        line-height: 1.8;
        letter-spacing: 0;
        -webkit-font-smoothing: antialiased;
      }

      /* ---- 検索バー ---- */
      .topbar {
        background: var(--card);
        border-bottom: 1px solid var(--line);
        padding: 0.9rem clamp(1rem, 3vw, 2rem);
        display: flex;
        align-items: center;
        gap: clamp(0.75rem, 2vw, 1.5rem);
        position: sticky;
        top: 0;
        z-index: 20;
      }
      .brand {
        font-weight: 800;
        font-size: 1.1rem;
        line-height: 1.4;
        white-space: nowrap;
      }
      .brand span { color: var(--accent); }
      .searchbox {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        padding: 0.55rem 0.85rem;
        background: #fff;
        max-width: 640px;
      }
      .searchbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
      .searchbox input {
        border: 0;
        outline: 0;
        flex: 1;
        font: inherit;
        line-height: 1.7;
        color: var(--ink);
        background: transparent;
        min-width: 0;
      }
      .searchbox .mag { color: var(--quiet); flex: none; }
      .searchbox .clear {
        border: 0;
        background: #eef1f6;
        color: var(--muted);
        border-radius: 999px;
        width: 20px; height: 20px;
        line-height: 1;
        cursor: pointer;
        flex: none;
        font-size: 0.75rem;
      }
      .topbar .mini { display: flex; gap: 1.1rem; color: var(--muted); font-size: 0.86rem; line-height: 1.7; }
      .topbar .mini a { color: inherit; text-decoration: none; }
      @media (max-width: 900px) { .topbar .mini { display: none; } }

      /* ---- 見出し帯 ---- */
      .crumbs {
        padding: 1rem clamp(1rem, 3vw, 2rem) 0;
        color: var(--quiet);
        font-size: 0.8rem;
        line-height: 1.7;
      }
      .crumbs a { color: inherit; text-decoration: none; }

      .head {
        padding: 0.35rem clamp(1rem, 3vw, 2rem) 1rem;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
      }
      .head h1 {
        margin: 0;
        font-size: clamp(1.15rem, 2.4vw, 1.5rem);
        font-weight: 700;
        line-height: 1.5;
      }
      .head h1 em { font-style: normal; color: var(--accent); }
      .head .count { color: var(--muted); font-size: 0.88rem; line-height: 1.7; }
      .sorter {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.86rem;
        line-height: 1.7;
        color: var(--muted);
      }
      .sorter select {
        font: inherit;
        line-height: 1.7;
        padding: 0.4rem 0.65rem;
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        background: #fff;
        color: var(--ink);
      }

      /* 適用中の絞り込み。何で絞ったかを常に見えるところへ置く */
      .applied {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0 clamp(1rem, 3vw, 2rem) 1.1rem;
        align-items: center;
      }
      .tag {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: var(--accent-soft);
        color: #17509c;
        border: 1px solid #cfe0fb;
        border-radius: 999px;
        padding: 0.28rem 0.7rem;
        font-size: 0.8rem;
        line-height: 1.7;
      }
      .tag b { font-weight: 700; }
      .tag .x { color: #5b83c8; }
      .applied .reset {
        color: var(--muted);
        font-size: 0.8rem;
        line-height: 1.7;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      /* ---- 本体 ---- */
      .shell {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(1rem, 2.5vw, 2rem);
        padding: 0 clamp(1rem, 3vw, 2rem) 3rem;
        align-items: start;
      }
      @media (min-width: 960px) {
        .shell { grid-template-columns: 248px 1fr; }
      }

      .facets {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 0.25rem 1.1rem 1rem;
      }
      .facet { border-bottom: 1px solid var(--line); padding: 1rem 0; }
      .facet:last-child { border-bottom: 0; }
      .facet h2 {
        margin: 0 0 0.6rem;
        font-size: 0.86rem;
        font-weight: 700;
        line-height: 1.6;
      }
      .opt {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.84rem;
        line-height: 1.8;
        color: var(--muted);
        padding: 0.12rem 0;
      }
      .opt .box {
        width: 15px; height: 15px;
        border: 1px solid var(--line-strong);
        border-radius: 4px;
        background: #fff;
        flex: none;
      }
      .opt.on { color: var(--ink); font-weight: 600; }
      .opt.on .box {
        background: var(--accent);
        border-color: var(--accent);
        position: relative;
      }
      .opt.on .box::after {
        content: "";
        position: absolute;
        left: 4px; top: 1px;
        width: 4px; height: 8px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(42deg);
      }
      .opt .n { margin-left: auto; color: var(--quiet); font-size: 0.76rem; }
      .facet .more {
        display: inline-block;
        margin-top: 0.35rem;
        color: var(--accent);
        font-size: 0.8rem;
        line-height: 1.7;
        text-decoration: none;
      }
      .range { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; }
      .range input {
        width: 100%;
        min-width: 0;
        font: inherit;
        font-size: 0.82rem;
        line-height: 1.7;
        padding: 0.35rem 0.5rem;
        border: 1px solid var(--line-strong);
        border-radius: 7px;
      }
      .range span { color: var(--quiet); }

      /* ---- 結果グリッド ---- */
      .results {
        display: grid;
        gap: clamp(0.85rem, 1.6vw, 1.25rem);
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr));
      }
      .item {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
      }
      .item:hover { border-color: var(--line-strong); box-shadow: 0 10px 26px -18px rgba(28, 35, 51, 0.5); }
      .shot {
        aspect-ratio: 4 / 3;
        position: relative;
        display: grid;
        place-items: center;
      }
      .badge {
        position: absolute;
        top: 8px; left: 8px;
        background: var(--sale);
        color: #fff;
        border-radius: 6px;
        padding: 0.1rem 0.45rem;
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1.7;
      }
      .badge.soft { background: #0f7b53; }
      .glyph { font-size: 2.4rem; opacity: 0.9; }
      .item-body { padding: 0.75rem 0.85rem 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
      .item .nm {
        font-size: 0.86rem;
        font-weight: 600;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      /* 検索語の一致箇所。何にヒットしたのかを明示する */
      .item .nm mark { background: #fff3bf; color: inherit; padding: 0 1px; border-radius: 2px; }
      .price { font-size: 1.02rem; font-weight: 800; line-height: 1.5; }
      .price s { color: var(--quiet); font-size: 0.78rem; font-weight: 500; margin-left: 0.35rem; }
      .stars { font-size: 0.76rem; color: var(--muted); line-height: 1.7; }
      .stars b { color: #d98600; }
      .ship { font-size: 0.74rem; color: #0f7b53; line-height: 1.7; }

      .pager {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.35rem;
        margin-top: 2rem;
      }
      .pager a, .pager span {
        min-width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        background: #fff;
        color: var(--muted);
        font-size: 0.85rem;
        line-height: 1.7;
        text-decoration: none;
        padding: 0 0.5rem;
      }
      .pager .on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
      .pager .gap { border: 0; background: transparent; }

[hidden]{display:none!important}button,input,select{font-family:inherit}button,a,input,select{scroll-margin-top:calc(var(--header-height,0px) + 16px)}
:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid currentColor!important;outline-offset:3px}button{cursor:pointer}button:disabled{cursor:default;opacity:.6}
.demo-note{margin:2rem 0 0;border-top:1px solid currentColor;padding-top:1rem;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}.demo-note h2{font-size:17px;line-height:1.5;letter-spacing:0}.demo-note h3{font-size:15px;line-height:1.5;letter-spacing:0}.demo-note p{letter-spacing:0}
.demo-note section{scroll-margin-top:calc(var(--header-height,0px) + 16px)}.demo-note a{display:inline-flex;align-items:center;min-height:44px}
.demo-caption,.search-error,.empty p{font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}.empty{padding:1.25rem;border:1px solid currentColor;margin:1rem 0}.empty h2{font-size:18px;line-height:1.5;letter-spacing:0}
.empty button,.reset-all{font:inherit;min-height:44px;min-width:44px;background:transparent;color:inherit;border:1px solid currentColor;padding:.5rem .75rem;letter-spacing:0}.reset-all{font-size:13px}
.pager button,.pagination button{font:inherit;min-width:44px;min-height:44px;border:1px solid currentColor;color:inherit;background:transparent;padding:.4rem .6rem;letter-spacing:0}.pager,.pagination{flex-wrap:wrap;gap:.5rem}.pager [aria-current],.pagination [aria-current]{background:var(--ink);color:#fff}
[data-results-heading]{scroll-margin-top:calc(var(--header-height,0px) + 16px);overflow-wrap:anywhere}.search-error{color:inherit;border-left:3px solid currentColor;padding-left:.75rem}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

:root{--quiet:#606b7e;--accent:#175bbd}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.topbar{flex-wrap:wrap}.searchbox{min-width:0;padding:4px 8px}.searchbox input{min-height:44px;font-size:16px}.searchbox .clear{min-width:44px;width:44px;height:44px}.search-go{font:inherit;font-size:14px;background:var(--accent);color:#fff;border:0;border-radius:6px;min-width:44px;min-height:44px}.mini a,.crumbs a{display:inline-flex;align-items:center;min-height:44px}.head>div{min-width:0;max-width:100%}.sorter select{min-height:44px;font-size:16px;max-width:100%}.intro,.notes-wrap{padding:0 clamp(1rem,3vw,2rem)}.tag{font:inherit;font-size:13px;min-width:44px;min-height:44px}.applied>button:last-child{font:inherit;font-size:13px;min-height:44px;min-width:44px;background:transparent;border:1px solid var(--line-strong);color:var(--muted);padding:.4rem .7rem;border-radius:8px}.shell>*{min-width:0}.facets .opt{min-height:44px;cursor:pointer}.opt input{width:20px;height:20px;accent-color:var(--accent);flex:none}.opt .n{white-space:nowrap}.facet .more{font:inherit;font-size:13px;min-height:44px;min-width:44px;max-width:100%;background:transparent;border:0;color:var(--accent)}.range label{flex:1;min-width:0;font-size:12px}.range input{min-height:44px;font-size:16px}.range{align-items:end}.range span{padding-bottom:10px}.facet .reset-all{margin-top:.75rem}.product-category{font-size:11px;line-height:1.8;color:var(--muted)}.item .nm{display:block;overflow:visible}.stars b{color:#8b5500}.ship{color:#09613f}.badge.soft{background:#09613f}.pager .on{background:var(--accent)}.notes-wrap{padding-bottom:2rem}
@media(max-width:540px){.searchbox{order:3;flex-basis:100%;max-width:none}.topbar{gap:.25rem;padding-top:.5rem;padding-bottom:.5rem}.head{padding-top:1rem}}
.filter-disclosure>summary{min-height:44px;padding:.6rem 1rem;background:#fff;border:1px solid var(--line-strong);border-radius:10px;cursor:pointer;font-size:14px}.filter-disclosure>summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.mini a,.crumbs a{min-width:44px}
@media(min-width:960px){.show-results{display:none}}
</style>
  </head>
  <body data-demo="store">
    <header class="topbar">
      <div class="brand">Nagi<span>Store</span></div>
      <form class="searchbox" role="search" method="dialog" autocomplete="off"><label class="visually-hidden" for="query">商品を検索</label><input type="search" id="query" value="水筒" maxlength="120" autocomplete="off" data-js-control disabled><button type="button" class="clear" data-clear-query data-js-control disabled aria-label="検索語を消す">×</button><button type="button" class="search-go" data-search data-js-control disabled>検索</button></form>
      <div class="mini"><a href="#demo-service">お気に入り</a><a href="#demo-service">注文履歴</a><a href="#demo-service">カート</a></div>
    </header>

    <nav class="crumbs" aria-label="パンくずリスト">
      <a href="#demo-service">ホーム</a> › <a href="#demo-service">キッチン用品</a> › <span>水筒・タンブラー</span>
    </nav>

    <div class="head">
      <div>
        <h1 id="results-heading" data-results-heading tabindex="-1">水筒の検索結果</h1>
        <p class="count" data-count role="status">8件の表示見本</p>
      </div>
      <label class="sorter">
        並び替え
        <select id="sort" data-js-control disabled><option value="default">掲載順</option><option value="price">価格が安い順</option><option value="rating">評価が高い順</option><option value="new">新しい順</option></select>
      </label>
    </div>

    <p class="demo-caption intro">架空の8商品を探すデモです。入力はページ内で使い、外部へ送信・保存しません。空白で区切った語をすべて含む商品名・分類・ブランドを探します。</p><div class="applied" data-applied hidden></div><div class="shell">
      <details class="filter-disclosure" open><summary>絞り込み条件を開閉</summary><aside class="facets" aria-label="絞り込み"><p class="demo-caption">右の件数は、その項目を切り替えた後の結果数です。同じ群は「いずれか」、配送は「すべて」で絞ります。</p><div class="facet"><h2>価格帯</h2><div class="range"><label for="min-price">下限(円)<input type="text" id="min-price" aria-describedby="price-error" value="2000" inputmode="numeric" maxlength="7" data-js-control disabled></label><span aria-hidden="true">〜</span><label for="max-price">上限(円)<input type="text" id="max-price" aria-describedby="price-error" value="5000" inputmode="numeric" maxlength="7" data-js-control disabled></label></div><button type="button" class="reset-all" data-price-apply data-js-control disabled>価格を適用</button><p class="search-error" id="price-error" data-error role="status" hidden></p></div><div class="facet"><h2>容量</h2><label class="opt"><input id="capacity-0" type="checkbox" data-filter="capacity" value="350" data-label="350ml 以下" data-js-control disabled><span>350ml 以下</span><span class="n" data-count-for="capacity-0">—</span></label><label class="opt"><input id="capacity-1" type="checkbox" data-filter="capacity" value="500" data-label="500ml 前後" data-js-control disabled checked><span>500ml 前後</span><span class="n" data-count-for="capacity-1">—</span></label><label class="opt"><input id="capacity-2" type="checkbox" data-filter="capacity" value="750" data-label="750ml 前後" data-js-control disabled><span>750ml 前後</span><span class="n" data-count-for="capacity-2">—</span></label><label class="opt"><input id="capacity-3" type="checkbox" data-filter="capacity" value="1000" data-label="1L 以上" data-js-control disabled><span>1L 以上</span><span class="n" data-count-for="capacity-3">—</span></label></div><div class="facet"><h2>ブランド(架空)</h2><label class="opt"><input id="brand-0" type="checkbox" data-filter="brand" value="0" data-label="波音工房" data-js-control disabled><span>波音工房</span><span class="n" data-count-for="brand-0">—</span></label><label class="opt"><input id="brand-1" type="checkbox" data-filter="brand" value="1" data-label="森の器" data-js-control disabled><span>森の器</span><span class="n" data-count-for="brand-1">—</span></label><label class="opt"><input id="brand-2" type="checkbox" data-filter="brand" value="2" data-label="日和道具" data-js-control disabled><span>日和道具</span><span class="n" data-count-for="brand-2">—</span></label><label class="opt"><input id="brand-3" type="checkbox" data-filter="brand" value="3" data-label="灯台生活" data-js-control disabled><span>灯台生活</span><span class="n" data-count-for="brand-3">—</span></label><div id="extra-brands" hidden><label class="opt"><input id="brand-4" type="checkbox" data-filter="brand" value="4" data-label="風待ち舎" data-js-control disabled><span>風待ち舎</span><span class="n" data-count-for="brand-4">—</span></label><label class="opt"><input id="brand-5" type="checkbox" data-filter="brand" value="5" data-label="凪の製作所" data-js-control disabled><span>凪の製作所</span><span class="n" data-count-for="brand-5">—</span></label></div><button class="more" type="button" data-more aria-expanded="false" aria-controls="extra-brands" data-js-control disabled>さらに2ブランドを表示</button></div><div class="facet"><h2>配送</h2><label class="opt"><input id="shipping-0" type="checkbox" data-filter="shipping" value="next" data-label="あすつく" data-js-control disabled><span>あすつく</span><span class="n" data-count-for="shipping-0">—</span></label><label class="opt"><input id="shipping-1" type="checkbox" data-filter="shipping" value="free" data-label="送料無料" data-js-control disabled><span>送料無料</span><span class="n" data-count-for="shipping-1">—</span></label></div><div class="facet"><h2>評価</h2><label class="opt"><input id="rating-0" type="checkbox" data-filter="rating" value="4" data-label="★4.0 以上" data-js-control disabled><span>★4.0 以上</span><span class="n" data-count-for="rating-0">—</span></label><label class="opt"><input id="rating-1" type="checkbox" data-filter="rating" value="4.5" data-label="★4.5 以上" data-js-control disabled><span>★4.5 以上</span><span class="n" data-count-for="rating-1">—</span></label></div><button type="button" class="reset-all" data-reset-all data-js-control disabled>すべて解除</button> <button type="button" class="reset-all show-results" data-show-results data-js-control disabled>結果を見る</button></aside></details>

      <main>
        <section class="empty" data-empty hidden><h2>条件に合う見本がありません</h2><p>検索語や絞り込みを緩めて、掲載した見本から探せます。</p><button type="button" data-relax-query>検索語を消す</button> <button type="button" data-relax-filters>絞り込みを外す</button> <button type="button" data-reset-all>すべての見本を見る</button></section><div class="results" data-results aria-label="商品の検索結果">
          <a class="item" href="#demo-item-1" data-result data-price="3280" data-capacity="500" data-brand="0" data-next="true" data-free="true" data-rating="4.6" data-year="2019" data-id="1">
            <div class="shot" style="background: linear-gradient(150deg, #dbeafe, #eff6ff)">
              <span class="badge">18% OFF</span><span class="glyph" aria-hidden="true">🍶</span>
            </div>
            <div class="item-body"><span class="product-category">水筒・タンブラー / 波音工房</span>
              <span class="nm" data-title>真空断熱 ステンレスボトル 500ml 保温・保冷両用</span>
              <span class="price">¥3,280 <s>¥3,980</s></span>
              <span class="stars"><b>★ 4.6</b> (1,284)</span>
              <span class="ship">あすつく・送料無料</span>
            </div>
          </a>
          <a class="item" href="#demo-item-2" data-result data-price="2480" data-capacity="350" data-brand="1" data-next="true" data-free="false" data-rating="4.4" data-year="2020" data-id="2">
            <div class="shot" style="background: linear-gradient(150deg, #dcfce7, #f0fdf4)">
              <span class="badge soft">残り 3 点</span><span class="glyph" aria-hidden="true">🫖</span>
            </div>
            <div class="item-body"><span class="product-category">水筒・タンブラー / 森の器</span>
              <span class="nm" data-title>軽量 水筒 350ml マグボトル 保温12時間</span>
              <span class="price">¥2,480</span>
              <span class="stars"><b>★ 4.4</b> (862)</span>
              <span class="ship">あすつく</span>
            </div>
          </a>
          <a class="item" href="#demo-item-3" data-result data-price="2980" data-capacity="500" data-brand="2" data-next="true" data-free="true" data-rating="4.7" data-year="2021" data-id="3">
            <div class="shot" style="background: linear-gradient(150deg, #fee2e2, #fef2f2)">
              <span class="glyph" aria-hidden="true">☕</span>
            </div>
            <div class="item-body"><span class="product-category">水筒・タンブラー / 日和道具</span>
              <span class="nm" data-title>直飲み ステンレスタンブラー 500ml 蓋つき</span>
              <span class="price">¥2,980</span>
              <span class="stars"><b>★ 4.7</b> (2,041)</span>
              <span class="ship">あすつく・送料無料</span>
            </div>
          </a>
          <a class="item" href="#demo-item-4" data-result data-price="4180" data-capacity="750" data-brand="3" data-next="true" data-free="false" data-rating="4.5" data-year="2022" data-id="4">
            <div class="shot" style="background: linear-gradient(150deg, #ede9fe, #f5f3ff)">
              <span class="badge">12% OFF</span><span class="glyph" aria-hidden="true">🧊</span>
            </div>
            <div class="item-body"><span class="product-category">水筒・タンブラー / 灯台生活</span>
              <span class="nm" data-title>氷点下キープ 水筒 750ml 保温・保冷 24時間</span>
              <span class="price">¥4,180 <s>¥4,750</s></span>
              <span class="stars"><b>★ 4.5</b> (509)</span>
              <span class="ship">あすつく</span>
            </div>
          </a>
          <a class="item" href="#demo-item-5" data-result data-price="3540" data-capacity="500" data-brand="4" data-next="false" data-free="true" data-rating="4.2" data-year="2023" data-id="5">
            <div class="shot" style="background: linear-gradient(150deg, #fef3c7, #fffbeb)">
              <span class="glyph" aria-hidden="true">🍵</span>
            </div>
            <div class="item-body"><span class="product-category">水筒・タンブラー / 風待ち舎</span>
              <span class="nm" data-title>茶こし付き ステンレスボトル 480ml</span>
              <span class="price">¥3,540</span>
              <span class="stars"><b>★ 4.2</b> (318)</span>
              <span class="ship">送料無料</span>
            </div>
          </a>
          <a class="item" href="#demo-item-6" data-result data-price="2880" data-capacity="500" data-brand="5" data-next="true" data-free="false" data-rating="4.3" data-year="2024" data-id="6">
            <div class="shot" style="background: linear-gradient(150deg, #e0f2fe, #f0f9ff)">
              <span class="glyph" aria-hidden="true">🚴</span>
            </div>
            <div class="item-body"><span class="product-category">水筒・タンブラー / 凪の製作所</span>
              <span class="nm" data-title>スポーツ用 水筒 500ml ワンタッチ 保温</span>
              <span class="price">¥2,880</span>
              <span class="stars"><b>★ 4.3</b> (674)</span>
              <span class="ship">あすつく</span>
            </div>
          </a>
          <a class="item" href="#demo-item-7" data-result data-price="3180" data-capacity="500" data-brand="0" data-next="false" data-free="true" data-rating="4.8" data-year="2025" data-id="7">
            <div class="shot" style="background: linear-gradient(150deg, #fce7f3, #fdf2f8)">
              <span class="badge">25% OFF</span><span class="glyph" aria-hidden="true">🎀</span>
            </div>
            <div class="item-body"><span class="product-category">水筒・タンブラー / 波音工房</span>
              <span class="nm" data-title>名入れ対応 ステンレスマグ 450ml 贈答用</span>
              <span class="price">¥3,180 <s>¥4,240</s></span>
              <span class="stars"><b>★ 4.8</b> (196)</span>
              <span class="ship">送料無料</span>
            </div>
          </a>
          <a class="item" href="#demo-item-8" data-result data-price="4620" data-capacity="1000" data-brand="1" data-next="true" data-free="true" data-rating="4.1" data-year="2026" data-id="8">
            <div class="shot" style="background: linear-gradient(150deg, #e7e5e4, #fafaf9)">
              <span class="glyph" aria-hidden="true">🏔️</span>
            </div>
            <div class="item-body"><span class="product-category">水筒・タンブラー / 森の器</span>
              <span class="nm" data-title>アウトドア 水筒 1L 広口 保温ボトル</span>
              <span class="price">¥4,620</span>
              <span class="stars"><b>★ 4.1</b> (233)</span>
              <span class="ship">あすつく・送料無料</span>
            </div>
          </a>
        </div>

        <nav class="pager" data-pager aria-label="結果のページ送り" hidden></nav>
      </main>
    </div>
  <div class="notes-wrap"><aside class="demo-note" id="demo-about"><h2>この見本について</h2><p>架空のショップと商品を使った検索デモです。掲載した8件だけをこのページ内で検索し、価格・容量・ブランド・配送・評価の絞り込み・並び替え・ページ送りを試せます。入力は外部へ送信・保存せず、URLにも含めません。配布HTMLはCC0・利用料¥0です。</p><p>商品名・価格・割引・在庫・評価・配送条件は表示見本です。実際の販売・注文・決済・お気に入り保存は行いません。絵文字の見え方は端末により異なります。</p><section id="demo-service" tabindex="-1"><h3>ショップの機能の見本</h3><p>ホーム・カテゴリ・お気に入り・注文履歴・カートのリンク位置を示す見本です。各機能への接続や購入は行いません。</p></section><section id="demo-item-1" tabindex="-1"><h3>真空断熱 ステンレスボトル 500ml 保温・保冷両用</h3><p>商品名・価格・評価・配送条件の配置を示す架空の商品です。購入やカートへの追加は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-2" tabindex="-1"><h3>軽量 水筒 350ml マグボトル 保温12時間</h3><p>商品名・価格・評価・配送条件の配置を示す架空の商品です。購入やカートへの追加は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-3" tabindex="-1"><h3>直飲み ステンレスタンブラー 500ml 蓋つき</h3><p>商品名・価格・評価・配送条件の配置を示す架空の商品です。購入やカートへの追加は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-4" tabindex="-1"><h3>氷点下キープ 水筒 750ml 保温・保冷 24時間</h3><p>商品名・価格・評価・配送条件の配置を示す架空の商品です。購入やカートへの追加は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-5" tabindex="-1"><h3>茶こし付き ステンレスボトル 480ml</h3><p>商品名・価格・評価・配送条件の配置を示す架空の商品です。購入やカートへの追加は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-6" tabindex="-1"><h3>スポーツ用 水筒 500ml ワンタッチ 保温</h3><p>商品名・価格・評価・配送条件の配置を示す架空の商品です。購入やカートへの追加は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-7" tabindex="-1"><h3>名入れ対応 ステンレスマグ 450ml 贈答用</h3><p>商品名・価格・評価・配送条件の配置を示す架空の商品です。購入やカートへの追加は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-8" tabindex="-1"><h3>アウトドア 水筒 1L 広口 保温ボトル</h3><p>商品名・価格・評価・配送条件の配置を示す架空の商品です。購入やカートへの追加は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><noscript><p>JavaScriptが無効なため検索・条件変更・ページ送りは動きません。全件を表示し、カードの説明リンクは利用できます。</p></noscript></aside></div><script>
const library=document.body.dataset.demo==='library',all=[...document.querySelectorAll('[data-result]')],query=document.querySelector('#query'),search=document.querySelector('[data-search]'),sort=document.querySelector('#sort'),count=document.querySelector('[data-count]'),heading=document.querySelector('[data-results-heading]'),pager=document.querySelector('[data-pager]'),empty=document.querySelector('[data-empty]'),error=document.querySelector('[data-error]'),filters=[...document.querySelectorAll('[data-filter]')],chips=document.querySelector('[data-applied]');
const normalize=value=>value.normalize('NFKC').toLocaleLowerCase('ja').trim(),terms=value=>normalize(value).split(/\s+/).filter(Boolean);
const records=all.map((el,index)=>({el,index,title:el.querySelector('[data-title]').textContent,text:normalize(el.textContent),...el.dataset}));
let activeQuery=query.value,activeMin=2000,activeMax=5000,currentPage=1,composing=false;const pageSize=library?3:6;
function state(){const result={};for(const input of filters){const group=input.dataset.filter;(result[group]??=[]);if(input.checked)result[group].push(input.value)}return result}
function matches(item,s,skip=''){
 if(!terms(activeQuery).every(term=>item.text.includes(term)))return false;
 if(library){if(skip!=='availability'&&s.availability.length&&!s.availability.includes(item.availability))return false;const category=document.querySelector('#classification').value;return skip==='classification'||!category||item.classification===category}
 if(skip!=='price'&&((activeMin!==null&&Number(item.price)<activeMin)||(activeMax!==null&&Number(item.price)>activeMax)))return false;
 for(const group of ['capacity','brand'])if(skip!==group&&s[group].length&&!s[group].includes(item[group]))return false;
 if(skip!=='shipping'&&!s.shipping.every(value=>item[value]==='true'))return false;
 if(skip!=='rating'&&s.rating.length&&!s.rating.some(value=>Number(item.rating)>=Number(value)))return false;return true;
}
function selection(){return records.filter(item=>matches(item,state()))}
function sorted(items){return [...items].sort((a,b)=>sort.value==='new'?Number(b.year)-Number(a.year):sort.value==='old'?Number(a.year)-Number(b.year):sort.value==='price'?Number(a.price)-Number(b.price):sort.value==='rating'?Number(b.rating)-Number(a.rating):a.index-b.index)}
function highlight(el,text){const fragment=document.createDocumentFragment(),needles=terms(activeQuery),normalized=normalize(text);let pos=0;while(pos<text.length){let start=-1,length=0;for(const term of needles){const found=normalized.indexOf(term,pos);if(found>=0&&(start<0||found<start||(found===start&&term.length>length))){start=found;length=term.length}}if(start<0){fragment.append(document.createTextNode(text.slice(pos)));break}fragment.append(document.createTextNode(text.slice(pos,start)));const mark=document.createElement('mark');mark.textContent=text.slice(start,start+length);fragment.append(mark);pos=start+length}el.replaceChildren(fragment)}
function removeConditions(){for(const input of filters)input.checked=false;if(library)document.querySelector('#classification').value='';else{activeMin=null;activeMax=null;document.querySelector('#min-price').value='';document.querySelector('#max-price').value=''}currentPage=1;error.hidden=true;document.querySelectorAll('[aria-invalid]').forEach(el=>el.removeAttribute('aria-invalid'));render()}
function resetAll(){query.value='';activeQuery='';sort.value='default';removeConditions();heading.focus()}
function makeButton(text,action){const button=document.createElement('button');button.type='button';button.textContent=text;button.addEventListener('click',action);return button}
function addChip(text,action){const button=makeButton(text+' ×',()=>{action();currentPage=1;render();heading.focus()});button.className='tag';button.setAttribute('aria-label',text+'の条件を解除');chips.append(button)}
function render(){
 const items=sorted(selection()),pages=Math.max(1,Math.ceil(items.length/pageSize));currentPage=Math.max(1,Math.min(currentPage,pages));const visible=items.slice((currentPage-1)*pageSize,currentPage*pageSize);
 all.forEach(el=>el.hidden=true);for(const item of items)document.querySelector('[data-results]').append(item.el);for(const item of visible)item.el.hidden=false;
 for(const item of records)highlight(item.el.querySelector('[data-title]'),item.title);
 const range=items.length?((currentPage-1)*pageSize+1)+'〜'+Math.min(currentPage*pageSize,items.length)+'件を表示':'表示できる結果はありません';count.textContent=items.length+'件 / '+range+'(掲載'+records.length+'件の見本)';
 heading.textContent=activeQuery?'「'+activeQuery+'」の検索結果':library?'すべての目録':'すべての商品';
 pager.replaceChildren();if(items.length){for(const [text,page]of [['前へ',currentPage-1],...Array.from({length:pages},(_,i)=>[String(i+1),i+1]),['次へ',currentPage+1]]){const button=makeButton(text,()=>{currentPage=page;render();heading.focus()});button.disabled=page<1||page>pages;if(page===currentPage&&/^\d+$/.test(text))button.setAttribute('aria-current','page');pager.append(button)}}pager.hidden=!items.length;const showResults=document.querySelector('[data-show-results]');if(showResults)showResults.textContent=items.length+'件の結果を見る';
 empty.hidden=items.length>0;
 chips.replaceChildren();for(const input of filters)if(input.checked)addChip(input.dataset.label,()=>input.checked=false);
 if(library){const classification=document.querySelector('#classification');if(classification.value)addChip(classification.selectedOptions[0].textContent,()=>classification.value='')}
 else if(activeMin!==null||activeMax!==null)addChip('価格 '+(activeMin??'指定なし')+'〜'+(activeMax??'指定なし')+'円',()=>{activeMin=null;activeMax=null;document.querySelector('#min-price').value='';document.querySelector('#max-price').value='';error.hidden=true;document.querySelectorAll('[aria-invalid]').forEach(el=>el.removeAttribute('aria-invalid'))})
 if(!chips.childNodes.length){const label=document.createElement('span');label.textContent='絞り込みなし';chips.append(label)}chips.append(makeButton('絞り込みをすべて解除',()=>{removeConditions();heading.focus()}));
 for(const input of filters){const s=state(),group=input.dataset.filter;s[group]=s[group].includes(input.value)?s[group].filter(value=>value!==input.value):[...s[group],input.value];document.querySelector('[data-count-for="'+input.id+'"]').textContent=records.filter(item=>matches(item,s)).length+'件';input.closest('label').classList.toggle('on',input.checked)}
 const withoutQuery=activeQuery;activeQuery='';const queryCount=selection().length;activeQuery=withoutQuery;document.querySelector('[data-relax-query]').textContent='検索語を消すと '+queryCount+'件';const s=state();for(const group of Object.keys(s))s[group]=[];const savedMin=activeMin,savedMax=activeMax,category=library?document.querySelector('#classification'):null,categoryValue=category?.value;activeMin=null;activeMax=null;if(category)category.value='';const conditionCount=records.filter(item=>matches(item,s)).length;activeMin=savedMin;activeMax=savedMax;if(category)category.value=categoryValue;document.querySelector('[data-relax-filters]').textContent='絞り込みを外すと '+conditionCount+'件';
}
function applyQuery(){if(composing)return;activeQuery=query.value.trim();currentPage=1;error.hidden=true;document.querySelectorAll('[aria-invalid]').forEach(el=>el.removeAttribute('aria-invalid'));render()}
document.querySelector('form').addEventListener('submit',event=>event.preventDefault());query.addEventListener('compositionstart',()=>composing=true);query.addEventListener('compositionend',()=>composing=false);query.addEventListener('keydown',event=>{if(event.key==='Enter'){if(event.isComposing||composing||event.keyCode===229)return;event.preventDefault();applyQuery()}});search.addEventListener('click',applyQuery);
document.querySelector('[data-clear-query]').addEventListener('click',()=>{query.value='';activeQuery='';currentPage=1;error.hidden=true;render();query.focus()});
query.addEventListener('search',()=>{if(!query.value)applyQuery()});sort.addEventListener('change',()=>{currentPage=1;render()});filters.forEach(input=>input.addEventListener('change',()=>{currentPage=1;render()}));
if(library)document.querySelector('#classification').addEventListener('change',()=>{currentPage=1;render()});
else{
 const min=document.querySelector('#min-price'),max=document.querySelector('#max-price');function applyPrice(){error.hidden=true;for(const input of[min,max])input.removeAttribute('aria-invalid');const invalid=[min,max].find(input=>input.value.trim()&&!/^\d{1,7}$/.test(normalize(input.value)));const low=min.value.trim()?Number(normalize(min.value)):null,high=max.value.trim()?Number(normalize(max.value)):null;if(invalid||low!==null&&high!==null&&low>high){const target=invalid||min;target.setAttribute('aria-invalid','true');error.textContent='価格は0以上の整数を7桁以内で入力し、下限を上限以下にしてください。前の適用条件は維持しています。';error.hidden=false;target.focus();target.scrollIntoView({block:"center"});return}activeMin=low;activeMax=high;currentPage=1;render()}
 document.querySelector('[data-price-apply]').addEventListener('click',applyPrice);for(const input of[min,max]){input.addEventListener('input',()=>{error.hidden=true;input.removeAttribute('aria-invalid')});input.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.isComposing&&event.keyCode!==229){event.preventDefault();applyPrice()}})}
 const more=document.querySelector('[data-more]'),extra=document.querySelector('#extra-brands');more.addEventListener('click',()=>{const open=extra.hidden;extra.hidden=!open;more.setAttribute('aria-expanded',String(open));more.textContent=open?'追加の2ブランドを閉じる':'さらに2ブランドを表示'});
 const disclosure=document.querySelector(".filter-disclosure"),desktop=matchMedia("(min-width:960px)");function syncDisclosure(){if(!desktop.matches&&disclosure.querySelector("aside").contains(document.activeElement))disclosure.querySelector("summary").focus();disclosure.open=desktop.matches}desktop.addEventListener("change",syncDisclosure);syncDisclosure();document.querySelector("[data-show-results]").addEventListener("click",()=>{disclosure.open=false;heading.focus()});
 const topbar=document.querySelector('.topbar');new ResizeObserver(()=>document.documentElement.style.setProperty('--header-height',topbar.getBoundingClientRect().height+'px')).observe(topbar);
}
document.querySelector('[data-relax-query]').addEventListener('click',()=>{query.value='';activeQuery='';currentPage=1;render();heading.focus()});document.querySelector('[data-relax-filters]').addEventListener('click',()=>{removeConditions();heading.focus()});document.querySelectorAll('[data-reset-all]').forEach(button=>button.addEventListener('click',resetAll));
document.querySelectorAll('[data-js-control]').forEach(el=>el.disabled=false);chips.hidden=false;render();
</script></body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

絞り込み検索の考え方は、通販より半世紀以上前の図書館情報学から来ています。インドの図書館学者ランガナタンが1930年代に提唱したコロン分類法は、資料を一本の階層に押し込むのではなく、素材・場所・時間といった複数の面から同時に指定する方式でした。この「面(ファセット)で切る」発想が、2000年代に電子商取引へ持ち込まれ、いま私たちが当たり前に使っている左側の絞り込み欄になりました。

248件は、そのままでは選べない

検索結果が248件あると表示されたとき、人がやるのは全部を見ることではありません。自分の判断基準を思い出す作業です。容量はどれくらい必要か、予算はいくらまでか、いつ届いてほしいか。絞り込み欄の本当の役割は条件を入力させることではありません。判断基準を先に一覧して見せることにあります。だから群の見出しは、社内の属性名ではなく買う人の言葉で書く必要があります。そして各選択肢に件数を添えるかどうかで、体験は決定的に変わります。件数が無ければ、ユーザーは条件を足すたびに0件を引く賭けをすることになるからです。

崩れる形選択肢に件数を出さない

利用者は条件を足すたびに0件を引く賭けをすることになります。行き止まりに当たった時点で、絞り込み自体をやめてしまいます。

効く形各選択肢に件数を添える

選ぶ前に結果の大きさが分かります。群の見出しも社内の属性名ではなく買う人の言葉で書くと、判断基準の一覧としてそのまま読めます。

効く商材と、効かない商材

この形が力を発揮するのは、属性がはっきり構造化されている商材です。家電の消費電力、アパレルのサイズ、住まいの駅からの距離、求人の年収。数値や区分で言い切れるものが多いほど、絞り込みは正確に効きます。逆に、絵画や小説のように価値が属性に還元しにくいものでは、細かい絞り込み欄はほとんど使われません。そうした領域では、条件を刻むより、似たものを提示する方向に設計をずらすべきです。

見本で試せる範囲

配布HTMLは架空の8商品だけを検索するデモです。検索語を空白で区切るとすべての語を含む商品名・分類・ブランドを探し、価格・容量・ブランド・配送・評価を組み合わせられます。同じ群の容量・ブランド・評価はいずれかに一致、配送は選んだ条件すべてに一致する商品を表示します。右の件数はその項目を切り替えた後の結果数で、削除できるタグには適用済みの条件を表示します。

価格は0以上の整数を7桁以内で入力して適用します。下限が上限を超える場合などは前の適用条件を保ち、入力欄で修正を案内します。1ページ6件で送り、0件では検索語や条件を外した場合の件数を示します。スマホでは絞り込み欄を開閉でき、カードは各商品の表示見本の説明へ移動します。

商品名・ブランド・価格・割引・在庫・評価・配送条件は架空の設定です。購入・決済・お気に入り保存は行わず、入力を外部送信・保存せずURLにも含めません。JavaScriptなしでは全8件と説明リンクを残し、検索と条件変更を無効にします。

迷いを減らす細部

適用中の条件は、結果の上に必ず出したままにしてください。何で絞ったかを忘れたまま「思ったより少ない」と感じるのが、離脱のいちばん多い経路です。並び替えの初期値は関連度にします。安い順を既定にすると、検索語との一致が弱い商品が先頭に並んでしまう。

0件の画面には、条件を一つ外した場合の件数を添えた提案を必ず置いてください。行き止まりを作らないことが、検索結果ページの最後の仕事です。

検索結果の構成要素

検索結果の構成要素 検索語 128件中 1〜20件 絞り込み 件数を先に見せる ── 0件かどうかで、次の行動がまったく違う 絞り込みは「いま何が効いているか」を、外せる形で表示する
検索結果は件数と、いま効いている条件が見えることが要点です。0件のときこそ、条件を外す道を近くに置いてください。

使いどころ

  • 属性が構造化された商材(家電・アパレル・食品など)の通販検索
  • 求人・不動産・旅行のように条件で絞り込む前提のサービス
  • 結果件数が数十件を超え、一覧しただけでは選べない規模の在庫
  • 社内ドキュメントやナレッジベースの横断検索

このデザインの分類

カテゴリ
検索結果
スタイル
ミニマル / SaaS / コーポレート / クール

背景と狙いどころ

よくある質問

選択肢の横に件数を出すのはなぜ必要なのですか。
選ぶ前に結果の量が分かるからです。件数が無いと、ユーザーは条件を足すたびに0件かどうかを試すことになります。件数を添えておけば「これを選ぶと 96 件」と分かった上で押せるので、行き止まりを踏む回数が目に見えて減ります。
絞り込みは左と上のどちらに置くべきですか。
群の数で決めてください。5群を超えるなら左の縦置きが読みやすく、3群以下なら上の横帯にして結果に横幅を回すほうが得です。スマートフォンではどちらの場合も、結果の上に畳んだ状態で置くのが実際的です。
検索語のハイライトは色を強くしたほうがいいですか。
薄い黄色で十分です。強い色にすると商品名そのものより目立ってしまい、一覧を流し読みする動きを邪魔します。ハイライトの役割は「なぜこれが出たか」を示すことで、注目を集めることではありません。
並び替えの初期値は何にすべきですか。
関連度を既定にしてください。価格の安い順を初期値にすると、検索語との一致が弱い商品が上位に来て、探しているものが埋もれます。価格順は選択肢として残しつつ、最初の一画面は関連度で組むのが安全です。
ページ送りと無限スクロールはどちらがいいですか。
比較しながら選ぶ商材ではページ送りが向きます。何ページ目のどこで見たかを覚えていられるうえ、フッターに到達できるからです。無限スクロールは、閲覧そのものが目的の画像中心の一覧に限って使ってください。

この画面を実装する

動くサンプルとコピペできるコードを、技術別にまとめています。