SMALLSHIFT
← サイト事例に戻る

CASE STUDY / 匿名制作事例 / 国内

飲食店のWebサイト

料理の魅力と、メニュー・アクセス・電話をひとつのサイトに。来店前に知りたい情報を整理した飲食店HPです。

制作内容を見る ↗
CONTOUR / 匿名制作事例
とんかつ店HPの試作画面。料理を大きく見せるトップページ
制作中の制作例

店舗情報・一部文言を匿名化した制作画面。料理写真は生成イメージです。

店名・社名・ロゴ・所在地などを伏せた画面です。掲載画像から実際の事業者への連絡はできません。

DESIGN NOTES

このサイトの設計を読み解く。

01

料理の断面を、最初の情報にする

トップは料理が画面の大部分を占める構成です。皿全体を遠くから見せるより、衣や断面が分かる距離で、何を食べる店なのかを伝えています。料理が来店理由になる飲食店では、店の説明を長く置くより早く主力商品を見せる方法が使えます。

02

短いコピーを、写真の暗い余白に置く

見出しは下部左寄りに配置し、料理の中心から外しています。主役を覆わず、背景が比較的暗い場所に白文字を載せる設計。写真の差し替えでは、この余白とコントラストも同時に確認する必要があります。

03

写真の量に合わせ、文字の量を絞る

最初の画面には価格や説明を詰め込まず、店名と短い言葉、ナビゲーションに限定。見て興味を持つ場面と、メニュー・アクセスを調べる場面を分けています。ただし写真の印象だけでは営業時間や予算は伝わらず、次の情報への近さが重要です。

04

来店前の確認を、同じサイトに集める

制作記録ではメニュー、店舗情報、アクセスへ進めるナビゲーションを用意しています。食べたいと思った後の「予算は合うか」「行ける場所か」という疑問に対応する役割。画面の華やかさと同時に、実用情報へ迷わず進めるかを確認します。

05

写真の性質を、実績と混同させない

この画面の料理は生成イメージで、実店舗の料理写真ではありません。試作段階では写真の配置や余白の検討に使っています。本番では実際の商品と食い違わない写真に差し替え、電話・地図・営業時間の情報を揃えることが完成条件になります。

APPLY TO YOUR PROJECT

自分の制作に取り入れるなら

主力の商品を大きく見せ、その次にメニューとアクセスへ進める。写真を選ぶ時は料理の魅力だけでなく、文字を載せる余白とスマホの切り取りまで考えます。

そのまま真似する前に

掲載画面は匿名化した制作中の試作です。生成した料理を実際の商品・実績として扱わず、公開時は実写真と店舗情報の確認が必要です。

担当範囲と確認状況

ページ構成・デザイン・Web実装・スマートフォン対応

試作サイトで表示と導線を確認しています。実写真への差し替えと店舗情報の最終確認が必要な段階です。来店数などの運用成果は未確認です。

次に見ておきたい参考

一覧へ →
とんかつ店HPの試作画面。料理を大きく見せるトップページ