海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
Madie
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
設計の見どころ
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
国内
DESIGN NOTES
このサイトの設計を読み解く。
お茶の時間から家電の用途へつなぐ
冒頭は液体の接写とケトルを使う手元を左右に見せ、その後にブランド説明、茶器、コーヒーメーカー、豆、電気ケトルへ進む。スペック一覧より先に使う場面を置き、複数の商品を共通の飲用習慣で結びつけていると読める。
浮いた黒いナビで映像の面積を残す
PC上部の中央に小さな黒い楕円形ナビゲーションを置き、ロゴとカートを左右へ離している。背景の手元映像を広く保ちつつ、商品・ブランド・サポートへ進める配置だ。下部の白い紹介面への切り替えが文章を読む区切りになる。
説明文の中にも道具の形を差し込む
ブランド紹介の大きな文章には、ケトルや商品の小さな切り抜きが文字と同じ流れで入る。抽象的な説明を続けながら、扱う商品の形を忘れさせない表現だ。写真を独立した飾りにせず、読み進めるリズムの一部として使っている。
商品を知る入口と購入入口を分ける
商品紹介では詳細を見る入口が繰り返され、コーヒーには購入への入口も並ぶ。末尾には配送・返品・保証・動画ガイドなどを整理する。興味を深める段階と購入条件を調べる段階を分けた構造で、決済完了の使いやすさは未検証だ。
道具と消耗品を同じ習慣で紹介する
国内の茶器・調理用品店でも、器具だけを並べず、実際に淹れる場面から茶葉や豆へつなぐ順序を応用できる。映像の雰囲気に任せず、対応する消耗品、手入れ、保証を別の情報として示せる商品構成であることが導入条件になる。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
一つの使用場面を入口に、器具と消耗品を順番に紹介する。ブランド説明にも実物の小さな写真を添え、抽象語だけのページにしない。
そのまま真似する前に
動画を大きくすると型番や価格が後方へ移る。目的の商品が決まっている来訪者には、商品一覧とサポートを常に探せる位置へ置く。
次に見ておきたい参考
一覧へ →海外海外The Salad Project
飲食 / 写真中心
情報の順序
飲食 / 写真中心
The Salad Project
食べる人と食材の接写を左右に並べ、日常の昼食から商品選択・受け取り方へつなぐサラダバー。
設計の見どころ
最初はサラダを食べる場面と食材を見せ、続いてサラダとプロテインボウルの選択、アプリの案内へ進む。会社説明を先に長く置かず、今日何を食べるかという来訪者の判断に近い順序だと読める。メニュー内には具材の区分や栄養情報への入口もある。
詳しい解説を読む →公式サイトを見る ↗国内THE BUTTER
飲食 / 写真中心
素材と料理を二枚でつなぐ
飲食 / 写真中心
THE BUTTER
バターの接写とトーストを二分画面で並べ、素材と提供体験を同時に見せる店舗サイト。
設計の見どころ
冒頭はバターの表面を写した接写と、皿に盛られたトーストを左右に配置する。中央に大きな店名を重ねることで、何を使い、どんな状態で提供する店かを一画面で伝えている。食材の写真と完成品の写真を一組にする方法が明快だ。
詳しい解説を読む →公式サイトを見る ↗