海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
Madie
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
設計の見どころ
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
国内
DESIGN NOTES
このサイトの設計を読み解く。
手で持つ大きさから味を想像させる
冒頭は両手でカステラサンドを持つ写真が主役で、断面の厚さと餡の層が見える。白い縦方向の店名を右に置き、左側には秋保温泉の店であることを小さく添えている。完成品を孤立させず、人の手を物差しにして大きさを伝える構成だ。
輪の線と曲面で画面をつなぐ
上部の金色に近い細い輪の線と、写真の下辺に続く丸い境界が柔らかな印象を作る。次の区画には縦書きの短文と蜂や花のイラストが置かれる。写真だけで押し切らず、包み紙にも転用できそうな線画をサイトの一貫した手がかりにしている。
三口の食べ方で商品を説明する
商品紹介ではカステラ、餡、飲み物という食べ進め方が説明される。原料名を列挙するだけでなく、食べる時間の順番で特徴を伝えている点が参考になる。製造についての話も養蜂への入口と結びつけ、食材の背景に興味がある人へ深掘り先を用意する。
味の種類から秋保への来店へ
公開本文には粒餡、ずんだ餡、みるく餡の説明があり、その後に複合施設内の所在地と営業時間、定休日、駐車場台数が続く。店の雰囲気を見た人が味を選び、実際に出かけられるか確かめる順序になっており、観光地の小さな店舗に合う。
土産と店内利用を分けて案内する
日持ちする土産としての説明と、イートイン限定メニューの存在を分けて伝えている。観光客と近隣客では買い方が異なるため、同じ商品ページでも利用場面を整理するとよい。取り入れる際は持ち歩き条件や売切れ終了などの実務情報も併記したい。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
手に持った商品の写真でサイズと層を見せ、食べ進め方を短く説明する。その後に味の選択肢と駐車場を含む来店情報を並べる流れが小さな菓子店に使える。
そのまま真似する前に
淡い金色の細線や小さな文字は背景によって読み取りにくくなりやすい。雰囲気を担う装飾と、営業時間や価格など必ず読む情報で文字の強さを分けたい。
次に見ておきたい参考
一覧へ →海外海外The Salad Project
飲食 / 写真中心
情報の順序
飲食 / 写真中心
The Salad Project
食べる人と食材の接写を左右に並べ、日常の昼食から商品選択・受け取り方へつなぐサラダバー。
設計の見どころ
最初はサラダを食べる場面と食材を見せ、続いてサラダとプロテインボウルの選択、アプリの案内へ進む。会社説明を先に長く置かず、今日何を食べるかという来訪者の判断に近い順序だと読める。メニュー内には具材の区分や栄養情報への入口もある。
詳しい解説を読む →公式サイトを見る ↗国内THE BUTTER
飲食 / 写真中心
素材と料理を二枚でつなぐ
飲食 / 写真中心
THE BUTTER
バターの接写とトーストを二分画面で並べ、素材と提供体験を同時に見せる店舗サイト。
設計の見どころ
冒頭はバターの表面を写した接写と、皿に盛られたトーストを左右に配置する。中央に大きな店名を重ねることで、何を使い、どんな状態で提供する店かを一画面で伝えている。食材の写真と完成品の写真を一組にする方法が明快だ。
詳しい解説を読む →公式サイトを見る ↗