本文へジャンプ

参考にしたい"検索窓"の気になるギミックまとめ

Posted by Keiichi Shimizu

デザイナーのKeiichiです。今回は、検索窓に関して書きたいと思います。

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

図 - 参考にしたい

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

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

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

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

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

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

62 Models

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

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

dia STANDARD

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

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

W+K London

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

入力欄以外の要素も表示

アンドロッカーズ &LOCKERS

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

まとめ

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

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

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

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
2017年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
スマートフォンやタブレットに最適化されたWebサイトを制作します。
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr