メインコンテンツへ移動

飲食店専門のホームページ制作

作るとこうなります。7業態分、そのまま出します。

業態ごとに、書体も余白も写真の使い方も変えています。同じ型に色だけ替えたものは一つもありません。それぞれ何を意図してその形にしたかまで書いたので、うちの店ならどうなるかの見当がつくはずです。

  • 居酒屋のデモサイトの画面。架空の店舗「灯り家」。左に価格つきの品書き、右に焼き台の写真を置いたファーストビュー

    制作サンプル|架空の店舗です

    居酒屋・宴会原寸で開く

  • 焼肉店のデモサイトの画面。架空の店舗「炭乃座」。網の上で焼ける肉の写真を全面に敷き、見出しと単品価格を重ねたファーストビュー

    制作サンプル|架空の店舗です

    焼肉・ステーキ原寸で開く

  • 鮨店のデモサイトの画面。架空の店舗「佐久良」。明朝体の見出しと、黒い長皿に並ぶ握りの写真で構成したファーストビュー

    制作サンプル|架空の店舗です

    寿司・和食・割烹原寸で開く

  • ベーカリーカフェのデモサイトの画面。架空の店舗「こむぎ日和」。左に焼き上がり時刻の枠、右にパンが並ぶショーケースの写真を置いたファーストビュー

    制作サンプル|架空の店舗です

    カフェ・ベーカリー原寸で開く

  • ラーメン店のデモサイトの画面。架空の店舗「八重門」。黄色の面に太いゴシックの見出しと券売機の品書きを置き、右にらぁ麺の丼を並べたファーストビュー

    制作サンプル|架空の店舗です

    ラーメン・定食・食堂原寸で開く

  • イタリア料理店のデモサイトの画面。架空の店舗「Osteria Vento」。左に価格表、右にパスタの写真を置いたファーストビュー

    制作サンプル|架空の店舗です

    イタリアン・フレンチ原寸で開く

  • バーのデモサイトの画面。架空の店舗「琥珀堂」。黒地に細い明朝体の見出しと、右にバックバーの写真を置いたファーストビュー

    制作サンプル|架空の店舗です

    バー・専門店原寸で開く

※ 掲載写真はイメージです。

居酒屋のデモサイトの画面。架空の店舗「灯り家」。左に価格つきの品書き、右に焼き台の写真を置いたファーストビュー

制作サンプル|架空の店舗です

原寸で開く※ 掲載写真はイメージです。

01居酒屋・宴会

小鉢から〆まで頼む順に読める品書きにする

灯り家あかりや)/カウンターと個室を持つ居酒屋。宴会の問い合わせは多いが、コースの内容と総額を電話で聞かれるたびに手が止まる、という前提で組んだ。

居酒屋・宴会で、この形にした理由(4点)
01
ファーストビューに価格つきの品書きを4行置き、幹事が最初の画面で予算を判断できるようにした
02
「4名様〜最大24名様」まで書き、人数の問い合わせを先に潰した
03
ラストオーダーを営業時間の中に入れた。23:50に来られて断る回数が減る
04
写真は料理の卓を右一面に。串も鍋も〆も同時に見えるカットを選んだ
焼肉店のデモサイトの画面。架空の店舗「炭乃座」。網の上で焼ける肉の写真を全面に敷き、見出しと単品価格を重ねたファーストビュー

制作サンプル|架空の店舗です

原寸で開く※ 掲載写真はイメージです。

02焼肉・ステーキ

単品の価格まで先に出して客単価の不安を消す

炭乃座すみのざ)/一頭買いではなく部位を指定して仕入れる焼肉店。客単価が高く、価格が分からないことを理由に候補から外れる、という前提で組んだ。

焼肉・ステーキで、この形にした理由(4点)
01
生肉の断面が見えるカットを画面いっぱいに敷いた。焼肉は肉の見た目で選ばれる
02
コースだけでなく上タン塩・ハラミ・イチボの単品価格を出した。平日2名の客はここで判断する
03
暗幕の濃度を上から下へ変え、白い文字が読める明るさを写真の上で確保した
04
見出しを「上タン塩から、イチボまで」にして、下の単品の欄と同じ品名でそろえた。アイキャッチは業界用語の「部位指定仕入れ」をやめ、客が探している「個室あり」にした
鮨店のデモサイトの画面。架空の店舗「佐久良」。明朝体の見出しと、黒い長皿に並ぶ握りの写真で構成したファーストビュー

制作サンプル|架空の店舗です

原寸で開く※ 掲載写真はイメージです。

03寿司・和食・割烹

余白で格を出し二部制という条件を予約前に伝える

鮨 佐久良すし さくら)/カウンター八席、おまかせのみの鮨店。二部制と前日までの予約という条件を、来店前に理解してもらう必要がある前提で組んだ。

寿司・和食・割烹で、この形にした理由(4点)
01
情報量を絞り、余白と明朝体だけで格を出した。装飾は足していない
02
「17:30/20:30 の二部制」を事実欄に置き、時間の制約を予約前に伝えた
03
おまかせの金額を税込で先に出し、飲み物が別であることまで書いた
04
写真は一貫だけを大きく。品書きが日ごとに変わる店なので、特定の一皿を主役にしない
ベーカリーカフェのデモサイトの画面。架空の店舗「こむぎ日和」。左に焼き上がり時刻の枠、右にパンが並ぶショーケースの写真を置いたファーストビュー

制作サンプル|架空の店舗です

原寸で開く※ 掲載写真はイメージです。

04カフェ・ベーカリー

焼き上がり時刻を大きく出して来店の時間をずらしてもらう

こむぎ日和こむぎびより)/朝から順に焼くベーカリーカフェ。売り切れと行列が両方起きる前提で、来店時間をならす形にした。

カフェ・ベーカリーで、この形にした理由(4点)
01
焼き上がり時刻だけを枠で囲って大きく出した。この店で最初に見られるのはここ
02
パンの単価とイートインの席数・ドリンク価格まで書いた。パン屋で価格が無いサイトは選ばれない
03
取り置き予約を主CTAにし、受付の締め時間を添えて店頭の待ち時間を前に倒した
04
写真は右一面に垂直に落とし、文字は写真に重ねない。斜めに切った立体モックアップをやめ、他の6枚と同じ正対の画面に揃えた
ラーメン店のデモサイトの画面。架空の店舗「八重門」。黄色の面に太いゴシックの見出しと券売機の品書きを置き、右にらぁ麺の丼を並べたファーストビュー

制作サンプル|架空の店舗です

原寸で開く※ 掲載写真はイメージです。

05ラーメン・定食・食堂

券売機の品書きをそのまま出し空いている時間へ誘導する

らぁ麺 八重門やえもん)/カウンター十席の店。ピークに行列ができ、アイドルタイムは空く。回転ではなく来店時間の分散で売上をならす前提で組んだ。

ラーメン・定食・食堂で、この形にした理由(4点)
01
主CTAを予約ではなく「いまの待ち時間を見る」にした。この業態で押されるのはこちらだから
02
券売機の品書き4品を、いちばん上の黄色い面に置いた。食券の店は入る前に値段が分かることが効く
03
待ち時間は券売機の発券数から自動表示にした。ピーク中に人が更新する運用にしない
04
「スープが無くなったら、その日は終わりです」を見出しの直下に置いた。営業時間の括弧に埋めると読まれず、閉店済みの来店が減らない
イタリア料理店のデモサイトの画面。架空の店舗「Osteria Vento」。左に価格表、右にパスタの写真を置いたファーストビュー

制作サンプル|架空の店舗です

原寸で開く※ 掲載写真はイメージです。

06イタリアン・フレンチ

ランチ・ディナー・ワイン・席数を一望できる表にする

Osteria Ventoオステリア・ヴェント)/昼はアラカルト、夜はコースのみのオステリア。夜の価格を知らずに来る客と、昼だけの客が分かれる前提で組んだ。

イタリアン・フレンチで、この形にした理由(4点)
01
価格・ワイン・席数・営業を5行の罫線表にまとめ、同じ画面で比較できるようにした
02
ワインのグラスとボトルの下限を書いた。ワイン目当ての客はここで予算を決める
03
貸切の下限人数を席数の欄に入れ、歓送迎会の問い合わせに先回りした
04
店名は欧文セリフ、見出しは和文明朝、本文はゴシック。3つとも書体を明示して端末で変わらないようにした
バーのデモサイトの画面。架空の店舗「琥珀堂」。黒地に細い明朝体の見出しと、右にバックバーの写真を置いたファーストビュー

制作サンプル|架空の店舗です

原寸で開く※ 掲載写真はイメージです。

07バー・専門店

会計の目安まで書いて入りにくさを消す

Bar 琥珀堂こはくどう)/カウンター九席のバー。一見の客が入りづらく、いくらかかるかを聞けずに前を通り過ぎる前提で組んだ。

バー・専門店で、この形にした理由(4点)
01
チャージだけでなく「お一人 4,000〜6,000円ほど」まで書いた。初めての客が怖いのは総額だから
02
飲み物の表に「一杯あたり(税込)」の列見出しを付け、右列を金額に揃えた。前は「12種」「その日の仕入れで」と単位が混ざっていた
03
ナビに「はじめての方へ」を入れ、聞きづらいことをページ側で引き受けた
04
ビルの階とエレベーターの位置まで書いた。路面でないバーは、これが無いと辿り着けない

うちの店ならどうなるか、30分でお見せします。

ここに並べたのは、業態ごとに何をどう置くかの見本です。ご自身の店の場合にどのページが要って、どの写真から撮るかは、お店の話を聞かないと決まりません。それを30分で一緒に決めます。

30分・無料で相談する

オンラインで30分・費用はかかりません・その場で契約は求めません

いまサイトが無くても、他社で作ったものがあっても大丈夫です。

業態ごとに何ページ作るかの一覧を見る

30

ひと続きです。

  1. お店のことをうかがう

  2. 必要なページと機能を決める

  3. 費用と公開日の目安をお伝えする

帯が30分ひと続き、丸が進む順番です。三つを何分ずつに割るかは、お店によって変わるので決めていません。オンラインで、その場で契約は求めません。