Resendを使い倒す──お問い合わせフォームからニュースレターまで無料枠で全部まかなう

開発者向けメールAPIのResendは、無料プランでも月3,000通の送信と1,000コンタクトへのニュースレター配信が同時に成立する。React EmailとBroadcastsを組み合わせれば、フォームから定期配信まで単一基盤で完結する仕組みを、実装例とともに整理した。

2026-05-07 ·

Resend
React Email
Next.js
メール配信
ニュースレター

メール配信はWebサービス運営の地味なインフラだ。パスワードリセット、サインアップ確認、お問い合わせフォームの通知、ニュースレター──いずれも届かなければ意味がないし、迷惑メールフォルダに落ちれば送らないのとほぼ同義になる。

ところが長年「とりあえずこれ」のデファクトだった SendGrid は、2025年5月に永続無料プランを廃止した。いまでは60日のトライアル期間が過ぎれば月額$19.95を払うか配信を止めるかの二択で、過去のチュートリアル記事に並ぶ「無料で100通/日」という案内文は一夜にして時代遅れになった。

代わりに新規プロジェクトの第一候補として急浮上しているのが Resend だ。

Resendとは何者か

Resend は Y Combinator 出身の開発者向けメール API スタートアップで、2023年に Bu Kinoshita(CTO)と Zeno Rocha(CEO)によって創業された。本社はサンフランシスコ。Zeno Rocha は Liferay 時代にメール配信の悪夢に苦しみ、WorkOS で Developer Experience 担当 VP を務めた経験から「この問題を一度きちんと解決したい」と Resend を立ち上げたと語っている。

ほかのメール API と一線を画すのは、開発者体験(DX)への執念だ。クリーンな REST API、Node.js / Python / Ruby / PHP / Go / Java / Elixir 対応の SDK、Webhooks による完全な可視化、そしてオープンソースの React Email ライブラリ。これらが揃って初めて「メールはコードから送るもの」という実装感覚が成立する。

無料プランの中身を確認する

まずは事実を整理しておこう。Resend の無料プランで使える範囲はこうだ。

トランザクションメール:3,000通/月、100通/日の上限
認証ドメイン:1つ
マーケティング(Broadcasts)コンタクト:1,000名まで
マーケティング配信数:1,000名以内なら無制限
データ保持:30日(2025年に全プラン共通で30日に引き上げ済み)
APIレート制限:5リクエスト/秒(チーム単位)

100通/日は個人サイトのお問い合わせフォームや小規模SaaSの初期運用には十分すぎる。注目したいのはマーケティング側で、コンタクト数課金のため1,000人以下なら毎週ニュースレターを配信し続けても完全無料で回せる。トランザクションとマーケティングが同じダッシュボードで管理でき、しかも両方に無料枠がついてくる。これは個人開発者にとって相当な手厚さだ。

なおSendGridが無料枠を廃止した話は冒頭で触れたとおりだが、Resend自身も2024年10月にScale階層の一部で価格をほぼ倍にした実績がある。長期運用を考えるなら料金ページの定期的な確認は習慣にしておきたい。

Emails:お問い合わせフォームを15分で立ち上げる

具体的な使い方を見ていこう。個人ブログに問い合わせフォームを置く、というよくあるケースを Next.js (App Router) で組むなら、必要なのは API Route ひとつだけだ。

// app/api/contact/route.ts
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: Request) {
  const { name, email, message } = await req.json();

  const { data, error } = await resend.emails.send({
    from: 'Contact <noreply@example.com>',
    to: ['you@example.com'],
    reply_to: email,
    subject: `お問い合わせ:${name}さんから`,
    text: message,
  });

  if (error) return Response.json({ error }, { status: 500 });
  return Response.json(data);
}

これで終わり。from の差出人ドメインだけは Resend ダッシュボードで DNS 認証(SPF / DKIM / DMARC)を通しておく必要があるが、表示されたレコードを Cloudflare や Vercel の DNS にそのまま貼るだけで数分作業だ。

地味なポイントとして reply_to に送信者のメールアドレスを入れておくのが効く。受信トレイで「返信」を押すだけで、そのままユーザーに返事ができる。問い合わせ運用が一段ラクになるので忘れずに。

React Email:メールをコンポーネントとして書く

トランザクションメールで <table> を入れ子にしてOutlook対応のインラインCSSを書く地獄を経験した人なら、これがどれだけ革命的かわかると思う。Resend公式が開発する React Email は、その地獄をJSXで書き換える。

import { Body, Button, Container, Heading, Html, Text, Tailwind } from 'react-email';

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Tailwind>
        <Body className="bg-white font-sans">
          <Container className="mx-auto p-5">
            <Heading>{name}さん、ようこそ</Heading>
            <Text>登録ありがとうございます。</Text>
            <Button
              href="https://example.com/start"
              className="bg-black text-white px-4 py-2 rounded"
            >
              はじめる
            </Button>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

ボタン、見出し、画像、レイアウトコンポーネントが一通り揃い、Tailwind CSS にも対応している。npm の週間ダウンロード数は2025年末時点で約92万、2026年に入ってリリースされた React Email 6.0 ではついに週200万ダウンロードを突破した。Resendに送るときは react: <WelcomeEmail name="秋葉" /> を渡すだけで、HTML変換は内部でやってくれる。

ローカルではプレビューサーバーが立ち、モバイルとデスクトップのレスポンシブ表示確認、SpamAssassin ベースのスパムスコアチェック、リンクや画像のリンタまで内蔵されている。さらに6.0では埋め込み可能なオープンソースのビジュアルエディタが公開されており、自社プロダクトに「メールテンプレート編集機能」を組み込むこともできるようになった。「メール開発」という言葉がようやく成立する環境が整った、という表現は誇張ではない。

Broadcasts:ノーコードでニュースレターを配信する

配信基盤がいくら強くても、毎週のニュースレターを書くたびに React コンポーネントを Git に commit するのは DX として筋が悪い。そこで Resend が用意しているのが Broadcasts だ。

Broadcasts はダッシュボード上の WYSIWYG エディタで、Notion 風のスラッシュコマンドから見出し、ボタン、画像、Section、Social Links、YouTube、X(旧Twitter)埋め込みなどを挿入できる。15種類以上のコマンドが揃い、Markdown の貼り付けにも対応している。Notion や iA Writer からそのままペーストすれば書式が保たれるのが地味に効く。

差出人と件名と本文を書き終えたら、配信先の Audience(購読者リスト)を選び、配信時刻を自然言語で指定する。in 1 hour、tomorrow at 9am、next Monday at 3pm JST のような入力を Resend がそのままパースしてくれる。

仕掛けの極めつけはふたつ。ひとつは {{{RESEND_UNSUBSCRIBE_URL}}} プレースホルダ、または Unsubscribe Footer コンポーネント。これを置くだけで購読解除リンクと解除フローまで丸ごと面倒を見てくれる。GDPR や CAN-SPAM 対応で自前の解除画面を作る必要がない。

もうひとつは送信確定UI。誤爆を防ぐために横スライダーをドラッグして送信を確定するインタラクションになっている。地味だが「数千人にゴミを送りつける」事故を物理的に減らしてくれる。送信後はオープン率、クリック率、配信エラーがリアルタイムで集計される。

ノーコードだけでなく Broadcast API も公開されているので、自社 SaaS の管理画面に「ニュースレター配信機能」をそのまま組み込む、といった用途にも応えられる。

Audiences:購読者管理という退屈で重要な仕事

ニュースレター運営の本質は、購読・解除フローを地味に正しく回し続けることだ。Audiences はコンタクトをグループ化して管理する機能で、CSV インポート、API 経由の追加・削除、unsubscribed フラグの自動管理まで一通り揃っている。

ブログ側に購読フォームを置いて Contacts API を叩けば、リストが自動で増えていく。

await resend.contacts.create({
  email: 'reader@example.com',
  first_name: '秋葉',
  audience_id: process.env.RESEND_AUDIENCE_ID!,
});

ユーザーが unsubscribe リンクを踏めば Audience 側のフラグが自動で立つ。自前の DB と二重管理しないように、Webhook で同期する設計にしておけば運用が綺麗にハマる。

お作法と制限事項

実運用に入る前に押さえておきたい落とし穴を共有しておく。

バウンス率は4%未満を維持する義務がある。これを超えると一時的に送信停止される。テスト送信時は実在しない適当なアドレスではなく、Resend提供のテストアドレス(delivered@resend.dev など)を使うこと
スパム率は0.08%未満。低めに見えるが、購読者の同意を取って送る、開封しないユーザーを定期的にリストから抜く、という当たり前のことをすれば問題にならない
APIレート制限は5 req/秒。これを超えると429。バッチ送信APIなら1リクエストで100通まで送れるので、ニュースレター用途では困らない
超過課金の上限は月額契約の5倍。意図しない大量送信で破産しない安全装置になっている

ここまでが無料

整理しよう。お問い合わせフォーム、ウェルカムメール、パスワードリセット、決済通知、さらに週刊ニュースレターまで──小〜中規模の個人プロジェクトなら、Resend の無料枠だけで全部成立する。SendGrid から流民となった開発者にとって、これは現時点でいちばん筋のいい移住先だ。

購読者が1,000人を越え、月3,000通を越えたあたりで初めて課金(Proプラン:$20/月、50,000通)を検討すれば良い。そこまで伸びていれば月20ドルは痛くもないはずだ。

「メール配信なんて地味なもの」と思っている開発者ほど、一度ダッシュボードを触ってみてほしい。Claude Code を最初に触ったときに感じたあの「これは違う」という直感が、ここにもある。

Last updated 2026-05-07