ブログ

  1. トップ
  2. ブログ
  3. 簡単にWEBサイトに絞り込み検索機能を実装したいときに役立つ方法3選

Web制作

簡単にWEBサイトに絞り込み検索機能を実装したいときに役立つ方法3選

WEBサイトの【検索窓】はなくてはならない存在です。WEBサイトがどんな構造になっているかわからなくても、検索ができれば自分が欲しい情報がそのサイト内にあるかどうか探せるので便利な機能です。

多くのWEBページを持つサイト様や商品点数の多いECサイト様では、作成した多くのページから訪問者様が見たいページを絞り込んで探すための「絞り込み機能」も必須となっています。WEBサイトに来た訪問者が何となく欲しいもののイメージをもっている場合、絞り込み機能をよく使うことがわかっています。

例えばファッション系ECサイトを訪問したユーザー様は、商品情報からカテゴリ、サイズ、色、価格帯などで範囲を狭めていって欲しい商品を見つけていきます。ここでユーザー様の希望に合った商品を見せられるかどうかで売上の伸びが変わってきます。

例えばECサイト様は、楽天市場等のモールへ出店していればそのモールに備わった機能に委ねることになります。Shopifyなどのプラットフォームを使っていてもアプリなどの付属機能で対応することになることが多いので一からの設計は不要かもしれません。

しかしWordPress等で自社制作したWEBサイトなら絞り込み検索機能を付けるなら新たに設計等を行って手を入れることになります(WordPressのデフォルトの機能でキーワード検索の検索窓は簡単に付けることができますが)。

自社のサイトの場合は計画して設計、実装と進む必要があります。実際に絞り込み機能を実装したり、実装したものを強化したりするときに考えるのは2つのポイントです。

・どんな項目の絞り込み検索を付けるか?
・どんな方法で絞り込み検索を付けるか?

どんな方法でどんな絞り込み項目を付けていくか、予算はどうするかなど。改めて費用感も含めて検討し、実装へ向けた準備をすることになります。

そこで今回は【絞り込み検索窓】を自社サイトに実装する主な方法について、5つをピックアップしてご紹介します。WEBサイトの回遊性やコンバージョンの上昇に情報がお役に立つことができれば幸いです。

ご予算に限りがあっても導入していただいたほうがコンバージョンアップにつながると思いますので、無料で導入できる方法もご紹介させていただきます。

1.WordPressで構築しているWEBサイト→プラグインを使う

WordPressで構築している場合は、無料のプラグイン「Search & Filter」がオススメです。2022年現在、プラグインは更新され続けていて、利用者も増えてきています。


■無料
■URL:https://ja.wordpress.org/plugins/search-filter/

カテゴリーや、タグ、カスタムタクソノミー、投稿タイプ、投稿日などで絞り込み検索ができるほか、これらの項目の組み合わせで簡単にユーザー様が検索し、必要なページにたどり着くことができます。

①プラグインを有効化したら、左メニューから【Search & Filter】へ進み、使い方の説明を読む

②サイドバーなど検索窓を表示させたいところにショートコードタグを入れると検索窓が出現

これは↑サンプルなのでプラグインの初期設定のままですが、タグだけにしたり、逆にタグを消してカテゴリだけにしたりなど、ショートコードを書き直すことで好みに調整できます。

「Search & Filter」は無料プラグインですし、実装も非常に簡単です。まず取り急ぎ絞り込み機能を付けてみたいというときは、このプラグインなら5分ほどで実装できるので、こちらのプラグインから試してみるのはいかがでしょうか。

絞り込み検索機能を付けることでWEBサイトのコンバージョンや滞在時間が変わるのかなどのリサーチにも使えそうです。

【プラグインを使えない場合に】
WordPressで構築しているWEBサイトにプラグインを使わずに絞り込み機能を載せたい場合や、デザインや仕様の都合で「Search & Filter」では物足りないという場合は、八王子WordPressミートアップ(2021年11月開催回)で紹介された方法があります。コードも公開されていますので、ご参考になさってください。

▼発表者がサンプルサイトでの実装結果や使用コードを載せてくださっています
https://onebitious.net/category_search/

2.Googleカスタム検索を使う

Googleが提供するサービスを使う方法です。
Googleが提供する検索窓は割と昔からあり、知っている方も多いと思います。アナリティクスなどGoogleのその他のサービスとも連携しているので、検索したワードや検索結果ページのページビュー数など取得できる情報も多く、マーケティング視点からも便利で役立つツールです。

細かくカスタマイズすることで、好みの絞り込み検索が付けられます。ドメイン全体だけでなく該当するWEBページ内でだけ検索させたり、ラベル等を付けておき自然と検索結果を絞り込ませたりと、少し誘導する要素を持たせた絞り込み検索が実装できます。


参考:https://youtu.be/Qd9z48Bo8ZA

Googleのサービスから発行されるタグをコピペするだけなので、少しできることに限りはありますが、どんなWEBサイトでも簡単に実装できます。時間がない方にはオススメの方法です。

①Googleアカウントでログインした状態で以下のページへ
https://support.google.com/programmable-search/answer/4513882?hl=ja&ref_topic=4513742

②Google カスタム検索のホームページへ飛び、[新しい検索エンジン] をクリック

検索する範囲は個々のページからWEBサイト全体、ドメイン全体など構成に合わせて選べます。

・画像検索
・セーフサーチ も選択可能です。

③検索エンジン作成後、カスタマイズへ進む

カスタマイズボタンから進みます。

④検索範囲を絞り込む設定をし、ラベリング

例えば【グルメ】【レシピ】【寺社仏閣】【イベント】などユーザー様の関心の高そうなキーワードで絞り込み設定をしておくと、検索結果の表示ページにラベルが現れます。


デザインもカスタマイズできるので、WEBサイトに馴染むように整えられます。

発展した使い方としては人気のキーワード【ランキング】や【新宿】などの地名、流行りの商品【ヤンニョムチキン】などをあえてラベルに入れておくと注目されてクリックが増え、回遊がより増すかもしれません。

カスタマイズができたら同じページ内でコードを発行して検索窓を設置したい箇所へペーストすると完成です!観光サイトやグルメサイトは初期設定で画像検索に絞っておいてもいいかもしれないですね。

3.WEBサイト内検索専用ツールを使う

さまざまな企業が提供する「WEBサイト内検索ツール」があり、さらにプランも細かく分けられているので多くの選択肢があります。どのような絞り込み項目を付けておけば効率的かなどの運用面のサポートを受けることが可能なことサービスも。


高機能な絞り込み、例えば以下のような機能を導入したい場合は専用ツールがよいかもしれません。

・マニュアルなどのPDF検索
・表記ゆれなどへの対策
・関連キーワードを自動表示
・多言語対応
・見やすい管理画面 など

専用ツールはマーケティング面でのフォローもいろいろ用意されているようです。絞り込み検索機能で情報を集めたい場合もいいかもしれないです。予算とサポート内容、盛り込みたい機能の3つをあわせて選びましょう。

まとめ

検索窓はユーザー様の利便性を高めるだけでなく、よりコンバージョンを高めたり、マーケティングに活用できる情報を集めたりと、多くの角度からリーチできる機能です。

この記事で紹介したようなプラグインやサービスを使わなくても、プログラミングでWEBサイト上に思い通りの検索窓を付けることもできます。これからWEBサイト制作をされる方やリニューアルを予定されている方は、サイト内検索をどうするか、今一度その有用性について考えてみてはいかがでしょうか。