レスポンシブ対応、検索フォームのデザイン・実装するアイデアのまとめ
Post on:2016年7月20日
sponsors
CSSアニメーションを使って実装された、レスポンシブや省スペース用の検索フォーム、フル画面に表示させる検索フォームなど、デザインや実装のアイデアが面白い検索フォームを紹介します。
各検索フォームは、リンク先で実際の動作やコードを確認できます。
省スペース型の検索フォームの基本は、デフォルト時にアイコンで、クリック・タップすると入力エリアが表示されるというものが多いです。
変形時のアニメーションはいろいろな工夫があります。
デザインする時は、入力エリアが表示された時も想定するのが大切です。
サイト全体の雰囲気に合わせたアニメーションを使うのはありですね。
入力エリアのスペースが左右に確保できない場合のアイデア、面白いですね。
検索オプションをミニマルにデザインしたフォームです。
検索が主コンテンツだとこんな実装もありです。ただし、コンテンツを見ながら検索できない点には注意です。
sponsors
