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

ユーザー 体験を追求する専門家「 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テスト やアナリティクスといった客観的な指標によって、検索ボックスの位置による効果を知ることもできます。 ユーザー が使いやすいサイト設計を、今一度考えてみるのはいかがでしょうか。