飲食店のメニューサイトをAIで作る：公開前にスタッフ全員で確認する手順

飲食店のホームページでは、見た目より先に確認したいことがあります。価格、営業時間、定休日、アレルギー表示、予約先です。どれか一つでも古いと、きれいなページでも来店前のお客さまを迷わせます。

この記事では、小さな飲食店がAIを使い、スマートフォンで読みやすいメニューサイトを作る流れを扱います。完成後はSakupaで24時間の確認用URLを作り、店長、ホール担当、調理担当がそれぞれのスマートフォンから内容を確認します。

中心になるのは「サイトを作る技術」ではありません。誰が何を確認するか、間違いをどこで止めるか、修正後に同じURLで確かめられるかです。この記事の作成中には実際の店舗サイトを外部公開していないため、以下は現行の公式手順と確認項目を組み合わせた作業記録です。

まず、メニュー情報を一枚にまとめる

AIへいきなり「飲食店のサイトを作って」と頼むと、実在しない人気メニュー、価格、口コミ、受賞歴まで自然に補われることがあります。最初に、公開してよい事実だけを表にします。

項目	店側が確認する内容	AIに任せてよいこと
店名	看板・営業許可上の正式表記	表記ゆれの発見
営業時間	曜日別、ラストオーダー、臨時休業	読みやすい並べ方
メニュー	商品名、税込価格、提供時間	分類と短い説明の下書き
アレルギー	店内の最新資料と注意書き	抜けている確認項目の指摘
写真	自店撮影か、掲載許可があるもの	切り抜き方と配置案
予約	電話、予約サービス、受付条件	ボタン文言の候補
アクセス	住所、最寄り駅、駐車場条件	順番と見出しの整理

顧客名簿、仕入れ値、従業員情報、契約書はサイト制作用のフォルダーへ入れません。AIが読める資料と、お客さまへ見せてよい資料は別です。

I run a small restaurant. Interview me one question at a time about the official shop name, opening hours, last order, closing days, menu names, tax-inclusive prices, allergen notes, reservation method, address, parking, and photo rights.

Create a fact sheet with three groups: confirmed for publication, owner confirmation required, and do not publish. Do not invent menu items, prices, awards, reviews, popularity claims, ingredients, allergen safety, or reservation availability.

完成条件は、文章が上手なことではありません。各情報が「掲載できる」「要確認」「掲載しない」に分かれ、価格と営業時間を確認した担当が分かることです。

表には確認日も付けます。飲食店の情報は、材料費、季節メニュー、祝日営業によって変わるからです。「税込価格を八月二十日に店長が確認」「アレルギー情報を調理担当が確認」のように残せば、数か月後の更新で古い資料を使いにくくなります。AIには確認日を推測させず、空欄のまま店側へ返させます。

特にアレルギー情報は、料理名からAIに判断させません。同じ名称でも、店ごとに材料や調理環境が違います。店内の最新資料にない内容は「含まれない」と断定せず、問い合わせ先と注意書きを店側で決めます。

料理写真を邪魔しない見た目を選ぶ

今回はSakupaの視覚スタイル集から、Storytelling-Drivenを使います。畑から食卓までを順番に見せる参考例で、料理や素材の背景を伝えながら商品一覧へつなげる構成です。

参考画像から持ち帰るのは、架空の店名や文章ではありません。確認するのは、色の数、写真の大きさ、見出しの強弱、ボタンの見つけやすさです。スタイル集の次の一文は、言い換えずにAIへ渡します。

Use the attached reference only for visual direction. Do not copy its company name, wording, numbers, claims, or images.

Design a storytelling landing page. Use: narrative flow sections, scroll-triggered reveals, chapter-like structure, emotional imagery, brand journey visualization, founder story, mission statement, timeline progression.

Apply this direction to the verified restaurant fact sheet. Food photos and menu readability must remain more important than decoration. First show the color, text size, spacing, button, and mobile rules. Do not build the page until the owner approves those rules.

既存のロゴや店の色がある場合は、参考画像より店側の決まりを優先します。料理写真の色を変える加工も避けます。実物との違いが誤解につながるためです。

スマートフォンでは、写真を大きく置きすぎると価格や営業時間へたどり着くまで何度も画面を送ることになります。最初の画面には店の特徴、営業中か判断できる情報、予約または電話の入口を置き、料理写真はメニュー名と価格の近くで使います。小さな文字を写真の上へ重ねず、明るい屋外でも読める色の差を確保します。

スマートフォンで必要な情報から並べる

このサイトは、会社案内型の五ページ構成にはしません。来店前にスマートフォンで見る一ページのメニュー案内にします。

上から、店の特徴、営業時間、本日の注意、メニュー、アレルギー案内、予約、アクセス、店舗情報の順に置きます。予約をサイト内で処理せず、実際に運用している電話または外部予約サービスへつなぎます。

Design a one-page mobile-first restaurant menu website from the verified fact sheet.

Use this order: shop promise, today's operational notice, opening hours, menu categories with tax-inclusive prices, allergen notice, reservation method, access, and official shop information.

For every section, state which staff member must confirm it. Do not create an order form, reservation database, login, fake availability calendar, review, ranking, or sold-out status. Link only to the restaurant's approved reservation channel.

サイトを見た人が三十秒で「今日は開いているか」「何が食べられるか」「いくらか」「予約はどこか」を判断できれば、構成としては十分です。

「本日のおすすめ」や「売り切れ」のように毎日変わる情報は、更新担当が決まっていない限り固定ページへ載せません。古い表示を残すより、店内または公式の更新先へ案内する方が安全です。反対に、住所、通常営業時間、定番メニュー、予約方法のように比較的長く使う情報は、この一ページへまとめる価値があります。

AIに、公開用のファイルまで作ってもらう

ここから先は、店側が専門用語を覚えて設定する作業ではありません。次の依頼文をAIへ渡し、公開先へ送れるファイル一式まで作らせます。英語の固有名詞は、AIが作業条件を間違えないために残しています。

Build the approved restaurant website with the Next.js App Router and output: 'export'. Browser-side navigation and small interactions are allowed.

Do not add a database, login, Next.js API Routes, Server Actions, middleware, request-time rendering, private runtime secrets, or an original reservation or payment backend. Use an approved external reservation link instead.

After building the page, run npm run build. Report whether it succeeded and confirm that out/index.html, its images, styles, and links exist. If it fails, stop at the first error and repair it before continuing.

作業後は、通常outというフォルダーができます。「完成しました」という返事だけでなく、その中に最初のページと画像が入っていることをAIに表示させます。エラーが残る間は公開へ進みません。

SakupaをAIで使えるようにする

次は、いま使っているAIからSakupaを呼び出せる状態にします。まずAIにnode --versionとnpm --versionを実行させ、必要な動作環境があるか確認します。数字が出ない、または古いと案内された場合は、公式手順を示してもらってから追加作業を許可します。

外部機能を追加できるAIツールへ、次の設定をそのまま渡します。

Please install and enable the latest Sakupa MCP in this AI tool using the following configuration:

{
  "mcpServers": {
    "sakupa": {
      "command": "npx",
      "args": ["-y", "@sakupa/mcp@latest"]
    }
  }
}

Show me where the configuration was added. Do not upload or publish anything.

黒い操作画面で一度起動しただけでは、AIから使える状態になった証拠にはなりません。設定後はAIツールを完全に終了して開き直し、この飲食店サイトのフォルダーだけを開きます。

AIからSakupaを使えるか確かめる

再起動後、次の依頼で実際に使える機能を一覧にします。

Check the Sakupa tools currently available in this AI tool and list their exact names.

Do not prepare a project, inspect website files, upload content, or create a public URL. If the Sakupa tools are absent, show which configuration was loaded and stop.

Sakupaの機能が一覧に出なければ、接続は未完了です。公開を試して確認の代わりにせず、変更した設定場所と、再起動後に読み込まれた内容をAIに照合させます。

いま開いているサイトを公開準備に入れる

接続確認後、フォルダー名を自分で入力せず、開いている飲食店サイトを対象にします。

Use Sakupa to prepare the project currently open in this AI tool for first-time use. Call the no-argument init tool.

Do not ask me to choose or type a folder path. Do not inspect, upload, or publish the website yet. Report which open project was prepared and whether its local project marker was created.

この段階ではURLは作られず、サイトもアップロードされません。複数の作業フォルダーが開いていて対象を決められない場合は、飲食店サイトだけを開き直します。

公開してよいフォルダーだけを選ぶ

サイトを作ったフォルダー全体には、下書きや管理用ファイルもあります。公開するのは、通常outに入った完成ファイルだけです。

次のものが混ざっていないかAIに確認させます。

• 顧客情報、従業員情報、仕入れ資料
• 未公開の原価、レシピ、契約書
• パスワード、秘密鍵、外部サービスの合言葉
• 元の写真、編集前データ、バックアップ
• .sakupa内の管理情報

Inspect the completed publishable files without uploading them. Identify the exact folder that contains index.html and all referenced images.

Report the file count, total size, missing images, broken links, and anything that should not be public. Check especially for customer data, employee data, supplier prices, recipes, contracts, source files, secrets, and .sakupa. Stop if any are present.

手元では写真が見えるのに完成フォルダーへ入っていない場合、公開後に写真だけ消えます。AIに画像の場所を直させ、公開用ファイルを作り直します。

アップロード前に安全確認をする

Sakupaの確認機能を使い、公開するフォルダー、ファイルの大きさ、秘密情報、そのままでは公開できない機能を調べます。この確認だけではURLを作らず、ファイルも送信しません。

Use Sakupa analyze_site on the prepared restaurant website. Inspect only; do not upload or publish anything.

Explain in everyday language which folder would be published, whether it is safe to publish, which warnings were found, and what the restaurant owner must decide. Stop if the result is not publishable.

最初のページがない、秘密情報がある、ファイルが大きすぎる、予約処理をサイト内で行おうとしている、といった警告が出たら、原因を直してから同じ確認へ戻ります。

24時間の確認用URLを作る前に、店側で承認する

今回のSakupaの役割は、いきなり本番公開することではありません。通常24時間の確認用URLを作り、店長、ホール担当、調理担当へ見てもらうことです。

URLを知っている人は開けるため、社外秘の資料を置いてはいけません。確認用URLを作る前に、公開するフォルダー、見つかった警告、URLの見える範囲、管理情報の保存場所を説明してもらいます。

Prepare one 24-hour Sakupa review URL from the exact files that passed the safety check.

Before uploading, explain who can open the URL, the expected expiry, the exact folder being uploaded, remaining warnings, and which local management information must be protected. Wait for my explicit confirmation. After confirmation, call deploy_site once. If it fails, return the error and stop unless the error is explicitly retryable.

店側が説明を読み、「この内容なら確認用URLを作ってよい」と明確に返した後だけアップロードします。

三人が別々の視点で確認する

URLが返ったら、同じ人だけで確認を終わらせません。

確認者	主に見る内容
店長	店名、住所、営業時間、定休日、予約先
調理担当	メニュー名、価格、材料説明、アレルギー注意
ホール担当	スマートフォンの読みやすさ、電話ボタン、アクセス案内

あわせて、画像が欠けていないか、押せないボタンがないか、仮の店名や要確認が残っていないかを見ます。可能なら店のWi-Fiだけでなく、携帯回線からも開きます。

確認結果は、口頭だけで終わらせません。「問題なし」または「修正内容」を一行ずつ記録します。たとえば店長が営業時間、調理担当がメニューと注意書き、ホール担当が電話と地図を確認したことが分かれば、同じ項目を三人が重ねて見たり、逆に誰も見なかったりする状況を避けられます。

電話ボタンは、実際に押して発信前の番号まで確認します。予約サービスは、ログイン画面ではなく店舗の正しい予約ページへ移るかを見ます。地図は似た店名の別店舗を指していないか、住所と照らします。これらは画面が整っているだけでは判断できないため、人が行う確認です。

初回アップロード後に作られる.sakupa/site.jsonは、そのサイトを管理するための大切な情報です。記事、チャット、公開フォルダーへ貼らず、アクセスを制限した場所へ保管します。

指摘を一件ずつ直し、同じURLで見直す

三人から修正が出ても、一度に全部を混ぜません。たとえば「土曜日のラストオーダーを20時30分へ直す」という一件だけを変更します。

Change only Saturday's last-order time to the owner-approved value. Do not change prices, layout, photos, reservation links, or any other business fact.

Recreate the publishable files, report exactly what changed, check again for private files, and prepare the existing Sakupa site for republication. Wait for my confirmation before uploading. After publication, verify the corrected time at the existing URL.

修正前と修正後の画面、変更した項目、確認者を短い更新記録へ残します。確認用URLで全員の承認がそろってから、長期公開が必要か、独自ドメインを使うかを別に判断します。有料契約やドメイン設定を、確認用URLの作成と同時に進める必要はありません。

季節メニューを終了するときは、追加したカードだけでなく、最初の紹介文、写真、予約案内にも同じ商品名が残っていないかAIに探させます。公開後は、修正した場所だけでなくページ全体をもう一度開きます。一か所の変更で余白や画像の並びが崩れていないかまで見て、更新を完了とします。

止まった場所ごとに戻る

画面で見える症状	戻る場所	次の行動
Sakupaの機能が一覧に出ない	AIツールの設定	変更場所を確認し、アプリを完全に再起動する
公開用ファイルを作れない	最初のエラー	エラー全文をAIへ渡し、一件だけ直す
画像だけ完成フォルダーにない	写真の場所	ファイル名と保存場所を直して作り直す
秘密情報が見つかった	公開するフォルダー	該当ファイルを外し、内容が漏れていないか確認する
アップロードに失敗した	表示されたエラー	記録を保存し、再試行可能と書かれた場合だけ一度やり直す
URLは開くが内容が古い	更新対象と管理情報	同じサイトを更新しているか確認し、変更点を照合する
価格や営業時間が食い違う	店舗の原本	AIに決めさせず、責任者の確認済み情報へ戻す

この使い方では、Sakupaは単なる最終公開先ではありません。店の外からスマートフォンで開ける確認場所を作り、担当の違う三人が同じページを見ながら承認するために使います。

次の記事で別の業種を扱うなら、同じ文章の店名だけを変えるべきではありません。たとえば美容室なら料金と予約条件、士業なら資格と対応範囲、イベントなら開催期間と終了後の取り下げが中心になります。サイトの種類と確認したい仕事が変われば、AIへの依頼文もSakupaの使い方も変わります。

参考資料

• Sakupa サイト制作ガイド（2026-08-20確認）
• Sakupa 公開ガイド（2026-08-20確認）

本文の構成と推敲には生成AIを使用し、手順と製品仕様を人が確認しました。