検索窓、ちゃんとデザインできてる？サイトの回遊に不可欠なSBO(検索窓最適化)とベストプラクティス

更新日: 2018年01月31日

デザイン

1990年代後半に*SEO(サーチエンジン最適化)*という言葉が登場して以来、約20年が経過しました。
SEOとは、どうすれば検索エンジンで上位に来やすいかを研究・対策し、Webサイトがより多く露出されるために行う一連の取り組みのことです。
昔は被リンクの数や質などがSEOに関係したと言われていますが、最近はコンテンツの質やSNS上でのシェア数、滞在時間などが関係していると言われています。

それからしばらくして、SEOとリスティング広告のマーケティング手法を同時に行う*SEM(検索エンジンマーケティング)や、ランディングページ経由での売り上げアップを図るための施策であるLPO(ランディングページ最適化)*など、露出を増やしたりコンバージョン率を挙げたりするためのキーワードが次々と登場しました。

そして2017年、注目したい言葉が*「SBO」*という言葉です。

SEOやSEM、LPOという言葉はWeb担当者であれば聞き慣れた言葉だと思いますが、「SBO」はあまり聞き慣れないのではないでしょうか。
今回は、サイトの回遊率が高まり売り上げ貢献に寄与するSBOについて、概要から実例までをご紹介します。

SBOとは？

SBOとは、Search Box Optimizationのことで、「検索窓最適化」・*「サーチボックス最適化」*と訳されています。

従来、検索窓に関していえば、UI担当がデザインを担当し、フロントエンドエンジニアが予測変換を実装し、バックエンドエンジニアが検索データベースを管理し、UXデザイナーが検索の利便性を確認していました。

しかし、サイトを回遊しできるだけサイトの滞在時間を長くさせる重要な役割を持つサイトの「検索窓」ですが、検索窓にこれだけ横断してメンバーが関わっているので、利便性の改善が後回しになってしまいがちです。

そこで登場したのがSBOという考え方です。

たかが検索窓、と思ってはいけません。
実際、Yahoo!Japanのトップページで何度もA/Bテストを実施するなかで、検索窓の高さを22ピクセルから28ピクセルに変えただけで広告のクリック率が0.64％上昇しました。

たった6ピクセル違うだけで、広告収入が4億8000万円も変わるというのです。

参考：
“6ピクセルの違い”が広告収入を4億円以上変えた--ビッグデータ解析の可能性 - CNET Japan

また、Amazonのサイト内検索で使われているA9という検索エンジンも、日々改良・改善が繰り返されています。
Amazonでは、できるだけ多くの商品ページを巡る(サイト内回遊をする)ために様々な施策が打たれていますが、検索窓もそのひとつです。

検索窓を最適化することで、サイトの滞在時間が増え、結果的にコンバージョン率アップや売上アップにつながります。
それでは、SBOを行うには、どういうことに気をつければいいのでしょうか。

SBOのベストプラクティス

SBOを行うためには、どんなことをすればいいのでしょうか。
ここでは、今すぐにでも実践することができる9つのベストプラクティスを紹介します。

1. 虫眼鏡アイコンをつかう

これはとても基本的なことですが、常に検索窓のそばに虫眼鏡のアイコンを置いておきましょう。
アイコンには、そのオブジェクトの意味や行動の促進、使い方などを伝えるのに絶大な効果があります。
単に四角いボックスがあるだけでは、検索窓だと気づきにくいかもしれません。
ユーザーは、虫眼鏡のアイコンによって「検索窓」という文字そのものよりもはっきりと検索窓だと認識することができるかもしれません。

2. 検索フィールドをはっきりと設置する

もし検索窓がアプリやホームページにとって重要な役割を担っているのであれば、検索窓をはっきりと設置してください。
虫眼鏡アイコンをタップして初めて検索フィールドが出てくるような隠れた検索窓は、UXとしては失敗作です。
ユーザーが検索したいと思った瞬間にその検索フィールドにアクセスできるように、はっきりと認識できる場所に設置しましょう。

3. 検索ボタンを併置する

ボタンがあれば、ユーザーはボタンを押すことで検索が開始されるのだということがわかります。
一方、ボタンのない検索窓を見かけます。
もちろんエンターを押すことで検索が開始されるのでしょうが、UX的にはあまりよろしくありません。
実際のボタンをクリックすることで検索を行うことに慣れているユーザーもいるからです。

また、検索ボタンのサイズを適切なサイズに調整しましょう。
適切なサイズとは、見つけやすく、クリックしやすいサイズのことです。
ユーザーがマウスポインタを正確な位置まで動かさなければならないくらい小さいのであれば、もう少し大きくしたほうがいいでしょう。

4. どのページにも検索窓を置く

それぞれのページに検索窓を置くようにしましょう。
もしユーザーが、自分の探している情報が見つからなければ、サイトのどこにいても検索ができる状態が好ましいでしょう。

5. シンプルな検索窓にする

もしスタイルシートを使って検索窓をデザインするなら、それが見てすぐに「検索窓」だとわかるようなデザインにして、使いやすいようにデザインすべきです。
あるユーザビリティに関する研究によれば、デフォルトで「高度な検索」機能のオプションを見せないほうがユーザーフレンドリーだという結果も出ています。
「AND」や「OR」をプルダウンでつなぐような高度な検索機能はユーザーを困惑させる可能性があります。

6. 検索窓を適切な場所に配置する

検索窓を設置するときには、できるだけ*「検索窓はここに置いてあるだろう」と推測できる位置*においたほうがよいでしょう。
Googleのコミュニケーションプロダクトを管轄しているDawn Shaikh氏らの研究によれば、検索窓が置かれているとユーザーが推測している位置は下記の図のようになります。

▲ Studied byA. Dawn Shaikh and Keisi Lenz (UX Pranet)

この図によれば、ユーザーにとって検索するのに最も利便性の高い場所は、ホームページの上方左または上方右ということになります。
これは、ユーザーがホームページを見るときに「F」の字に沿ってスキャニングしているからです。
Fパターンについては下記の記事が参考になります。

参考：
エンゲージメント率を高める！デザインの視覚的階層ルール「ビジュアルヒエラルキー」3つのコツ

7. 検索フィールドのサイズを調整する

検索窓を短くしすぎてしまうのは、Webデザイナーの中でもよくあるあやまちの一つです。
もちろん、ユーザーが複数キーワードを入力する際には検索キーワードが長くなりがちですが、テキストの一部分しか見えないとUX的にもユーザーにストレスをかけることになり、検索キーワードを見直したり入力しなおしたりするのが面倒になってしまいます。

実際、検索窓が小さければ小さいほど、ユーザーは短くて不正確なキーワードを入力せざるを得ない状況に陥ります。
もし、利便性を高めて検索窓を有効活用したいのであれば、思い切って大きくしてみることをお勧めします。