電話注文の聞き間違いを減らしたい。小さな弁当店がAIで法人注文サイトを作る全手順

法人や町内会から弁当の注文を受けるとき、電話だけでは小さな食い違いが起きます。「40個」が「14個」に聞こえた。配達時間は決まったのに、建物の入口を確認していなかった。アレルギーの相談を受けたが、どこまで対応できるか店内で答えが揃っていなかった。注文が増えるほど、一件の確認漏れが仕込みと配達の両方へ響きます。

こうした店に必要なのは、大きな通販システムとは限りません。まずは、商品、締切、配達範囲、支払い、変更方法を同じ説明で案内できる小さなサイトです。AIに文章と画面づくりを手伝ってもらい、店側が事実を確認し、Sakupaの確認用URLでスタッフ全員が公開前に読み合わせる流れをまとめます。

ここで使う店名、商品名、価格、注文数、写真、連絡先は説明用です。実在店で売上が増えたという成功談ではありません。Sakupaの現行ソース、公開ガイド、工具箱、公開手順を確認し、小規模店で使うならどこを人が判断すべきかという視点で組み立てた作業記録です。

◆ 最初に「注文情報確認票」を一枚作る

AIへ「弁当の注文サイトを作って」とだけ頼むと、見栄えのよい架空メニューや、実際には受けられない当日配達まで補われることがあります。制作前に、店が責任を持てる事実を一枚へ集めます。

確認するのは、商品名、税込価格、内容、写真、最低注文数、注文締切、一日に受けられる上限、配達地域、配達料、受け渡し時間、支払い方法、領収書・請求書、変更・キャンセル、容器回収、連絡先です。季節で内容が変わる商品には、変更の可能性と確認方法も付けます。

アレルギー案内は特に慎重に扱います。使用食材を確認できるのか、同じ調理場で他の食材を扱うのか、個別除去に対応できるのかを店内で決めます。「完全対応」「絶対安全」のような断言をAIに作らせません。分からない項目は、分からないまま責任者へ戻します。

次の文章をAIへ送り、質問に一つずつ答えます。

操作例：

小さな弁当店の法人・団体注文サイトを作る前に、公開できる事実を整理してください。私に短い質問を一つずつしてください。商品名、税込価格、内容、写真の公開許可、最低注文数、注文締切、一日の上限、配達地域、配達料、受け渡し時間、支払い方法、領収書・請求書、変更・キャンセル、容器回収、連絡先、アレルギー案内を確認してください。「分からない」という回答を認め、一般的な店の条件で補わないでください。最後に、確認済み・未確認・公開しない情報を分けた一枚の注文情報確認票を作ってください。

完成の目印は、各項目に確認した日と確認者が付いていることです。古いチラシと現在の価格が違う場合は、AIに決めさせず、店内で正しい方を確定します。

◆ 温かさは残し、注文条件は読める形にする

今回の視覚方向は「Vintage Analog / Retro Film」です。上の参考画像では、紙のような背景、温かいセピア色、粒子のある写真、黒と赤茶の強い文字を使っています。老舗の弁当店や手作り感のある仕出し店では、均一な通販画面より、店の時間や料理の背景が伝わりやすい方向です。

参考にするのは、次の三点です。

・商品写真を一枚ずつ大きく見せ、説明と注文条件を近くへ置く。

・生成り、焦げ茶、赤茶を基本にし、注文ボタンだけをはっきり見せる。

・フィルム風の飾りは背景や写真の縁に留め、価格、締切、電話番号には重ねない。

画像内の撮影会社名、価格、電話番号、メール、制作実績は架空の表示です。店の実績や連絡先として転用してはいけません。AIへ渡す視覚ルールは、Sakupaの視覚スタイルにある次の原文を変えずに使います。

操作例：

Design with vintage analog film aesthetic. Use: film grain overlay, faded/desaturated colors, warm sepia tones, light leaks, VHS tracking effect, polaroid frame, analog warmth, nostalgic photography feel.

Sakupaの工具箱には「Restaurant/Food Service」の業種記録もあります。

操作例：

Create a product-specific website using this UI/UX Pro Max master record.

Product Type: Restaurant/Food Service

Keywords: restaurant, menu, order, food, dining, reservation, delivery, cuisine, chef, table, takeaway, eatery

Primary Style Recommendation: Vibrant & Block-based + Motion-Driven

Secondary Styles: Claymorphism, Flat Design

Landing Page Pattern: Hero-Centric Design + Conversion

Color Palette Focus: Warm colors (Orange Red Brown) + appetizing imagery

Key Considerations: Menu display. Online ordering. Reservation system. Food photography. Location/hours prominent.

Treat every field above as authoritative. Preserve its exact values and constraints; do not replace them with generic design choices.

この業種記録にはオンライン注文や予約も含まれます。しかし、小さな店が最初から会員登録、決済、在庫連動、注文管理を作る必要はありません。今回は「商品」「締切」「配達」「連絡先」を迷わず見つけられる情報の順番だけを借ります。見た目は最初に選んだVintage Analog / Retro Filmを優先します。

◆ ページは注文前の四つの疑問に合わせる

最初のサイトは四ページで十分です。

1. 注文案内トップ：誰向けの弁当か、何個からか、いつまでに頼むか、連絡先を示す。

2. 商品一覧：写真、税込価格、内容、量の目安、季節変更の可能性を載せる。

3. 配達と注文条件：配達地域、配達料、時間帯、支払い、変更・キャンセルを説明する。

4. アレルギー・問い合わせ：店が確認できる範囲、個別対応の可否、問い合わせ時に伝える項目を示す。

サイト内で注文を確定したり、カード番号や食物アレルギーの詳しい情報を保存したりはしません。確認済みの電話番号または注文専用メールへ案内します。注文フォームを将来追加するなら、誰が個人情報を受け取り、いつ消すかを先に決めます。

AIには確認票だけを事実の原本として渡します。

操作例：

先ほど完成した注文情報確認票だけを事実の原本として、注文案内トップ、商品一覧、配達と注文条件、アレルギー・問い合わせの四ページを設計してください。未確認の価格、在庫、食材、配達範囲、営業時間、口コミ、販売実績は書かないでください。各ページについて、お客さまの疑問、掲載する確認済み情報、店が追加確認する情報、次に押すボタンを示してください。スマートフォンでは一列で読める順番にしてください。

◆ AIには「公開用のファイル」まで作ってもらう

画面案だけで止めず、インターネットへ置けるファイル一式まで作ってもらいます。読者が仕組みを選ぶ必要はありません。次の依頼には、公開時にデータベースや店側のサーバーを必要としない条件を入れています。

操作例：

この弁当注文案内サイトをNext.js App Routerで作ってください。すべてのページを、アクセス時にサーバー処理を必要としない公開用ファイルとして出力できるようにしてください。next.config.jsまたはnext.config.mjsには output: 'export' を設定してください。データベース、ログイン、カード決済、買い物かご、API Routes、Server Actions、秘密の環境変数、注文情報やアレルギー情報の保存は使わないでください。料理写真には内容が分かる代替文を付け、本文は16px未満にせず、締切と連絡先をスマートフォンで押しやすくしてください。制作後に実際の出力処理を行い、outフォルダーと、その中のindex.htmlを確認してください。失敗した場合は公開へ進まず、原因と修正箇所だけを報告してください。

AIが「完成しました」と答えただけでは終わりません。outという公開用フォルダーがあり、その中にindex.html、各ページ、画像があることを確認します。仮の商品名、仮価格、使っていない注文ボタンが残っていたら、公開手順へ進みません。

◆ SakupaをAIツールへ追加する

完成したファイルを確認用URLにするため、SakupaをAIツールへ追加します。現在の手順ではNode.js 20以上を使い、最新版を指定します。設定は次の形です。

操作例：

{

"mcpServers": {

"sakupa": {

"command": "npx",

"args": ["-y", "@sakupa/mcp@latest"]

}

}

}

◆ 名前を見ただけでなく、使えるか確かめる

設定後にAIツールを再読み込みし、次の文章を送ります。

操作例：

Sakupaが実際に使えるか確認してください。説明だけで済ませず、利用できるSakupaの道具名を一覧にしてください。見つからない場合は公開へ進まず、設定ファイルを読み込んだ場所、AIツールの再起動、Node.jsが20以上かを順に確認してください。

init、analyze、deployなどが見えれば接続確認は完了です。見えないまま同じ操作を繰り返さず、設定場所と再読み込みを一回ずつ見直します。

◆ いま開いている弁当サイトを準備する

弁当サイトの作業フォルダーをAIツールで開いた状態で、次の文章を送ります。

操作例：

Sakupaで、いま開いているプロジェクトを初回利用できる状態にしてください。フォルダーを私に選ばせず、引数なしのinitを使ってください。この作業ではアップロードも公開もしないでください。完了後、現在のプロジェクトが準備できたことだけを報告してください。

この段階で作られる.sakupaは手元の管理用です。サイトはまだ公開されません。別の仕事のフォルダーを開いていた場合は止め、弁当サイトを開き直します。

◆ 公開するものと店内資料を分ける

公開対象はoutの中身だけです。元の注文情報確認票、仕入れ表、原価表、未公開の新商品写真、取引先名、注文者情報、.env、秘密鍵、圧縮ファイル、.git、.sakupaは公開しません。

outに.sakupa/site.jsonが入っていたら止めます。これは公開後のサイトを管理するための大切な情報です。記事や公開サイト、公開リポジトリへ貼り付けてはいけません。

◆ アップロード前に、読み取りだけで点検する

公開用ファイルを作り直した後、次の文章を送ります。

操作例：

Sakupaで現在の弁当注文案内サイトを確認し、実際に公開できるフォルダーを特定してください。outを候補として、index.html、ページ、画像、リンク、ファイルサイズ、サーバー処理への依存、秘密情報、圧縮ファイル、.sakupa管理情報が含まれていないかを調べてください。スマートフォン幅で価格、注文締切、配達表、連絡ボタンが画面からはみ出さないかも確認してください。analyzeは読み取りだけにし、まだアップロードも公開もしないでください。

AIが公開対象をoutと明示し、含まれるファイルと警告を説明できれば次へ進みます。秘密情報がある、出力先が違う、サーバー処理が必要という警告が出たら、その場で止めます。元の作業ファイルを代わりに公開してはいけません。

◆ URLを作る直前は店の責任者が確認する

初回の無料公開では、URLを知っている人がページを開けます。有効期間は24時間です。まず店長、調理担当、電話を受ける人へURLを共有し、価格、締切、上限数、配達、支払い、アレルギー案内、連絡先を同じ順番で読みます。

操作例：

Sakupaで公開する直前の確認をしてください。誰がURLを開けるか、無料URLが24時間有効であること、.sakupa/site.jsonを公開してはいけないこと、今回公開するoutフォルダーを説明してください。私が明確に了承するまではdeployを実行しないでください。了承後はpublicConfirmedを付けて一度だけ公開し、URLと時区付きの有効期限を返してください。

AIが説明を省いて公開しようとしたら止めます。「公開してよい」と店の責任者が答えるまでURLを作りません。

◆ 公開後は注文する側の順番で読む

公開結果はAIの完了表示だけで判断しません。返されたHTTPSのURLを別画面で開き、商品、価格、最低注文数、締切、配達地域、支払い、問い合わせの順に確認します。スマートフォンでは電話番号とメールが押せるか、料理写真が切れていないか、価格の税込表示が読めるかを見ます。

存在しないページを開いたときの表示、画像の欠落、古い価格、仮の電話番号、参考画像内の架空の会社名・価格・実績が残っていないかも確認します。店名とURL、掲載内容が一致して初めて確認完了です。

◆ 価格や締切を変えるときも同じ順番で直す

価格、季節商品、締切、配達地域を変えるときは、注文情報確認票を先に直し、該当ページだけを更新します。公開用ファイルを作り直し、outを再点検してから同じサイトを更新します。

操作例：

注文情報確認票で確認済みになった変更だけをサイトへ反映してください。変更したページと文言を一覧にし、公開用ファイルを作り直してください。その後、Sakupaでoutを再確認し、問題がなければ同じサイトを更新する前の影響を説明してください。私が了承するまで公開せず、更新後は公開URLで変更箇所と他のページが壊れていないことを確認してください。

更新前の公開用ファイルを別に残しておくと、間違った価格を入れたときに戻せます。販売終了の商品は、削除するのか「受付終了」と残すのかを店側が決めます。

◆ 途中で止まったときの見分け方

画面で見える症状／考えられる原因／次にすること／止める条件

Sakupaの道具が見えない／設定場所が違う、再読み込み前、Node.jsが古い／設定場所、再起動、Node.js 20以上を一回ずつ確認／二回確認しても道具が見えない

公開用ファイルが作れない／買い物かご、決済、注文保存などのサーバー処理が残っている／注文確定ではなく電話・メール案内へ戻す／エラーを残したまま元ファイルを公開しようとする

別のサイトを準備している／AIツールで違うフォルダーを開いている／弁当サイトを開き直し、引数なしで準備する／作業場所を特定できない

公開先がoutではない／出力処理が未完了、別の出力先を使っている／index.htmlがある実際の出力先を確認する／店内資料を代わりに選ぼうとする

安全確認で拒否された／秘密情報、圧縮ファイル、大きすぎる写真がある／指摘されたものを公開対象から外し、作り直す／理由が分からないまま再試行する

一枚の画面だけで動く構成だと警告された／存在しないURLの扱いを確認する必要がある／ページ構成を説明させ、必要な場合だけ明示確認する／意味が分からないまま了承する

公開処理が失敗した／通信、期限、ファイル変更、無料サイト名額の問題／診断結果を読み、再試行可能な場合だけ一度やり直す／同じ失敗を二回繰り返す

URLは開くが写真やページが欠ける／画像の参照先、大文字小文字、先頭の/が合っていない／公開前とURL上の表示を比べ、参照先を直す／壊れたまま注文者へ共有する

弁当サイトで最後まで人が決めるのは、価格、受けられる個数、配達、食材とアレルギー対応、注文を確定する方法です。AIは説明を揃え、抜けを見つけ、公開用ファイルを作れます。しかし、店の能力や安全性を代わりに保証することはできません。

注文情報確認票を一枚にし、四ページへ分け、スタッフ全員で確認用URLを読む。この順番なら、大きな通販システムを持たない店でも、電話のたびに違う説明をする状態から一歩抜け出せます。