国内KUSUMUSUBI
飲食 / タイポグラフィ
米屋の看板と一皿を左右に分ける
飲食 / タイポグラフィ
KUSUMUSUBI
左に米屋の看板、右に塩むすびと産地を置き、一品と土地の関係を見せる。
設計の見どころ
PCでは左側に紙のような背景と店の印を大きく置き、右側に黒い皿の三つのおむすびを配置する。上端を横断する大きな英字も看板の役割を持つ。左のブランドと右の具体的な商品を分けることで、品数の少なさをむしろ個性として見せている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 国内 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
一杯の器をブランドの象徴にする
PC冒頭では黒い背景に白い線で描かれた大きな器が現れ、MENSHOの文字と共にブランドを印象づける。料理写真を並べる前に器そのものを象徴として扱う構成で、一般的な飲食店のメニュー一覧とは異なる始まり方になっている。
黒い舞台にロゴとリンクを残す
上端には白い手書き風ロゴとLocation、Menu、News、Journal、Aboutが並ぶ。器の立体表現の面積を広く取りつつ、店舗や料理を探す入口は文字で残している。背景と文字の明暗差を強くして情報量を抑える設計が読み取れる。
素材の思想と実際のメニューを分ける
公開本文ではFarm to Bowlの考え方と代表の紹介に続き、醤油、鶏白湯、鴨抹茶などの料理名と提供店が示される。抽象的な理念だけを語り続けず、実際に食べられる一杯へ結びつける編集が参考になる。料理の評価自体は検証していない。
地域と店舗名から行き先を選ばせる
店舗の紹介には地名、店舗名、短い特徴とMAPの表示がある。世界に広がるブランドを一枚の紹介にまとめながら、国内の具体的な訪問先も探せる構成だ。多店舗のサイトでは共通の世界観と店舗ごとの違いを分けて管理する際に応用できる。
小さな店では演出の長さを調整する
ひとつの料理や器に個性がある店なら、冒頭の主役を絞る考え方は取り入れやすい。ただし来訪者が今すぐ営業時間を知りたい場面もある。立体表現の再現を目的にせず、店探しとメニュー閲覧の入口を先に確保して制作したい。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
店を象徴する器や商品を一つ決め、ブランドの印象を作った後に実際のメニューと提供店舗へ結びつける。写真の数より、何を覚えて帰ってほしいかを先に決めたい。
そのまま真似する前に
冒頭には動きのある立体表現がある。低速回線や動きを抑えたい閲覧者にも店情報が届くよう、静止画像への代替と読込中に使えるナビを用意する。
次に見ておきたい参考
一覧へ →国内海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
Madie
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
設計の見どころ
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗海外The Salad Project
飲食 / 写真中心
情報の順序
飲食 / 写真中心
The Salad Project
食べる人と食材の接写を左右に並べ、日常の昼食から商品選択・受け取り方へつなぐサラダバー。
設計の見どころ
最初はサラダを食べる場面と食材を見せ、続いてサラダとプロテインボウルの選択、アプリの案内へ進む。会社説明を先に長く置かず、今日何を食べるかという来訪者の判断に近い順序だと読める。メニュー内には具材の区分や栄養情報への入口もある。
詳しい解説を読む →公式サイトを見る ↗