海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
Madie
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
設計の見どころ
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
国内
国内
DESIGN NOTES
このサイトの設計を読み解く。
情報の順序
最初はサラダを食べる場面と食材を見せ、続いてサラダとプロテインボウルの選択、アプリの案内へ進む。会社説明を先に長く置かず、今日何を食べるかという来訪者の判断に近い順序だと読める。メニュー内には具材の区分や栄養情報への入口もある。
視覚的な優先順位
PCの冒頭では、人物の手元とトウモロコシの接写が画面を二分する。中央の短い白文字を挟み、左右の画像が一つの食事体験をつくる。ナビゲーションは左上の小さな白い面にまとめ、写真の面積を残している。詳細より食欲を先に動かす構成だ。
写真と商品の伝え方
料理の完成形だけでなく、食べる手元と素材の粒が分かる接写を組み合わせている。注文前の感覚的な期待は写真でつくり、具材のベース・トッピング・ドレッシングなどはDOM上で別に整理されている。写真に説明責任を全て負わせない点が参考になる。
行動への導線
上部は注文とブランドを知る入口を分け、注文側にはアプリ・受け取り・配達・ケータリングが用意されている。商品にも注文への入口が繰り返される。購入意思のある人を読み物へ回し続けず、利用方法を選ばせる設計と考えられる。注文完了までは検証していない。
日本の事業に取り入れる条件
持ち帰りや配達がある飲食店では、料理写真の直後に受け取り方法を置く構造を応用できる。先に商品の魅力を伝え、次に利用可能な手段を示すのが要点。複数の注文先を設ける場合は、対応店舗や受付時間の違いを日本語で明確にする必要がある。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
完成した料理と食材の接写を一組にし、その下でメニューと受け取り方を選べるようにする。注文先を増やす前に、来店客が使う経路を整理したい。
そのまま真似する前に
大きな写真は商品説明を後方へ押し出す。ランチ客が急いでいる場面を考え、価格・場所・営業時間へすぐ進める入口を別に確保する。
次に見ておきたい参考
一覧へ →海外国内THE BUTTER
飲食 / 写真中心
素材と料理を二枚でつなぐ
飲食 / 写真中心
THE BUTTER
バターの接写とトーストを二分画面で並べ、素材と提供体験を同時に見せる店舗サイト。
設計の見どころ
冒頭はバターの表面を写した接写と、皿に盛られたトーストを左右に配置する。中央に大きな店名を重ねることで、何を使い、どんな状態で提供する店かを一画面で伝えている。食材の写真と完成品の写真を一組にする方法が明快だ。
詳しい解説を読む →公式サイトを見る ↗国内手で持つ大きさから味を想像させる
飲食 / 写真中心
はちとワルツ
カステラサンドを持つ手元と蜂の線画で、食感と秋保の店の雰囲気を伝える。
設計の見どころ
冒頭は両手でカステラサンドを持つ写真が主役で、断面の厚さと餡の層が見える。白い縦方向の店名を右に置き、左側には秋保温泉の店であることを小さく添えている。完成品を孤立させず、人の手を物差しにして大きさを伝える構成だ。
詳しい解説を読む →公式サイトを見る ↗