サイト内検索のデザインで知っておきたい「SBO」とは？

Webサイトで最適化というと、検索エンジンの最適化を意味するSEO（Search Engine Optimization）や入力フォームを最適化するEFO（Entry Form Optimization）などを思い浮かべるのではないでしょうか。それと同様に重要なのが、サイト内検索を最適化するSBO（Search Box Optimization）です。

サイト内検索を設置してもデザインや利便性を重視していないサイトも多く、改善が後回しになりがちです。しかし「検索窓の大きさを調整する」「検索フィールドは目立つように表示する」などちょっとした工夫でサイト内検索の利用率が上がり、回遊率が向上する可能性があります。特にECサイトであれば、サイト内検索の利用率がそのまま売上アップにつながるため非常に重要です。。
そこで今回はサイト内検索の利便性を改善するために知っておきたいSBOについて、そのポイントやおすすめの機能をお伝えします。

SBO（検索窓最適化）とは？

SBOとは「Search Box Optimization」の略で「検索窓最適化」という意味です。
商品数の多いECサイトや情報量が多い企業サイトを閲覧するとき、ユーザはすばやく目的のページまで辿り着けるように検索窓を探します。
そのため、検索窓のデザインや見つけやすさはユーザビリティ向上の重要なポイントです。
サイト内検索が必要なタイミングでスムーズに利用できるように「検索窓のサイズをどうすべきか」「どのように目立たせるか」などを考え、改善する施策がSBOです。

サイト内検索のデザインにおけるポイントとは？

SBOを実施するために重要なポイントをご紹介します。。競合と差別化するために独自性の高いデザインにしたいと考える方もいらっしゃるかもしれませんが、最も重要なのはユーザが使いやすいサイト内検索にすることです。
ユーザにストレスを与えずにサイト内を回遊してもらうためには、まずサイト内検索のデザインにおけるポイントを把握し、その上でより目立つ工夫をする必要があります。

検索窓をページの上部に設置する

検索窓はユーザが発見しやすいように、ファーストビューで目に入りやすいページの上部に設置するとよいでしょう。検索窓をサイト上部に設置しているサイトが多く、ユーザが検索窓の位置を推測しやすいため、スムーズにサイト内検索を利用できます。

虫眼鏡のアイコンを使用する

UIデザインの基本として、多くのユーザが一目でそれが何であるかを理解できることは重要です。サイトの訪問者のなかには、インターネットに不慣れなユーザがいる場合もあります。そのため、検索窓を設置するだけではなく、それが検索窓だと理解しやすいデザインである必要があります。
できるだけ多くのユーザに一目で検索窓と理解してもらう方法の一つが、虫眼鏡のアイコンの使用です。検索窓の横に虫眼鏡のアイコンがあれば、検索窓として理解してもらいやすくなるでしょう。

検索窓をわかりやすくする

虫眼鏡のアイコンの近くにはわかりやすい形で検索窓を表示しておきましょう。カーソルを虫眼鏡アイコンの近くに持っていかなければ検索窓が表示されない、といったデザインも存在しますが、あまりおすすめではありません。
検索窓は一目ではっきりと認識できるように表示することが重要です。

プレースホルダーを使用する

プレースホルダーとは、入力窓にあらかじめ入力されている文字や値のことです。ECサイトであれば「商品名を入力する」や「どの商品をお探しですか？」などのテキストを入れ、どのようなキーワードで検索すればよいかをわかりやすくします。

検索窓は適切なサイズにする

検索窓のサイズが小さすぎたり、短すぎたりしてしまうと、使い勝手が悪くなります。
検索窓のサイズが小さい場合、ユーザが検索窓を見つけられない可能性があります。また、検索窓が短く表示できる文字数が少ない場合、文字が途中で見切れてしまいユーザにとって検索キーワードの見直しや再入力がストレスとなります。逆に長すぎる場合には、検索窓の入力位置と検索ボタンとの距離が開きすぎるなど使い勝手が悪くなります。
検索窓の長さは、実際に検索されるキーワードを分析し、適切なサイズにすることが必要です。

ほかのテキストボックスと隣接させない

検索窓の隣に会員ページにログインするためのメールアドレスや会員IDを入力するテキストボックスを設定すると、初めてのユーザはどちらが検索窓かわからなくなる場合があります。
ログイン用のテキストボックスを検索窓と思い入力してエラーが出れば、それだけで離脱の原因になる場合もあるため、紛らわしいデザインは避けるようにしましょう。

検索ボタンを設置する

検索ボタンは見つけやすく、クリックしやすいサイズで設置しましょう。
検索ボタンを設置することによって、ユーザは検索が開始されるタイミングを認識しやすくなります。Enterキーを押すことで代用することもできますが、検索ボタンを設置した方がユーザの使い勝手を考えると親切です。Enterキー、検索ボタンのどちらをクリックしても検索できるようにすると良いでしょう。

全てのページに設置する

ユーザの検索タイミングは、どのページを閲覧している時におとずれるかはわかりません。もし一部のページにしか検索窓がなければ、ユーザは探す手間を嫌がって離脱してしまう可能性もあるでしょう。ユーザがどのページからでもサイト内検索が利用できるよう、全てのページに検索窓を設置しましょう。

サジェスト機能を搭載する

サジェスト機能とは、キーワード入力中に候補語を先回りして表示することで誤入力を防ぎ、ユーザを必要な情報に確実に到達させる機能です。これにより、商品名をうろ覚えであってもユーザが迷うことなく目的のページへ辿り着けるようになります。

サジェスト機能について詳しくは「サイト内検索の必須機能「サジェスト」でECサイトの売上アップ！」をご覧ください。

PC版・スマホ版の両方で最適化する

PC版のデザインばかり重視していると、スマートフォンから閲覧しているユーザにとって見づらい、使いづらいサイト内検索になってしまう場合があります。特に近年では、スマートフォンからインターネットを利用するユーザの方が多くなっているため、PC版・スマホ版の両方のユーザが使いやすいデザインにする必要があります。

サイト内検索はデザイン以外も重要

サイト内検索の最適化は、見た目のデザイン以外にも重要なポイントがいくつかあります。そのなかでも「検索のスピード」「サーバへの負荷」「表記ゆれ対策機能」については、しっかりと対応しておかなくてはなりません。ここではそれぞれの項目での注意点を説明します。

検索のスピード

キーワードを入力して検索ボタンをクリックしても、なかなか検索結果ページが表示されないと、ユーザは我慢できずに離脱してしまうかもしれません。
2017年の調査ですが、Googleが発表したデータによると、モバイル向けサイトにおいて表示速度が1秒から3秒に落ちると、それだけで直帰率は32%、5秒に落ちると90%上昇するという結果が出ています。離脱を防ぐには、検索スピード向上が欠かせません。

サーバへの負荷

検索スピードが落ちてしまう要因の一つに、サーバへの負荷増大があります。商品数が多い、画像のサイズが大きいなどの理由で、サーバに大きな負担がかかってしまい、その結果、検索スピードも落ちてしまうのです。これを避けるには、サーバを強化するもしくはできるだけサーバへの負担が少ない外部環境で提供されるサイト内検索ツールの選定が必要になるでしょう。

表記ゆれ対策

「七分丈」「しちぶたけ」「7分丈」など同音・同義の語句で異なる書き方があるケースを表記ゆれといいます。
商品名で検索する際に、正式な商品名以外では検索結果がゼロになってしまう場合、ユーザは正しい商品名を知らなければ検索ができないことになります。
そのため「七分丈」「しちぶたけ」「7分丈」のどれを入力しても、検索結果に最適な商品が表示されるように対策する必要があります。

サイト内検索を設置するには？

サイト内検索には無料と有料のツールがあり、まずどちらをサイトに設置するのか決める必要があります。コストを抑えるという点だけで見れば無料のツールがおすすめですが、ユーザの利便性を高め、売上向上を実現するためにサイト内検索を設置する場合には、有料のツールをおすすめします。無料ツールの場合、今回紹介したようなデザインのカスタマイズができない、もしくはカスタマイズの自由度に制限があります。。有料のツールには、多様な機能があり、カスタマイズの自由度が高いものも多いため、ユーザの利便性や売上向上への貢献が期待できます。

おすすめのサイト内検索ツール「GENIEE SEARCH」

有料のサイト内検索ツールにもさまざまな種類がありますが、そのなかでもおすすめなのが、GENIEE SEARCHです。カスタマイズの自由度が高いのはもちろん、サーバへの負荷も小さく、表記ゆれ対策機能や画像付きサジェストに加え、おすすめリンク、絞り込み、並び替えなど検索結果のカスタマイズも行えます。

まとめ

ECサイトにおいてサイト内検索を利用するユーザは、商品に興味がある、購入する可能性が高い傾向があります。そのため、サイト内検索を使いたいと思った時に設置場所をわかりやすくする。入力場所に迷わないようにすることが重要です。

見逃されてしまいがちな検索窓のUI改善ですが、ユーザビリティ向上やCV率アップに欠かせない施策の一つです。
この機会に検索窓を見直してみてはいかがでしょうか。
どこを改善して良いのかわからない、自社サイトのサイト内検索が適切に設置されているのか不安だなど、サイト内検索についてお悩みの際は、まずGENIEE SEARCH for ECの資料をご覧ください。

---