ほっと一息、# ホッ豆乳　＃1日1サイトレビュー

ほっと一息、#ホッ豆乳 | キッコーマン豆乳

【概要】

キッコーマン豆乳を電子レンジで温める方法やレシピなどを紹介している商品サイト

【ターゲット】

サイトの画像モデルが若年層の女性のため、20〜30代の女性

【印象】

・彩度の低い茶色やベージュの配色で落ち着いた印象

・手描きの文字やイラストを使用することで可愛らしさ、女性らしさ、リラックス感が出る

・画像やテキストなど四角い枠で仕切ることで、サイト全体がスッキリし、見やすい

・アニメーションは少ない

【構成】

・メインビジュアル

・＃ ホッ豆乳の秘密：利点を紹介

・# ホッ豆乳の作り方：文章、イラスト、動画を使用して紹介

・# ホッ豆乳のある生活：朝昼晩でおすすめのホッ豆乳を紹介

・# ホッ豆乳の楽しみ方：様々な材料を合わせて作るレシピの紹介

・よくあるご質問：質問を5つのカテゴリに分け、カテゴリの中でも複数の質問に回答している

【メインビジュアル】

・ほぼフルスクリーン

・画像の下部が緩い半円に切り取られ、緩い半円カーブが抜け感を出している

・サイトタイトルは手描き文字

・左端には茶色とカーキ色の二つの三角形が合わさったあしらいが配置→アクセントに

・画像のキッコーマン豆乳のパッケージがピントが合わずボケているが、キッコーマン豆乳ということがわかる範囲内の解像度であり、主張が強すぎなくて良い

・画像のホッ豆乳の湯気や木造の机、赤い布巾などの演出が温かみ、リラックス感を出している

・上部にはブランドサイトのグローバルメニューが配置

・左端にはスクロールを促すアイコンが配置

【コンテンツ】

・# ホッ豆乳の秘密コンテンツの3つのsecretの箱の背景色がずれているところが抜け感があり、可愛らしさがある→女性が好みそうなデザイン

・# ホッ豆乳のある生活コンテンツではスクロールすると朝昼晩ごとに楕円形のオブジェクト（大豆を表現？）が色を変えながらコンテンツの下に移動してくる

・朝昼晩で背景色がグラデーションで変わっていき、朝：水色、昼：ベージュ、晩：パープルなど時間帯に合った色を使用することでシーンを想像しやすい

・四角い枠のテキストや画像が整列されてなく、ずれている点が抜け感、リラックス感を感じるが、レシピの紹介やよくあるご質問コンテンツなどの画像や文章をしっかり見せたいコンテンツでは整列されている

・動画の再生ボタンのホバーは少し拡大する、レシピ紹介のコンテンツの画像のホバーは画像が少し暗くなり、画像内に白い線画書かれる動作をする

・画面右端には今見ているコンテンツの場所を表す丸が配置

【フォント】

・見出しなどの大きい文字は游明朝（30、36、48px）→落ち着いた雰囲気を出す

・説明文などの小さい文字は游ゴシック（14、16、18px）

・ジャンプ率は高めだが、字間や行間が少し広めな部分が多いため、落ち着いた雰囲気が出る

【カラー】

・ベースカラーは薄いベージュ（#fffbf4)、薄い茶色（#dcd1c0)

・メインカラーはテキストカラーの茶色（#895c46、#513726）

・アクセントカラーは黄緑、ピンクっぽいオレンジ、薄いマスタード色

・全体的に茶色、ベージュなどの同じ色相で彩度が低い色を使用

【レスポンシブ】

SP表示では、

・# ホッ豆乳のある生活コンテンツの朝昼晩で移動する楕円形はない

・# ホッ豆乳のある生活コンテンツの白い四角の枠が豆乳パッケージが目立つように縦長に大きくなっている

・グリットレイアウト→スライドレイアウトへ変更

・トップページに促すアイコンが画面右下に常に配置→フッターの上に固定で配置

【サイトを通じてどのような目的を達成しているか】

目的：豆乳をホットでも飲めることを認知させ、購入してもらう

・手描きの文字やイラスト、落ち着いた配色、グラデーションの配色、抜け感のあるレイアウトなど女性が好みそうなサイトデザインで興味を持ってもらいやすい

・ホッ豆乳の利点、温め方、作り方、時間帯ごとの飲み方などを詳しく載せることで挑戦してもらいやすい

→豆乳の購入

➡︎結果：目的達成