検索フィールドデザインのコードスニペット8選【CSS/JavaScript】

Webサイトでよくみられる検索フィールドは、シンプルなデザインになりがちです。そもそも「検索フィールドにデザインが必要なのか？」と考える方もいらっしゃるでしょう。

しかしコンテンツ量が多いWebサイトでは、検索フィールドはユーザーの手助けをするために重要な役割をもっています。サイト訪問ユーザーが最短時間で目的の情報を得るために、検索フィールドを利用するのです。

そのためユーザーの利便性を高めるには、不自然に目立ちすぎず、かつ見つけやすいデザインの検索フィールドが大切です。

今回は、さまざまな需要に合うデザインの検索フィールドをご紹介します。見つけやすく、使いやすい検索フィールドを導入して、ユーザビリティを向上させましょう。

1. モーフィングでアイコンがヌルヌル動く検索フィールド

虫眼鏡のアイコン自体はとてもシンプル。アイコンをクリックすると、検索フィールドに変形します。×ボタンをクリックすれば、なめらかな動きで虫眼鏡のアイコンに元通り。

このデザインの特徴は、モーフィングによるスムーズなアニメーションです。検索フィールドを使わないときに隠しておけるデザインは、画面面積が限られているWebサイトにぴったり。

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

2. マウスオーバーで変形する検索フィールド

クリックではなく、マウスオーバーで検索フィールドが出現するデザイン。クリックとマウスオーバーという小さな違いですが、直感的に操作しやすくなっています。

こちらも前出のものと同様、画面の面積を節約したい場合におすすめのデザインです。

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

3. スクロール対応のスティッキー検索フィールド

スマートフォンやタブレットでWebサイトを閲覧していると、多くの場合は画面をスクロールをしながらコンテンツを楽しみますよね。そしてスクロールをしている途中に検索フィールドを使いたい場合は、あらためてヘッダー部分まで戻らなければいけません。

そんな手間を解消できるのが、こちらのスニペット。スクロールしても常に画面上部に検索フィールドが表示されるため、いつでも簡単に検索できます。

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

4. フルスクリーン展開の検索フィールド

いたるところで目にするようになった、Googleのマテリアルデザイン。検索フィールドにもデザイン言語が使われるのは、当然の流れですよね。

虫眼鏡アイコンをクリックすると、検索フィールドが画面全体に展開されます。余計な情報がいったんオフになるため、検索に集中できるでしょう。すこし工夫すれば、関連情報を表示させることも可能です。

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

5. シンプルなカスタム検索フィールド

「Webサイトの特定のエリアだけを検索したい」というニーズに対応したデザイン。カスタム検索自体は新しい概念ではありませんが、魅力的なデザインのものはそれほど多くはありません。

このスニペットは便利なだけでなく、それぞれのエリアをあらわすアイコンデザインもスマートに表現されています。ユーザーは「USER（ユーザー）」や「POSTS（ポスト）」などを選ぶだけで、簡単に特定のエリアからコンテンツを検索できるのです。

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

6. 背景色が変わる検索フィールド

AJAXが使われているこのコードスニペットは、ユーザーが検索フィールドを使うと、画面背景の色が変わるとともにテキスト情報が表示されます。

ユーザーに視覚的なコンテクストを提示すると、検索フィールドが正しく機能していることを自然に伝えられて便利です。

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

7. 背景が透過された検索フィールド

悪目立ちせず、かつ見つけやすい検索フィールドのデザインは意外と難しいもの。これらの条件をクリアするのが、こちらの背景が透過された検索フィールドです。

このデザインでは、フルスクリーンの画像上に透明な検索フィールドが表示されています。背景を透過させつつ、くっきりした白いフレームを採用しているため、悪目立ちを避け、かつ見つけやすいデザインに仕上がっています。

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

8. 複数のオプションが選択できる検索フィールド

複数の情報を検索できるWebサイトには、このデザインのような検索フィールドがおすすめです。

jQueryを使ってユーザーがオプションを切り替えられるようにデザインし、またすべての検索機能をひとつのプルダウンメニューに納めています。

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

おわりに

検索フィールドが使いにくいと、ユーザーが離脱する危険性が高まります。

デザインと機能性を両立した検索フィールドを作りたければ、ぜひ今回ご紹介したスニペットを参考にしてみてください。

（執筆：Eric Karkovack　翻訳：Nakajima Asuka　編集：北村有　提供元：speckyboy）