伊藤農園公式サイト(https://ito-noen.co.jp/)分析
伊藤農園のwebサイトは、ページを開くと動画が表示されます。スクロールすると左の部分がwidth:260pxからwidth:600pxになります。その際、class名topContentsWrapにisOpenが追加されます。サイトはイラスト使いがされていて、オレンジと水色の色味の対比がかわいらしいです。今回は勉強のために、デザインを分析しました。
font
“A1MinchoStd-Bold”, “A1 Mincho”, serif
文章：”游ゴシック体”, YuGothic, “游ゴシック Medium”, “Yu Gothic Medium”, sans-serif
見出し：
font-size: 21px
letter-spacing: 0.24em
文章：
font-size: 13px
line-height: 2
letter-spacing: 0.05em
黒
color
背景色：オレンジ（#fdb100）、水色（#6ec2d7）、白、グレー（#e7e2d8）
水彩のような背景画像
メニュー
PCもスマートフォンも左上にハンバーガーメニューがあり、クリックすると横幅100%でメニューが開きます。左と右のブロックがあり、各リンクの箇所が並んでいます。背景色が付いていたり、背景画像が表示されていて、レイアウトが考えられています。
まとめ
伊藤農園のwebサイトは、各ページのデザインがあまり定型的では無く、工夫されたレイアウトです。イラストをうまく配置していて、とても涼感・透明感・爽やかさ・かわいらしさを感じるサイトです。
初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。
