新メニューを出すたび、日替わりを差し替えるたびに、メニュー表を作り直さなければならない。デザインソフトは持っていないし、印刷業者に頼むほどの枚数でもない。お店の現場でいちばん地味に手間がかかるのが、この一枚です。
ASOBOADは、飲食店・美容院・サロンのメニュー表をブラウザだけで作れる無料Webツール「どこでもメニュー」を公開しました。業種別のテンプレートを選び、画面の文字をクリックして打ち替えれば、A4・A3の印刷データがそのまま仕上がります。アプリのインストールやアカウント登録は不要で、ブラウザを開けばすぐに使い始められます。
どんなツールか
どこでもメニューは、業種別の雛形に品名・価格・説明を入れていくだけで、そのまま印刷できるメニュー表を作れるツールです。編集は画面上のメニュー表を直接クリックしておこなう方式なので、入力欄とプレビューを行き来する必要がありません。仕上がったらA4かA3を選んで「印刷 / PDF保存」を押すだけで、家庭用プリンターでもコンビニのネットプリントでも出力できます。
これまで、この作業は表計算ソフトで枠線を引くか、デザインソフトを覚えるか、業者に発注するかの三択でした。表計算ソフトは行が増えるたびにレイアウトが崩れ、業者に頼めば差し替えのたびに時間と費用がかかります。どこでもメニューは「テンプレートを選ぶ」「文字を打ち替える」「印刷する」の3手に絞り、前日のデータがそのまま残る仕組みにすることで、毎朝ゼロから作り直す前提そのものをなくしています。
処理はすべてお使いのブラウザ内でおこなわれ、入力した内容や追加した写真が当方のサーバーへ送信されることはありません。データが端末内にとどまる仕組みなので、開店前の価格や検討中のメニューを扱う場面にも向いています。PCだけでなくスマートフォン・タブレットのブラウザでも操作でき、外部ライブラリに依存しないバニラJavaScriptで作られています。
収録テンプレートは12種類
雛形は業種と紙面の作りで分かれており、全部で12種類あります。文字だけで組む定番が「カフェ（飲食 / ドリンク）」「美容院（美容 / サロン）」「居酒屋（飲食 / 和食）」「コース（会席 / おまかせ）」の4つ。写真を組み合わせるタイプが「シグネチャー（写真入り / 看板メニュー）」「ラーメン店（写真入り / おすすめ3品）」「テイクアウト（写真入り / お持ち帰り）」「食堂・定食（写真入り / 券売機風）」「バー（写真入り / ドリンクリスト）」の5つ。写真を主役にする構成が「カタログ（写真のみ / 2列）」「本日の一皿（写真のみ / ポスター）」「スタイル集（写真のみ / 1:1タイル）」の3つです。
それぞれ、カテゴリ構成とサンプルの品目・価格まで入った状態で開きます。たとえばカフェなら「コーヒー」「ティー & その他」「焼き菓子」の3カテゴリ、美容院なら「カット」「カラー」「パーマ & トリートメント」、コースは1列・カテゴリ見出し中央揃えで「先付」から「甘味」まで七品の献立形式。ラーメン店はおすすめ3品を写真カードで見せ、その下に「トッピング」「サイド・ドリンク」が続きます。ネイルサロン向けの「スタイル集」は正方形タイル9枚のデザインカタログ、「本日の一皿」は写真1枚で見せるポスター型です。近い構成のものを選んでから中身を差し替えるのが、いちばん早い進め方になります。
A4・A3でそのまま印刷できる
用紙サイズは「A4」「A3」の2択で、切り替えると印刷指定（@pageのサイズ指定）とレイアウトの倍率が一緒に変わります。カラム数は「1列」「2列」「3列」から選べるので、A3の一枚に3列で品数を詰めることも、A4に1列でゆったり組むこともできます。品目の文字サイズとヘッダーの文字サイズはそれぞれ「極小」「小」「中」「大」「特大」の5段階。店名とカテゴリ見出しの揃え位置も、左・中央・右から個別に指定できます。
見た目を決めるのは色と書体です。アクセントカラー・タイトルカラー・文字色・説明文カラーをそれぞれ設定でき、各項目に5色のプリセットとカラーピッカー（自由に選ぶ）が用意されています。書体は「明朝」「丸ゴシ」「ゴシック」の3種類で、同じレイアウトのまま印象だけを切り替えられます。季節ごとにアクセントカラーと書体を替えるだけで、春の新メニューと冬の鍋特集を作り分けられる作りです。
編集画面は印刷プレビューと同じ倍率・同じ寸法で描かれているため、画面で見えている文字の大きさがそのまま刷り上がります。仕上がりを確かめたいときは「印刷プレビュー」へ進み、そのまま「印刷 / PDF保存」を押します。ブラウザの印刷ダイアログで「PDFに保存」を選べばPDFになり、このときファイル名は「店名_メニュー表」の形に差し替わるので、あとから探しやすくなっています。
品目が増えても崩れない仕組み
メニュー表づくりでいちばん多い失敗は、品数が増えたときに文字が枠からあふれ、行が次のページへこぼれることです。どこでもメニューは、紙面に収まる縮小率を実際の描画結果から測って自動で追い込む方式を採っています。内容の高さと枠の高さを比べて倍率を計算し直す処理を繰り返し、収まるまで文字サイズを詰めていきます（縮小の下限は元の40%）。品目を1つ足すたびに手で文字サイズを直す作業が要らないのは、この仕組みのためです。
もちろん、詰まりすぎれば読みにくくなります。そこで「高度な設定」には、上下の余白・左右の余白・項目の間隔をそれぞれ「狭い」「標準」「広い」で調整する項目、紙面に上下バランスよく配置する「均等配置モード」、そして説明文だけを相対的に大きくする「よみやすさモード」が用意されています。品名と価格の大きさは変えず説明文だけを底上げする作りなので、シニア向け・キッズ向けの一枚を作るときに効きます。ただし高度な設定はレイアウトが崩れたり文字が見えにくくなる場合もあるため、プレビューを見ながら詰めるのが前提です。
主な機能・特徴
- 12種類の業種別テンプレートを収録し、カテゴリ構成とサンプル品目が入った状態から編集を始められます。近い雛形を選んで打ち替えるだけで骨組みが決まります。
- メニュー表の文字は画面上を直接クリックして編集します。品名・価格・説明文・店名・注釈まで、その場で打ち替えられます。
- 並び順の変更は「⇄ 並べ替え」から。入れ替えたい2つを順にタップする方式で、1つ選ぶと入れ替え可能な相手だけが選べるようになります。カテゴリの追加は「＋ カテゴリを追加」からおこないます。
- 元に戻す・やり直すに対応し、キーボードショートカット（⌘Z / Ctrl+Z、⇧⌘Z / Ctrl+Y）も使えます。文字入力中はブラウザ標準の取り消しに任せ、確定後にツール側の履歴が働きます。
- 写真入りテンプレートでは、写真エリアをクリックして端末内の画像を選べます。読み込んだ画像は長辺1400pxにリサイズしてから使われるため、大きな写真をそのまま入れても動作が重くなりにくい作りです。写真は端末内でのみ処理され、サーバーへ送信されることはありません。
- 写真の縦横比は「標準」「16:9」「4:3」「1:1」「写真どおり」から選べます。選択肢はテンプレートの構成に応じて変わり、1枚にきれいに収まる比率だけが表示されます。枠線の太さ（なし／細／太／極太）、角丸（四角／小／中／大）、枠線の色も指定できます。
- ヘッダーには店名だけでなくロゴ画像を置けます。ロゴは長辺600pxのPNGとして扱われ、透過がそのまま保持されます。
- 編集内容はブラウザに一時保存され、開き直しても続きから作業できます。「JSONで書き出し」でファイルとして保存すれば、別の端末への引き継ぎやバックアップにも使えます。
- 見た目の設定だけを初期状態に戻す「設定を初期化」を用意しています。入力したメニュー内容（文字・写真）は消えません。
使い方
トップページの「作りはじめる →」から編集画面に入り、まずテンプレートを選びます。業種が完全に一致していなくても構いません。「写真を3枚使いたい」「1列の献立形式にしたい」といった紙面の作りで選ぶほうが、あとの手間が少なくなります。
次に文字を打ち替えます。メニュー表の上の品名や価格をクリックすると、その場でカーソルが立って編集できます。不要な品目やカテゴリは削除し、足りなければ「＋ カテゴリを追加」で増やします。並び順を変えたいときは「⇄ 並べ替え」を押して並べ替えモードに入り、入れ替えたい2つを順にタップします。細かい位置を確かめたいときは、画面上部の「＋」「−」で表示倍率を上げ下げできます。写真入りテンプレートでは、写真エリアをクリックして端末内の画像を選びます。
最後に見た目を整えて印刷します。用紙サイズ（A4／A3）、カラム数、文字サイズ、色、書体を決め、必要なら「高度な設定」で余白と間隔を詰めます。「印刷プレビュー」で仕上がりを確認したら「印刷 / PDF保存」へ。家庭用プリンターでそのまま刷るほか、PDFに保存してコンビニのネットプリントに持ち込む使い方もできます。作ったデータを残しておきたい場合は「JSONで書き出し」からファイルとして保存しておきます。
メニュー表は”読ませる順番”で売れ方が変わる。最初に目が行く一点を、店が決める。
メニュー表のデザインで私がいちばん時間をかけるのは、色や書体ではなく「どこから読ませるか」です。人の目は紙面をまんべんなく見てはくれません。写真が1枚あればそこへ、大きい文字があればそこへ、まず視線が落ちる。だから看板メニューや利益率の高い一品は、リストの中に等間隔で並べるのではなく、写真つきのカードや大きめの見出しで紙面から少し浮かせてやる必要があります。
逆に、全部の品目に写真を付けて全部を目立たせると、結果として何も目立たなくなります。実務でよくやるのは、写真は主役の2〜3品に絞って残りは文字だけの一覧にする、という配分です。価格の見せ方も効きます。品名のすぐ隣に価格を置くと客は価格から比較を始めてしまうので、行の右端に静かに揃えるほうが品名に目が留まりやすい。説明文は長く書くほど読まれなくなるので、素材か調理法か産地か、伝えたい一点だけを十数文字で切る。カテゴリの順番も、来店直後に注文されるドリンクや前菜を先に置くだけで、注文の流れが素直になります。どこでもメニューはアクセントカラーと文字サイズを段階で変えられるので、この「浮かせる／沈める」の調整が数クリックで試せます。読ませる順番を店が決める、それだけでメニュー表は一枚の営業ツールになります。
活用シーン
- 開店やリニューアルに合わせて、メニュー表を一から用意したいとき
- 日替わり・本日のおすすめを、毎朝品名と価格だけ打ち替えて刷り直したいとき
- 季節限定メニューに合わせて、色と書体だけ替えた一枚を作りたいとき
- 美容院やネイルサロンで、カット・カラー・オプションの料金表をまとめたいとき
- テイクアウトやお弁当の持ち帰りメニューを、写真つきで用意したいとき
- 券売機の横やレジ前に貼る一覧を、A3で大きく刷りたいとき
- 専用ソフトを使わずに、スタッフの誰でも直せる形で運用したいとき
よくある質問
Q. 利用は無料ですか？
A. はい。メニューの作成から印刷用データの書き出しまで、登録不要・無料でご利用いただけます。
Q. A4とA3のどちらで印刷できますか？
A. 両方に対応しています。用紙サイズを切り替えるとレイアウトと倍率が自動で最適化され、カラム数も1〜3列から選べます。コンビニのネットプリントでも出力できます。
Q. 品目がたくさんあっても1枚に収まりますか？
A. 紙面に収まる縮小率を自動で計算する仕組みのため、品目が増えても文字サイズが調整され、1枚に収まるようレイアウトされます。詰まりすぎる場合は余白や項目の間隔で調整してください。
Q. 写真はアップロード（送信）されますか？
A. いいえ。写真はお使いの端末のブラウザ内だけで処理され、サーバーへ送信されることはありません。なお写真はブラウザに保存されないため、ページを再読み込みすると消えます。写真を含めて残すには「JSONで書き出し」をご利用ください。
Q. 作ったメニューは保存できますか？
A. 編集内容はお使いのブラウザに一時保存され、同じ端末・同じブラウザであれば次回も続きから編集できます。ただし履歴・キャッシュの消去やシークレットモードでは消えることがあるため、大切なメニューは「JSONで書き出し」からファイルとして保存しておくことをおすすめします。
Q. スマートフォンでも作れますか？
A. はい。スマートフォンやタブレットのブラウザでも文字の打ち替えや設定変更ができます。細かいレイアウト調整はPCの広い画面のほうが進めやすくなります。
ご利用にあたって
作成したメニュー表（印刷データ・PDF）は、お店の営業用途にそのままご利用いただけます。ただし本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。編集内容はブラウザに一時保存されるもので保存を保証するものではなく、ブラウザのデータを消去したり別の端末・ブラウザで開くと引き継がれない場合があります。写真とロゴはブラウザに保存されないため、再読み込みで消えます。追加する写真は、ご自身が権利をお持ちのもの、または利用許諾を得たものをご利用ください。
テンプレートに含まれる店名・価格・メニュー内容はレイアウト確認用の架空のサンプルであり、実在する店舗・商品とは関係ありません。ブラウザの種類・バージョンや端末環境、プリンターの設定によっては、表示・動作・印刷結果が異なる場合があります。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、ASOBOAD／AMIXは責任を負いかねます。本ツールの仕様・内容は、予告なく変更または提供を終了する場合があります。
今日のメニュー、作ってみませんか。どこでもメニューをぜひお試しください。
▶︎ デザイン制作実績を見る / ▶︎ デザインのブログ記事一覧 / ▶︎ デザイン制作のガイド・媒体の特徴
この記事について
こんなページも読まれています
