#1日1サイトレビュー【052】みんなの発酵BLENDさん

みんなの発酵BLEND｜発酵文化を、伝える、つなぐ

今日はおいしそうな見た目のwebサイトを観察しました👀

【概要】
発酵文化について発信する情報サイト

【ターゲット】
発酵食品についてあまり知らない方

【目的】
発酵について興味を持ってもらい、発酵食品の購入や発酵食品に力を入れている飲食店の利用につなげる。

【印象】
ポップ、楽しげ、シンプル

【メインビジュアル】

・メイン画像はドラッグするか、下のドットをクリックすることで次の画像に切り替えることができる。画像にマウスホバーすると少し画像が明るくなる。filterプロパティで明るくなるよう画像加工されていた。

・左右の余白が4％ついていて、ロゴやナビゲーションメニューも画像と整列しているので整っている印象。余白は少な目だが、画像以外はモノクロだからかすっきりして見える。

・ナビゲーションメニューが丸い画像＋メニュータイトル＋テキストのセットで横並びで紹介されている。縦線で区切られている中はどこでもクリックできるようになっている。クリックできる範囲を分かりやすくするために縦線をいれたと推測。

・HAKKO FOOD　画像とテキストが横並び（flexbox）で配置。widthが画像部分70％、テキスト部分30％になっている。画像をよりアピールしたいのかな？

・COLUMNもHAKKO FOODと同じようにテキスト、画像が交互に配置されている。

・NEWS　ここだけ背景色がついている。他のセクションとの境目を分かりやすくするため？

・フッター　右側の文字はただおしゃれでいれてるのかと思ったらプライバシーポリシー、利用規約、お問い合わせのリンクだった。マウスホバーで何かしら変化があるとクリックできることが分かりやすいのかなと思った。

【カラー】
すっきりとしたイメージ。青と黄色は補色でお互いの色を引き立てあう関係。黄色は彩度低めなので、青を目立たせたいのかな…？

ベースカラー：白、黄色
アクセントカラー：青
文字：黒

【フォント】
A1 Gothic M, YuGothic, "Yu Gothic", "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

好きな文字だなーと思ったらモリサワのA1ゴシック。
いつか買える時がくるのかな…

【レスポンシブ】
・ハンバーガーメニューが左上にあり、タップすると左からにょきっとエリアが出てくる。
・CONTENTS　横並びだったのが、スマホ画面では縦並びになっている。