国内一杯の器をブランドの象徴にする
飲食 / タイポグラフィ
MENSHO
器の立体表現から世界各地の店舗と一杯のメニューへつなぐ、ラーメンブランドのサイト。
設計の見どころ
PC冒頭では黒い背景に白い線で描かれた大きな器が現れ、MENSHOの文字と共にブランドを印象づける。料理写真を並べる前に器そのものを象徴として扱う構成で、一般的な飲食店のメニュー一覧とは異なる始まり方になっている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 国内 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
細い写真列で夜の場面を切り取る
冒頭の画面中央には、食事や会話を楽しむ人物の縦長写真が横一列に並ぶ。大きな全面写真ではなく、細い帯として切り取ることで周囲に黒い余白が残る。飲み物の写真だけで店を説明せず、そこで過ごす人の場面を連ねて夜の雰囲気を作っている。
黒い余白に白い数字のロゴを残す
写真列の中央に白い数字のロゴとELEVENの文字が置かれ、暗い写真の間で強い目印になる。画面下部には細い枠の予約ボタンと音声のアイコンが見える。主役、操作、余白をはっきり分け、少ない要素でも店名と行動の入口を失わない配置になっている。
一文だけの画面で物語を始める
本文側の画面は暗い茶色へ変わり、中央に食後の時間を示す短い一文だけが置かれる。長い説明をすぐに見せず、画面を一つの場面として使う演出だ。来店に必要な情報とは別に、どんな気分で楽しむ場所なのかを言葉の少なさで伝えている。
物語を飛ばせる入口を同居させる
物語の画面下部にはSKIP ORIGIN STORYがあり、演出を見たい人と情報へ進みたい人を分けられる。冒頭には予約の入口も残されている。ストーリーを強く打ち出す店でも、すでに利用目的が決まっている客へ別の経路を用意する考え方が参考になる。
カクテルは材料と価格で具体化する
公開テキストのカクテル一覧には名前、価格の数字、材料が付いている。雰囲気の強い導入の後で、実際に何を頼めるかを具体的に知れる構造だ。催しの最新情報はInstagramやFacebookへ案内され、電話とメールの連絡先も本文で確認できる。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
人物の写真列と余白だけでも、夜の店の空気感は表現できる。物語を見せる場合は、予約やメニューへ直接進みたい人の入口を同じ画面に残したい。
そのまま真似する前に
暗い映像や段階的な物語は、メニューを急いで探す人には時間がかかる可能性がある。音声アイコンの動作や予約完了は未検証で、演出の実装品質とは分けて参考にする。
次に見ておきたい参考
一覧へ →国内海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
Madie
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
設計の見どころ
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗海外The Salad Project
飲食 / 写真中心
情報の順序
飲食 / 写真中心
The Salad Project
食べる人と食材の接写を左右に並べ、日常の昼食から商品選択・受け取り方へつなぐサラダバー。
設計の見どころ
最初はサラダを食べる場面と食材を見せ、続いてサラダとプロテインボウルの選択、アプリの案内へ進む。会社説明を先に長く置かず、今日何を食べるかという来訪者の判断に近い順序だと読める。メニュー内には具材の区分や栄養情報への入口もある。
詳しい解説を読む →公式サイトを見る ↗