ホームページに必要不可欠！重要項目「検索ボックス」の位置パターン7選

2018年1月12日

ユーザー体験を追求する専門家「 UX デザイナー」は、Web マーケティングにおいては今でも非常に重要な役割を担っており、Amazonの求人でも300種類以上の求人情報が掲載されています。

" ユーザー体験の向上" にフォーカスを当てた時、様々な項目が列挙されていますが、大抵の場合検索ボックスをどこに置くかは後回しにされがちです。しかし、検索ボックスの場所を（ホームページ内の）どこにするかは、そのサイト自体の生命線を握るといっても過言ではないほど重要な項目の1つです。

そこで今回は、検索ボックスの位置パターン7選を紹介します。

本記事を参考に、皆さん「どこに検索ボックスを置くべきか」を考えてみてください。
　　

検索ボックスの「場所」が売り上げにつながる？

検索窓の大きさや位置などを最適化させる手法のことを、 SEO （Search Engine Optimization）になぞらえて、SBO（Search Box Optimization / 検索窓最適化）と言うことがあります。

昨今のサイトの情報量は以前と比較しても圧倒的に多くなっており、 ユーザーが求めている情報を瞬間的に提示することが非常に重要です。検索ボックスはユーザーが欲しい情報へと導く重要な役割を果たしていることは言うまでもありませんが、それにもかかわらずサイト全体の UX に比べ、検索ボックスのユーザビリティ改善が後回しになってケースがあとを絶ちません。

2004年からAmazonのサイト内で使われているA9という検索エンジンは、日々改善が行われており、同社がどれほど検索エンジンを重要視しているかが垣間見られます。また、Yahoo!Japanのトップページでも、検索窓の高さを6ピクセル変えただけで、広告収入を4億円以上変えたというデータも存在します。

そうした検索ボックスのベストプラクティスを考える上で、デザインを再考したり自動検索機能などのユーザビリティ改善にかかわる機能を実装したりするのは、もちろん重要です。しかし、どんなに素晴らしい検索ボックスだとしても、そもそも認知されなければ「存在しないのと同じ」です。

つまり、SBOにおいて最優先すべき事項は「どこに検索ボックスを置くか」ということです。

パッと見て検索ボックスが認知されると、ユーザーがサイトを利用する際の利便性は大きく向上します。ここでは、検索ボックスの7つの位置パターンをご紹介します。
　　

検索ボックスの位置パターン7選

1. 上部右側

昔から「検索ボックスといえばこの位置」としてよく置かれている場所が、上部右側のエリアです。はてなブックマークのトップページや日経新聞のホームページ、Wikipediaなど、トラディショナルなWebサイトの多くがこの位置に検索ボックスを置いています。

ferretのデスクトップ版もこの位置に検索ボックスを置いています。

ホームページのロゴを左上に置くのは長い時間Webデザインの「テンプレート」にもなっており、ロゴとのバランスを保つためにこの位置に検索ボックスを置くことが多いようです。この位置の検索ボックスは「目立つ」とまではいかなくとも、ユーザーもある程度この場所に検索ボックスがあることを「予知」することができるため、ユーザビリティの観点からも理にかなっていると言えます。

しかし、トラディショナルなWebサイトの多くは、検索ボックスが「小さめ」になってしまいがちです。場所としては問題なくとも、検索ボックスのサイズを再考したほうがいいケースがあるのは留意しておくべきでしょう。
　　

2. 上部中央

ページの中央部に堂々と検索窓を配置するサービスも増えています。

Amazonのホームページでは若干右寄りではありますが、中央部に大きな検索窓を置いて、誰が見てもわかるようにしています。また、この例を何年も続けているのがYahoo! JAPANで、ページ上部に置かれている検索窓が存在感を放ちます。楽天もこの位置に大きめの検索ボックスを置いています。

ページ上部の中央部に検索窓を置いているサービスは、比較的検索が生命線を握っているサービスです。パッと見た時に検索エリアが目に飛び込んでくるので、よく考えられたポジショニングであると言えます。
　　

3. 上部左側

以前はあまりスタンダードではありませんでしたが、最近よく見られるようになったのが上部左側に検索ボックスを置くパターンです。

このパターンで確認すべきは、Airbnbのホームページでしょう。以前のAirbnbのページはヒーローヘッダーを置いて、そこに検索ボックスを配置するパターンでしたが、現在では小さなロゴの隣にシンプルでわかりやすい検索ボックスを配置しています。

この位置は、デジタルコンサルティングファームのニールセンが提唱しているF字パターンの「視点のはじまり」とされる場所で、ほぼ全てのユーザーが目にする場所でもあります。この場所には大きくて目立つロゴを配置したいと考えているデザイナーも多くいるでしょうが、ロゴデザインをシンプルにしてその隣に検索ボックスを置くことで、 ユーザビリティが大きく向上します。

コンサルタントのグラハム・カールトン氏による調査によれば、この位置に検索ボックスを置いているのは、イギリスの著名な50サイトのうちでたったの1サイトだけだったそうです。

先例がまだ少ないですが、逆に言えば検索ボックスの位置を変えるだけでもユーザーの検索率が向上する可能性もある場所なので、検索ボックスの移動を検討してみてはいかがでしょうか。
　　

4. サイドバー

Webサイトの中でもブログ系のサイトの中に多いのが「サイドバー」に設置された検索ボックスです。

ブログサイトの多くは2カラムか3カラムになっており、そのほとんどが右側のカラムに検索ボックスを置いています。

ブログサイトの運営者にとって、サイドバーを右カラムに設置するのはサイトの構成上都合がいいことですが、ユーザビリティを考えるとこの位置がベストポジションかどうかは考える必要があるでしょう。なぜなら、スクロールしてしまうと見えなくなってしまうからです。サイトによっては、スクロールしてもサイドバーがくっついてくるような、ユーザビリティを考慮したケースが見られます。

しかし、トップヘッダーを固定する場合と違って、サイドバーの固定はより多くの面積を必要とするため、本当にこの場所が妥当かどうかを検討してみたほうがいいでしょう。
　　

5. インライン

旅行サイトや飛行機のチケットサイトなどは検索ボックスを上部ではなく、インライン（つまりページの内部）に堂々と配置するケースがあります。これは旅行サイトや飛行機チケットサイトの特性と関係しており、すでにユーザーは検索前提でサイトを訪問するからです。

ユーザーが検索前提でやってくるのであれば、検索エリアを目立たせていくのは当然の流れです。

例えば、Booking.comでは検索ボックスをちょうどページの真ん中に表示しています。スクロールをすることでこの部分の検索ボックスは隠れてしまいますが、その代わりに上方から別の検索ボックスが登場します。
　　

6. ど真ん中

Googleのホームページや百度(Baidu)のホームページなど、検索が前提のホームページはページの上下左右で「ど真ん中」に配置しています。

検索行動を行う前には余計な情報を一切表示しない潔さによって、ユーザビリティを極限まで高めることに成功しています。
　　

7. 隠れた位置

AppleのホームページやAdobeのホームページのように、検索よりもカタログのような役割を果たしているサイトの多くは、いわゆる「虫眼鏡アイコン」だけを残して、検索ボックスを隠すことをしています。

検索ボックスを隠すことでデザイン上の違和感を払拭することができる反面、ユーザビリティの上では2つの点でリスクも孕んでいます。

まず、ユーザーが検索ボックスをそもそも認識できないという問題が発生する可能性があります。ユーザーは横長の四角形を認識することで検索ボックスであるということを認識しますが、虫眼鏡だけがあってボックスがないということに戸惑う ユーザーがいるかもしれません。また、仮にユーザーが虫眼鏡を認識したとしても、クリックして初めて検索ボックスが登場するので、「クリックする」という余計な動作が発生してしまうということです。

虫眼鏡アイコンだけを表示するのはユーザビリティ上大きなリスクがあることを認識しておくべきです。製作者側の都合でどうしても虫眼鏡アイコンだけにしなければならない場合にも、右上に配置するなどして誰にでも予知できる場所に置いたほうがよさそうです。
　　

まとめ

検索ボックスの位置はサイトの特性や分野によっても大きく変わりますが、基本的な検索ボックスの位置パターンを知ることで、今置かれている検索ボックスの位置を変えるきっかけにもなるでしょう。

A/Bテストやアナリティクスといった客観的な指標によって、検索ボックスの位置による効果を知ることもできます。 ユーザーが使いやすいサイト設計を、今一度考えてみるのはいかがでしょうか。
　　