検索フィールドを再びセクシーにする、8つのCSS＆JavaScriptスニペットを紹介

検索フィールドは、一般的なウェブサイトの非常に実用的な部分です。だからと言って、無視しておいても良いという意味ではありません。実はまったく逆なのです。

 

検索は、ユーザーが探しているものを見つける簡単な方法をユーザーに提供し、コンテンツの多いサイトでは非常に貴重なものになるでしょう。したがって、検索エリアが魅力的で目立ち、使いやすいことを確認するためには、少し時間をかける価値があると思います。

 

それを念頭に置いて、ここに控えめな検索フィールドをワンランク上に上げるスニペットのコレクションを用意しました。それらは、単純なCSSの美的改善から、より集中型のエクスペリエンスを実現するのに役立つJSを取り入れたUIにまで及びます。

 

モーフィングアイコン

モーフィングアニメーションを見るといつでも楽しくなります。こちらでは、クリックすると検索バーに変形する、偏在型虫眼鏡アイコンがあります。 “X”をクリックすると、すべてが正方形に戻ります。これは、使用していないときフィールドを簡単に押し込めるという点で、小さな画面に適したソリューションになるはずです。

 

See the Pen
Search bar animation by Milan Milošev (@MilanMilosev)
on CodePen.

 

ホバーして検索するだけ

この例は、上記と同様の機能を提供していますが、大きな重要な違いがあります。クリックして検索フィールドを表示する代わりに、ユーザーはアイコンにカーソルを合わせるだけでOKです。これはどちらかというと小さなことかもしれませんが、使いやすさに関して言うと手助けになるはずです。繰り返しになりますが、こちらも小さいスペースに最適な選択肢です。

 

See the Pen
CSS Search Field Animation by Sebastian Popp (@sebastianpopp)
on CodePen.

 

スクロールする人だって検索します

モバイルデバイスでは、ユーザーは多くのスクロールを行います。ということは、探しているものが見つからない場合は、検索を実行するためにサイトのヘッダーに戻る必要があることを意味します。この“スティッキー”検索バーでは、ページを下にスクロールすると画面上部に表示されるようになっています。この便利な機能により、ユーザーの毎日もはるかに楽になるでしょう。

 

See the Pen
Search Box in Content Moves to Fixed Header by Chris Coyier (@chriscoyier)
on CodePen.

 

画面いっぱいの資料

最近、Googleのマテリアルデザインがかなり使用されているようです。したがって、デザイン言語が検索にも適用されるのは当然のことです。また、クリックすると、検索フィールドが画面全体に現れるのも便利です。これにより、ユーザーは検索のみに集中でき、少しの作業で、デザイナーは他の関連情報を表示に追加することも可能です。

 

See the Pen
Material Fullscreen Search Transition by Luca Dimola (@hone)
on CodePen.

 

シンプルなカスタム検索

ユーザーとって、サイト内での特定エリアだけを検索したいときもあります。カスタム検索はまったく新しい概念ではありませんが、今のプロセスが視覚的に魅力的であるとは限りません。これこそが、このカスタム検索フィールドのデモを非常に洗練したものにしている理由です。

 

一連のアイコンを備えており、それぞれが検索可能なさまざまな領域を表しています（＆便利なツール使用方法）。ユーザーは検索したいエリアをクリックするだけなので簡単です！

 

See the Pen
DailyUI #022 – Search by Fabio Ottaviani (@supah)
on CodePen.

 

コンテキストアニメーション

検索中に視覚的なコンテキストを提供することで、ユーザーは正しい道を進んでいると確証できます。このスニペットは、AJAXを使用して、ユーザーが検索を実行するときに背景色を変更し、テキスト情報を追加します。

 

See the Pen
Search input context animation by Riccardo Zanutta (@rickzanutta)
on CodePen.

 

透明性

悪目立ちすることなく、良い意味で目立つ検索エリアを作成するにはどうすればよいでしょう？透明度を確保することは、それを行う1つの方法です。ここに、フルスクリーン画像の上部にある半透明の検索フィールドがあります。しかし、白い境界線が強いので、ページを追い越さずに視覚効果を高めることを実現しています。

 

See the Pen
A cool little search box by Jon Welsh (@jonwelsh)
on CodePen.

 

マルチ検索

ユーザーが複数のデータを検索できるサイトの場合、この例は非常に役立ちます。 jQueryを利用して、ユーザーがさまざまな検索フィールドを切り替えられるようにすることで、すべての検索機能を1か所にまとめています。

 

See the Pen
multi search with combo box by John McGarrah (@freshmasterj)
on CodePen.

 

最終結果

検索フィールドは、ユーザーをウェブサイトにとどめる上で重要な役割を果たします。そして、上記の例は、余分な労力をかけずに複数の便利な拡張機能を提供できるという証明です。したがって、サイトの検索機能の外観と機能に対して気にしてこなかった方には、スタート地点として最適な場所になるはずです。