新しいウェブサイトは、全てレスポンシブであるべきです。ですが現実的には、レスポンシブにするには相応の手間と時間がかかります。中でもデザイナーを悩ませているのが検索フォームで、快適かつレスポンシブなフォームを実現するため、試行錯誤が重ねられています。今回はそうした問題に取り組むデザイナーさん向けに、レスポンシブな検索フォームをデザインする4つの方法を紹介します。
1.ドロップダウンフォームでの検索
現在最も普及しているのが、このドロップダウンの検索フォームです。リンクをクリックすることでオンオフを簡単に切り替えられます。多くのサイトが固定ナビゲーションを採用しているため、このフォームを常時表示しておくことは簡単です。しかし実際にやってみると、驚くほど使い勝手が悪いのです。十分なスペースが取れず、どうしてもフォームを小さくせざるを得ません。
これを上手に解決したのがSearch Engine Journalです。誰にでもわかる虫眼鏡アイコンをクリックすると、ドロップダウンの検索フィールドが現れます。フォームが表示されると虫眼鏡アイコンは×印に変わり、ユーザーにフォームを閉じられることを知らせます。設置場所を調整すれば、どんなデバイスにも対応できます。
2.全画面モーダル
ドロップダウンが
スポンサーリンク
レスポンシブな検索フォームを作る方法【ポイントとデザインのトレンドをまとめて紹介】
マーケティング最新
コメント