TEXTBOOK SECTION / AI LEARNING

メール通知と顧客体験

Square API × Next.js 実践EC開発|自社ECを低コストで作る、決済・在庫・注文管理の設計と実装の「Webhookと決済完了処理」より、メール通知と顧客体験を解説。生成AI、AI活用、DX、業務改善を実践しながら学べるオンライン教材です。

3Webhookと決済完了処理EC

OVERVIEW

この節で学べること

概要を表示する
項目内容
教材名Square API × Next.js 実践EC開発|自社ECを低コストで作る、決済・在庫・注文管理の設計と実装
Webhookと決済完了処理
メール通知と顧客体験
カテゴリEC
学習内容生成AI、AI活用、DX、業務改善を実践しながら理解するための教材です。

TABLE OF CONTENTS

目次

CONTENT

ここから

第13章では、決済完了後に注文ステータスを更新し、在庫を減らし、配送準備へ進める流れを学びました。

この章では、その次に必要になるメール通知を扱います。

ECにおけるメールは、ただの連絡手段ではありません。

購入者にとっては、「ちゃんと注文できた」と安心するための証拠です。

店舗にとっては、「何を、誰に、いつ送ればよいか」を確認するための作業指示書です。

つまり、メール通知は次の2つを支える重要な仕組みです。

購入者の安心
店舗側の作業

攻略本風に言えば、メール通知は「決済後の不安を消し、店舗の行動を開始させる合図」です。


14.1 注文完了メールの役割

注文完了メールの役割は、購入者に「注文を受け付けました」と伝えることです。

ここで大切なのは、メールを売り込みの文章にしすぎないことです。

購入直後の購入者が知りたいのは、次のようなことです。

・注文は本当に完了したのか
・何を買ったのか
・いくら支払ったのか
・いつ届くのか
・問い合わせ先はどこか

そのため、注文完了メールでは、まず安心を届けます。

ご注文ありがとうございます。
ご注文を受け付けました。
商品の準備が整い次第、発送いたします。

このような短い文章でも、購入者にとっては大切です。

特にSquareのような外部決済画面を使う場合、購入者は一度ECサイトの外に移動します。

そのため、決済後に自社ECからメールが届くことで、購入体験が自然につながります。

ECサイトで商品を見る
  ↓
Squareで支払う
  ↓
自社ECから注文完了メールが届く
  ↓
安心する

注文完了メールに入れるべき内容は、次の通りです。

・購入のお礼
・注文番号
・注文日時
・購入商品
・数量
・合計金額
・配送先
・発送予定
・問い合わせ先

反対に、最初から入れすぎない方がよい内容もあります。

・長すぎるブランドストーリー
・大量のおすすめ商品
・強すぎる営業文
・関係のないキャンペーン案内

購入直後のメールは、まず正確さと安心感を優先します。

リピート購入やLINE登録への導線は、本文の最後に控えめに入れるくらいがちょうどよいです。


14.2 顧客向けメールテンプレート

ここでは、顧客向けの注文完了メールを作ります。

最初は、複雑なHTMLメールではなく、テキストメールで十分です。

テキストメールは表示崩れが少なく、どのメールアプリでも読みやすいからです。

基本構成は次の通りです。

件名
  ↓
あいさつ
  ↓
注文受付の案内
  ↓
注文内容
  ↓
今後の流れ
  ↓
問い合わせ先
  ↓
署名

テンプレート例です。

件名:
ご注文ありがとうございます|注文番号:ORDER-0001

本文:
山田 太郎 様

このたびはご注文いただき、誠にありがとうございます。
ご注文を受け付けました。

商品の準備が整い次第、順次発送いたします。
発送が完了しましたら、改めてご連絡いたします。

【ご注文内容】
注文番号:ORDER-0001
注文日時:2026年7月6日 14:30
商品名:クラシック節ギフトセット
数量:1
合計金額:5,400円(税込)

【お届け先】
〒000-0000
愛知県名古屋市〇〇区〇〇
山田 太郎 様

【今後の流れ】
1. 店舗にてご注文内容を確認します
2. 商品の準備を行います
3. 発送完了後、追跡番号をメールでお送りします

ご不明な点がございましたら、下記までお問い合わせください。

株式会社〇〇
メール:support@example.com
電話:052-000-0000

ここでのポイントは、購入者が不安になりそうな情報を先回りして書くことです。

たとえば、発送まで時間がかかる商品であれば、次のように書きます。

ご注文後、通常3〜5営業日以内に発送いたします。
ご注文状況や天候、配送状況により前後する場合がございます。

ギフト商品であれば、次のような一文も有効です。

贈り物として安心してお届けできるよう、丁寧に確認のうえ発送いたします。

顧客向けメールで大切なのは、かっこよさよりも、迷わないことです。


14.3 店舗向け通知メール

次に、店舗向けの通知メールを作ります。

顧客向けメールは「安心してもらうためのメール」です。

店舗向けメールは「作業を始めるためのメール」です。

目的が違うため、文面も変えます。

店舗向け通知では、丁寧な文章よりも、作業に必要な情報を見やすく並べます。

入れるべき内容は次の通りです。

・新規注文が入ったこと
・注文番号
・購入者名
・商品名
・数量
・合計金額
・配送先
・配送方法
・備考
・管理画面URL

テンプレート例です。

件名:
【新規注文】ORDER-0001|クラシック節ギフトセット

本文:
新しい注文が入りました。

【注文情報】
注文番号:ORDER-0001
注文日時:2026年7月6日 14:30
決済状況:決済完了

【購入者】
氏名:山田 太郎 様
メール:taro@example.com
電話番号:090-0000-0000

【商品】
商品名:クラシック節ギフトセット
数量:1
合計金額:5,400円(税込)

【配送先】
〒000-0000
愛知県名古屋市〇〇区〇〇
山田 太郎 様

【対応】
管理画面で注文内容を確認し、配送準備へ進めてください。

管理画面:
https://example.com/admin/orders/ORDER-0001

店舗向け通知で重要なのは、次に何をすればよいかを明記することです。

管理画面で注文内容を確認し、配送準備へ進めてください。

この一文があるだけで、店舗スタッフは迷いにくくなります。

また、チャットツールに通知する場合は、個人情報を減らす設計も検討します。

新しい注文が入りました。

注文番号:ORDER-0001
商品:クラシック節ギフトセット
数量:1

詳細は管理画面で確認してください。

配送先住所や電話番号をSlack、LINE、Discordなどに流すと、管理範囲が広がります。

個人情報は、できるだけ管理画面の中で確認する方が安全です。


14.4 ResendなどのメールAPI連携

Next.jsでメールを送る場合、代表的な選択肢のひとつがメールAPIです。

たとえば、Resendの公式ドキュメントでは、Next.jsからResend Node.js SDKを使ってメールを送信する手順が案内されています。利用にはAPIキーの作成や送信ドメインの認証が必要です。(Resend)

メールAPIを使うと、Next.jsのサーバー側処理からメールを送れます。

Webhook受信
  ↓
注文ステータス更新
  ↓
メールAPIを呼び出す
  ↓
顧客へメール送信
  ↓
店舗へ通知メール送信

Gmailの画面から手作業で送るのではなく、システムが自動でメールを送るイメージです。

メールAPIを使うメリットは次の通りです。

・注文完了メールを自動送信できる
・店舗通知を自動化できる
・送信結果をログに残しやすい
・テンプレートを管理しやすい
・注文数が増えても対応しやすい

最小構成では、次のような関数を作ります。

type SendOrderCompletedEmailInput = {
  to: string;
  customerName: string;
  orderNumber: string;
  totalAmount: number;
};

/**
 * 役割: 購入者へ注文完了メールを送信する
 * 入力: 宛先、購入者名、注文番号、合計金額
 * 出力: メール送信の成功可否
 */
async function sendOrderCompletedEmail(
  input: SendOrderCompletedEmailInput
): Promise<boolean> {
  // 実際の実装では、ここでResendなどのメールAPIを呼び出す
  // APIキーは必ずサーバー側の環境変数から読み込む

  console.log('send order completed email', input);

  return true;
}

ここで注意すべき点は、APIキーをクライアント側に出さないことです。

メールAPIの秘密鍵は、必ずサーバー側で使います。

よい例:
Route Handler
Server Action
Webhook処理
サーバー側のlib関数

悪い例:
Client Component
ブラウザのJavaScript
公開される環境変数

環境変数名の例です。

RESEND_API_KEY=
MAIL_FROM=
ADMIN_NOTIFICATION_EMAIL=

NEXT_PUBLIC_を付けた環境変数はブラウザに公開されるため、メールAPIキーには使ってはいけません。

悪い例:
NEXT_PUBLIC_RESEND_API_KEY

よい例:
RESEND_API_KEY

メール送信は、決済完了後の大切な処理です。

ただし、メール送信が失敗しても、決済自体を失敗扱いにしてはいけません。

この考え方は、後の14.6で詳しく扱います。


14.5 Gmail運用との違い

小規模事業者の場合、最初はGmailで注文対応したくなることがあります。

もちろん、注文数が少ないうちはGmailでも対応できます。

ただし、ECの注文完了メールを手作業にすると、次の問題が起きます。

・送信漏れが起きる
・送信内容が人によって変わる
・夜間や休日の注文にすぐ対応できない
・注文数が増えると追いつかない
・管理画面との状態がズレる

Gmail運用とメールAPI運用の違いを整理すると、次のようになります。

Gmail運用:
人がメールを書く
人が送信する
人が送ったか覚えておく

メールAPI運用:
システムがメールを作る
システムが送信する
送信結果をDBに残す

最初の1件、2件であればGmailでも問題ないかもしれません。

しかし、ECとして運用するなら、注文完了メールだけは自動化した方が安全です。

特に自動化したいメールは次の3つです。

・注文完了メール
・発送完了メール
・管理者通知メール

一方で、Gmailの方が向いている対応もあります。

・個別のお詫び
・複雑な問い合わせ対応
・特別な相談
・高額商品の個別案内
・トラブル時の丁寧な説明

つまり、すべてを自動化する必要はありません。

定型メール
  → メールAPIで自動化

個別対応
  → Gmailで人が対応

この分け方が、現実的です。


14.6 メール送信失敗時の扱い

メール送信は、必ず成功するとは限りません。

次のような理由で失敗することがあります。

・メールアドレスが間違っている
・メールAPIの障害
・送信ドメインの設定ミス
・迷惑メール判定
・一時的な通信エラー
・APIキーの設定ミス

ここで大切なのは、メール送信失敗と決済失敗を混同しないことです。

決済が完了しているなら、メール送信に失敗しても注文はpaidのままです。

決済成功
メール送信失敗

この場合:
注文ステータスはpaid
メールステータスはfailed

注文ステータスとメールステータスは分けて管理します。

type OrderStatus =
  | 'pending'
  | 'paid'
  | 'preparing'
  | 'shipped'
  | 'cancelled'
  | 'failed'
  | 'manual_review';

type EmailStatus = 'pending' | 'sent' | 'failed';

type OrderNotificationStatus = {
  orderStatus: OrderStatus;
  customerEmailStatus: EmailStatus;
  adminEmailStatus: EmailStatus;
};

管理画面では、メール送信に失敗した注文だけを抽出できると便利です。

メール未送信一覧
  ↓
原因を確認
  ↓
再送する

メール送信失敗時の扱いは、次のように分けます。

顧客向けメール失敗
  → 注文はpaidのまま
  → 管理者に通知
  → 手動または再送機能で対応

店舗向け通知失敗
  → 注文はpaidのまま
  → 管理画面上で未通知として表示

両方失敗
  → paidのまま
  → manual_reviewまたは通知再送待ちにする

メール再送機能も用意しておくと安心です。

管理画面
  ↓
注文詳細
  ↓
注文完了メールを再送

ただし、再送ボタンは誤操作に注意します。

確認ダイアログ:
この注文完了メールを再送しますか?

同じメールが何度も届くと、購入者は不安になります。

そのため、再送履歴も残しておきます。

2026-07-06 14:31 自動送信 failed
2026-07-06 14:40 管理者が再送 sent

失敗をゼロにするのではなく、失敗しても追えるようにする。

これが実務向けの設計です。


14.7 領収書・明細・配送案内

ECのメールでは、注文完了メール、領収書、明細、配送案内を混同しないようにします。

それぞれ役割が違います。

注文完了メール:
注文を受け付けたことを伝える

領収書:
支払いを受け取った証明

明細:
何を、いくつ、いくらで購入したか

配送案内:
いつ、どの方法で発送したか

Squareでは、成功した支払いに対して印刷またはメール・SMSでデジタルレシートを提供できる機能があります。Squareのレシートは、商品、数量、割引、税などの明細を反映できます。(Square)

ただし、自社ECの注文完了メールとSquareのレシートは、同じものではありません。

Squareのレシート:
決済の証明

自社ECの注文完了メール:
注文受付と今後の案内

そのため、次のように分けて考えます。

決済の証明
  → Squareのレシート

注文内容と配送案内
  → 自社ECのメール

注文完了メールの中に、明細を入れることはできます。

【ご注文内容】
商品名:クラシック節ギフトセット
単価:5,400円
数量:1
小計:5,400円
送料:0円
合計:5,400円

配送案内は、発送完了後に別メールで送ります。

件名:
商品を発送しました|注文番号:ORDER-0001

本文:
ご注文の商品を発送いたしました。

配送会社:ヤマト運輸
追跡番号:1234-5678-9012
追跡URL:https://example.com/tracking

到着まで今しばらくお待ちください。

注文完了メールと発送完了メールを分けると、購入者にとって分かりやすくなります。

注文直後:
注文完了メール

発送後:
発送完了メール

この2通があるだけで、購入者の不安はかなり減ります。


14.8 高級商材向けの文面設計

高級商材では、メールの文面もブランド体験の一部になります。

ただし、難しい言葉を並べれば高級感が出るわけではありません。

大切なのは、次の3つです。

・丁寧であること
・急かさないこと
・余白があること

高級商材向けのメールでは、事務的すぎる表現を少しやわらげます。

通常の文面です。

ご注文を受け付けました。
発送が完了しましたらご連絡します。

高級商材向けにすると、次のようになります。

このたびは大切なお品をお選びいただき、誠にありがとうございます。

ご注文内容を確認のうえ、丁寧に準備を進めてまいります。
発送の準備が整いましたら、改めてご案内いたします。

ポイントは、過剰に飾らないことです。

避けたい表現:
最高級の感動をあなたへ
奇跡のような逸品をお届けします
今だけの特別体験をお楽しみください

このような表現は、商材によっては軽く見えてしまいます。

高級感を出すなら、落ち着いた言葉を選びます。

おすすめ表現:
丁寧に準備いたします
大切にお届けいたします
確認のうえ進めてまいります
今しばらくお待ちください

ギフト商品では、相手に届くことを意識した一文を入れるとよいです。

贈り物として安心してお届けできるよう、梱包内容を確認のうえ発送いたします。

一点ものや工芸品では、次のような文面が合います。

一点ずつ状態を確認し、丁寧にお包みしてお届けいたします。

高級商材のメールでは、安売り感を出しすぎないことも大切です。

避けたい導線:
今すぐ使えるクーポンはこちら
次回購入で10%OFF
友達紹介でポイント進呈

もちろん、リピート導線を入れてはいけないわけではありません。

ただし、本文の最後に控えめに置くくらいが自然です。

今後のご案内をご希望の方は、下記より最新情報をご覧いただけます。

高級商材では、メールも接客の一部です。

画面で売って終わりではなく、購入後の言葉まで含めてブランド体験になります。


14.9 リピート購入につなげる導線

注文完了メールは、リピート購入への入口にもなります。

ただし、購入直後に強く売り込むと、購入者の印象が悪くなることがあります。

まずは注文への感謝と案内を優先します。

そのうえで、本文の最後に自然な導線を置きます。

リピート購入につながる導線には、次のようなものがあります。

・おすすめの使い方
・レシピ記事
・保存方法
・ギフト案内
・定期購入案内
・LINE登録
・レビュー投稿

食品ECであれば、レシピ記事との相性が良いです。

商品のおいしい使い方は、こちらでもご紹介しています。
https://example.com/recipes

消耗品であれば、再購入の目安を伝えるのも有効です。

毎日お使いの場合、約1か月ほどで使い切る量です。
次回のご注文時期の目安としてご参考ください。

ギフト商品であれば、季節の案内が自然です。

季節の贈り物やお祝いのお品としてもご利用いただけます。
最新のギフト商品は、下記ページよりご覧いただけます。

ただし、注文完了メールの中で、あれもこれも案内しすぎると読みにくくなります。

導線は1つか2つに絞ります。

悪い例:
レビューを書いてください
LINE登録してください
定期購入してください
友達に紹介してください
おすすめ商品も見てください
キャンペーンも見てください

よい例です。

商品の使い方や保存方法は、こちらでご案内しています。
https://example.com/how-to-use

購入後の導線は、売り込みではなく、購入者の役に立つ案内として置きます。

この考え方が大切です。


14.10 メールからLINE登録へつなげる

小規模ECでは、LINE登録はリピート購入につながりやすい導線です。

メールは注文確認に向いています。

LINEはその後の関係づくりに向いています。

メール:
注文確認、発送通知、重要連絡

LINE:
新商品案内、再入荷案内、季節のお知らせ、相談

ただし、注文完了メールでいきなり強くLINE登録を促すと、少し押しつけがましく見えることがあります。

自然な案内にします。

今後の入荷情報や季節商品のご案内をご希望の方は、LINEでもお知らせを受け取れます。

テンプレート例です。

【LINEでのお知らせについて】

新商品や季節限定商品のご案内、再入荷のお知らせをご希望の方は、下記よりLINEにご登録いただけます。

LINE登録はこちら:
https://lin.ee/xxxxxxx

食品ECであれば、次のように書くと自然です。

おすすめの食べ方や季節のレシピもLINEでご案内しています。
よろしければご登録ください。

工芸品や一点ものの商品であれば、次のようにできます。

展示会や新作入荷のご案内をご希望の方は、LINEでもお知らせしております。

LINE登録導線で注意したいのは、登録しないと不利になるように見せないことです。

避けたい表現:
登録しないと損です
今すぐ登録してください
限定情報を逃します

購入後のメールでは、購入者に余計な圧をかけない方が良いです。

おすすめは、次のような控えめな表現です。

ご希望の方は
よろしければ
必要に応じて
最新情報をご覧いただけます

メールからLINEへつなげる目的は、短期的に売り込むことではありません。

購入後も自然に接点を持ち続けることです。

購入
  ↓
注文完了メール
  ↓
発送完了メール
  ↓
LINE登録
  ↓
再入荷・季節商品・使い方案内
  ↓
リピート購入

この流れができると、ECは一度売って終わりではなく、関係が続く販売導線になります。


第14章のまとめ

メール通知は、ECの裏側にある小さな接客です。

購入者にとっては安心材料になり、店舗にとっては作業開始の合図になります。

この章で覚えておきたいポイントは、次の通りです。

1. 注文完了メールは、購入者を安心させるために送る
2. 店舗向け通知は、次の作業が分かる内容にする
3. メールAPIを使うと、注文後の通知を自動化できる
4. Gmailは個別対応、メールAPIは定型通知に向いている
5. メール送信失敗と決済失敗は分けて考える
6. 領収書、明細、配送案内は役割を分ける
7. 高級商材では、文面もブランド体験になる
8. リピート導線は、売り込みではなく役立つ案内として置く
9. LINE登録は、購入後の関係づくりに使う

メールは、ただ送ればよいものではありません。

「何を伝えるか」「どの順番で伝えるか」「どこまで自動化するか」によって、購入者の安心感は大きく変わります。

小規模ECでは、まず次の3通を整えるだけでも十分です。

・注文完了メール
・店舗向け新規注文通知
・発送完了メール

この3つが整うと、決済後の不安が減り、店舗側の対応もスムーズになります。

第15章では、これらの注文を管理するためのEC管理画面を作っていきます。

FAQ

よくある質問

メール通知と顧客体験は医療関係者向けだけの内容ですか。
医療分野の例が含まれる場合もありますが、医療関係者だけに限定した内容ではありません。生成AI、AI活用、DX、業務改善、プロトタイプ開発など、一般的なAI学習の事例として読める内容です。
AI初心者でも読めますか。
はい。AIをこれから学ぶ方、数学が苦手な方、仕事でAIを使いたい方にも読み進めやすいように、教材の章と節の流れに沿って整理しています。
サムネイル画像は必ず表示されますか。
はい。教材にcoverUrlが設定されている場合はその画像を表示し、未設定の場合は代替サムネイル画像を表示します。
Square API × Next.js 実践EC開発|自社ECを低コストで作る、決済・在庫・注文管理の設計と実装のほかの章も読めますか。
はい。教材トップから章立てを確認でき、前後の節へもページ下部のナビゲーションから移動できます。