BottleBrew #1日1サイトレビュー

BottleBrew | CRAFT YOUR OWN SOY SAUCE

◆概要
・自分だけの醤油が作れるサービスの紹介サイト

◆ターゲット（推測）
・ていねいな暮らしに気を使っている主婦
・クラファンや新しいサービスが好きな人

◆印象
・調理風景や美味しそうな料理で生理的に訴えてくる
・醤油なのに、まるでドリップコーヒーのようなお洒落さ
・理科の実験のようなところもあって興味をそそられる

◆メインビジュアル
・画面いっぱいに、この醤油を使った調理風景の動画
→見ていてお腹が空くくらい、シズル感がすごい
・左側に白地で英語のコピーと日本語のサブコピー

◆コピー
・「CRAFT YOUR OWN SOY SAUCE」
・「BottleBrewは育てるしょうゆ。日本古来から伝わる調味料をつくる体験、してみませんか？」
→今までにないサービスなので、どのようなものかストレートに伝える
→「育てるしょうゆ」という言葉がワクワクする
→しょうゆを歴史ある日本文化として捉えることで価値を上げている
・スクロールするともう一つコピーが出てくる
・「それは、私がつくったしょうゆ。
・「しょうゆは、買ってきて使うもの…。そんなふうに考えていませんでしたか？　〜〜　おうちでのしょうゆづくり、始めてみませんか？」
→ユーザーのインサイトを突きながら、さらに詳しく説明
→「しょうゆ」が平仮名で統一されていて優しい印象

◆レイアウト/構成
・左上にロゴ、右上にログインボタン、カート、ハンバーガーメニュー
→右上の三つは固定
→メニューはアイコンだけでなくmenuという文字つき
→ヘッダーは背景色なしでアイコンも小さめ、中のコンテンツを邪魔しない
・メニューを開くとグレーでオーバーレイ
→左側にロゴ、右側に各項目とSNSなどのボタン
・「つくる→つかう→つなげる」は縦長（見出しも縦書き）を３つ横に並べている
・「BottleBrewを体験してみる」は見出しをタイル状の写真で囲っている
・その下の二つの見出し部分は、別々の背景がついている
→トップページの見出しにバリエーションを持たせて飽きさせないようにしている
・フッターにはサイトマップ、SNSボタン、問い合わせリンク、その他ロゴなど
・右側に小さくパンくずリスト

◆写真/イラスト/動画
・写真の枚数が多い上に、ほとんどがオリジナルでクオリティが高い
→内容がイメージしやすく、デザインの統一感も出ている
・トリミングの仕方にもバリエーションがある
・動画はファーストビューのみだが印象に残る
・文字の装飾など細かい部分にシンプルで可愛いイラスト

◆演出/アニメーション
・ファーストビューの動画は開いてすぐ流れる
・スクロールして下にあるコピーはゆっくり1文字ずつ出てくる
・地味にロゴのグラデーションがアニメーションで動いている
・コンテンツは基本的にふわっとフェードして表示
・「BottleBrewを体験してみる」の見出しを囲む写真が入れ替わる
・ホバーは基本的にズームで動きは控えめ

◆カラー
・コンテンツ自体は濃いグレー、薄いグレー、白
→文字の色が薄めなので目に優しい
→写真や背景テクスチャで色を出している
→装飾などは醤油をイメージした薄めの茶色が多い

◆フォント
・和文はヒラギノ角ゴ（一部の見出しのみ中ゴシックBBB）
・英文はNoto Sans
・本文の最小サイズは10pxとかなり小さめ
・ジャンプ率もわりと高いが、それでも落ち着いた印象

◆レスポンシブ
・ファーストビューは動画ではなく画像に
・コンテンツは基本的に縦並びに、違和感なし
・スマホの本文は13pxでPCより大きめの印象