サイト内検索でECサイトやウェブサイトをもっと便利に！

サイト内検索は、ECサイトやウェブサイト内のコンテンツを簡単に見つけることができる便利な機能です。

ほとんどのインターネットユーザーは、GoogleやYahoo！などの検索エンジンでキーワード検索をかけた結果、キーワードに関連性のあるウェブサイトに訪問します。

このウェブサイト内でコンテンツをすばやく見つけるためにあるのが「サイト内検索」という機能です。
Google chromeのように、「サイト内検索」と「ページ内検索」ができる便利な機能をもつブラウザもあります。iPhoneの場合はSafariで「ページ内検索」が行えます。

ウェブサイト内のコンテンツ量が多いとユーザが欲しい情報にたどり着くまでに多くの時間を必要としますが、このサイト内検索機能を追加することで知りたい情報にすばやくアクセスすることができます。
以下では、サイト内検索機能をウェブサイトに追加することで得られるメリットや、実際にサイト内検索を追加するやり方を、比較できるようにパターンに分けて解説していきたいと思います。

• サイト内検索の目的は『ユーザの知りたい欲求を満たす』
• サイト内検索でユーザの検索傾向を分析する
• サイト内検索窓をHTMLで自作して設置する方法
• Yahooカスタムサーチの設定方法
• Google Analyticsの設定方法
• WordPressのサイト内検索設置方法
• サイト内検索を自作するときのポイント
• 特定のサイト内でGoogle検索ができるgoogle site:URL
• Googleカスタム検索で多機能なサイト内検索を自作しよう
• WwwSearch＋でサイト内検索を無料で自作しよう
• msearchでサーバーに負担をかけないサイト内検索を自作しよう
• サイト内検索がなくてもショートカットキーでキーワード検索可能

サイト内検索の目的は『ユーザの知りたい欲求を満たす』

サイト内検索をウェブサイトに追加することで得られるメリットは、知りたい情報にすばやくアクセスできることです。

検索行動をするユーザーの目的は、「知りたい情報を煩わしい思いをすることなく獲得すること」です。キーワード検索でウェブサイトに流入するユーザーは、そもそも検索をしたいわけではなく特定の情報が欲しいのです。

そのため、この目的に対して必要な答えをすぐに返す環境を整えることで、ユーザビリティを高めることができます。

知りたい情報にすぐにアクセスできないことは、ユーザーにストレスを与えることになるため、ウェブサイトからの離脱率を高めることにもつながります。もしウェブサイトで商品やサービスを販売している場合、ユーザーが欲しい情報にすぐアクセスできていたなら、成約につながっていたかもしれない機会を逃してしまうこともあります。

また、キーワードで検索した結果、ウェブサイトに訪問したにも関わらず、それらしいコンテンツを見つけきれない時も、ユーザは簡単にウェブサイトから離脱します。

使いやすく、必要な情報を与えてくれるウェブサイトは、ユーザーに信頼感を与えることにもなるため、結果として回遊性を高めることに繋がり、もしウェブサイト内で商品販売やサービス紹介を行なっている場合は、成約につながる可能性も高めます。

「回遊性」については「ECサイトの売上を上げたいなら回遊性をアップすること！」で解説されていますので、参考にしてみてください。

サイト内検索でユーザの検索傾向を分析する

サイト内検索は、ウェブサイトに訪問したユーザーにとって便利ですが、ECサイト運営や、ウェブサイトでサービス紹介をしている企業にとっても、役に立ちます。


サイト内検索に分析機能がついているものを選ぶことで、ユーザがどのキーワードでウェブサイトに訪問しているのか分析することができます。この分析結果をもとに、ユーザが求めている情報を充実させ、アクセス数アップやコンバージョン率を高めることもできます。

サイト内検索機能を、ウェブサイトに追加する方法はいくつかあります。活躍のフィールドが広いJavaScriptによる作り方もありますが、メジャーな方法としては、Google アナリティクスや、Yahoo! カスタムサーチを用いたHTMLコードの埋め込みと、近年人気のCMSである、WordPressでのサイト内検索機能追加方法について解説していきます。

サイト内検索窓をHTMLで自作して設置する方法

ウェブサイト制作について知識のある方であれば、HTMLコードを埋め込むことによってサイト内検索窓を追加することができます。

サイト内検索を追加するためには、上記で挙げたGoogle アナリティクスか、Yahoo！カスタムサーチを利用する方法が一番簡単で手軽です。これらのサービスでは、用意された設定を選んでいくことで自動的にHTMLコードを作成することができ、ウェブサイト内にソースコードを埋め込むだけでサイト内検索を表示することが可能です。

Yahooカスタムサーチの設定方法

Yahooカスタムサーチは次の4つのステップでサイト内検索の設定をすることができます。

1. 検索窓デザイン
2. 検索設定
3. 検索結果ページデザイン
4. HTMLソース確認

手順を追って説明します。

1.検索窓デザイン

デザインのプレビュー画像を見ながら設定していきます。設定名にウェブサイトのドメインを入力し、検索対象、検索窓の幅、色の設定、検索窓のデザイン、プロトコル、文字コード、検索結果の表示を選択していきます。

2. 検索設定

1.で設定した内容が表示されます。前の画面に戻って設定し直すこともできます。

3. 検索結果ページデザイン

検索したあとの表示デザインについて細かく設定します。
WEBサイトやECサイトのイメージに合わせて、選択していきましょう。

4. HTMLソース確認

1～3の設定が終わった後、表示するためのHTMLコードが表示されます。ウェブサイトで表示させたい場所に、直接このコードを埋め込めば設定完了です。

Google Analyticsの設定方法

Googleアナリティクスを利用する場合、Googleのアカウント設定が必要になります。

Google アナリティクスの設定はこちらのリンクから行うことができます。

参考：Google
https://analytics.google.com/analytics/web/#/home/

以下のリンク先でGoogleアナリティクス設定の解説が掲載されているので、こちらに沿って登録していきましょう。

参考：Google
https://support.google.com/analytics/answer/1012264?hl=ja

WordPressのサイト内検索設置方法

また近年利用者が増えているWordPressをウェブサイトのCMSとして利用している場合、「ウィジェット」から簡単に検索窓を設置することができます。

WordPressはシンプルかつ直感的な操作でコンテンツを投稿・管理・公開することができるCMSです。またプラグインと呼ばれる機能追加で分析機能など細かい機能を追加することが可能です。

サイト内検索はWordPressダッシュボード→外観→ウィジェットを選択すると以下のような画面が出てきます。使用しているテーマによって利用できるウィジェットの種類は異なりますが、サイト内検索はほとんどのテーマで利用することができます。


サイト内検索のボタンをマウスでクリックして設置したい箇所にドラッグすると、簡単にサイト内検索をウェブサイトに表示させることができます。

wordpressのサイト内検索を実装してもヒットしない原因は？

wordpressのサイト内検索を実装したにも関わらず、検索結果がヒットしないという不具合がおきることがあります。これには

• サイト内検索を無効化するプラグインが入っている
• テーマ内function.phpなどのサイト内検索を無効化する記述がされている
• 検索結果を表示するためのテンプレートがおかしくなっている
• データベース上のデータの持ち方がおかしい

というような原因が考えられます。原因を突きとめるのは難しいかもしれませんが、とりあえずテーマの設定を変更するなど、サイト内検索のやり方を変えて試してみてください。

サイト内検索を自作するときのポイント

企業のサイトを訪問した人の数に対する、サイトで商品を購入したり会員登録をした人の割合を「コンバージョンレート」と言います。このコンバージョンレートは、サイトの物資対効果を計る際に大切な指標なのです。

このコンバージョンレートを高めるための、サイト内検索のデザイン・配置・機能のポイントを紹介していきます。

1.見つけやすい場所に配置すること

サイト内検索をする検索バーは、ページの左上などに配置し固定するようにしましょう。こうすることで、スクロールしなくても検索バーを見つけれるようになります。

配置を固定してあげることで検索するのが簡単になり、ユーザーを確保するのに役立ちます。

2.検索しやすいこと

例えば検索ボックスのプレースホルダー・テキスト（search・question here・etc.）を使う場合は、入力時に消えるように設定するというように、検索結果にアクセスしやすくする工夫をしましょう。

小さな違いかもしれませんが、デリートキーを押す間に検索は遅れてしまうものです。このように細かい設定も検索しづらさを解消してくれるのです。

3.予測変換ができるようにする

取り扱っている商品が多い場合、予測変換機能があると時間短縮することができます。予測変換機能を使うことで検索する時間を減らすことができれば 、その分商品を選ぶ時間が増え、商品の購入率が高まります。

4.自動修正をつける

高頻度の誤入力を発見し、自動修正ができるようにしておきましょう。そうすることで、入力による「何もヒットしない」という現象を予防することが可能です。

5.検索結果はシンプルなデザインで分かりやすくしよう

検索結果ページはシンプルで分かりやすくしましょう。また、検索エンジンの最新機能は詳細検索を使って、検索メニューが同じページ内で開くように設定します。

また、フォントもシンプルで読みやすいものにして、見やすいようにレイアウトも整えることが大切です。

6.フィルターとソートは混合させない

ソートとフィルターは別物だということを頭に入れておいてください。日付や人気商品などのソートオプションが、同じページからアクセスできるようにしておかなければいけません。

ソートオプションについては、検索結果の先頭・左上に配置することをおすすめします。

7.検索アナリティクスを活用しよう

サイト内検索を自作する場合、マーケティングとUXに役立つ検索の最適化問題を分析できる「検索アナリティクス」を活用しましょう。検索アナリティクスを定期的に確認して、基準になるデータを集めておきます。そのデータを上手に使うことで、素早く問題の原因を究明できるのです。

8.検索のバリエーションを増やす

複数の単語での検索をする時に、例えばセクションを分けて単語ごとの検索結果を表示するというように、検索結果にバリエーションを増やすことで、ユーザーが思ってもいなかった商品に出会う可能性があります。
英語での検索も可能にするなど、検索バリエーションが多いほど、欲しい商品がなかったとしてもそれに近い商品を見つけられるようになります。

9.結果と検索に整合性をもたせる

検索結果の数はもちろんですが、検索と結果の整合性も求められています。これまでの傾向をみて、リンクさせる意味がない・検索クエリに共通点がないのであれば、リンクはしないほうがいいでしょう。

10.検索結果の量には注意しよう

情報でユーザーを圧倒してしまうことは、検索UXの最大の壁だと言えます。検索結果がヒットしすぎる場合は、検索結果を一気に表示するのではなく、20件程度表示するように設定してください。

特定のサイト内でGoogle検索ができるgoogle site:URL

googleが提供している「site:URL」というのは、特定のサイト内でGoogle検索をすることができるとっても便利なサービスです。

例えば「http://○○○.com」というブログを訪問したとします。そのブログ内で「リンゴ」というキーワードを検索したい場合、Google検索で「http://○○○.com リンゴ」と検索をします。
すると「http://○○○.com」の中の「リンゴ」というキーワードに関するページが表示されるようになっているのです。
基本的に、google site:URLを使わなくてもブログや大手サイトにはサイト内検索が実装されています。しかしそのサイト内検索では、記事やタイトルは検索対象になるけれど、ブログのコメントまでは検索対象には入らないことがあるのです。

それに対してgoogle site:URLは、ブログのコメントまで全て含めたキーワード検索を行ってくれるので、非常に便利だといえるでしょう。

Googleカスタム検索で多機能なサイト内検索を自作しよう

サイト内検索を自作するには、大手検索サイトであるGoogleが提供している「Googleカスタム検索」を使った作り方があります。

これは「yahoo!カスタムサーチ」と同じように、自分のサイトのソースに検索機能のソースを埋め込み、サイト内に検索ボックスを表示させます。

Googleカスタム検索はオートコンプリート・統計データのレポート出力・類義語の指定など、多機能ではありますが、検索結果画面に大きめの広告が出てしまうというデメリットがあります。

WwwSearch＋でサイト内検索を無料で自作しよう

自分のサイト内にCGIの設置場所があり、かつCGIの設置方法が分かる人ならば、フリーソフトを使ってサイト内検索を自作する方法があります。

おすすめのフリーソフトは、簡単に設置することができる「WwwSearch＋」です。WwwSearch＋には、統計やトレンドワードの提示機能はありませんが、検索されたワードをログに保存することはできるようになっています。

WwwSearch＋は検索機能に特化し非常に軽く動作してくれるので、待ち時間のストレスもなく、サーバーへの負担も抑えることができるというメリットがあります。

msearchでサーバーに負担をかけないサイト内検索を自作しよう

先ほど紹介した「WwwSearch＋」は、検索ごとに全てのファイルを参照するので、報量の多いページでは、どうしても動作が重くなってしまいます。

しかしこの「msearch」は、「インデックス」という目次のようなものを参照して検索を行うので、より早くサイト内検索を行うことができ、サーバーへの負荷も軽くて済むのです。
ただしインデックスについては自分で準備する必要があるため手間がかかり、CGIの設置も「WwwSearch＋」と比較すると難しくなっています。

サイト内検索がなくてもショートカットキーでキーワード検索可能

ウェブサイトの最終更新が古いものや、サイト内検索がついていないウェブサイトで知りたい情報があるときはどうやって検索を行えば良いのでしょうか。

答えは簡単で、ウェブサイトを表示しているブラウザ内で『Ctrl+F』のショートカットキーを押すと検索窓が表示されるため、これでキーワードを検索することができます。このショートカットキーはExcelやWord、またpdfなどでも使えるため、覚えておくと便利です。
ただし、表示されているページの内容を検索するコマンドのため、サイト全体の検索を行うことはできません。
ユーザーの利便性をアップし、顧客満足度を向上させるには、サイト内検索の設置が有効ということです。

まとめ

サイト内検索はウェブサイト内の情報にアクセスする際に便利な機能です。ウェブサイトに訪問したユーザにとっても便利なだけでなく、ウェブサイトを運営している担当者にとっても訪問者の傾向を分析できるため、ウェブサイトのアクセス数やコンバージョン率アップのためにも役立ちます。

GoogleやYahooのサイト内検索機能は広く使われており無料で利用することができますが、さらにニーズにあったサイト内検索機能を用いたい場合は有料のアプリケーションを使ってみても良いでしょう。

サイト内検索はユーザの検索行動を助け、コンテンツを見つけやすくします。
すばやく目的の情報にたどり着いたユーザは訪問したウェブサイトに興味を持つため、結果として回遊性を高めることにつながります。
ウェブサイトのコンテンツの質や量ももちろん大切ですが、良質なコンテンツがあってもこれにユーザがリーチできないことでは宝の持ち腐れです。サイト内検索は簡単に設置することができるので、ウェブサイトに追加してみましょう。

PR：「EC-ORANGE」のパッケージ販売に加え、多くの構築ノウハウを生かした受託開発をおこないます。

>>お問合せはこちらから