海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
Madie
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
設計の見どころ
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
国内
DESIGN NOTES
このサイトの設計を読み解く。
料理を見せた直後に三店舗へ分岐する
現行の公式ページはCofocoグループ内にあり、料理の種類を示す見出し、ピザの映像、三つの地域名の順に並ぶ。各店の情報を一度に詰め込まず、まず利用する地域を選ばせる短い入口として構成されている。店舗別ページの予約完了は未確認だ。
青と白の帯で地域名を見つけやすくする
白い背景に青い顔のマークと縦長の見出しを置き、その下へ大きな料理映像を広げている。店舗選択の三列は青と白を交互に使う。映像の複雑な色から単純な色面へ切り替えることで、次に選ぶ項目の位置が分かりやすい構成だ。
出来上がった料理だけでなく受け渡しも見せる
冒頭の映像では箱に入ったピザが大きく映り、商品そのものと持ち帰りの場面を同時に示す。写真の説明文を長く置く代わりに、食べるまでの近い場面を伝えていると読める。ただし映像だけから各店舗の提供方法や対応範囲は断定できない。
共通の行動をフッターへまとめる
地域の分岐より下には、ギフト、テーブル予約、グループ利用、採用などの共通リンクがまとめられている。店舗選びとグループ共通の用件を分けている点が参考になる。一方で本文が短いため、店名だけで目的地を判断できる利用者に向いた入口だ。
複数店舗では所在地の補足を足す
国内の多店舗飲食店にも、料理の魅力を一画面で示してから地域へ分岐する順序を応用できる。地名の知識がない旅行客も想定するなら、最寄り駅や住所、各店の違いを短く添える必要がある。ブランドの印象と店舗選択の実用性を両立させたい。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
複数店舗の入口では、共通の商品を見せた直後に地域別の選択肢を置く。店舗の詳細と、予約・ギフトなどグループ共通の用件は分けて整理する。
そのまま真似する前に
地域名だけの分岐は土地勘のある人向けになる。駅名、地図、店ごとの利用条件を補い、映像から実店舗へ移る判断材料を確保したい。
次に見ておきたい参考
一覧へ →海外海外The Salad Project
飲食 / 写真中心
情報の順序
飲食 / 写真中心
The Salad Project
食べる人と食材の接写を左右に並べ、日常の昼食から商品選択・受け取り方へつなぐサラダバー。
設計の見どころ
最初はサラダを食べる場面と食材を見せ、続いてサラダとプロテインボウルの選択、アプリの案内へ進む。会社説明を先に長く置かず、今日何を食べるかという来訪者の判断に近い順序だと読める。メニュー内には具材の区分や栄養情報への入口もある。
詳しい解説を読む →公式サイトを見る ↗国内THE BUTTER
飲食 / 写真中心
素材と料理を二枚でつなぐ
飲食 / 写真中心
THE BUTTER
バターの接写とトーストを二分画面で並べ、素材と提供体験を同時に見せる店舗サイト。
設計の見どころ
冒頭はバターの表面を写した接写と、皿に盛られたトーストを左右に配置する。中央に大きな店名を重ねることで、何を使い、どんな状態で提供する店かを一画面で伝えている。食材の写真と完成品の写真を一組にする方法が明快だ。
詳しい解説を読む →公式サイトを見る ↗