MD-Blog_Web Creative

今回は、検索窓に関して書きたいと思います。

プロジェクトのなかで、Webサイトの改修として「ヘッダーに検索窓を追加したい」という要望がありました。
ヘッダーは、最初にデザインする上でひとつキーになる箇所です。そのヘッダーに検索窓のような大きな要素を追加することは容易ではありません。。。

よく見かける検索窓は上記のような「入力欄」と「検索ボタン」の二つの要素で配置されていることがほとんどでしたが、ここ数年で検索部分にもギミックを効かしたサイトが増えてきました。

そこで検索窓のギミックで気になるサイトを今後の参考にしたくまとめてみました。

検索アイコンをクリックするとヘッダー下に表示される

• 健栄製薬 | 一般消費者向け製品情報ページ

サイトにアクセスした時は、検索アイコンのみで情報を伝え、クリックするとヘッダー下に検索窓が表示される仕組みになっています。また、検索アイコンをクリックすると閉じます。とてもシンプルで使いやすい方法ですね。

検索アイコンがスライドして入力欄が表示される (1)

• 62 Models

初期表示では、検索アイコンのみが表示されています。
検索アイコンをクリックすると検索アイコンが左にスライドし入力欄が表示されます。アイコンがスライドすることで「枠なし」で表現できるデザインは、このサイトの世界観にもマッチしています。

検索アイコンがスライドして入力欄が表示される (2)

• dia STANDARD

初期表示では、検索アイコンのみが表示されています。
検索アイコンをクリックすると検索窓が他の要素の上に表示されます。思い切った方法だなと感じました。

検索窓がモーダル表示される

• W+K London

検索アイコンをクリックすると、画面全体が黒い画面になり入力欄が表示されます。
キーワードを入力するとモーダル表示されたページ内に検索結果が表示されます。ページ遷移することなく結果が表示される仕組みはストレスを感じないスムーズさがいいですね。

入力欄以外の要素も表示

• アンドロッカーズ &LOCKERS

こちらも検索アイコンをクリックすると検索窓がスライドで表示されますが、それ以外にもカラー、サイズといった補足となる要素も一緒に表示されます。
サイト内のコンテンツが整理されていればこういった入力欄以外の要素を配置することでより使いやすくなるかもしれません。

まとめ

参考サイトを見てどれも共通することは、検索アイコン（虫眼鏡のアイコン）は定番化されてきているのを感じました。
その定番化されたアイコンのおかげで今回テーマにした検索窓のギミックがサイト上で展開できるようになったのだと思います。

検索窓のギミックは、これからも新しいものが出てきそうで楽しみです。
また、この先デザインをしていく上でサイトのデザインや世界観に合ったものを選択できるようになっていくことを考えるとワクワクします。

早速、手がけているプロジェクトのWebサイトに検索窓を配置する予定なので、今回のまとめを参考にしてみたいと思います。