2018年06月20日(水)

レスポンシブな検索フォームの実践例

• 0
• 33
• 15
• 50

現代のすべてのWebサイトは、レスポンシブなレイアウトを使うべきです。レスポンシブにすることで、どのようなデバイスであってもブラウジングが簡単になりますが、その反面、デザインの難易度は上がります。

検索フィールドは、扱いにくいページ要素の一例です。レスポンシブなレイアウトが増えていく中で、Webデザイナーたちはよりアクセスしやすくより洗練された検索フォームの新たなトレンドを次々と生み出しています。

今回はWebの検索フォームにおけるトレンドについて、いくつか例を見てみましょう。これらの例は、サイトの検索UIを考案する助けになり、次のプロジェクトを始めるためのアイデアを与えてくれるはずです。

ドロップダウンの検索機能

これまでもっとも使われてきた検索機能は、ドロップダウンのフォームです。これはナビゲーションバーのリンクに固定したもので、検索機能の表示、非表示を切り替えることができます。

多くのWebサイトではナビゲーションを固定しているため、どこからでも簡単に検索フィールドを表示することができます。

固定されていないナビゲーションバーでも、このドロップダウンの検索機能はとても実用的です。レスポンシブなページでは、メインコンテンツを損なわずに検索フォームを詰め込...