【スニペット8種類】CSSで検索フィールドを機能的かつオシャレに！

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、8 Ways to Make the Search Field Sexy with CSSを
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

5,073 views

読了時間 : 約2分58秒

検索フィールドは、どんなWebサイトにもある実用的なパーツです。しかし、だからといってデザインの工夫の余地がないわけではないし、しなくてもよいというわけでもありません。むしろ、その逆です。

検索フィールドがあると、ユーザーは探しているものを簡単に見つけ出すことができるので、特にコンテンツが多いサイトでは非常に役立ちます。したがって、検索フィールドを魅力的で目に留まりやすく、かつ使いやすいものとなるように時間をかける価値は十分にあります。

このことを念頭に置いて、本記事では、ワンランク上の検索フィールドにしてくれるスニペットのコレクションをご紹介します。CSSでシンプルに作った機能拡張から、JavaScriptで作るUIまで、幅広く探してあります。

１．モーフィングアイコン

モーフィングアニメーションはオススメです。虫眼鏡アイコンをクリックすると検索バーに変形し、 “×” をクリックすると元に戻ります。使用しないときにはフィールドをしまっておくことができるので、小さなスクリーン向けには素晴らしいソリューションとなります。

２．ジャスト・ホバー＆サーチ

この例は、上のものと似た機能ですが、大きな違いがあります。クリックの代わりに、アイコンの上にカーソルを置くだけで検索フィールドが表示されます。ちょっとした違いかもしれませんが、ユーザビリティを高めるという面では大きな違いになるかもしれません。これも、窮屈なスペースのためには有力な選択肢です。

３．スクロールするにも検索が必要

モバイルでは、ユーザーはより多くのスクロールを求められます。しかし、探しているものが見つからない場合は、さらに検索するために、サイトのヘッダーに戻らなければならないことがよくあります。この例では、ページを下にスクロールするときには画面の上部に固定される「スティッキー」検索バーが表示されます。この便利な機能は、UXを大幅に改善するはずです。

４．画面いっぱいの検索フィールド

最近、Googleのマテリアルデザインがかなり使用されています。そうなると、デザイン言語を検索関連にも適用するのは当然の流れでしょう。一度クリックすれば、検索フィールドが画面全体に広がるのもナイスな点です。これによりユーザーを検索に専念させることができますし、少し設定すればディスプレイに他の関連情報を追加することができます。

５．シンプルなカスタム検索

ユーザーがサイトの特定の領域のみを検索したいという場合もあります。カスタム検索はまったく新しいコンセプトではありませんが、ビジュアル的に映える検索方法はこれまではありませんでした。このカスタム検索フィールドのデモは違います。検索エリアを示す一連のアイコンを一緒に表示しているのです。ユーザーはただ検索したい領域のアイコンをクリックするだけでカスタム検索ができます。簡単なのです。