飲食店の注文サイトの作り方：メニュー、カート、受け取り時間、キッチン画面

フード注文サイトでは、お客様がメニューから商品を選び、好みに合わせてカスタマイズし、受け取りまたは配達の時間を指定して支払い、確認を受け取れます。一方キッチン側では、注文が画面に表示され、準備ができたら完了に変更します。作るには、オプション付きのメニュー（サイズ、追加トッピング、「玉ねぎなし」など）、合計金額を正しく計算するカート、キッチンが混み合わないよう上限を設けた時間枠、カード決済、そしてスタッフ用のシンプルな注文ボードが必要です。AIアプリビルダーなら、明確な説明からこれらを作れます。難しいのは細部です。営業時間、売り切れ商品、注文数の上限、そして決済は成功したのに注文が保存されなかった場合の対応などがそうです。

サイトに必要なもの

ページ

• お客様向け： カテゴリ別のメニュー、オプション付きの商品詳細、カート、チェックアウト（名前、電話番号、受け取りか配達か、時間）、決済、注文番号とステータスを表示する確認ページ。
• キッチン向け： 新規、調理中、準備完了の注文をリアルタイムに並べた一覧。各注文には商品、オプション、備考、受け取り時間を表示します。
• オーナー向け： メニュー編集（商品、価格、写真、オプション、売り切れ）、営業時間、時間枠の上限、売上の集計。

データ

注文明細には、注文時点の 商品名と価格を保存しておきましょう。後でメニューを変更しても、過去の注文にはお客様が実際に支払った内容が表示されるべきです。

権限

お客様は確認リンクから自分の注文だけを見られるようにします。キッチンのスタッフは注文を閲覧・更新できますが、価格は変更できません。オーナーがメニューと設定を編集します。タブレットで共有のキッチン用ログインを使うのはよくある運用ですが、オーナーには別のログインを持たせてください。

決めること・トレードオフ

受け取りか、配達か、両方か

受け取りのみはずっとシンプルで、小規模な店はまずここから始めるのがおすすめです。配達を加えると、エリア設定、配達料、最低注文額、住所の確認、ドライバーの割り当てなど、問題が起きうる箇所が一気に増えます。

すぐ注文か、時間指定か

「できるだけ早く」は提供しやすいものの、混雑した夜には守りにくくなります。 上限付きの時間指定枠 （例：15分の枠ごとに最大8件）のほうがキッチンを守り、お客様の期待も整えられます。「最短の受け取り可能時間：18:45」のように表示することもできます。

事前決済か、受け取り時の支払いか

オンラインで事前に支払ってもらうと、来ないお客様が減り、受け取りもスムーズになります。受け取り時払いは作るのが簡単ですが、架空の注文を招きやすくなります。多くの店は Stripe Checkout などのホスト型チェックアウトでカード決済を事前に受け付けています。設定方法は決済の解説ガイドをご覧ください。チップ、税金、レシートのルールは国によって異なるため、現地のルールを確認してください。

注文をキッチンに届ける方法

選択肢は、タブレットで自動更新されるブラウザタブ（最もシンプル）、バックアップとしての注文ごとのメールやメッセージ、またはレシートプリンターへの送信（追加の機器と設定が必要）です。新規注文が届いたときの通知音は、思った以上に重要です。

うまくいく最初のプロンプト

テキサス州オースティンのタコス店 Casa Verde 向けのオンライン注文サイトを作ってください。受け取り専用です。メニューのカテゴリは Tacos、Bowls、Sides、Drinks です。商品にはオプションがあります。タコスはたんぱく質（チキン、カルニタス、マッシュルーム +$1）、トルティーヤ（コーンかフラワー）、任意の追加（グアカモレ +$1.50、チーズ +$0.75）を選べます。ボウルはベースとたんぱく質を選びます。お客様はカートに商品を入れ、営業時間内（火〜日 11:00〜21:00、中部時間）の15分単位の受け取り枠を選び、名前と電話番号を入力し、8.25%の消費税込みの合計を確認します。各枠は8件で上限にし、満員の枠は非表示にしてください。注文はデータベースに保存し、ステータスは「新規」「準備中」「準備完了」「受け取り済み」とします。キッチン用ページ（ログイン必須）では、今日の注文を受け取り時間順に表示し、新規注文で音を鳴らし、スタッフがステータスを進められるようにしてください。オーナー用ページでは、メニューの編集、商品の売り切れ設定、注文受付の一時停止ができるようにしてください。カード決済は後で追加します。今は「受け取り時払い」とします。大胆でカラフルなモバイルファーストのデザインで、タップしやすい大きなボタンにしてください。

受け取り時払いから始めると、決済を導入する前にスタッフと一緒に注文の流れ全体をテストできます。

構築のステップ

1. メニューとオプション。 メニュー、オプショングループ、価格計算を正しく作ります。すべてのオプションの組み合わせで商品をテストしましょう。
2. カートとチェックアウト。 数量、備考、合計、税金、営業時間を守る時間枠の選択。
3. 注文の保存と確認。 合計金額はサーバー側で計算します。ブラウザから送られてきた価格は決して信用しないでください。注文番号付きの確認ページも用意します。
4. キッチンボード。 リアルタイムの一覧、新規注文の通知音、ステータスボタン、1メートル先からも読める大きな文字。
5. オーナーの管理機能。 売り切れ、注文受付の一時停止、時間枠の上限、営業時間。
6. テストモードでの決済。 決済事業者が支払いを確認したときだけ注文を支払い済みにしてください。決済は成功したのに注文が保存されなかった場合の処理も考えておきます。
7. 通知。 自社のプロバイダーを使った、メールや SMS での注文確認と「受け取り可能」の連絡。通知の追加ガイドをご覧ください。
8. ソフトローンチ。 数日間、スタッフや友人と一緒に運用し、お客様側と同じくらいキッチン側の動きも確認します。

よくある失敗

• 価格をブラウザ側だけで計算する。 誰でも書き換えられます。計算はサーバーで行いましょう。
• 売り切れのスイッチがない。 最後の一皿を5人に売ってしまうことになります。
• 時間枠の上限がない。 金曜の混雑時に、19:00受け取りの注文が40件重なってしまいます。
• アレルゲン情報がない、または古い。 商品ごとにアレルゲンを表示し、正確に保ちましょう。多くの国ではこのルールが厳しく定められています。
• 時刻の混乱。 時刻はUTCで保存し、店舗の現地時間で表示します。深夜や夏時間の切り替え付近でテストしてください。
• キッチンのタブレットがスリープする。 画面をオンのままにし、再読み込みなしで新規注文が表示されることを確認してください。

既製のサービスのほうが良い場合

近くの新しい客に見つけてもらいたいなら、配達サービスは自分では作れない需要を連れてきてくれます。その代わり手数料がかかります。すでにPOSシステムを使っている場合は、オンライン注文機能が含まれているかを確認してください。レジやキッチンのプリンターに直接届く注文は、なかなか他に勝るものがありません。

自分で作るのが向いているのは、常連客から手数料なしで直接注文を受けたいとき、店の運営に合わせた注文の流れが必要なとき（パン屋の予約注文、ケータリングのトレイ、週替わりの作り置きメニューなど）、またはロイヤルティ制度や自社サイトと連携したいときです。サイトの残りの部分については飲食店サイトのガイドをご覧ください。

Mythex での構築

Mythex では、注文の流れをチャットで説明すると、ライブプレビューに現れます。スマートフォンサイズの枠で確認できます。注文とメニューは、保存を依頼したときにエージェントが追加する Postgres データベースに保存されます。カード決済には自分の Stripe アカウントを使い、キーはプロジェクトのシークレットとして保存します。手順は Stripe のレシピ にプロンプトがあります。Mythex には決済、メール、SMS の組み込みサービスがないため、通知は自分のプロバイダーを使います。決済の Webhook には公開 URL が必要なので、アプリを公開してからテストしてください。公開前には、/test でエージェントに注文の流れをクリックして確認させ、不具合を報告させられます。

開始用のプロンプトには、ベーカリーの注文ページやコーヒーの注文ページのテンプレート、またはレストランのオンラインストア作成ツールを使ってください。

よくある質問