はじめに
今回は、農業・食品系のサイトでよく使われる動きとデザインについて考えていきます。
参考サイト
- 食べて笑顔になる 土肥農園
https://www.dosuika.com/index.html
- 食菜卵(しょくさいらん)-たまごの八千代ポートリー
https://www.yachiyo-egg.com/
農業・食品系のヘッダーラフ案
農業や食品では、アイコンやアニメーションを使って視覚的に楽しそうなイメージを作り上げるサイトが多い印象です。パッと見て「楽しそう」と感じると、その後の誘導がしやすくなるなと考えました。視覚的に見て使いやすいヘッダー作りをモットーにして制作していきます。
①真ん中ロゴとアイコン付きヘッダー
全体のコード一覧
See the Pen 真ん中ロゴとアイコン付きヘッダー by Uka Suzuki (@uukasuzuki_) on CodePen.
農園・農家のサイトヘッダー
See the Pen Untitled by Uka Suzuki (@uukasuzuki_) on CodePen.
疑問
両サイドに破線を配置して、中の余分な破線の消し方が分かりません。疑似要素を使って考えてもみましたが、仕組みが理解できませんでした。分かる方がいれば、教えていただけると幸いです。
まとめ
今回は、農業・食品系のサイトを参考にヘッダーデザインを作りました。今後もパターンの引き出しを増やすために、思考を言語化できるよう努めていきます！