DESIGN NOTES
PC画面は左右に分かれ、右側には青と白の縞模様がある店内写真、左側には文字情報が配置される。本文位置でも右の写真が残り、左は商品写真とメニューへ変わる。料理や利用条件を読みながら、店の空間を見失わない構成がこのサイトの特徴になっている。
ロゴ、見出し、細い枠線、ボタンに青緑を使い、店内の壁や食器の色とそろえる。白い背景には入れ子状の細い枠があり、情報の区画を穏やかに分ける。実店舗の内装をそのまま配色の基準にすることで、ウェブと現地の印象をつなぐ方法が参考になる。
冒頭左側では個人向けの受取・配達とケータリングを分け、それぞれ準備時間の目安を添える。急いで一食を頼む人と、先の日程にまとめて注文する人を区別する情報だ。注文ボタンを二つ並べるだけでなく、選ぶ基準となる条件を近くに示している。
本文には非常に大きなMENUの文字があり、その下にクレープ、朝食、スープやサンドイッチなどが罫線付きで並ぶ。右端のプラス記号が詳細を開く入口を示す。料理の種類を先に見渡し、関心のある範囲へ進める形で長い品目一覧を整理している。
右側の写真の下隅にFIND USの小さな案内を置き、住所への手掛かりを残す。左側にも営業時間や建物のイラストがあり、注文だけでなく来店の判断を支える。店の印象を伝える写真の中へ、現地に向かうための情報を小さく組み込んでいる。
APPLY TO YOUR PROJECT
内装に特徴のある飲食店は、その色をサイト全体の罫線や文字へ展開できる。注文経路は受取時間や用途で分けると、利用者が自分に合う入口を選びやすい。
左右に分かれるPC表示は、狭い画面では別の配置が必要になる。表示される準備時間は実注文の保証とは扱わず、メニューの開閉や注文先での条件確認も別途必要。
海外飲食 / 分割レイアウト
外観と食卓を二つの入口にする
飲食 / 分割レイアウト
パブの外観とレストランの食卓を左右に並べ、利用目的に合わせて入口を選ばせる。
冒頭は通りから見たパブの外観と、白いクロスを掛けたレストランの食卓を左右に並べる。各写真の中央に用途の名前があり、同じ店の二つの使い方が一目で分かる。サービスの違いを説明文だけで伝えず、利用する場所の写真を入口として使っている。
詳しい解説を読む →公式サイトを見る ↗
国内一杯の器をブランドの象徴にする
飲食 / タイポグラフィ
器の立体表現から世界各地の店舗と一杯のメニューへつなぐ、ラーメンブランドのサイト。
PC冒頭では黒い背景に白い線で描かれた大きな器が現れ、MENSHOの文字と共にブランドを印象づける。料理写真を並べる前に器そのものを象徴として扱う構成で、一般的な飲食店のメニュー一覧とは異なる始まり方になっている。
詳しい解説を読む →公式サイトを見る ↗
海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗