現代のすべてのWebサイトは、レスポンシブなレイアウトを使うべきです。レスポンシブにすることで、どのようなデバイスであってもブラウジングが簡単になりますが、その反面、デザインの難易度は上がります。
検索フィールドは、扱いにくいページ要素の一例です。レスポンシブなレイアウトが増えていく中で、Webデザイナーたちはよりアクセスしやすくより洗練された検索フォームの新たなトレンドを次々と生み出しています。
今回はWebの検索フォームにおけるトレンドについて、いくつか例を見てみましょう。これらの例は、サイトの検索UIを考案する助けになり、次のプロジェクトを始めるためのアイデアを与えてくれるはずです。
ドロップダウンの検索機能
これまでもっとも使われてきた検索機能は、ドロップダウンのフォームです。これはナビゲーションバーのリンクに固定したもので、検索機能の表示、非表示を切り替えることができます。
多くのWebサイトではナビゲーションを固定しているため、どこからでも簡単に検索フィールドを表示することができます。
固定されていないナビゲーションバーでも、このドロップダウンの検索機能はとても実用的です。レスポンシブなページでは、メインコンテンツを損なわずに検索フォームを詰め込むだけの余地があまりありません。
この上手な実践例であるSearch Engine Journalは、すぐに表示できるドロップダウンの検索フィールドを右上の隅に配置しています。また検索フィールドには、誰でも普遍的に理解できる小さな虫メガネのアイコンを使っています。
検索フィールドが表示されると、虫メガネアイコンが自動的に「×」に変わります。これはユーザー体験を明確にする優れた方法です。これによって、ユーザーはいつでもフィールドを閉じられることがわかるでしょう。
SEJのデザインは言うまでもなく素晴らしく、すべてのデバイスにレイアウトを完璧に合わせています。
もう１つの優れた例として、Probloggerはデスクトップとモバイルで少しレイアウトが異なります。
小さい画面で閲覧しているときには、ドロップダウンのフィールドには典型的な虫メガネのアイコンが配置されています。しかし、デスクトップユーザーの場合にはナビゲーションバーにスペースがあるため、検索フィールドがいつでも表示されるのです。
つねにフォームを表示できる十分なスペースがナビゲーションバーにあれば、この方法を試すことができるでしょう。
同じ手法を使ったもう１つのサイトがSkinny Tiesです。
デフォルトの検索フィールドが、ナビゲーションにあるほかのリンクよりとても小さいことに注目してください。これによって、あまりスペースを取らずに、小さいデバイスでも表示し続けられるようにしています。
フルスクリーンのモーダルウィンドウ
ドロップダウンエフェクトを好まない人は、代わりにモーダルウィンドウを試してみましょう。
モーダルは検索アイコンと繋がるものなので、表面的には同じように見えます。しかし、検索フィールドはナビゲーションバーからドロップダウンするフォームではなく、ページを覆うモーダルウィンドウの中に表示されます。
Full Home Livingのサイトには、画面全体を覆うモーダルの検索フォームの優れた例があります。
モーダルは、ユーザーの注意を正確にフォームに向けさせることができます。このサイトのモーダルは完全にレスポンシブにデザインされていて、１回のタップで閉じられるので使いやすいです。
ただ、検索フィールドがあるだけの質素なオーバーレイの画面にしたくないときには、モーダルは少し「過剰」なデザインだと感じられるかもしれません。
より多くのコンテンツを加えたい人は、Comedy Centralのサイトにあるような検索モーダルを試してみましょう。
これもページ全体を覆うものですが、最新の番組や試写会のリンクが加わっています。
新しい投稿やホットカテゴリー、ニュース速報などがある場合は、ページに追加のリンクを表示する方法が効果的でしょう。
フルスクリーンのモーダルは効果的に機能しますが、ユーザー体験に注意が必要です。すべてのデバイスでモーダルが確実に機能し、ユーザーが簡単にモーダルを閉じられるようにしましょう。
インラインのレスポンシブな入力フォーム
動的なインラインのフォームは、ドロップダウンメニューと非表示の検索フィールドを掛け合わせたものです。
インラインの検索フォームとは、ナビゲーションの中に検索のトグルを配置し、ナビゲーションの下ではなくインラインに表示するものです。私たちDesignmodoはこの効果を使用していますし、多くのブログでも使われています。
インラインの検索フィールドの例として、Cartoon Brewのデザインを見てみましょう。ナビゲーションには虫メガネのアイコンがはっきりと存在しますが、トグルボタンを押すまでフォームは現れません。
検索フィールドはナビゲーションのリンクの隣に現れるため、スペースをあまり取りません。一方で、レスポンシブではデバイスに応じて検索の扱い方を変える必要があります。そのため小さなブラウザでは、検索フィールドは単にドロップダウンのナビゲーションの中に現れます。
また、インラインの検索フィールドを、ナビゲーションの中に隠すように使うこともできるでしょう。DualShockersでは、すべてのスクリーンサイズで動作する素晴らしいスライドメニューを使っています。
このナビゲーションでは、検索フォームとメニューの表示をトグルによって切り替えることができます。すべてのデバイスに対して同じUIを採用していて、アクセスしやすく、ナビゲーションの中に適切にフォームを表示できています。
ハンバーガーメニューが好きな人であれば、この方法は上手く機能するでしょう。
しかし、この手法に忠実に従うためには、すべての画面のデフォルトをハンバーガーメニューにしなければなりません。
悪いアイデアでないのは確かですが、あなたが探しているものではないかもしれません。
インラインフォームのデザインには、Cartoon Brewのスタイルや私たちがDesignmodoで使っているスタイルに従ったほうが良いでしょう。
フルサイズの伸縮するフォーム
この検索のデザインはあまり見たことありませんが、アダプティブなレイアウトにおいては上手く機能するでしょう。
伸縮する検索フォームでは、まず幅が広いレイアウトに適合したフォーム全体をデザインし、そこからスマートフォンのような小さいデバイスでも十分に機能するように、検索フィールドの長さを縮めて調整します。
この手法を使えば、検索フィールドはいつでも表示され、必要に応じて小さく縮小するようになります。Authentic Jobsはこのトレンドを実行している好例の１つです。
サイトを訪問してブラウザのサイズを変えると、ほかのページ要素も一緒に調整される様子がわかります。すべてのものが見られるようにレイアウトはフレキシブルになっているので、デザインの中にしっかりと納まります。
検索フォームは多くのWebサイトにとって不可欠な要素です。検索フォームをつねに見えるようにする必要がある場合は、この伸縮するフォームの手法に従ってください。
またはこの伸縮するフォームのUIをドロップダウンフォームと組み合わせて、ページの上に隠れたフィールドを作成することもできるでしょう。
Push Squareはこの効果を用いて、検索フォームをページの右上に固定しています。
虫メガネのアイコンをクリックすると検索フォームが表示され、デフォルトでページ幅と同じ長さになります。1920ピクセルのデスクトップであっても320ピクセルのスマートフォンであっても、この検索フィールドは正確に画面にフィットするよう調整されるのです。
検索フォームをデザインする
レスポンシブな検索フォームに関する最善のソリューションは、そのプロジェクトによって異なることが多いです。ナビゲーションメニューによっては、インラインの検索フィールドを作る余地がないことがあるでしょう。その場合、スクリーンに表示されない、隠れたフォームにする必要があるかもしれません。
どのようにデザインするべきかわからない人は、デザインのインスピレーションを得るためにほかのWebサイトを閲覧して、検索フォームについて調査してしましょう。
どの検索機能が好みか、どれが自分のプロジェクトにもっとも適合するかを記録しましょう。そして、試行錯誤を繰り返して自分のお気に入りのフォームをテストし、レスポンシブな検索UIが最善の体験を提供しているかどうかを確認してください。
