「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
Webサイトでよくみられる検索フィールドは、シンプルなデザインになりがちです。そもそも「検索フィールドにデザインが必要なのか?」と考える方もいらっしゃるでしょう。
しかしコンテンツ量が多いWebサイトでは、検索フィールドはユーザーの手助けをするために重要な役割をもっています。サイト訪問ユーザーが最短時間で目的の情報を得るために、検索フィールドを利用するのです。
そのためユーザーの利便性を高めるには、不自然に目立ちすぎず、かつ見つけやすいデザインの検索フィールドが大切です。
今回は、さまざまな需要に合うデザインの検索フィールドをご紹介します。見つけやすく、使いやすい検索フィールドを導入して、ユーザビリティを向上させましょう。
目次
虫眼鏡のアイコン自体はとてもシンプル。アイコンをクリックすると、検索フィールドに変形します。×ボタンをクリックすれば、なめらかな動きで虫眼鏡のアイコンに元通り。
このデザインの特徴は、モーフィングによるスムーズなアニメーションです。検索フィールドを使わないときに隠しておけるデザインは、画面面積が限られているWebサイトにぴったり。
See the Pen Search bar animation by Milan Milošev (@MilanMilosev) on CodePen.
クリックではなく、マウスオーバーで検索フィールドが出現するデザイン。クリックとマウスオーバーという小さな違いですが、直感的に操作しやすくなっています。
こちらも前出のものと同様、画面の面積を節約したい場合におすすめのデザインです。
See the Pen CSS Search Field Animation by Sebastian Popp (@sebastianpopp) on CodePen.
スマートフォンやタブレットでWebサイトを閲覧していると、多くの場合は画面をスクロールをしながらコンテンツを楽しみますよね。そしてスクロールをしている途中に検索フィールドを使いたい場合は、あらためてヘッダー部分まで戻らなければいけません。
そんな手間を解消できるのが、こちらのスニペット。スクロールしても常に画面上部に検索フィールドが表示されるため、いつでも簡単に検索できます。
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.
「Webサイトの特定のエリアだけを検索したい」というニーズに対応したデザイン。カスタム検索自体は新しい概念ではありませんが、魅力的なデザインのものはそれほど多くはありません。
このスニペットは便利なだけでなく、それぞれのエリアをあらわすアイコンデザインもスマートに表現されています。ユーザーは「USER(ユーザー)」や「POSTS(ポスト)」などを選ぶだけで、簡単に特定のエリアからコンテンツを検索できるのです。
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.
悪目立ちせず、かつ見つけやすい検索フィールドのデザインは意外と難しいもの。これらの条件をクリアするのが、こちらの背景が透過された検索フィールドです。
このデザインでは、フルスクリーンの画像上に透明な検索フィールドが表示されています。背景を透過させつつ、くっきりした白いフレームを採用しているため、悪目立ちを避け、かつ見つけやすいデザインに仕上がっています。
See the Pen A cool little search box by Jon Welsh (@jonwelsh) on CodePen.
複数の情報を検索できるWebサイトには、このデザインのような検索フィールドがおすすめです。
jQueryを使ってユーザーがオプションを切り替えられるようにデザインし、またすべての検索機能をひとつのプルダウンメニューに納めています。
See the Pen multi search with combo box by John McGarrah (@freshmasterj) on CodePen.
検索フィールドが使いにくいと、ユーザーが離脱する危険性が高まります。
デザインと機能性を両立した検索フィールドを作りたければ、ぜひ今回ご紹介したスニペットを参考にしてみてください。
(執筆:Eric Karkovack 翻訳:Nakajima Asuka 編集:北村有 提供元:speckyboy)
シンプルで気が利く、完璧な検索ボックスをデザインする方法
Workship MAGAZINE