サイトレビュー No.19 「キッコーマン豆乳」の公式サイト
■サイト概要
豆乳製品の紹介。キッコーマンの豆乳のブランドサイト
■ターゲット
キッコーマンの豆乳の商品情報や新商品情報の発信や豆乳活用方法の情報発信。
■ゴール
キッコーマンの豆乳の商品情報をしってもらい購入につなげる。
豊富なレシピの掲載をすることで飲料だけでなく料理にも活用できることをアピールして購入者には継続して購入してもらう。
■サイト構成
・TOP
・商品ラインナップ
・ソイトビ
・お知らせ
■ファーストビュー
・PC
メインビジュアルは2カラムでひっだり半分は今のピックアップ情報をスライドで切り替えて表示する。
右側固定でレシピの情報を配置。固定の情報はバナーのようなデザインでユーザーの興味を引くデザインとなっている。
ナビはTOPとトップページの英語と日本語両方表示し誰にでもわかりやすくメニューを表示している。
右端にSNSアカウントへのリンクボタンを配置。カラーを豆乳のパッケージと同じ緑にしておりブランドをイメージさせる配色とそこだけカラーを変えることで目立つようにしている。
・SP
メインビジュアルはスライドしている部分をワンカラムで配置してバナー部分は正方形のバナーで二つ並べて配置。
ナビはロゴと左にハンバーガーメニュー
ドロワーメニューはメニュー横にプラスボタンがありプラスボタンを押すとアコーディオンで出てくる。商品ラインナップは商品の画像がありわかりやすい。SNS公式アカウントへのリンクアイコンあり。わかりやすく大きめ。
■全体
ニュース一覧はカード型モジュール。
見てもらいたいページへのリンクや商品一覧の画像はただユーザーが興味を持つようにバナーのように一つ一つでざいんされているので見ていて飽きない。
商品ラインナップには定番商品と新商品を大きく掲載している。
■フォントとカラー
フォント
英文 Montserrat
メイン NotoSansCJKjp
カラー
メインカラー #669219
アクセンカラー #8e6d5b
■学び
下層ページへの誘導のボタンのデザインが一つ一つ丁寧に作られていてユーザーの興味を促すものになっている。
みていて飽きない作りになっている。
#サイトレビュー #デザインの言語化
この記事が気に入ったらサポートをしてみませんか？