個人顧客向けネット注文フォームシステムを開発しました

個人顧客向けのネット注文フォームを開発しました

株式会社亀屋の既存顧客（個人）向けに、URL共有型の注文フォームシステムを開発しました。

電話・FAXでの受注を担っていた担当者の業務負担を減らしつつ、お客様にとっても「スマホだけで24時間いつでも注文できる」体験を届けることが目的です。

既存の注文フローは次のような課題がありました。

かといって、一般的なECサイトのような「会員登録・ログイン」フローは、高齢のお客様には敷居が高い。IDとパスワードを覚えてもらう必要がないシステムを設計することが最初の要件でした。

管理者（担当者）がお客様ごとに専用の注文フォームURLを発行します。このURLをメール・LINE・SMSで送るだけで準備完了です。

お客様専用URL: https://kameyanet.co.jp/porder/f/[token]

URLには顧客を識別するトークンが含まれており、どのお客様が注文したかを自動で判別します。

URLを開いた初回は、登録済みのメールアドレスに6桁の確認コードを送信して本人確認を行います。

1. URLを開く
2. 登録メールアドレスを入力
3. メールに届いた6桁コードを入力（有効期限10分）
4. 注文フォームが開く

確認コードは入力を5回間違えるとロック。メール送信も1時間に3回までに制限しており、悪用を防いでいます。

認証が完了すると、スマートフォンのブラウザにセッション情報が保存されます。次回URLを開いたときは確認コードの入力が不要で、そのまま注文フォームへ直接移動します。

セッションの有効期限はデフォルト30日。注文のたびに延長されるため、頻繁に利用するお客様はほぼ毎回スキップできます。有効期限は管理画面から変更できます。

注文フォームには、管理者がそのお客様向けに紐づけた商品だけが表示されます。すべてのお客様に同じ商品を見せる必要はなく、顧客ごとにカスタマイズできます。

機能	内容
商品検索	商品が6点以上の場合に検索バーを表示
前回と同じにする	前回注文を一括で反映するボタン
数量入力	＋/−ボタンまたは直接入力
送料の自動計算	選択された送料オプションを含む合計金額をリアルタイム表示
確認画面	送信前に内容を確認するステップ

注文が送信されると、お客様と担当者の両方にメールが届きます。

お客様へ： 受付確認メール 担当者へ： 新着注文の通知メール

担当者が管理画面から「発送確定」を押すと、お客様にデジタル納品書URLつきの確定メールが届きます。このURLからいつでも注文内容を確認できます。

チラシや商品パッケージにQRコードを印刷しておくと、スキャンするだけでその商品の注文フォームに直接つながります。

はじめてスキャンするお客様には、メール認証のあとに氏名・住所の入力フォームが表示されます。送信すると顧客情報が自動でシステムに登録され、その場で注文フォームが開きます。

チラシのQRコードをスキャン
        ↓
メールアドレスを入力 → 6桁コードで認証
        ↓
名前・住所を入力して送信
        ↓
顧客登録 + 注文フォームが開く
（担当者にも自動通知）

2回目以降はQRをスキャンするだけでそのまま注文フォームへ。

担当者はClerk認証でログインし、次の画面を使います。

顧客ごとに商品の「表示/非表示」を切り替えられるため、QRコード経由で商品が増えすぎた場合も管理者がコントロールできます。

お客様専用URLは固定ですが、初回は必ずメール認証が必要です。URLを知っていても、登録メールアドレスにアクセスできなければ注文できません。

注文時、商品の単価はサーバー側で商品マスタから確定します。クライアント（ブラウザ）からは商品IDだけを送り、価格はサーバーが決めるため、開発者ツールで価格を書き換えても反映されません。

担当者は管理画面からURLを「再発行」できます。再発行すると旧URLは即時無効になります。

サーバーサイドは Next.js Server Actions を中心に構成しています。APIルートを別途立てる必要がなく、フォーム送信からDB操作・メール送信まで一貫したコードで書けるのが利点です。

セッション情報は localStorage に保存するためサーバーに状態を持たず、スケールアウト時も追加の設定が不要です。

類似の仕組みを自社の受注業務に導入したい方は、お気軽にご相談ください。