「ログインもできるし、データも保存できた！完璧だ！...待てよ、会員登録した人にメールはどうやって送るんだ？有料サービスに切り替えたいけど、決済はどうやって受け取るんだ？」

前回の第2部では、Supabaseを活用してデータを保存し、ログイン機能を追加してWebサービスの「バックエンド」機能を作成しました。

今回の第3部では、さらに多様な外部サービスと連携し、Webサイトでよく使用されるいくつかの機能を追加してみましょう。

ユーザーに自動でメールを送信し、すっきりとした問い合わせフォームでユーザーの意見を聞き、さらには自分のサービスで収益を生み出す決済機能まで。一人で実装しようとすると、セキュリティや複雑な設定のせいで途方に暮れてしまいますが、​AIコーディングツールと外部の専門サービスを連携させれば、コーディングを知らなくても誰でも簡単に実装できます。

それでは、自分のWebサービスをもう一段階完璧にアップグレードしに出発しましょう！

1. 自動でメールを送信する

Webサービスを運営していると、ユーザーに自動でメールを送信しなければならない状況によく遭遇しますよね？
メール機能を自分で実装しようとすると、メールサーバーの設定、迷惑メールフォルダに振り分けられないための設定、送信失敗時のエラー処理など、考えることが山積みです。​メール配信サービスを使えば、こういった面倒なことをまるごと引き受けてくれます。

Resend — 1日100件まで無料で使用

AIコーディングツールとResendを一緒に使えば、複雑な設定なしで簡単にメールを送信できます。
自分のドメイン（例：mail.example.com）を送信元アドレスに設定すれば迷惑メールフォルダに振り分けられにくくなり、第2部で作ったSupabaseの会員情報と組み合わせれば、新規登録者に自動でお知らせメールを送ることもできます。

1. いつ必要か？

• 会員登録の認証、パスワード再設定など、​自動メールを送信する必要がある時

• Supabaseの基本メールサーバーの代わりに自分のドメインの送信元アドレスを使用したい時

• お知らせ・通知などの運営メッセージや、ニュースレターなどのマーケティング情報をメールで送信したい時

• メールが正しく配信されたかダッシュボードでリアルタイムに確認したい時

2. AIコーディングツールとResendを連携する

STEP 1 — Resendアカウントの作成

resend.com にアクセス → Get Started → GitHubまたはメールで登録

STEP 2 — ドメイン認証 ⚠️ 重要

自分のドメインでメールを送信するには、​このドメインが自分のものであることをResendに確認させる過程が必要です。（お金でカードを作るには本人認証が必要なように、自分のドメインから送信するメールであることを証明する手続きです。）

1. Resendダッシュボード → Domains → Add Domain

2. 使いたいドメインを入力（例：mail.example.com）

3. Resendに表示される確認コード（SPFやDKIMという設定値）を、自分のドメイン管理サービス（Cloudflareなど）に貼り付ける

4. 数時間〜最大48時間後、ResendでVerified（確認済み）と表示される

STEP 3 — API Keyの発行

Resendダッシュボード → API Keys → Create API Key → 生成されたキーをコピーして安全に保管

STEP 4 — AIコーディングツールにMCPを接続

ResendもMCPをサポートしています。AIコーディングツールのMCP設定に以下のURLを追加してください。

https://resend.com/mcp

STEP 5 — Supabaseの会員認証メールをResendで送信する（オプション）

第2部で作成したSupabaseの会員登録・ログインメールもResendで送信したい場合は、以下のように連携してください。

• Supabaseダッシュボード → Authentication → SMTP Settings → Custom SMTP をオン

• Host: smtp.resend.com / Port: 587 / Username: resend / Password: Resend API Key

• 送信者（Sender）: 認証済みのドメインアドレス（例：no-reply@mail.example.com）

3. AIにはこのようにリクエストしてください

1. 認証・通知メールの自動送信

   • ​“会員登録したら歓迎メールを自動で送って。Resend APIを使って”
   • ​“パスワード再設定の要求が来たら、再設定リンクのメールを送信して”

2. メールテンプレートのデザイン

   • ​“React Emailで領収書メールのテンプレートを作って。会社のロゴ、決済金額、日付を含めて”
   • ​“HTMLメールテンプレートを作って。ヘッダーにロゴ、本文に挨拶、下部に配信停止リンク”

3. 決済後の領収書自動送信

   • ​“Stripe決済成功のWebhookを受け取ったら、Resendで領収書メールを自動送信して”

4. 送信状態のモニタリング

   • ​“メール送信失敗時にログを残し、管理者に通知を送る機能を追加して”

4. 無料プランの制限

項目	無料制限
月間送信数	3,000件
1日の送信数	100件
カスタムドメイン	1個

---

2. 問い合わせフォームを設置する

Webサイトに問い合わせフォームを入れると、ユーザーの質問、フィードバック、相談依頼などを直接受け取ることができます。
しかし、簡単そうに見える問い合わせフォームも、いざ自分で実装しようとすると意外に考慮すべき点が多いです。

• 入力された内容をどこに保存するのか？

• 悪意のあるマクロが送ってくるスパムをどう防ぐのか？

• ユーザーが送った内容に自動で受付確認の返信ができるか？

• SlackやGoogle スプレッドシートのように自分がよく使う業務ツールで通知を受け取れるか？

フォームサービスを使用すれば、簡単にこれらの機能を実装できます。

Formspree — 月50件まで無料で使用

Formspreeは、複雑なコーディングなしでアドレス（URL）を一つコピーして貼り付けるだけで、ユーザーが記入した問い合わせを自分のメールに直接届けてくれるサービスです。サーバーやデータベースを自分で作る必要がないため、機能がシンプルなWebサイトやポートフォリオ、ランディングページに問い合わせ欄を付ける際に非常に便利です。

1. いつ必要か？

• サーバーなしで問い合わせ・相談フォームを追加したい時

• ユーザーが送った内容をメールですぐに受け取りたい時

• Google Sheets、Slackなどにフォームデータを自動連携したい時

• スパム防止（reCAPTCHA）を簡単に設定したい時

2. AIコーディングツールとFormspreeを連携する

STEP 1 — Formspreeアカウントの作成

formspree.io にアクセス → Get started → メールまたはGoogleアカウントで登録

STEP 2 — フォーム作成＆フォームアドレスのコピー

1. ダッシュボードから New Form をクリック → フォーム名を入力（例：“Contact Form”）

2. 生成されるとフォームの送信先アドレス（Endpoint URL）が表示される → コピー（例：https://formspree.io/f/xpznqkdl）

3. AIにこのアドレスを教えてフォームコードに入れるようリクエストすれば、すぐに動作します。

STEP 3 — スパム防止の設定

Formspreeダッシュボード → フォーム Settings → Spam protection で設定します。

• 基本reCAPTCHA（spambot自動ブロック）: 別途設定しなくても、Formspreeが自動でスパムをブロックしてくれます。

• カスタムreCAPTCHA v2/v3: Googleが提供するより強力なスパムブロックを連携できます。

• reCAPTCHA v3は画面に何も表示せず裏で静かに検査してくれるため、スパム防止機能をオンにしてもユーザーにとっては全く不便がありません。

STEP 4 — 外部サービス連携（オプション）

Formspreeに入った問い合わせを、自分がよく使う他のサービスに自動転送できます。

• Google Sheets: 問い合わせ内容が自動でGoogleスプレッドシートに表形式で記録されます。

• Slack: 問い合わせが入るたびにSlackチャンネルに通知を送ってくれます。

• Salesforce / Asana: 顧客管理（CRM）やプロジェクト管理ツールに自動連携されます。

• Webhook: 自分が作った他のサーバーやサービスにデータを直接送ることができます。

STEP 5 — AIにフォームコードを作ってもらう

STEP 2でコピーしたフォームアドレスを入れて、AIにこのようにリクエストしてください。

• ​“Formspreeで問い合わせフォームを作って。フォームアドレス（エンドポイントURL）は https://formspree.io/f/xpznqkdl だよ。名前、メール、メッセージの入力欄を含めて”

• ​“フォームを送信して成功したら「ありがとうございます」というメッセージを表示し、失敗したら何が間違っているのかを案内して”

3. AIにはこのようにリクエストしてください

1. 基本の問い合わせフォーム

   • ​“名前、メール、メッセージを入力する問い合わせフォームを作って。フォームアドレス（Formspree エンドポイント）を連携し、送信したら成功・失敗メッセージも画面に表示して”

2. 画面のちらつきがないフォーム（AJAX方式）

   • ​“問い合わせフォームをAJAXで実装して。送信ボタンを押してもページがリロードされずに送信され、成功したら「ありがとうございます」メッセージを表示して”

3. 自動返信メールの設定

   • ​“問い合わせを送った人に、自動で受付確認メールも送って”

4. デザインのカスタム

   • ​“Tailwind CSS（デザインツール）ですっきりとデザインした問い合わせフォームを作って。ダークモードもサポートするように”

4. 無料プランの制限

項目	無料制限
月間受信数	50件
メール連携	最大2個
データ保管	30日
フォーム数	無制限

---

3. 決済機能を追加する

有料サービスを運営するには決済機能が必須ですよね？しかし、クレジットカードなどのクレジットカード番号など大切な情報を直接入力することに不安を感じるユーザーも少なくありません。また、仮に入力してもらえたとしても、その情報を安全に管理し決済処理まで行う仕組みを個人で一から構築するのは、セキュリティ面のハードルがとても高いのが現実です。

• カード情報のセキュリティ — グローバルカード決済セキュリティ標準（PCI DSS）の遵守（カード情報を自分のデータベースに直接保存してはいけない）

• 返金・キャンセル対応 — 一部返金・サブスク途中解約など、さまざまなケースへの対応

• 税金・インボイス — 国別の税金計算、領収書の自動発行

• サブスクリプション管理 — 翌月の決済日計算、料金プラン変更、決済失敗時の自動再試行

決済専門サービスを使用すれば、これらすべての複雑な過程をAIコーディングツールの助けを借りて簡単に解決できます。

Stripe

Stripeは、世界で最も広く使われている決済専門サービスです。​個別の決済から定期購読（サブスクリプション）、クーポン、領収書発行まで、サービスを始めるのに必要な決済機能のほとんどを提供しています。AIコーディングツールとMCPで連携すれば、複雑な決済設定も素早く実装できます。

1. いつ必要か？

• 有料料金プラン・サブスクリプション決済を受けたい時（月間・年間購読）

• 商品販売、デジタルコンテンツなど単発決済が必要な時

• 決済の成功可否に応じてアプリの特定の機能を自動でオン/オフしたい時（例：決済完了時にPro機能を有効化）

• クーポン・割引コード、無料体験期間（Trial）機能が必要な時

• 領収書を自動で発行して送らなければならない時

2. AIコーディングツールとStripeを連携する

STEP 1 — Stripeアカウントの作成

stripe.com にアクセス → Start now → メールで登録

• 登録直後はテストモードで開始されます。（実際にお金が引き落とされない偽のカードで開発およびテストを行うことができます。）

• 実際の顧客から本当の決済を受けるには、事業者情報や本人確認書類を提出して、本番モード（Live mode）に切り替える必要があります。

STEP 2 — 商品＆価格の作成

Stripeダッシュボード → Products（商品） → Add product（商品追加）

• 商品名、説明、画像などを入力

• 価格（Price）設定：単発決済（One-off）または定期購読決済（Recurring）を選択

• サブスクリプション決済の場合、月間決済・年間決済の価格をそれぞれ設定できます。

STEP 3 — API Key（シークレットキー）の発行

Stripeダッシュボード → Developers（開発者） → API Keys

• Publishable key（公開キー）: Webサイトの画面（フロントエンド）で安全に使用できるキー

• Secret key（シークレットキー）: サーバー（バックエンド）でのみ密かに使用しなければならない絶対キー（⚠️ 外部流出禁止）

STEP 4 — AIコーディングツールにMCPを接続

StripeもMCPをサポートしています。AIコーディングツールのMCP設定に以下のアドレスを追加してください。

https://mcp.stripe.com

接続が完了すると、自分が直接複雑な設定画面を押さなくても、AIがコードで勝手に決済画面を作成し処理してくれます。

STEP 5 — Webhook（決済通知）の設定

顧客がカードを切って決済が成功したり失敗したりした時、その知らせを自分のWebサイトがすぐに気づかなければなりませんよね？この時に使用するのがWebhookです。Stripeが自分のWebサイトに「決済成功したよ！」とメッセージを飛ばしてくれる機能だと考えるとわかりやすいです。

• Stripeダッシュボード → Developers → Webhooks → Add endpoint

• 自分のWebサイトの受信先URL（例：https://example.com/api/webhooks/stripe）を入力

• 受信する通知の種類を選択：checkout.session.completed（決済成功）、customer.subscription.deleted（サブスクリプションキャンセル）など

3. AIにはこのようにリクエストしてください

1. 決済画面（Checkout）を作る

   • ​“Stripe Checkout機能を使ってサブスクリプション決済ページを作って。月間 $10プランと年間 $100プランの2つを選択できるようにして”
   • ​“決済に成功したら /success（成功）ページに送り、決済画面で戻るを押したら /pricing（料金案内）ページに戻るようにして”

2. サブスクリプション（料金プラン）管理

   • ​“ログインしたユーザーが現在決済中か状態を確認して、有料決済者にだけPro機能ボタンを表示して”
   • ​“マイページでユーザーが直接サブスクリプションを解約できるボタンを追加して。Stripeが提供する顧客専用ポータル（Customer Portal）に繋いで”

3. クーポン・無料体験の適用

   • ​“7日間無料で体験（Trial）してみて、8日目から自動で決済されるサブスクリプションプランを作って”
   • ​“決済画面で「WELCOME20」というクーポンコードを入力したら、初月の決済金額を20%割引して”

4. 決済自動化処理（Webhook）

   • ​“決済成功通知（Webhook）を受け取ったら、私のDBのユーザーサブスクリプション状態をアップデートし、Resendを使って決済領収書メールを自動で送って”
   • ​“サブスクリプションキャンセル通知（Webhook）を受け取ったら、該当ユーザーのPro機能をオフにし、残念な気持ちを込めた案内メールを送って”