国内一杯の器をブランドの象徴にする
飲食 / タイポグラフィ
MENSHO
器の立体表現から世界各地の店舗と一杯のメニューへつなぐ、ラーメンブランドのサイト。
設計の見どころ
PC冒頭では黒い背景に白い線で描かれた大きな器が現れ、MENSHOの文字と共にブランドを印象づける。料理写真を並べる前に器そのものを象徴として扱う構成で、一般的な飲食店のメニュー一覧とは異なる始まり方になっている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 国内 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
品名と個数と価格を同じ行で見せる
本文画面では複数列の文字一覧に品名、個数、価格、短い材料説明が並ぶ。写真カードを一品ずつ置く構成ではなく、紙のメニューに近い密度で多くの選択肢を見渡せる。注文内容や人数に合う量を比べたい人へ、具体的な数字を直接渡している点が特徴だ。
休業のお知らせを最上段に置く
画面最上段にはオレンジ色の帯で休業期間のお知らせを置く。店の雰囲気や料理を見る前に、今利用できるかに関わる条件が目に入る配置だ。期間限定の営業変更は本文の奥へ埋めず、どの目的で訪れた人にも届く位置に置く考え方が参考になる。
上部の料理分類をメニューの目次にする
白い上部帯には寿司、アジア料理、ポケ、サラダ、デザート、飲み物、連絡先が横に並ぶ。長い品目一覧を読む前に、食べたい料理の種類から進める目次になる。メニューが多い店では、文章量を減らすだけでなく探す入口を明確にすることが重要になる。
受賞表示の後で具体的な料理へ進む
冒頭には店の窓を背景に受賞に関する大きな表示があり、その下ですぐ寿司の紹介へ移る。評価の見せ方と実際に選べる料理を近い距離に置く構成だ。今回の分析では受賞の真偽を保証せず、信頼を示す表示から具体的な商品情報へつなぐ順序に注目している。
セットと追加具材まで本文に収める
公開テキストには盛り合わせの内容、追加の調味料、選べる具材なども記載される。基本の料理名だけでは分からない注文の組み立て方を補う情報だ。特にセットやカスタマイズがある場合は、何が含まれ何を追加できるかを文字で明確にする方法が使える。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
料理の種類が多い店は、品名・量・価格を揃えて文字一覧にすると比較しやすい。分類の目次と営業変更のお知らせを上部に置き、訪問者が必要な条件へ早く届くようにしたい。
そのまま真似する前に
PCの複数列は文字が小さく見えるため、スマートフォンや拡大表示での読みやすさを別に確認したい。価格や休業期間は更新が必要で、現在の営業や掲載された受賞を保証する分析ではない。
次に見ておきたい参考
一覧へ →国内海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
Madie
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
設計の見どころ
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗海外The Salad Project
飲食 / 写真中心
情報の順序
飲食 / 写真中心
The Salad Project
食べる人と食材の接写を左右に並べ、日常の昼食から商品選択・受け取り方へつなぐサラダバー。
設計の見どころ
最初はサラダを食べる場面と食材を見せ、続いてサラダとプロテインボウルの選択、アプリの案内へ進む。会社説明を先に長く置かず、今日何を食べるかという来訪者の判断に近い順序だと読める。メニュー内には具材の区分や栄養情報への入口もある。
詳しい解説を読む →公式サイトを見る ↗