> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Resend 連携
> Lovable アプリケーションと Resend を連携する方法を学ぶ
## Resend とは？
[Resend](https://resend.com/emails) は、開発者向けに設計されたメール API です。トランザクションメールやマーケティングメールを送信するために、高い到達率、統合の容易さ、そしてクリーンな開発者体験に重点を置いています。
## ステップバイステップのチュートリアル
VIDEO
このチュートリアルでは、1時間以内に、リード収集、メール確認、ニュースレター購読、社内向け管理ダッシュボードまで備えたフル機能のCRMを構築する手順を、ステップごとに解説します。次のツールを使います。
* **Lovable**: フロントエンドとバックエンドロジックを生成するために使います。
* **Supabase**: セキュアなデータ保存と認証に使います。
* **Resend**: トランザクションメールおよびマーケティングメールの自動送信とトラッキングに使います。
さっそく始めましょう。
Lovable の AI を使って、プロダクトやサービス向けのランディングページを素早く作成しましょう。
**手順:**
新しい Lovable プロジェクトを作成します。
名前、メールアドレス、メッセージを収集するお問い合わせフォーム付きの SaaS ランディングページを作成してください。
生成されたコードを確認するか、選択ツールを使って要素を微調整します。
入力バリデーションを追加し、より良いユーザー体験のために `message` フィールドも用意します。
Supabase は、安全なバックエンドデータベースとして機能します。
無料の Supabase アカウントを登録し、新しいプロジェクトを作成します。
Lovable で、APIキーを使って Supabase プロジェクトに接続します。
* `id`: UUID, primary key
* `name`: text
* `email`: text
* `message`: text
* `created_at`: timestamp
フォームの送信ロジックを変更して、データを Supabase に挿入するようにします。
Supabase の Row-Level Security (RLS) を適用して、認証済みユーザーのみがアクセスできるようにします。
Set up [Resend]() を設定して、リードがフォームを送信するたびに自動確認メールを送信します。
[Resend](https://resend.com) にサインアップし、独自ドメインを認証します。
* DNSレコード（TXT、MX）を更新するよう求められます。
* メールのレピュテーションをより良く管理するために、`updates.domain.com` のようなサブドメインを使用しましょう。
Lovable の環境設定またはバックエンド関数を使って APIキー を連携します。
Resend の SDK を使用して、フォーム送信時に確認メールを送信します。
[React Email](https://react.email)（Resend 提供）を使って、再利用可能なコンポーネントでメールの見た目や雰囲気をカスタマイズします。
認証済みユーザーだけがリードを閲覧・管理できるようにします。
Lovable で `/admin` ルートを作成します。
メールアドレスとパスワードによるログインを許可する Supabase 認証を有効化します。
次のカラムを持つ `contacts` テーブルを表示します：
* 名前
* メールアドレス
* メッセージのプレビュー
* 送信日時
行がクリックされたときに連絡先の詳細をすべて表示する詳細ペイン（例：スライドパネル）を追加します。
未認証ユーザーを `/login` にリダイレクトするロジックを追加します。
チームがパーソナライズされたフォローアップを送信できるようにしましょう。
連絡先詳細ペインで、**テキストフィールド**と**テンプレート**（例：「Thanks for signing up!」）を追加します。
Resend と連携した**送信ボタン**を追加します。
送信された各メッセージを Supabase の `sent_emails` テーブルに保存します:
* `contact_id`
* `subject`
* `body`
* `sent_at`
これにより、すべてのフォローアップを検索可能なログとして管理できます。
Resend の **Audiences** を使って購読者を管理し、一斉メールを送信します。
ランディングページにニュースレター登録用の新しいフォームを追加します。
フォーム送信時に次を実行します:
* API を使って Resend のコンタクトを作成する
* （任意）コンタクト情報を Supabase にもローカル保存する
Resend の一斉メール用 UI を使ってニュースレターをデザインし、送信します。
* 購読解除（退会）ロジックが組み込み済み
* パフォーマンスインサイト（開封率、配信ステータス）
コンプライアンス（例: GDPR）のために、**ダブルオプトイン** フローの実装を検討してください。
[Resend の Supabase 連携](https://resend.com/integrations/supabase)にアクセスします。
Supabase プロジェクトで認証します。
使用するドメインと送信者名／メールアドレスを選択します。
Resend が自動で SMTP をセットアップし、Supabase のデフォルトのメールシステムを置き換えます。
これで Supabase のダッシュボードから認証メールのテンプレートをカスタマイズできるようになります。
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](https://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）です。
Supabase のデフォルトのメール認証（1時間あたり 4 通までしか送信できない制限あり）を強化したいですか？
* **エラー処理**: Lovable でビルドエラーが表示されても、誤検知の可能性があります。必ず実際のアプリ上で動作をテストしてください。
* **Supabase のロールバックについて**: Lovable でコードをロールバックしても、関連する Supabase のポリシーやマイグレーションは自動ではロールバックされません。必要に応じて手動で削除してください。
* **メール到達率向上のヒント**:
* レピュテーションを分離するためにサブドメインを使用しましょう。
* メールには必ずプレーンテキスト版も含めましょう。
* Resend のインサイトダッシュボードでメールのパフォーマンスをモニタリングしましょう。