ビストロサイト（デモサイト）

Tomoshibi

神楽坂の路地裏にある、炭火料理と自然派ワインのビストロを想定したデモサイトを制作しました。夕方から夜へ時間が進むように、一皿・ワイン・カウンター・コースを順に見せ、最後に予約へつなげる1ページ構成にしています。

別のタブで開きます

このサイトについて

炭火の香りと自然派ワインを楽しむ、気取らない小さなビストロのサイトを制作しました。

黒に近い深い茶色を基調に、テラコッタの差し色と明朝体の縦書きコピーで、灯りのともる夜の空気感を表現しています。ファーストビューでは「日が暮れて、灯りがともるころ。」というコピーと、炭火の前で出される一皿の写真で世界観を伝え、17:00から23:00まで時間が進むように各セクションを並べました。

時間の流れで読み進める構成

各セクションに「17:00」「20:00」といった時刻とシーン名を添え、夕方から夜へ進むように見せました。ページを読むこと自体が、お店で過ごす時間の追体験になります。
写真と明朝体で、夜の余韻をつくる

料理・グラス・カウンターの写真は暖色の光でそろえ、見出しは明朝体に統一しました。背景色も、暗い・明るい・ワイン色と切り替えて、場面の変化にメリハリをつけています。
どの場面からでも予約できる導線

ヘッダーとスマートフォン表示の「席を予約する」ボタンを常に見える位置に置き、コース紹介や最後の予約セクションにも電話・WEB予約への入口を用意しました。

トップから順に、どんな順番で情報を見せているかをまとめました。画像を押すと、セクション全体を拡大して見られます。

01 / 05
TOP

縦書きのキャッチコピーとアーチ型に切り抜いた一皿の写真で、炭火のビストロらしい夜の世界観を最初の画面で伝えました。
02 / 05
今夜の黒板

日替わりのメニューを黒板に見立てて、料理名・ひと言・価格を一覧にしました。メニューの雰囲気と価格感をひと目で確認できます。
03 / 05
Wine

自然派ワインをグラスで楽しめることを、4種類のグラスの写真と「泡・軽やか・冒険・じっくり」の気分の選び方で紹介しました。ワインに詳しくなくても頼みやすくしています。
04 / 05
Counter

火の見えるカウンター席の魅力を、調理風景の写真とともに伝えました。ひとりでも立ち寄りやすいお店の雰囲気を見せています。
05 / 05
Course・Reserve

記念日向けのコースを、内容と価格を添えたカードで紹介しました。コースから予約への入口をすぐ隣に置いています。