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

オウンドメディアのサイト内検索をPCとスマートフォンで確認しているWeb担当者の手元

記事数が増えたオウンドメディアでは、カテゴリや関連記事をたどるだけでは、目的の記事を見つけにくくなることがあります。そこで頼りになるのがサイト内検索ですが、検索窓を置いただけでは、読者が探している記事に着けるとは限りません。

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

この記事では、検索窓、入力補助、結果表示、絞り込み、ゼロ件表示、モバイルの6つに分けて、オウンドメディア担当者が自社サイトを点検する方法を整理します。読み終えたときに、自社サイトのどこから直すかを決められる状態を目指します。

サイト内検索の改善は、検索窓ではなく目的の記事に着くまでの流れで考える

サイト内検索の改善対象は、検索フォームの見た目だけではありません。読者の立場では、次の6段階がつながって初めて「使いやすい検索」になります。

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

表のとおり、検索の体験は「見つける」から「記事を選ぶ」までの6段階で成り立っています。この記事の節は、おおむねこの段階の順に進みます。「判断」と「到達」は検索結果の節でまとめて扱い、モバイルは全段階に関わるため最後に確認します。

どこか1つの段階で止まれば、ほかの段階が整っていても読者は目的の記事に着けません。検索窓が目立っていても、検索結果がタイトルだけなら記事を選びにくくなります。絞り込みが充実していても、スマートフォンで操作しづらければ十分ではありません。

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

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

この節で決めるのは、検索窓の置き方と見せ方です。最初に確認したいのは、検索精度ではなく、検索機能そのものを見つけられるかどうかです。

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

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

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

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

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

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

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

入力補助は、正しい言葉を当てさせるのではなく、検索を続けやすくするために使う

この節で決めるのは、読者が最初の入力で言葉を外したときに、どう支えるかです。

読者が、サイト運営者と同じ言葉を使うとは限りません。たとえば運営側が「レピュテーション対策」と呼んでいても、読者は「悪い口コミ」「会社の評判」「検索結果の悪評」と入力するかもしれません。そのため、完全一致だけに頼らず、検索候補や表記ゆれ、同義語を扱えるかを確認します。

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

したがって、最初の入力で正解を当てることを読者に求めるのではなく、検索し直しやすい状態を作ることが大切です。

候補表示は、選んだ先に結果がある候補だけを出す

入力途中に検索候補を表示する場合は、その候補を選択した先に適切な結果があるかも確認します。候補をクリックしたのに該当記事がない、または関係の薄い記事ばかり出る状態では、入力補助がかえって迷いを増やします。

候補は数を増やすことが目的ではありません。読者の検索を一段進めることを目的に設計します。

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

この節で決めるのは、結果ページに何を並べるかです。検索結果ページでは、検索エンジンの精度だけでなく、結果の見せ方が重要になります。記事タイトルだけを並べると、似たタイトルの記事が複数ある場合に違いを判断できません。

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

記事タイトル
本文の短い抜粋
カテゴリまたはテーマ
必要に応じて更新日
サムネイル

タイトルだけでなく、記事の内容を判断できる抜粋やカテゴリなどを組み合わせることで、読者は一覧の段階で読む記事を選べます。SITE ONE FINDERの検索UI解説でも、タイトルと本文の抜粋を組み合わせ、結果ページ上で内容を判断できる形が紹介されています。

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

記事冒頭を機械的に抜き出すだけでは、検索した言葉との関係が分からない場合があります。可能であれば、検索語が含まれる箇所や、その記事で答えている内容が分かる抜粋を表示します。

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

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

この節で決めるのは、絞り込みを置くかどうかと、置く場合の軸です。

記事数が多いメディアでは、検索結果が数十件、数百件になることがあります。その場合は、キーワード検索だけで目的の記事を探すより、検索後に条件を狭められる方が使いやすくなります。オウンドメディアで候補になる軸は、次のとおりです。

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

表の軸のうち、自社の記事構成に合うものを選びます。ただし、絞り込みは増やせば良いわけではありません。結果が20件しかないのに10種類のフィルターを用意すると、記事を探すより条件選択の方が複雑になります。

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

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

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

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

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

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

この節で決めるのは、検索結果が0件になったときに読者をどこへ案内するかです。「該当する記事はありませんでした」だけで終了するページは、改善の優先度が高い箇所だと考えます。

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

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

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

重要なのは、ゼロ件を「終了画面」にしないことです。どの選択肢を優先するかは、次の小見出しで見る原因によって変わります。

ゼロ件の原因は3種類に分けて考える

ゼロ件が発生したときは、すべてを記事不足と判断しないようにします。原因を分けると、UI側でできる対応が見えてきます。

状態	考えられる原因	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改善では、数値と実際の操作確認を組み合わせます。確認する流れは次のとおりです。

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

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

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

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

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

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

まとめ

オウンドメディアのサイト内検索は、検索窓を設置するだけでは十分ではありません。検索機能を見つけ、適切な言葉を入力し、結果を判断し、必要なら絞り込み、見つからなくても別の経路へ進めるところまでを、一つの体験として確認します。

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

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

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

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

参考文献・データ元

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

Nielsen Norman Group「The State of Ecommerce Search」
https://www.nngroup.com/articles/state-ecommerce-search/
Baymard Institute「Search UX: 5 Proven Strategies for Improving “No Results” Pages」
https://baymard.com/research-articles/no-results-page
W3C「Web Content Accessibility Guidelines (WCAG) 2.2」
https://www.w3.org/TR/WCAG22/
W3C「Search Landmark」
https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/search.html
Google Analytics Help「拡張計測機能イベント」
https://support.google.com/analytics/answer/9216061?hl=ja
MDN Web Docs「input type="search"」
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/search
Rieh, S. Y. & Xie, H. (2006), “Analysis of multiple query reformulations on the web: The interactive information retrieval context”, Information Processing & Management, 42(3), 751–768.
DOI: 10.1016/j.ipm.2005.05.005
https://www.sciencedirect.com/science/article/abs/pii/S030645730500066X

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