絞り込み検索で結果が0件のときの表示はどうする？離脱を防ぐ4つの工夫とサイト別の考え方

サイト内検索や絞り込み機能を設置するとき、つい忘れがちなのが「条件に合うものが1件もなかったとき」の表示です。

結論から言うと、0件のときに「該当する商品はありません」の一文だけを出すのは、離脱の原因になりやすい設計です。ユーザーはそこで行き場を失い、検索をあきらめてサイト自体を離れてしまいます。逆に、次にできることを示せれば、0件の画面が別のページへの入り口に変わります。

0件表示が離脱につながる理由

ユーザーが絞り込みを使うのは、欲しいものがすでに頭の中にあるからです。つまり0件が表示される瞬間は、探す気持ちが強いのに、期待に応えられなかった状態です。

このとき表示が「該当なし」だけだと、ユーザーにできることは次の3つしかありません。

1. 条件を自分で組み替えて、もう一度探す（やり方に気づければ、の話です）
2. ブラウザーの戻るボタンで、前のページに戻る
3. サイトを離れて、別のサイトやGoogle検索に戻る

3番に進ませないための仕掛けが、0件表示の設計です。

離脱を防ぐ0件表示の工夫4つ

工夫1：条件を外すボタンを、0件メッセージのすぐ近くに置く

「条件をすべて解除する」「条件を変更する」ボタンを、0件のメッセージのそばに置きます。条件を選ぶ欄がページの上や横にあっても、そのときユーザーの目は0件のメッセージに向いています。目線の先に解除のボタンがあるだけで、次の操作に迷いにくくなります。

工夫2：どの条件を外せば見つかるかを伝える

「価格帯を広げると見つかります」「『北海道』の条件を外すと12件あります」のように、どの条件を変えればよいかを示せると、ユーザーは自分で条件を調整できます。

そこまでの改修が難しいサイトでも、選択肢の横に件数を出すだけで効果があります。「北海道（3）」「東北（0）」のように表示しておけば、ユーザーは選ぶ前に、0件になる組み合わせを避けられます。

工夫3：近い候補を「理由つき」で案内する

0件のときに、条件を少し広げた結果や、関連するカテゴリの商品を表示します。ここで大事なのは、なぜそれを出しているのかが分かる形にすることです。

• 良い例：「条件を1つ外した結果です」「『シャツ』で見つかった商品をもとにおすすめしています」と見出しを添える
• 悪い例：条件と関係の薄い人気商品を、説明なしにただ並べる

悪い例のように並べると、「このサイトの検索は当てにならない」という印象を与えかねません。おすすめを出すなら、検索した条件との関係が分かる見出しを添えましょう。

工夫4：問い合わせへの案内を置く

「お探しのものが見つからない場合は、こちらからお問い合わせください」と、問い合わせページへのリンクを添えます。

特に会社向け（BtoB）のサイトや、受注生産の商品を扱うサイトでは、0件は「売れるものがない」ではなく、「一覧に載っていないだけ」ということがよくあります。問い合わせがそのまま商談につながることもあるので、0件の画面は営業の入り口としても作り込む価値があります。

0件の画面は、検索の行き止まりではなく、次の行動への分かれ道です。

0件表示のHTML例

4つの工夫を入れた0件表示は、たとえば次のような形になります。

<div class="no-results" role="status">
  <p>条件に合う事例は見つかりませんでした。</p>
  <p>「対応地域：北海道」の条件を外すと 12 件あります。</p>
  <button type="button">条件をすべて解除する</button>
  <p>
    お探しのものが見つからない場合は、
    <a href="/contact">お問い合わせ</a>ください。
  </p>
</div>

role="status" を付けておくと、画面の読み上げソフトを使っている人にも「0件になった」ことが伝わります。絞り込みはページを読み込み直さずに表示だけが切り替わることが多いので、見た目で分かるだけでは気づけない人がいるためです。

あわせて、絞り込んだ条件をURLに残しておくと、0件の画面から戻るボタンで前の条件に戻れるようになります。方法はJavaScriptの絞り込みフィルタで選択条件をURLに反映させる方法で解説しています。

サイトの種類別・0件表示の考え方

ECサイト（ネットショップ）の場合

在庫の切れ目で0件になりやすいので、「似た商品」や「入荷のお知らせ」の案内が役立ちます。売り切れ商品のページに似た商品を出すのと同じ考え方を、0件の画面にも当てはめます。

会社のサイト・事例紹介の場合

「実績が0件」という表示は、信頼に関わります。事例を無理に見せるより、「まずはご相談ください」の案内を出すほうが自然です。対応地域や業種の条件を外した事例を、理由を添えて見せるのも効果的です。

求人・不動産など、条件で探すことが中心のサイトの場合

条件の組み合わせが多く、0件が起きやすい種類のサイトです。工夫2（どの条件を外せば見つかるか）の効果が特に大きくなります。

まとめ

0件の画面は、条件を外すボタン・どの条件がネックかのヒント・理由つきの候補・問い合わせへの案内の4つを用意すれば、検索が外れてもサイトの中で次の行動につなげられます。

まずは自社のサイトで、わざと0件になる条件を選んで、何が表示されるかを見てみてください。

よくある質問（FAQ）

Q. 0件のときにおすすめ商品を出すのは、逆効果になりませんか？

条件と関係の薄い商品を理由なく並べると、不信感につながります。「条件を1つ外した結果です」のように理由を添えれば、案内として受け入れられやすくなります。

Q. 0件を減らすには、検索条件の作り方を変えたほうがいいですか？

それも有効です。たとえば価格帯の区切りを細かくしすぎると、0件が増えます。まずは、どの条件の組み合わせで0件になりやすいかを把握するところから始めるのが近道です。

Q. 0件表示を改善した効果は、どう測ればいいですか？

Googleアナリティクス4（GA4）のサイト内検索の計測では、検索された言葉は分かりますが、結果が0件だったかどうかまでは分かりません。0件の画面を表示したときにイベントを送る設定を加え、その後にユーザーが離脱したのか、別のページへ進んだのかを見るのが確実です。