検索ブランド相談室 | 検索と評判の専門メディア

オウンドメディアのサイト内検索を改善する方法|検索窓・絞り込み・ゼロ件表示・モバイルUX

部署:マーケティング担当者部署:経営者・責任者レベル:実践
オウンドメディアのサイト内検索をPCとスマートフォンで確認しているWeb担当者の手元

記事数が増えたオウンドメディアでは、カテゴリや関連記事だけでは目的の記事を見つけにくくなることがあります。そこで重要になるのがサイト内検索です。

改善するときは検索窓だけを見るのではなく、「検索できることに気づく」「適切な言葉を入力できる」「結果から読む記事を選べる」「絞り込める」「見つからなくてもやり直せる」という一連の体験で確認します。

この記事では、検索窓、入力補助、結果表示、絞り込み、ゼロ件表示、モバイルの6つに分け、オウンドメディア担当者が自社サイトを点検できる方法を整理します。

サイト内検索は「検索窓」ではなく目的の記事へ到達するまでを改善する

サイト内検索の改善対象は、検索フォームの見た目だけではありません。

読者の立場では、次の6段階がつながって初めて「使いやすい検索」になります。

段階 読者の行動 主な確認ポイント
1. 発見 検索機能を見つける 配置、視認性
2. 入力 探したい内容を入力する 入力欄、候補、表記ゆれ
3. 判断 検索結果を見る タイトル、抜粋、カテゴリ
4. 絞り込み 候補を減らす カテゴリ、テーマ、条件
5. 回復 欲しい結果が出ない ゼロ件表示、再検索導線
6. 到達 記事を選ぶ 結果の分かりやすさ、操作性
サイト内検索を発見・入力・判断・絞り込み・回復・到達の6段階で示したフロー図

サイト内検索は、検索窓の設置だけでなく、検索を始めてから目的の記事へ到達するまでの6段階で確認します。

検索窓が目立っていても、検索結果がタイトルだけなら記事を選びにくくなります。絞り込みが充実していても、スマートフォンで操作しづらければ十分ではありません。

そのため、サイト内検索は「検索できるか」ではなく、「目的の記事まで迷わず進めるか」で評価します。

検索窓はどのページからでも見つけられる状態にする

最初に確認したいのは、検索精度ではなく検索機能そのものを見つけられるかです。

Nielsen Norman Groupの調査でも、デスクトップでは検索欄を分かりやすく表示し、利用者が検索場所を認識しやすくすることが重要とされています。

オウンドメディアでは、記事を読んでいる途中で「別のテーマも知りたい」と思う場面があります。そのため、トップページだけではなく、記事詳細ページからも検索へ移れる設計が必要です。

検索対象が分かる文言を表示する

検索欄のプレースホルダーは「検索」だけで終わらせず、必要に応じて検索対象を伝えます。

たとえば、

  • 記事を検索
  • キーワードで記事を検索
  • SEO・採用・口コミの記事を検索

といった表現です。

検索対象が記事なのか、製品や会社情報まで含むのかが分かれば、読者も入力する言葉を考えやすくなります。

HTMLでは検索入力用のinput type="search"が広く利用できます。MDNによると、一部のモバイル端末では検索向けのキーボード表示にもつながります。

入力補助は「正しい言葉を当てさせる」のではなく検索を続けやすくする

読者が、サイト運営者と同じ言葉を使うとは限りません。

たとえば運営側が「レピュテーション対策」と呼んでいても、読者は「悪い口コミ」「会社の評判」「検索結果の悪評」と入力するかもしれません。

検索体験を改善するなら、完全一致だけに頼らず、検索候補や表記ゆれ、同義語を扱えるかを確認します。

検索行動に関する研究でも、一度の入力だけで終わらず、結果を見ながら検索語を変更する行動が確認されています。RiehとXieは313件の検索セッションを分析し、複数の検索語変更パターンを整理しています。

したがって、最初の入力で正解を当てることを利用者へ求めるのではなく、検索し直しやすい状態を作ることが重要です。

候補表示は実際に役立つ候補だけを出す

入力途中に検索候補を表示する場合は、その候補を選択した先に適切な結果があるかも確認します。

候補をクリックしたのに該当記事がない、または関係の薄い記事ばかり出る状態では、入力補助が逆に迷いを増やします。

サイト内検索の候補は「候補数を増やす」ことではなく、検索を一段進めることを目的に設計します。

検索結果は「この記事を読むべきか」を一覧で判断できるようにする

検索結果ページでは、検索エンジンの精度だけでなく、結果の見せ方が重要です。

記事タイトルだけを並べると、似たタイトルの記事が複数ある場合に違いを判断できません。

最低限、次の情報を組み合わせます。

  • 記事タイトル
  • 本文の短い抜粋
  • カテゴリまたはテーマ
  • 必要に応じて更新日
  • サムネイル
記事タイトル、本文抜粋、カテゴリ、更新日を備えたサイト内検索結果カードの構成図

検索結果にはタイトルだけでなく、記事の内容を判断できる抜粋やカテゴリなどの情報を組み合わせます。

SITE ONE FINDERの検索UI解説でも、タイトルと本文の抜粋を組み合わせ、結果ページ上で内容を判断できる形が紹介されています。

検索語と関係する部分を優先して見せる

記事冒頭を機械的に抜き出すだけでは、検索した言葉との関係が分からない場合があります。

可能であれば、検索語が含まれる箇所や、その記事で答えている内容が分かる抜粋を表示します。

たとえば「採用サイト 料金」と検索した読者には、会社紹介の文章よりも、制作費や運用費について書かれた箇所が見えた方が記事を選びやすくなります。

絞り込みは選択肢が多いときだけ追加する

記事数が多いメディアでは、検索結果が数十件、数百件になることがあります。

その場合は、キーワード検索だけで目的の記事を探すより、検索後に条件を狭められる方が使いやすくなります。

オウンドメディアで候補になるのは、次のような軸です。

絞り込み軸 向いているメディア
テーマ 複数領域を扱うメディア
記事カテゴリ 記事数が多いメディア
読者・対象 経営者、人事、Web担当など対象が分かれる場合
コンテンツ形式 解説、事例、調査、テンプレートなどが混在する場合
公開・更新時期 情報の新しさが重要なテーマ

ただし、絞り込みを増やせば良いわけではありません。

結果が20件しかないのに10種類のフィルターを用意すると、記事を探すより条件選択の方が複雑になります。

「検索結果が多すぎて選べない」という問題が実際にある場合に追加します。

選択中の条件と解除方法を見えるようにする

絞り込みでは、現在何を選択しているかが分からなくなると検索結果の意味も分からなくなります。

「SEO × 初心者向け」など選択中の条件を表示し、一つずつ解除できる状態にします。

結果が0件になった場合も、全条件を最初から選び直させるのではなく、どの条件を外せば再検索できるかを分かりやすくします。

ゼロ件表示では検索を終わらせず次の選択肢を示す

「該当する記事はありませんでした」だけで終了するページは、改善優先度が高い箇所です。

Baymard InstituteのECサイトを対象とした調査では、ゼロ件時に有効な回復手段を十分に提供できていないサイトが約50%確認されました。調査対象はECサイトですが、「検索に失敗した後の次の行動を用意する」という考え方はコンテンツサイトにも応用できます。

オウンドメディアなら、ゼロ件時に次の選択肢を提示できます。

  1. 入力した検索語を表示する
  2. 検索語を修正できる検索窓を残す
  3. 近い検索候補を提示する
  4. 絞り込み中なら条件解除を提案する
  5. 主要カテゴリへのリンクを表示する
  6. 人気記事や代表記事を提示する

重要なのは、ゼロ件を「終了画面」にしないことです。

ゼロ件には3種類の原因がある

ゼロ件が発生したときは、すべてを記事不足と判断しないようにします。

状態 考えられる原因 UX側の改善例
記事はある 呼び方・表記が違う 同義語、候補表示
記事はある 絞り込みが厳しい 条件解除を提示
記事がない 対応する情報がない 関連カテゴリ、近い記事を提示
サイト内検索が0件になった原因を言葉の違い、条件の厳しさ、記事不足の3つに分けた改善フロー

検索結果が0件でも、原因は記事不足だけではありません。原因に応じて再検索できる導線を用意します。

検索ログを使って新しい記事企画を作る分析は別の作業です。UX改善ではまず、今ある記事へ到達できる検索体験を整えます。

モバイルでは入力・絞り込み・再検索を実機で確認する

デスクトップで使いやすい検索画面が、スマートフォンでも使いやすいとは限りません。

スマートフォンでサイト内検索の入力、絞り込み、検索結果を確認している人物の手元

モバイルでは検索窓だけでなく、入力から絞り込み、記事選択、再検索まで一連の操作を実機で確認します。

特に確認したいのは次の項目です。

  • 検索ボタンや虫眼鏡を押しやすいか
  • 入力欄が画面幅に収まるか
  • キーボード表示後も検索候補を確認できるか
  • 絞り込みを開閉しやすいか
  • 選択済み条件を解除しやすいか
  • 検索結果のタイトルが途中で読めなくならないか
  • ゼロ件から再検索できるか

WCAG 2.2では、ポインター操作のターゲットについて原則24×24 CSSピクセル以上、または一定の間隔などを確保する基準が定められています。より大きな44×44 CSSピクセルは強化基準として示されています。

またW3Cは、サイトの検索機能をsearchランドマークとして識別できる実装例も示しています。視覚的なデザインだけでなく、キーボードや支援技術からも検索機能を認識できる状態を確認します。

サイト内検索は症状ごとに改善順を決める

すべてを一度に作り直す必要はありません。

まず、現在起きている問題に近い項目から改善します。

現在の症状 最初に確認する場所 優先する改善
検索機能がほとんど使われない 検索窓 配置・視認性
検索後すぐ離脱する 結果表示 タイトル・抜粋・関連性
結果が多すぎる 絞り込み テーマ・カテゴリ
0件が多い 入力・ゼロ件 同義語・候補・回復導線
スマホだけ操作しづらい モバイルUI タップ・表示・フィルター
改善効果が分からない 計測 検索利用・検索後行動

この順番なら、「高度な検索機能を入れたが、そもそも検索窓に気づかれていなかった」といった手戻りを防ぎやすくなります。

改善後は検索開始から記事到達までを確認する

公開後は、検索回数だけで評価しません。

Google Analytics 4の拡張計測機能では、URLの検索クエリパラメータをもとにview_search_resultsイベントを収集できます。標準ではq、s、search、queryなどを対象にでき、追加パラメータも設定できます。

UX改善では、数値と実際の操作確認を組み合わせます。

確認する流れは次の通りです。

  1. 検索機能を利用できるか
  2. 想定した検索語で結果が返るか
  3. 結果から適切な記事を選べるか
  4. 多い場合に絞り込めるか
  5. ゼロ件でも次の行動へ進めるか
  6. スマートフォンでも同じ流れを完了できるか

検索ログから新規記事を企画する分析とは分け、ここでは「今ある記事へ到達できるか」を中心に確認すると改善目的がぶれません。

サイト内検索UXのチェックリスト

自社メディアを確認するときは、次の12項目から始めます。

  • 記事ページから検索機能を見つけられる
  • 検索対象が読者に分かる
  • 入力した文字を確認しやすい
  • 表記ゆれや近い言葉でも検索し直せる
  • 検索結果にタイトル以外の判断材料がある
  • 結果が多い場合に適切な絞り込みがある
  • 選択中の絞り込み条件が分かる
  • 条件を簡単に解除できる
  • ゼロ件時にも次の行動がある
  • モバイルで入力から記事選択まで完了できる
  • キーボード操作や支援技術にも配慮している
  • 改善前後の検索行動を確認できる

一つでも大きく詰まる場所があれば、検索システム全体を入れ替える前に、その接点から修正する方が改善範囲を決めやすくなります。

まとめ

オウンドメディアのサイト内検索は、検索窓を設置するだけでは十分ではありません。

検索機能を見つけ、適切な言葉を入力し、結果を判断し、必要なら絞り込み、見つからなくても別の経路へ進めるところまでを一つの体験として確認します。

特に優先したいのは、検索窓の発見しやすさ、検索結果の判断材料、ゼロ件からの回復、モバイルでの操作性です。

まず自社サイトで複数の検索語を実際に入力し、「どこで次の行動が止まるか」を確認してください。その場所が、最初に改善すべきサイト内検索UXです。

自社の検索・回遊導線をまとめて点検したい場合は、無料資料のチェックリストも改善項目の整理に活用できます。

サイト内検索を改善する前提となる読者像や扱うテーマの決め方は、メディア戦略・コンテンツ企画の全体像もあわせて確認してください。

参考文献・データ元

この記事で参照した情報を確認できます。

‹ 親記事: メディア戦略・コンテンツ企画とは?ゴール設定からテーマ選定・編集方針までを体系的に整理

関連記事

関連テーマ