有名サイトの検索窓を調べたよ

検索窓はどこにある？

サイト内検索機能についてのお話です。

CMSサイトの普及に伴って多くのサイトがコンテンツの増大傾向にありサイト内検索機能は必須とも言える機能になっています。

さて、今回は大手のサイトを中心に検索フォーム、検索窓がどんな場所にどんなサイズで配置されているのかに注目してみました。

このところショッピングサイトについての記事を書いていることもありますのでショップサイトを中心に見てみます。

※調べたサイトは6/10～15のものです。

カラメル

・位置：ヘッダーの直下に左寄せ

・サイズ：340px×18px

・検索ボタン：画像ボタン[検索]

ロゴに近い場所にあるのですぐに視覚に飛び込んできます。

またサイトのキーカラーの緑色のバーの中にあるのでさらに目立っている気がします。

ショッピングモールということもあり検索窓の位置はかなり視認性の高い位置といえるでしょう。

イオンショップ　おうちでイオン

・位置：ヘッダー内、中央

・サイズ：265px×22px

・検索ボタン：HTMLデフォルトsubmitボタン[検索]

位置はかなり目立つはずの位置なのですがスタイルシートなどでの装飾がないので視覚に飛び込んで来る感じでは無い気がします。

取ってつけたような場所な気がしますね。
どっちかというとデザイン的にもNoGood。

Amazon

・位置：ヘッダー内　中央右寄り

・サイズ：459px×23px

・検索ボタン：画像ボタン[検索]

かなり広い幅の検索窓です。

Amazonはご存知のとおり、もはや本だけの通販サイトではなく、インターネットの萬家です。
様々なカテゴリーに対応できるような配慮なのでしょう、複雑な組み合わせの長いキーワードも入力しやすい超長サイズです。
デザイン的にな目立つような装飾はありませんがロゴに近く窓サイズが大きいため見つけやすい検索窓です。

HMV

・位置：ヘッダーメニュー直下

・サイズ：288px×17px

・検索ボタン：画像ボタン[検索]

音楽CD、音楽コンテンツを扱うサイトなので検索窓の重要性はかなり高いと思います。
しかし装飾は割りとスッキリしていて検索窓を注目させようという印象はありません。

ただ検索窓の周囲のマージンの取り方がスッキリしていて視認性は高いような気がしますね。

絶妙なマージン。

無印良品

・位置：右カラム

・サイズ：87px×15px

・検索ボタン：画像ボタン[検索]

今回紹介した中で唯一、ヘッダーに検索窓を持たないサイトです。

しかもサイズが極端に小さいです。

別にネット・ショップを持つサイトの場合、こんなもんでも良いのかも。
※実は無印良品はネットストアがあります。そっちのページは割りと大きめですというか定番っぽい作りです。

楽天

・位置：ヘッダーメニュー直下

・サイズ：790px×25px

・検索ボタン：画像ボタン[検索]

今回紹介する中で最も幅の広い検索窓。
前述のAmazonよりもかなり大きい幅。
サイトのキーカラーの赤色のバーの中にあるのですが入力エリアが広すぎるので白い部分が多く一瞬、検索窓に見えない気がします。

白赤カラーのサイトって実は配色が難しいのかも知れません。

大きな検索窓でフォームの使いやすさは今回の比較サイト中、一番かな。

ヤフオク

・位置：ヘッダー内　中央右寄り

・サイズ：470px×22px

・検索ボタン：画像ボタン[虫眼鏡ピクトグラム]

かなり広い幅の検索窓です。
ヤフオクも様々なカテゴリーを持つサイトです。
複雑な組み合わせの長いキーワードも入力しやすいサイズになっています。
デザイン的にな目立つような装飾はありませんがロゴに近くサイズが大きいため見つけやすい検索窓です。

Yahoo！ショッピング

・位置：ヘッダー直下中央
　
・サイズ：255px×16px

・検索ボタン：HTMLデフォルトsubmitボタン[検索]

今回、紹介する中で一番目立っているかも知れません。

サイズこそ小さいもののオレンジのバーの中にある検索窓は目を引きます。

最近、Yahooもフラットデザインに進んでいるのでこっちもリニューアルされるかな？

ユニクロ

・位置：ヘッダー　右寄り

・サイズ：110px×20px

・検索ボタン：画像ボタン[虫眼鏡ピクトグラム]

ヘッダの右側でサイズも小さく地味な印象です。

幅の小ささは無印良品に次ぐ小ささです。

目に付く場所ではないですがデザインはスッキリして見えますしリピーターになってしまえば違和感は無いかも。

ところでサイトは流行のフラットデザインですね。
このへんのトレンド対応の速さは凄いです。

ZOZOTOWN

・位置：ヘッダ下　ロゴの真下
・サイズ：305px×19px

・検索ボタン：画像ボタン[虫眼鏡ピクトグラム]

サイズは大きくありませんが十分な高さをとっているため大きくみえます。
位置、サイズともに積極的に検索機能を活用してほしいのであろうことがわかります。

Youtube

・位置：ヘッダ　ロゴの右

・サイズ：423px×23px
・検索ボタン：画像ボタン[虫眼鏡ピクトグラム]

サイズは大きめでヘッダー内で且つロゴのそばにあるのですがあんまり目立っていない気がします。
超有名な大手サイトでリピーターの多いサイトなので、細かいこだわりは不要なのでしょう。
一般のサイトでこの色使いでこの場所だと見つかりにくいかも。

どこの場所に置くべきか、サイズはどうするべきか

ヘッダーの中、あるいはその付近がトレンドではあるようです。

更に見つけやすくするならサイトロゴのそばがいいのかもしれません。
幅は広いほうが使いやすく見つけやすく、高さも低いよりは大きいほうが使いやすい印象です。

ただ検索窓が全くのブランク(空っぽ)だと見つけづらくなってしまうようです。
placeholder属性などで何らかの文言を入れたほうが良いですね。

検索ボタンは画像で作成された[検索]ボタンが最も多く、虫眼鏡アイコンは続く4サイト、デフォルトのHTMLの送信ボタンは2サイトでした。

カラーバー上に検索窓を配置するというのも検索ウインドウを置くのも発見しやすい気がしました。

さらにバーの色は、赤いバー上の検索窓の楽天よりも黒いバー上の検索窓のZOZOTOWNのほうが見つけやすいと感じました。

今回調べたサイトの検索窓のサイズは…
最大幅　790px

最小幅　87px

最大高さ　25px

最小高さ　15px

平均サイズ
323px×20px

…となりました。

ショッピングサイトはもちろん、色々なサイト制作のお役に立てれば幸いです。

では。