見出し画像

website見る練習01

フォント:YakuHanJP(Web上でこの約物を半角にできるフォント)
文字サイズ:FV,大見出し(44px)、メニュー(17px)、中見出し(26px)、小見出し(20px)、本文(18px)、注釈(12px)
配色:ベースF2F2EA(薄ベージュ)、差し色62448C(紫、ロゴと同じ)、ボタンのホバーとあしらいE3B756(黄オレンジ、みりんの色)
サイトの種類:ECサイト

気づいたこと

  • 背景は、「FV」「お知らせ、商品づくり」「商品を売る(商品カテゴリ、おすすめ商品、ギフト)」「その他(レシピ、コラム、フッター)」の4つで切り替わっている

  • FVの写真が流れるのは、動画ではなく写真をコーディングで動かしているっぽい

  • よく見たら上のメニューバーは商品のみで、右サイドにコラムやレシピのバーがある

  • FVで使用されている写真は、商品ではなく商品があったらの場面が表現されている、これはモノ訴求よりシーン訴求のほうが時代的に伸びるからだと思う。ただ大きなシーン写真の右下に商品イラストがあり、何の商品を使った場面、料理なのかを想像しやすい

  • さすがに「おすすめの商品」と「商品カテゴリ」は商品の写真が主体だがよく見ると商品カテゴリはすべてイラストになっている。このイラストはloadingとメニューバーのカテゴリにも使われていて、商品カテゴリはイラストと統一されている

  • コラムとレシピには薄いイラストあしらいがついている。つけることによって横に並んでいてもひとつひとつにまとまりが出ている。

  • 大見出しが縦なことが多い。でも本文は横。おすすめ商品は目立たせたいので大見出しが横、本文が縦になっている。

  • 点線の罫線?が、手書きの丸になっていた。細かいところだがやわらかい雰囲気、手作り感が出ている。

全体で感じた印象

やわらかくて、まろやか、手づくり、健康的そう、家庭感、良いものそうと感じました。
みりんの味わいはまろやかで優しいので、そこを感じ取られるなぁと思いました。

この記事が気に入ったらサポートをしてみませんか?