1日1WEBサイト デザイン分析 #21 "キッコーマン豆乳"

こんにちは。WEBデザイナー目指して勉強中のかいもちです。
今日は... せっかくなら自分の好きな商品のページを ! と思い、大好きなキッコーマン豆乳のページを見ていこうと思います🌱🥛💞 ! 

"キッコーマン豆乳 | ブランドサイト"

目的・ターゲット

目的
・販促 (一般消費者向け)

ターゲット
・豆乳が好きで、普段からよく飲む人
　 (老若男女問わず... だけど、商品特性的に女性がメインターゲット? )

配色

・全体的にはやや明るく、やや温かみのある配色。

・大豆を思わせる明るめのグリーン、ブラウンをキーカラーに、まさに豆乳みたいな色の背景。

・文字はやわらかめの黒が主。

 

フォント

・Montserrat (ヘッダー、見出し、ラベル等の英字)
→ googleフォントで使用可。
　ポップなイメージ。上からぎゅっと押しつぶされたような横長で、ぽてっとした印象も与える。

・NotoSansCJKjp (本文)
→ Adobeフォントで使用可。
　いわゆる、Noto-sans体。CJKは、チャイナ、ジャパン、コリアを表しているらしく、3言語に対応しているもよう。

ファーストビュー

・第一印象は「かわいい ! 」
　ポップで元気なイメージ。豆乳の健康的なイメージとも合致している。

・ヘッダーは固定、グリッドは左部分コンテンツだけがスライドショーで変化する。

・ヘッダーナビは、マウスホバーで上から詳細メニューが出てくる。文章ではなく、画像で構成されている。↓

コンテンツ

・全体的には、マウスホバー以外のアニメーションはなく、シンプルな作り。

・ヘッダーは固定でずっとついてくる。

・キッコーマン豆乳そのものを知ってほしいというわけではなく、サイト訪問者はそれを知っている前提。
　いろんなアレンジができること、いろんな種類があること、そういった「豊富さ」を伝えたいという意図を感じる。

・ページ遷移が非常に多い。それぞれの興味関心でページに飛んでね〜という感じ。

・マウスホバーのアニメーションが、早いものとゆっくりなものがあるのは何か意図があるのだろうか... ?

感想

・キッコーマン豆乳のイメージそのまま ! 
　ヘルシーで、ちょっとポップで、明るい感じ。やはりサイトとブランドイメージを合わせることはとっても大事だなと思った。

・コンテンツの中のキャッチ画像など、細かいところまで統一感があるよう、作り込まれている。
　大手企業のページでも、キャッチイメージの印象がバラバラなことがあるので、そのへんのブランディングも細かくされているのかなーと思った。

というか... キッコーマン豆乳、こんなに種類あるんですね😨