飲食店ホームページのデザイン見本を、7業態で。

写真の使い方

炭火の焼き台で串を返す手元の写真を、画面の右4割ほどに置きました。写真の左端は地の色へなじませ、文字は写真に重ねていません。

色

焦げ茶に近い黒の地に、生成りの文字。差し色は橙の系統で、予約ボタンには赤みの強い橙、「ご宴会」「営業」などの項目名には明るめの橙を使いました。

• 地
• 文字
• ボタン
• 項目名

予約ボタンの位置

「ネットで席を予約する」を、品書き4行と宴会の人数・営業時間の下に置きました。幹事が予算と人数を確かめてから押す順です。ボタンの横には「24時間受付」と、当日のご予約は電話で受けることを書いています。

メニューの見せ方

五本盛りから宴会コースまでの4品を、品名と税込の価格に分けて1行ずつ並べ、行を罫線で区切りました。宴会コース（飲み放題付き）の4,500円〜（税込）は最後の行です。

スマホで組むなら、最初に置くもの

見出しのすぐ下に品書きの4行を置く想定です。その次に宴会の人数と予約ボタン、写真は品書きの後に回します。

居酒屋・宴会のホームページで、先に載せることを読む

写真の使い方

肉の写真を画面いっぱいに敷いたのは、7つのうちこの見本だけです。左ほど暗く、右ほど写真が見えるように暗幕の濃さを変え、文字は暗い左側に置きました。

色

暗幕の黒に、生成りの文字。差し色は金に近い黄で、予約ボタンと「単品」「コース」などの項目名に使いました。ボタンの文字は焦げ茶です。

• 地
• 文字
• 差し色

予約ボタンの位置

「席を予約する」を、見出しとリードのすぐ下に置きました。ほかの6つは、価格を読んだ後の位置にボタンを置いています。当日のご予約はお電話で、と隣に添えています。

メニューの見せ方

上タン塩・ハラミ・本日のイチボの単品価格と、6,600円・8,800円・13,200円（税込）のコース3段を、画面下の事実欄に1行ずつ書きました。

スマホで組むなら、最初に置くもの

見出し「上タン塩から、イチボまで。」と予約ボタンを先に置く想定です。その次に単品の価格。肉の写真は、文字が読める暗さにして見出しの後ろに残します。

焼肉・ステーキのホームページで、先に載せることを読む

写真の使い方

職人の手のひらに赤身の握りが一貫。この写真を一枚だけ、画面の右半分に置きました。暗幕も文字も重ねていません。

色

明るい生成りの地に、黒に近い文字。差し色は深い緑で、予約ボタンにだけ使いました。見出しは明朝の細い字で、装飾は足していません。

• 地
• 文字
• 差し色

予約ボタンの位置

「ご予約に進む」を、おまかせの金額・二部制の時刻・席数の下に置きました。条件を読んでから押す順です。ボタンの下に「前日までのご予約をお願いしております」と書いています。

メニューの見せ方

品書きは載せていません。おまかせ16,500円（税込・お飲み物別途）と、17:30／20:30の二部制、カウンター8席のみ、の3行だけです。

スマホで組むなら、最初に置くもの

見出しの後に、おまかせの金額と二部制の時刻を置く想定です。その次に予約ボタン、握りの写真はその下です。

寿司・和食・割烹のホームページで、先に載せることを読む

写真の使い方

パンが並ぶショーケースの写真を、右に縦長で置きました。ヘッダーの下から画面の下まで垂直に落とし、文字は重ねていません。

色

クリームがかった明るい地に、こげ茶の文字。差し色は焼き色のような橙で、焼き上がり時刻の枠・項目名・予約ボタンに使いました。見出しと店名は丸みのあるゴシックです。

• 地
• 文字
• 差し色

予約ボタンの位置

予約は席ではなく、パンの取り置きにしました。「受け取り時間を選んで予約する」をパンの値段とイートインの下に置き、「前日20:00まで受付。お支払いは店頭で承ります」と添えています。

メニューの見せ方

焼き上がりの3つの時刻（8:00・11:00・15:00）を、見出しとリードの下に枠で囲んで、見出しに次ぐ大きさの字で出しました。パンの値段は、クロワッサン280円（税込）を含む3品を1行にまとめました。イートイン12席と、コーヒーとラテの値段も書いています。

スマホで組むなら、最初に置くもの

見出しとリードの後に、焼き上がり時刻の枠を置く想定です。その次に取り置きのボタン、写真は後に回します。

カフェ・ベーカリーのホームページで、先に載せることを読む

写真の使い方

らぁ麺の丼の写真を右に置き、左の黄色の面と並べました。写真には文字を乗せていません。

色

黄色の面に、太いゴシックの黒い見出し。ボタンは黒地に黄色の文字です。最初の画面を黄色と黒の2色で組み、下の段は黒の地にしました。

• 面
• 文字・下の段

予約ボタンの位置

予約のボタンは置いていません。主なボタンは「いまの待ち時間を見る」で、券売機の品書きの下、黄色の面の中にあります。待ち時間は券売機の発券数から10分ごとに更新する前提です。

メニューの見せ方

券売機の4品（醤油らぁ麺980円・特製醤油らぁ麺1,380円・和え玉250円・日替わり定食1,000円、すべて税込）を2列に並べ、「券売機の品書き（税込）」と見出しを付けました。

スマホで組むなら、最初に置くもの

見出し、「スープが無くなったら、その日は終わりです。」、券売機の4品、待ち時間のボタンの順に置く想定です。最初の画面は黄色の面だけで埋めます。

ラーメン・定食・食堂のホームページで、先に載せることを読む

写真の使い方

パスタの写真を右に縦長で置き、その下に一皿の説明（タリアテッレのラグー）を1行添えました。写真に文字は重ねていません。

色

少しくすんだ生成りの地に、黒に近い文字。差し色は赤茶で、予約ボタンと表の項目名に使いました。店名は欧文のセリフ体、見出しは明朝、本文はゴシックです。

• 地
• 文字
• 差し色

予約ボタンの位置

「席を予約する」を、5行の表のすぐ下に置きました。ディナーはコースのみ・前日までの予約なので、条件を読んでから押す順です。当日のお席はお電話で、と添えています。

メニューの見せ方

ランチ2,200円〜・ディナー6,600円〜（税込）・ワイン・席数・営業の5行を、罫線の表にまとめました。ワインはグラスとボトルの下限の値段まで書いています。

スマホで組むなら、最初に置くもの

見出し「昼はアラカルト、夜はコースで。」の後に、表のランチとディナーの2行を置く想定です。その次に予約ボタンです。

イタリアン・フレンチのホームページで、先に載せることを読む

写真の使い方

バックバーの写真を右の3分の1ほどに置き、左端を黒へなじませました。文字は写真の外に置いています。

色

ほとんど黒の地に、明朝の細い見出し。差し色は琥珀色で、飲み物の値段・項目名・ボタンに使いました。ボタンの文字は焦げ茶です。

• 地
• 文字
• 差し色

予約ボタンの位置

「今夜の空席を見る」を、チャージ・お会計の目安・営業・お支払いの事実欄の下に置きました。ボタンの横には「ご予約なしでもご利用いただけます。2名様以上は事前にご連絡ください」と書いています。

メニューの見せ方

飲み物は3行の表にし、右の列に「一杯あたり（税込）」の見出しを付けて金額だけを並べました。その下に、チャージ1,100円と、お会計の目安（お一人4,000〜6,000円ほど・税込）を書いています。

スマホで組むなら、最初に置くもの

見出し「カウンター9席の、静かなバーです。」の後に、お会計の目安と空席のボタンを置く想定です。ビルの階とエレベーターの位置は、その下に続けます。

バー・専門店のホームページで、先に載せることを読む