枠の中をスクロールすると、ページの最後まで見られます。
KANSO — 簡素・余白
余白がいちばん多い構成。静かさで見せたい店に。
ナビゲーションバーがありません。最初の画面にボタンもなく、あるのは店名と小さな写真一枚、縦書きの一行だけ。お品書きは行間を大きくとった一列です。
生成例
架空の店「BISTRO HIBI」のために、この製品が書き出したページそのものを表示しています。 画像を貼ったものではありません。
見本 — 架空の店舗です
枠の中をスクロールすると、ページの最後まで読めます。
見くらべる
下の6枚は、店名も住所もメニューもすべて同じお店です。 変えたのはデザインだけ。お店を切り替えると、そのお店の内容に変わります。 デザインは全部で20種類あり、残りはこの下で開けます。
ビストロ・カフェ。昼も夜も営業する、いちばん一般的な条件のお店です。
KANSO — 簡素・余白日本料理・懐石など
ナビゲーションバーがありません。最初の画面にボタンもなく、あるのは店名と小さな写真一枚、縦書きの一行だけ。お品書きは行間を大きくとった一列です。
NOIR — 夜・静けさ割烹・寿司など
最初の画面には、写真と店名しかありません。メニューはナビも操作もスクロールしてから現れます。お品書きは写真なしの一覧です。
AURORA — 硝子・光カフェ・バーなど
背景が店の配色から作った光のグラデーションで、その上にすりガラスの面が浮きます。ナビゲーションは画面左端の縦帯です。
SPLIT — 二分割一枚看板の料理がある店など
画面の左半分が写真で固定され、右半分だけがスクロールします。ナビゲーションバーはなく、見出しの下の目次がその代わりです。お品書きは番号付きの目次形式です。
STENCIL — 抜き文字焼肉など
店名の文字の中に写真が入ります。ナビゲーションは色帯が画面上部を走る形。お品書きは1カテゴリにつき写真1枚を大きく見せます。
SHOWA — 昭和・町の店町中華など
ページ全体が太い枠に囲まれ、店名は看板の箱に入ります。丸い印が付き、お品書きは伝票のような罫線付き。色ではなく枠でレトロを出しています。
EDITORIAL — 誌面ビストロなど
見出しが主役で、写真は右の小さな縦位置。各セクションに「01 —」の通し番号が付き、お品書きは罫線入りの2段組みです。動きはありません。
FRESH — 昼・カフェカフェなど
大きな写真1枚ではなく、高さの違う写真3枚で始まります。ナビは浮いた丸いバー。営業時間が最初のセクションで、お品書きは写真カードです。
ARCH — 弧・設え料亭・宿など
写真がアーチ形に切り抜かれます。ナビゲーションは1つのボタンに隠れていて、押すと全画面に開きます。お品書きは開閉式です。
BENTO — 区画・いま風創作料理など
縦に積むのではなく、角丸のセルを敷き詰めた格子で始まります。店名・業態・営業時間・予算・定休日・予約が同時に見え、お品書きもセルで並びます。
CANVAS — 色面開店前・写真がこれからの店など
最初の画面に写真がありません。店の色が画面いっぱいに広がり、その上に店名だけ。ナビゲーションバーも無く、リンクはフッターだけです。お品書きは横スクロールのカードです。
COLLAGE — 貼り込み居酒屋など
写真3枚が少し傾いて重なります。店名はヘッダー中央、リンクはその左右。お品書きは高さの揃わないタイルの壁です。
POSTER — 大胆ラーメンなど
店名が画面幅いっぱいの極太文字で入り、写真は細い帯だけ。予約バーが画面下に固定されます。お品書きは番号付きの帯です。
TOKONOMA — 床の間日本料理・懐石など
余白の中心をずらし、掛軸の比率の写真を一枚だけ据えます。お品書きは縦書きの列で、右から読みます。
EMBER — 炭火焼鳥・炭火など
背景が暗く、隅から炭のような熱の光が滲みます。お品書きは串のように縦の罫線に刺さり、写真は暗く落とした周辺光です。
SHELF — 陳列ベーカリーなど
水平の棚板が繰り返され、商品がその上に並びます。お品書きは棚の一段ずつで、写真は棚に置かれた品の正面です。
RULE — 極太罫ラーメンなど
6pxの黒罫がすべてを囲み、角丸も影もありません。要素は少しずらして重なり、見出しは極端に大きく置かれます。
GALLERY — 横に読むイタリアンなど
写真が横一列に並び、左右に送って読みます。お品書きはその写真に付く説明文で、ページは縦にほとんど伸びません。
QUIET — 静かな贅沢フレンチなど
欧文のセリフ体を大きく置き、語数を極端に絞ります。写真は横長を一枚だけ。色数は少なく、余白が主役です。
MENU BOARD — 品書き板定食・食堂など
時間・定休日・予算が最初に来ます。上下だけに罫を引いた掲示板で、点線が項目から数字まで目を運びます。写真は品書きの中の小さな見本です。
デザイン
どれもレイアウトは固定です。だから崩れません。選んだあとに決めるのは、 店名・写真・配色といったお店ごとの中身だけです。
ビストロ・カフェ。昼も夜も営業する、いちばん一般的な条件のお店です。
枠の中をスクロールすると、ページの最後まで見られます。
余白がいちばん多い構成。静かさで見せたい店に。
ナビゲーションバーがありません。最初の画面にボタンもなく、あるのは店名と小さな写真一枚、縦書きの一行だけ。お品書きは行間を大きくとった一列です。
枠の中をスクロールすると、ページの最後まで見られます。
画面いっぱいの一枚と、店名だけ。いちばん静かで、いちばん高く見える構成です。
最初の画面には、写真と店名しかありません。メニューはナビも操作もスクロールしてから現れます。お品書きは写真なしの一覧です。
枠の中をスクロールすると、ページの最後まで見られます。
写真より先に、言葉。雑誌の特集ページのように読ませる構成です。
見出しが主役で、写真は右の小さな縦位置。各セクションに「01 —」の通し番号が付き、お品書きは罫線入りの2段組みです。動きはありません。
枠の中をスクロールすると、ページの最後まで見られます。
写真は3枚並べて。明るく、やわらかく、開いている時間がすぐ分かる構成です。
大きな写真1枚ではなく、高さの違う写真3枚で始まります。ナビは浮いた丸いバー。営業時間が最初のセクションで、お品書きは写真カードです。
枠の中をスクロールすると、ページの最後まで見られます。
設えのよさを、静かに見せる構成です。
写真がアーチ形に切り抜かれます。ナビゲーションは1つのボタンに隠れていて、押すと全画面に開きます。お品書きは開閉式です。
枠の中をスクロールすると、ページの最後まで見られます。
自慢の一枚を、ずっと見せ続ける構成です。
画面の左半分が写真で固定され、右半分だけがスクロールします。ナビゲーションバーはなく、見出しの下の目次がその代わりです。お品書きは番号付きの目次形式です。
枠の中をスクロールすると、ページの最後まで見られます。
写真が少なくても、配色だけで雰囲気を出せる構成です。
背景が店の配色から作った光のグラデーションで、その上にすりガラスの面が浮きます。ナビゲーションは画面左端の縦帯です。
枠の中をスクロールすると、ページの最後まで見られます。
知りたいことが、最初の一画面に全部そろう構成です。
縦に積むのではなく、角丸のセルを敷き詰めた格子で始まります。店名・業態・営業時間・予算・定休日・予約が同時に見え、お品書きもセルで並びます。
枠の中をスクロールすると、ページの最後まで見られます。
写真がまだ無くても成立する、色だけで見せる構成です。
最初の画面に写真がありません。店の色が画面いっぱいに広がり、その上に店名だけ。ナビゲーションバーも無く、リンクはフッターだけです。お品書きは横スクロールのカードです。
枠の中をスクロールすると、ページの最後まで見られます。
看板のような枠組みで作る、町の店の構成です。
ページ全体が太い枠に囲まれ、店名は看板の箱に入ります。丸い印が付き、お品書きは伝票のような罫線付き。色ではなく枠でレトロを出しています。
枠の中をスクロールすると、ページの最後まで見られます。
写真を貼り重ねて、にぎやかに見せる構成です。
写真3枚が少し傾いて重なります。店名はヘッダー中央、リンクはその左右。お品書きは高さの揃わないタイルの壁です。
枠の中をスクロールすると、ページの最後まで見られます。
店名の文字そのものが写真になる、いちばん今風の構成です。
店名の文字の中に写真が入ります。ナビゲーションは色帯が画面上部を走る形。お品書きは1カテゴリにつき写真1枚を大きく見せます。
枠の中をスクロールすると、ページの最後まで見られます。
店名そのものが絵になる構成。写真が少ない店でも強く見えます。
店名が画面幅いっぱいの極太文字で入り、写真は細い帯だけ。予約バーが画面下に固定されます。お品書きは番号付きの帯です。
枠の中をスクロールすると、ページの最後まで見られます。
床の間のように、非対称の窪みに一枚だけ掛ける。縦書きの品書きが柱のように立つ
余白の中心をずらし、掛軸の比率の写真を一枚だけ据えます。お品書きは縦書きの列で、右から読みます。
枠の中をスクロールすると、ページの最後まで見られます。
暗がりに熱源がひとつ。画面の隅から炭の色が滲み、料理はその明かりの中にある。
背景が暗く、隅から炭のような熱の光が滲みます。お品書きは串のように縦の罫線に刺さり、写真は暗く落とした周辺光です。
枠の中をスクロールすると、ページの最後まで見られます。
棚に商品が並ぶ構成。横線が棚板になり、その上に品物が載る。
水平の棚板が繰り返され、商品がその上に並びます。お品書きは棚の一段ずつで、写真は棚に置かれた品の正面です。
枠の中をスクロールすると、ページの最後まで見られます。
太い黒罫と角のない箱だけで構成する。影は落とさず、ずらして重ねる。
6pxの黒罫がすべてを囲み、角丸も影もありません。要素は少しずらして重なり、見出しは極端に大きく置かれます。
枠の中をスクロールすると、ページの最後まで見られます。
写真を横一列に流し、指で送って読ませる。縦に伸びない構成。
写真が横一列に並び、左右に送って読みます。お品書きはその写真に付く説明文で、ページは縦にほとんど伸びません。
枠の中をスクロールすると、ページの最後まで見られます。
大きな欧文セリフと、極端に少ない語数。写真は一枚だけ、大きく。
欧文のセリフ体を大きく置き、語数を極端に絞ります。写真は横長を一枚だけ。色数は少なく、余白が主役です。
枠の中をスクロールすると、ページの最後まで見られます。
営業時間と予算が、店先の品書き板のように大きく出る。
時間・定休日・予算が最初に来ます。上下だけに罫を引いた掲示板で、点線が項目から数字まで目を運びます。写真は品書きの中の小さな見本です。
いま選べるデザインは 20 種類です。実際に使えるものだけを並べています。
使い方
用意されたデザインから選びます。レイアウトは固定なので、あとから崩れることがありません。
店名・営業時間・メニュー・写真を順番に入れていきます。足りない項目はその場で分かります。
できあがったページをそのまま確認できます。公開前は検索に出ない状態のままです。
できること
文字の折り返しも、写真の切り取りも、スマホの画面を基準に調整されます。
予約サイトと電話番号へまっすぐ案内します。ページの中に予約の仕組みは持ちません。
住所・営業時間・定休日・メニューを一か所で管理し、ページと構造化データの両方に反映します。
作っている間は検索避けのまま。検索に載せるかどうかは、確認が済んでから選べます。
訪問のたびに組み立て直すのではなく、あらかじめ書き出したページを配信します。
画面幅ごとのはみ出しと日本語の改行位置を、毎回機械的に検査しています。