飲食店の公式サイト

写真と店舗情報を入れるだけ。
予約につながる公式サイトを、かんたんに。

デザインは選ぶだけ。文章の折り返しも、スマホでの見え方も、こちらで整えます。 まずは、できあがるサイトをそのままご覧ください。

入力は不要です。見てから決められます。

サンプルサイト(実際の生成結果)

生成例

これは、実際に生成されたサイトです。

架空の店「BISTRO HIBI」のために、この製品が書き出したページそのものを表示しています。 画像を貼ったものではありません。

見本 — 架空の店舗です

サンプルサイト(実際の生成結果)

枠の中をスクロールすると、ページの最後まで読めます。

見くらべる

同じお店でも、デザインでこれだけ変わります。

下の6枚は、店名も住所もメニューもすべて同じお店です。 変えたのはデザインだけ。お店を切り替えると、そのお店の内容に変わります。 デザインは全部で20種類あり、残りはこの下で開けます。

ビストロ・カフェ。昼も夜も営業する、いちばん一般的な条件のお店です。

KANSO — 簡素・余白

KANSO — 簡素・余白日本料理・懐石など

ナビゲーションバーがありません。最初の画面にボタンもなく、あるのは店名と小さな写真一枚、縦書きの一行だけ。お品書きは行間を大きくとった一列です。

NOIR — 夜・静けさ

NOIR — 夜・静けさ割烹・寿司など

最初の画面には、写真と店名しかありません。メニューはナビも操作もスクロールしてから現れます。お品書きは写真なしの一覧です。

AURORA — 硝子・光

AURORA — 硝子・光カフェ・バーなど

背景が店の配色から作った光のグラデーションで、その上にすりガラスの面が浮きます。ナビゲーションは画面左端の縦帯です。

SPLIT — 二分割

SPLIT — 二分割一枚看板の料理がある店など

画面の左半分が写真で固定され、右半分だけがスクロールします。ナビゲーションバーはなく、見出しの下の目次がその代わりです。お品書きは番号付きの目次形式です。

STENCIL — 抜き文字

STENCIL — 抜き文字焼肉など

店名の文字の中に写真が入ります。ナビゲーションは色帯が画面上部を走る形。お品書きは1カテゴリにつき写真1枚を大きく見せます。

SHOWA — 昭和・町の店

SHOWA — 昭和・町の店町中華など

ページ全体が太い枠に囲まれ、店名は看板の箱に入ります。丸い印が付き、お品書きは伝票のような罫線付き。色ではなく枠でレトロを出しています。

のこり14種類も見る 開くと読み込みます
EDITORIAL — 誌面

EDITORIAL — 誌面ビストロなど

見出しが主役で、写真は右の小さな縦位置。各セクションに「01 —」の通し番号が付き、お品書きは罫線入りの2段組みです。動きはありません。

FRESH — 昼・カフェ

FRESH — 昼・カフェカフェなど

大きな写真1枚ではなく、高さの違う写真3枚で始まります。ナビは浮いた丸いバー。営業時間が最初のセクションで、お品書きは写真カードです。

ARCH — 弧・設え

ARCH — 弧・設え料亭・宿など

写真がアーチ形に切り抜かれます。ナビゲーションは1つのボタンに隠れていて、押すと全画面に開きます。お品書きは開閉式です。

BENTO — 区画・いま風

BENTO — 区画・いま風創作料理など

縦に積むのではなく、角丸のセルを敷き詰めた格子で始まります。店名・業態・営業時間・予算・定休日・予約が同時に見え、お品書きもセルで並びます。

CANVAS — 色面

CANVAS — 色面開店前・写真がこれからの店など

最初の画面に写真がありません。店の色が画面いっぱいに広がり、その上に店名だけ。ナビゲーションバーも無く、リンクはフッターだけです。お品書きは横スクロールのカードです。

COLLAGE — 貼り込み

COLLAGE — 貼り込み居酒屋など

写真3枚が少し傾いて重なります。店名はヘッダー中央、リンクはその左右。お品書きは高さの揃わないタイルの壁です。

POSTER — 大胆

POSTER — 大胆ラーメンなど

店名が画面幅いっぱいの極太文字で入り、写真は細い帯だけ。予約バーが画面下に固定されます。お品書きは番号付きの帯です。

TOKONOMA — 床の間

TOKONOMA — 床の間日本料理・懐石など

余白の中心をずらし、掛軸の比率の写真を一枚だけ据えます。お品書きは縦書きの列で、右から読みます。

EMBER — 炭火

EMBER — 炭火焼鳥・炭火など

背景が暗く、隅から炭のような熱の光が滲みます。お品書きは串のように縦の罫線に刺さり、写真は暗く落とした周辺光です。

SHELF — 陳列

SHELF — 陳列ベーカリーなど

水平の棚板が繰り返され、商品がその上に並びます。お品書きは棚の一段ずつで、写真は棚に置かれた品の正面です。

RULE — 極太罫

RULE — 極太罫ラーメンなど

6pxの黒罫がすべてを囲み、角丸も影もありません。要素は少しずらして重なり、見出しは極端に大きく置かれます。

GALLERY — 横に読む

GALLERY — 横に読むイタリアンなど

写真が横一列に並び、左右に送って読みます。お品書きはその写真に付く説明文で、ページは縦にほとんど伸びません。

QUIET — 静かな贅沢

QUIET — 静かな贅沢フレンチなど

欧文のセリフ体を大きく置き、語数を極端に絞ります。写真は横長を一枚だけ。色数は少なく、余白が主役です。

MENU BOARD — 品書き板

MENU BOARD — 品書き板定食・食堂など

時間・定休日・予算が最初に来ます。上下だけに罫を引いた掲示板で、点線が項目から数字まで目を運びます。写真は品書きの中の小さな見本です。

デザイン

デザインを選ぶところから始まります。

どれもレイアウトは固定です。だから崩れません。選んだあとに決めるのは、 店名・写真・配色といったお店ごとの中身だけです。

ビストロ・カフェ。昼も夜も営業する、いちばん一般的な条件のお店です。

KANSO — 簡素・余白 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

KANSO — 簡素・余白

余白がいちばん多い構成。静かさで見せたい店に。

ナビゲーションバーがありません。最初の画面にボタンもなく、あるのは店名と小さな写真一枚、縦書きの一行だけ。お品書きは行間を大きくとった一列です。

  • 日本料理・懐石
  • 蕎麦・うどん
  • 茶寮・甘味
  • 静かな一軒家
  • 予約制の店
NOIR — 夜・静けさ — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

NOIR — 夜・静けさ

画面いっぱいの一枚と、店名だけ。いちばん静かで、いちばん高く見える構成です。

最初の画面には、写真と店名しかありません。メニューはナビも操作もスクロールしてから現れます。お品書きは写真なしの一覧です。

  • 割烹・寿司
  • 鉄板・炭火
  • バー・ワイン
  • コース主体の店
  • 記念日利用の多い店
EDITORIAL — 誌面 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

EDITORIAL — 誌面

写真より先に、言葉。雑誌の特集ページのように読ませる構成です。

見出しが主役で、写真は右の小さな縦位置。各セクションに「01 —」の通し番号が付き、お品書きは罫線入りの2段組みです。動きはありません。

  • ビストロ
  • ワインバー
  • イタリアン
  • 自家製・産地を語る店
  • コーヒー専門店
FRESH — 昼・カフェ — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

FRESH — 昼・カフェ

写真は3枚並べて。明るく、やわらかく、開いている時間がすぐ分かる構成です。

大きな写真1枚ではなく、高さの違う写真3枚で始まります。ナビは浮いた丸いバー。営業時間が最初のセクションで、お品書きは写真カードです。

  • カフェ
  • ベーカリー
  • ブランチ
  • 喫茶・スイーツ
  • ランチ営業の店
ARCH — 弧・設え — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

ARCH — 弧・設え

設えのよさを、静かに見せる構成です。

写真がアーチ形に切り抜かれます。ナビゲーションは1つのボタンに隠れていて、押すと全画面に開きます。お品書きは開閉式です。

  • 料亭・宿
  • 内装が自慢の店
  • 喫茶・甘味
  • 静かなビストロ
  • 記念日利用の多い店
SPLIT — 二分割 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

SPLIT — 二分割

自慢の一枚を、ずっと見せ続ける構成です。

画面の左半分が写真で固定され、右半分だけがスクロールします。ナビゲーションバーはなく、見出しの下の目次がその代わりです。お品書きは番号付きの目次形式です。

  • 一枚看板の料理がある店
  • 宿・料亭
  • 鮨・割烹
  • 内装が自慢の店
  • ホテル内レストラン
AURORA — 硝子・光 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

AURORA — 硝子・光

写真が少なくても、配色だけで雰囲気を出せる構成です。

背景が店の配色から作った光のグラデーションで、その上にすりガラスの面が浮きます。ナビゲーションは画面左端の縦帯です。

  • カフェ・バー
  • スイーツ
  • ワインバー
  • 写真が少ない店
  • 配色が決まっている店
BENTO — 区画・いま風 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

BENTO — 区画・いま風

知りたいことが、最初の一画面に全部そろう構成です。

縦に積むのではなく、角丸のセルを敷き詰めた格子で始まります。店名・業態・営業時間・予算・定休日・予約が同時に見え、お品書きもセルで並びます。

  • 創作料理
  • バー・ダイニング
  • ビストロ
  • 多店舗展開の店
  • 新規開店の店
CANVAS — 色面 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

CANVAS — 色面

写真がまだ無くても成立する、色だけで見せる構成です。

最初の画面に写真がありません。店の色が画面いっぱいに広がり、その上に店名だけ。ナビゲーションバーも無く、リンクはフッターだけです。お品書きは横スクロールのカードです。

  • 開店前・写真がこれからの店
  • ブランド色が決まっている店
  • テイクアウト中心
  • 間借り営業
  • 1品特化の店
SHOWA — 昭和・町の店 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

SHOWA — 昭和・町の店

看板のような枠組みで作る、町の店の構成です。

ページ全体が太い枠に囲まれ、店名は看板の箱に入ります。丸い印が付き、お品書きは伝票のような罫線付き。色ではなく枠でレトロを出しています。

  • 町中華
  • 大衆食堂
  • 喫茶店
  • 洋食屋
  • もつ焼き・立ち飲み
COLLAGE — 貼り込み — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

COLLAGE — 貼り込み

写真を貼り重ねて、にぎやかに見せる構成です。

写真3枚が少し傾いて重なります。店名はヘッダー中央、リンクはその左右。お品書きは高さの揃わないタイルの壁です。

  • 居酒屋
  • 食堂・定食
  • パン屋
  • クラフトビール
  • 写真がたくさんある店
STENCIL — 抜き文字 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

STENCIL — 抜き文字

店名の文字そのものが写真になる、いちばん今風の構成です。

店名の文字の中に写真が入ります。ナビゲーションは色帯が画面上部を走る形。お品書きは1カテゴリにつき写真1枚を大きく見せます。

  • 焼肉
  • クラフトビール
  • バー
  • ラーメン
  • 若い客層の店
POSTER — 大胆 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

POSTER — 大胆

店名そのものが絵になる構成。写真が少ない店でも強く見えます。

店名が画面幅いっぱいの極太文字で入り、写真は細い帯だけ。予約バーが画面下に固定されます。お品書きは番号付きの帯です。

  • ラーメン
  • 定食・食堂
  • 大衆酒場
  • カレー
  • 焼肉
TOKONOMA — 床の間 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

TOKONOMA — 床の間

床の間のように、非対称の窪みに一枚だけ掛ける。縦書きの品書きが柱のように立つ

余白の中心をずらし、掛軸の比率の写真を一枚だけ据えます。お品書きは縦書きの列で、右から読みます。

  • 日本料理・懐石
  • 寿司・鮨
  • 蕎麦・うどん
  • 料亭
  • 茶寮・甘味
EMBER — 炭火 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

EMBER — 炭火

暗がりに熱源がひとつ。画面の隅から炭の色が滲み、料理はその明かりの中にある。

背景が暗く、隅から炭のような熱の光が滲みます。お品書きは串のように縦の罫線に刺さり、写真は暗く落とした周辺光です。

  • 焼鳥・炭火
  • 焼肉
  • 居酒屋
  • 鉄板焼き
  • 串揚げ
SHELF — 陳列 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

SHELF — 陳列

棚に商品が並ぶ構成。横線が棚板になり、その上に品物が載る。

水平の棚板が繰り返され、商品がその上に並びます。お品書きは棚の一段ずつで、写真は棚に置かれた品の正面です。

  • ベーカリー
  • パティスリー
  • カフェ
  • 惣菜・デリ
  • 焼き菓子
RULE — 極太罫 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

RULE — 極太罫

太い黒罫と角のない箱だけで構成する。影は落とさず、ずらして重ねる。

6pxの黒罫がすべてを囲み、角丸も影もありません。要素は少しずらして重なり、見出しは極端に大きく置かれます。

  • ラーメン
  • バーガー
  • クラフトビール
  • ピザ
  • 大衆酒場
QUIET — 静かな贅沢 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

QUIET — 静かな贅沢

大きな欧文セリフと、極端に少ない語数。写真は一枚だけ、大きく。

欧文のセリフ体を大きく置き、語数を極端に絞ります。写真は横長を一枚だけ。色数は少なく、余白が主役です。

  • フレンチ
  • イタリアン
  • 鉄板焼き
  • ホテル内レストラン
  • 記念日の店
MENU BOARD — 品書き板 — 表示例

枠の中をスクロールすると、ページの最後まで見られます。

MENU BOARD — 品書き板

営業時間と予算が、店先の品書き板のように大きく出る。

時間・定休日・予算が最初に来ます。上下だけに罫を引いた掲示板で、点線が項目から数字まで目を運びます。写真は品書きの中の小さな見本です。

  • 定食・食堂
  • 中華料理
  • うどん・そば
  • カレー
  • 町中華

いま選べるデザインは 20 種類です。実際に使えるものだけを並べています。

使い方

やることは、3つだけ。

  1. 01

    デザインを選ぶ

    用意されたデザインから選びます。レイアウトは固定なので、あとから崩れることがありません。

  2. 02

    店舗情報と写真を入れる

    店名・営業時間・メニュー・写真を順番に入れていきます。足りない項目はその場で分かります。

  3. 03

    完成したサイトを確認する

    できあがったページをそのまま確認できます。公開前は検索に出ない状態のままです。

できること

いま実際にできることだけを書いています。

スマホでの見え方から整える

文字の折り返しも、写真の切り取りも、スマホの画面を基準に調整されます。

予約は外部サイトと電話へ

予約サイトと電話番号へまっすぐ案内します。ページの中に予約の仕組みは持ちません。

店舗情報がひとつにまとまる

住所・営業時間・定休日・メニューを一か所で管理し、ページと構造化データの両方に反映します。

公開前は検索に出ない

作っている間は検索避けのまま。検索に載せるかどうかは、確認が済んでから選べます。

速い静的サイト

訪問のたびに組み立て直すのではなく、あらかじめ書き出したページを配信します。

崩れにくい

画面幅ごとのはみ出しと日本語の改行位置を、毎回機械的に検査しています。

気に入ったデザインで、試してみてください。

気に入ったデザインを選ぶと、聞かれるのは店名と業態、雰囲気の3つだけです。