海外I & Me Coffee
飲料 / 立体表現
浮く一粒の豆で商品世界を始める
飲料 / 立体表現
I & Me Coffee
暗い空間に浮くコーヒー豆を主役にし、製品の素材と強い言葉で印象を残す。
設計の見どころ
最終撮影の冒頭では、暗い茶色の空間に一粒のコーヒー豆が浮き、下には豆の山と粉が広がる。飲む人物や完成したカップではなく、原料そのものを大きな主役にする表現だ。中央の豆へ光を集め、少ない色の中でも立体感を強く印象づけている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
国内
国内
DESIGN NOTES
このサイトの設計を読み解く。
顔のある三つの袋を主役にする
冒頭左側には豆の写真を背景に、顔を描いた三つの商品袋が重なる。右側は短い見出しと初回セットのボタンに絞り、写真と行動の領域を分ける。袋の色や表情を画面上のブランドの顔にすることで、商品そのものが記憶に残る構成になっている。
細長い大文字でブランドの声を作る
見出しと本文の大きな呼びかけには、細く背の高い黒い文字を使う。スクロール先では文字だけを大きく中央に積み、商品説明よりブランドの語り口が前に出る。写真の区画と文字の区画で役割を分け、書体の特徴を通じて同じ声を保っている。
オレンジの初回セットへ行動を集める
初回セットへのボタンは鮮やかなオレンジで、商品袋の一色とそろえる。上部の買い物やメニューの案内は控えめにし、初めて訪れた人に試す入口を示す。種類の多い商品でも、最初の選択肢を一つに絞ることで、検討を始めるきっかけを作っている。
豆の違いを焙煎の段階で比較する
公開テキストには複数の豆の名前と焙煎の違いがあり、軽いものから深いものへ比較する表現が付く。デカフェという共通条件の中でも、味の選び方を残す構成だ。特徴のあるカテゴリーを扱う店は、対象であることだけでなく商品間の差も示す必要がある。
読み物と創業の話で選ぶ理由を補う
創業者の話、製法に関する記事、器具選びなどの読み物が公開テキストに含まれる。初回購入の導線と、詳しく知りたい人の情報を別に用意する構成だ。今回の分析では健康に関する広告表現の妥当性を認定せず、情報の配置と選択肢の整理に注目している。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
商品パッケージの色と表情をそのままサイトの主役にし、初回セットへ誘導できる。専門カテゴリーでも、味や焙煎など商品同士を選ぶための軸を用意したい。
そのまま真似する前に
健康や妊娠に関する安全性、他社製法への批判など強い広告表現が含まれるが、その妥当性は未検証。これらの主張は模倣対象にせず、画面構成と購入導線の参考に限定する。
次に見ておきたい参考
一覧へ →海外国内一杯の器をブランドの象徴にする
飲食 / タイポグラフィ
MENSHO
器の立体表現から世界各地の店舗と一杯のメニューへつなぐ、ラーメンブランドのサイト。
設計の見どころ
PC冒頭では黒い背景に白い線で描かれた大きな器が現れ、MENSHOの文字と共にブランドを印象づける。料理写真を並べる前に器そのものを象徴として扱う構成で、一般的な飲食店のメニュー一覧とは異なる始まり方になっている。
詳しい解説を読む →公式サイトを見る ↗国内KUSUMUSUBI
飲食 / タイポグラフィ
米屋の看板と一皿を左右に分ける
飲食 / タイポグラフィ
KUSUMUSUBI
左に米屋の看板、右に塩むすびと産地を置き、一品と土地の関係を見せる。
設計の見どころ
PCでは左側に紙のような背景と店の印を大きく置き、右側に黒い皿の三つのおむすびを配置する。上端を横断する大きな英字も看板の役割を持つ。左のブランドと右の具体的な商品を分けることで、品数の少なさをむしろ個性として見せている。
詳しい解説を読む →公式サイトを見る ↗