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

検索フィールドのデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おわりに

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

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

(執筆:Eric Karkovack 翻訳:Nakajima Asuka 編集:北村有 提供元:speckyboy

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

平均時給2,900円。高単価なお仕事をしませんか?

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)が、そんな悩みを解決します!

  • 28,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 平均時給2,900円の高単価案件のみ掲載
  • お仕事成約でお祝い金1万円プレゼント

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ