SMALLSHIFT
← サイト事例に戻る

WEBSITE STUDY / 海外

I & Me Coffee

暗い空間に浮くコーヒー豆を主役にし、製品の素材と強い言葉で印象を残す。

公式サイトを見る ↗
公式サイト / 掲載確認用
I & Me Coffeeの公式サイト画面

DESIGN NOTES

このサイトの設計を読み解く。

01

浮く一粒の豆で商品世界を始める

最終撮影の冒頭では、暗い茶色の空間に一粒のコーヒー豆が浮き、下には豆の山と粉が広がる。飲む人物や完成したカップではなく、原料そのものを大きな主役にする表現だ。中央の豆へ光を集め、少ない色の中でも立体感を強く印象づけている。

02

大きな文字を背景の一部にする

背景には縦長の大きな英字が重なり、暗めの色で豆の後ろへ下がる。文字を説明文として独立させず、商品の世界観を作る面として扱っている。画面下の短いスクロール案内は白く残り、次の操作の手掛かりだけを小さく明確にしている。

03

二枚の画面で豆の変化を見せる

二枚の確認画面では、中央の一粒が閉じた状態から割れた状態へ変化している。周囲の豆の破片も位置が変わり、素材を近くで見る演出になっている。ここではその視覚的な差を確認した範囲に留め、スクロールとの厳密な連動や速度までは断定しない。

04

製品の特徴を短い項目へ分解する

公開テキストでは砂糖を加えないこと、豆、アルミのボトルなどが短い項目で紹介される。強い導入の後に、何が製品の特徴なのかを具体化する役割だ。印象的な素材表現だけで終わらず、購入者や取扱店が把握すべき仕様へつなげる構成と読み取れる。

05

販売場所と取引相談を入口にする

案内には販売場所を探す入口とパートナー向けの相談があり、複数地域の連絡先も掲載される。商品を飲みたい人と、取り扱いたい事業者の両方を想定した情報だ。ブランド紹介から先の行動を考える時、個人向けと取引向けを分ける方法が参考になる。

APPLY TO YOUR PROJECT

自分の制作に取り入れるなら

原料の一部分を大きく見せると、完成品写真とは違う印象を作れる。演出の後には製品仕様を短く整理し、買う場所と取引相談の入口を分けて置きたい。

そのまま真似する前に

重い視覚演出では初回表示に時間がかかる場合があり、今回も読み込み後の画像を採用している。豆や成分に関する品質の真偽、販売場所検索や問い合わせの動作は未検証。

次に見ておきたい参考

一覧へ →
I & Me Coffeeの公式サイト画面