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