#14 ハート型のトマトがかわいい！細かいところまでこだわった、ポップなWebサイト

おはようございます！今日もWebサイト研究していきまーす！

今日もこちらの記事を参考にさせていただいて、Webサイト研究します。
https://note.com/arasunatomoyuki/n/nbe9189dfb926

今日は「SANKOU!」さん  https://sankoudesign.com/ から選びました。



「たかしま農園」
https://www.takashima-nouen.com/

地域ならではのものを売りにしているビジネスやWebサイトが大好きで、この研究ブログでもよく選んでいます。こちらのWebサイトは本当かわいらしくてポップで、見た瞬間トキメキました！💛
ポップな雰囲気の制作をあまりしたことがなくて、こういうものを作れるようになりたいなあと思いました(^ ^)
動きは最低限で、イラストがたくさん使われていて、細かいところまで遊び心のあるWebサイトですね。

では装飾の研究！


☆リンク要素のルール
・リンクは画像にはopacity
・文字もopacity＋下線


☆王道サイズ、形のセオリー
・ヘッダーは一番上ではなく、メインビジュアルの下にある！
・ヘッダーは一部メガメニュー。その時下層ページリンクは大きな写真＋見出しタイトルで見せてる
・説明文は13〜16px
・セクション間のmargin/paddingがバラバラ、120〜145px
　　→でも情報は見やすい、なんで？？？


☆薄い色は何色あるかをつかむ
・薄い色はなし。
・商品の区切りなど、点線を使っていてポップさ増


☆コンテンツの横幅、グリッドのルール
・左がうええ、右が下へのルール
・基本、商品部分は３カラム、ブログなどの記事部分は２カラム


☆レスポンシブの変化のセオリー
・３カラムの商品は２カラムへ
・２カラムの記事は１カラムへ
・左右のpadding7％！


☆配色のルール
・赤と緑がメイン
・ヘッダーのナビや見出しは緑、目立たせたい見出しや小見出しは赤
　→赤と緑の比率やルール見つけるの難しい…


全体的に<h>タグで画像を囲って、見出しなども画像で作ってるのですね。これからコードの書き方も少し見ていきたいなと思いました。


本日もお読みいただきありがとうございました(*^ ^*)


#webデザイン #webデザイナー #webサイト #たかしま農園 #長崎