メインコンテンツへスキップ

​
Resend とは？

Resend は、開発者向けに設計されたメール API です。トランザクションメールやマーケティングメールを送信するために、高い到達率、統合の容易さ、そしてクリーンな開発者体験に重点を置いています。

​
ステップバイステップのチュートリアル

このチュートリアルでは、1時間以内に、リード収集、メール確認、ニュースレター購読、社内向け管理ダッシュボードまで備えたフル機能のCRMを構築する手順を、ステップごとに解説します。次のツールを使います。
  • Lovable: フロントエンドとバックエンドロジックを生成するために使います。
  • Supabase: セキュアなデータ保存と認証に使います。
  • Resend: トランザクションメールおよびマーケティングメールの自動送信とトラッキングに使います。
さっそく始めましょう。
1

お問い合わせフォーム付きのランディングページを作成する

Lovable の AI を使って、プロダクトやサービス向けのランディングページを素早く作成しましょう。手順:
1

新しい Lovable プロジェクト

新しい Lovable プロジェクトを作成します。
2

プロンプト:

名前、メールアドレス、メッセージを収集するお問い合わせフォーム付きの SaaS ランディングページを作成してください。
Landing Page Lovable Project Pn
3

生成されたコードを確認する

生成されたコードを確認するか、選択ツールを使って要素を微調整します。
4

入力バリデーションを追加する

入力バリデーションを追加し、より良いユーザー体験のために message フィールドも用意します。Email Resend Form Pn
2

フォームからの送信内容をSupabaseに保存する

Supabase は、安全なバックエンドデータベースとして機能します。
1

Supabase アカウント

無料の Supabase アカウントを登録し、新しいプロジェクトを作成します。
2

APIキー

Lovable で、APIキーを使って Supabase プロジェクトに接続します。Supabase Resend Email Pn
3

`contacts` テーブルを次のカラムで作成します:

  • id: UUID, primary key
  • name: text
  • email: text
  • message: text
  • created_at: timestamp
4

送信ロジック

フォームの送信ロジックを変更して、データを Supabase に挿入するようにします。
5

RLS

Supabase の Row-Level Security (RLS) を適用して、認証済みユーザーのみがアクセスできるようにします。
3

Resend を使った確認メールの送信

Set up Resend を設定して、リードがフォームを送信するたびに自動確認メールを送信します。
1

Resend にサインアップする

Resend にサインアップし、独自ドメインを認証します。
  • DNSレコード（TXT、MX）を更新するよう求められます。
  • メールのレピュテーションをより良く管理するために、updates.domain.com のようなサブドメインを使用しましょう。
2

APIキー

Lovable の環境設定またはバックエンド関数を使って APIキー を連携します。
3

SDK

Resend の SDK を使用して、フォーム送信時に確認メールを送信します。確認メール送信 Resend Pn
4

オプション: React Email

React Email（Resend 提供）を使って、再利用可能なコンポーネントでメールの見た目や雰囲気をカスタマイズします。メールのカスタマイズ Resend Pn
4

安全な管理ダッシュボードを構築する

認証済みユーザーだけがリードを閲覧・管理できるようにします。
1

Admin route

Lovable で /admin ルートを作成します。
2

Supabase Authentication

メールアドレスとパスワードによるログインを許可する Supabase 認証を有効化します。
3

Contacts

次のカラムを持つ contacts テーブルを表示します：
  • 名前
  • メールアドレス
  • メッセージのプレビュー
  • 送信日時
4

Full contact detail

行がクリックされたときに連絡先の詳細をすべて表示する詳細ペイン（例：スライドパネル）を追加します。Crm Resend Email Pn
5

Redirect logic

未認証ユーザーを /login にリダイレクトするロジックを追加します。
5

管理者からのカスタムメール返信を有効化

チームがパーソナライズされたフォローアップを送信できるようにしましょう。
1

Contact detail pane

連絡先詳細ペインで、テキストフィールドとテンプレート（例：「Thanks for signing up!」）を追加します。
2

Add send button

Resend と連携した送信ボタンを追加します。
3

Store sent messages

送信された各メッセージを Supabase の sent_emails テーブルに保存します:
  • contact_id
  • subject
  • body
  • sent_at
これにより、すべてのフォローアップを検索可能なログとして管理できます。
6

ニュースレター登録フォームを追加

Resend の Audiences を使って購読者を管理し、一斉メールを送信します。サブスクリプションニュースレター Resend
1

新しいフォームを追加

ランディングページにニュースレター登録用の新しいフォームを追加します。
2

Resend のコンタクト

フォーム送信時に次を実行します:
  • API を使って Resend のコンタクトを作成する
  • （任意）コンタクト情報を Supabase にもローカル保存する
3

デザイン

Resend の一斉メール用 UI を使ってニュースレターをデザインし、送信します。
  • 購読解除（退会）ロジックが組み込み済み
  • パフォーマンスインサイト（開封率、配信ステータス）
4

コンプライアンスチェック！

コンプライアンス（例: GDPR）のために、ダブルオプトイン フローの実装を検討してください。
7

おまけ: Resend を Supabase Auth に接続する

Send Batch Emails Gdpr Resend PnSupabase のデフォルトのメール認証（1時間あたり 4 通までしか送信できない制限あり）を強化したいですか？
1

Resend と Supabase の連携

Resend の Supabase 連携にアクセスします。
2

認証

Supabase プロジェクトで認証します。
3

ドメイン設定

使用するドメインと送信者名／メールアドレスを選択します。
4

SMTP

Resend が自動で SMTP をセットアップし、Supabase のデフォルトのメールシステムを置き換えます。
5

カスタマイズ

これで Supabase のダッシュボードから認証メールのテンプレートをカスタマイズできるようになります。
8

最終調整とベストプラクティス

Audience Resend Pn
  • エラー処理: Lovable でビルドエラーが表示されても、誤検知の可能性があります。必ず実際のアプリ上で動作をテストしてください。
  • Supabase のロールバックについて: Lovable でコードをロールバックしても、関連する Supabase のポリシーやマイグレーションは自動ではロールバックされません。必要に応じて手動で削除してください。
  • メール到達率向上のヒント:
    • レピュテーションを分離するためにサブドメインを使用しましょう。
    • メールには必ずプレーンテキスト版も含めましょう。
    • Resend のインサイトダッシュボードでメールのパフォーマンスをモニタリングしましょう。
9

完了です！🎉

1時間もかからずに、次の機能を備えたモダンなCRMを作成できました:
  • ランディングページとお問い合わせフォーム
  • データベースを利用したリードの保存
  • 自動メール確認
  • リード管理用の管理ダッシュボード
  • カスタムメール返信
  • ニュースレター配信
  • 認証とメールアドレスの確認

​
さらに発展させるには？

  • Supabase の cron ジョブを使って メールの予約送信 に対応する
  • リードステージに応じてメールを送信する 自動化フロー を構築する
  • UI を改善してブランドへの信頼感とコンバージョンを高める

​
Resend 連携に関するよくある質問

Resend は、開発者向けに作られたメール API です。高い到達率、連携のしやすさ、そしてトランザクションメールやマーケティングメール送信のためのクリーンな開発体験に重点を置いています。
いいえ。Resend の無料プランだけで、CRM のセットアップ全体を完了できます。この無料プランでは、認証済みドメインからのメール送信と、マーケティングメール用のコンタクトを最大 3,000 件までサポートします。
Resend で Domains に移動し、ドメインを追加します。DNS プロバイダー（例：Cloudflare、Namecheap）で追加するための DNS レコード（TXT、MX）が表示されます。追加後、Verify をクリックします。
送信ドメインの評価を分離するために、updates.yourdomain.com のようなサブドメインを使用することをおすすめします。
よくある原因がいくつか考えられます：
  • ドメインを認証していない
  • プレーンテキスト版のメールがない
  • onboarding@resend.dev のような汎用的な送信元を使っている
  • ベストプラクティスに従っていない（例：マーケティングメールに配信停止リンクがない）
Resend の Deliverability Insights パネルを使って、具体的な改善提案を確認してください。
はい。React Email（Resend チームが提供するオープンソースライブラリ）を使うことで、React コンポーネントを利用したスタイル付き・レスポンシブなメールをデザインできます。
Resend は 両方 に対応しています：
  • API または SDK を利用した トランザクションメール（確認、リセット、通知など）
  • Broadcast 機能と Audiences を利用した マーケティングメール
ダッシュボードからキャンペーンの作成、プレビュー、トラッキングができます。
Audiences を利用します：
  • コンタクトを手動で追加するか、CSV でインポートするか、API を使ってプログラムから追加します。
  • 各 Audience には固有の ID があり、それを使って購読情報を紐付けられます。
  • ユーザーは Resend に組み込まれた配信停止リンクを通じて、自動的に配信停止できます。
デフォルトではできませんが、手動で実装することは可能です：
  1. フォーム送信時に、最初の確認メールを送信します。
  2. ユーザーにリンクをクリックしてもらいます。
  3. クリック時に購読を確定し、そのユーザーを Resend の Audience に追加します。
現時点ではできません。Resend は、まだドリップキャンペーンや自動シーケンスをサポートしていません。
回避策：Supabase Cron Jobs を利用して、一定間隔で Resend のメールをトリガーするタスクをスケジュールしてください。
Resend が提供する公式の Supabase Integration を利用します：
  1. Supabase プロジェクトに対して認証を行います。
  2. ドメインと送信者名を指定します。
  3. Resend が Supabase の認証メールを自動的に設定し、あなたの Resend アカウント経由で送信されるようにします。
Resend は配信停止処理を自動で行います：
  • Broadcast メールには、配信停止リンクを必ず含める必要があります。
  • ユーザーが配信停止すると、そのユーザーは対象の Audience から削除されます。
  • これはメールのコンプライアンス要件（例：CAN-SPAM、GDPR）です。