React Email vs Maizzle：SaaSチーム向けメール開発比較

先に結論を決めるための見方

Reactを中心にSaaSを開発し、メールのデータ型と部品をアプリケーションの規約に寄せたいならReact Emailが候補になります。見出し、明細、CTA、フッターをコンポーネントに分け、注文番号や請求額をpropsで渡せます。既存のレビュー方法を使えますが、JSXとReactを扱う人が保守する前提です。

HTMLを直接読めること、Tailwindのデザイントークンをメールにも使えること、生成工程を明示できることを重視するならMaizzleが合います。HTMLソース、レイアウト、設定、ビルド成果物を分けられるため、メール制作とアプリケーション実装を別の担当者が行うチームでも境界を置けます。どちらを選んでも、配送、イベント、抑制、再試行は別の送信サービスに委ねます。

React Emailのワークフロー

React Emailでは通知を関数コンポーネントとして表現します。歓迎メールなら名前、認証URL、使用言語を入力にし、請求メールなら明細配列、合計、支払期限を入力にします。共通ヘッダーやボタンを小さな部品にし、データを組み立てるコードとメール向けのHTML構造を分離します。TypeScriptの型で必須URLや翻訳キーの欠落を見つけやすくします。

ローカルプレビューは、propsを変えたときの文面とレイアウトを確認する場所です。入力データは固定のサンプルとして置き、顧客データや秘密情報を混ぜません。送信直前にHTMLを生成するのか、CIで生成した成果物を読むのかも決めます。タイミングによってバージョン管理と障害対応が変わるためです。

Reactの部品をウェブ画面とそのまま共有せず、メールクライアントで扱えるタグやレイアウトに限定した部品を作ります。代替テキスト、絶対URL、表形式の明細、長い件名などを契約に含めます。

Maizzleのテンプレートとビルド

MaizzleはHTMLを中心に、Tailwind CSSのユーティリティクラス、レイアウト、includeを組み合わせます。全テンプレートに同じ外枠を適用し、本文だけを差し替える構造にすると色や余白を一か所で調整できます。ビルドではCSSを整理し、メールHTMLにインライン化する工程を設定します。出力先と命名規則を決めれば、APIへ渡すファイルを特定できます。

Tailwindを使えても、ブラウザ向けの全機能がメールクライアントで同じように動くわけではありません。表、セル、幅、フォント、背景色など対象クライアントで必要な表現をルールにします。生成HTMLを確認し、リンク、画像、条件分岐、翻訳キーが意図した値かを追います。

Maizzleの開発サーバーは、HTMLと設定の変更による出力を確認する場所です。アプリケーションは生成済みHTMLを読み込んでも、ジョブでデータを差し込んでも構いません。誰がどの成果物をいつ送信したかを追跡できるようにします。

コード、i18n、クライアント対応

React Emailではpropsとコンポーネントの変更を、MaizzleではHTML構造、Tailwindのクラス、変換後の差分を中心にレビューします。共通デザインの色、余白、ボタン、テキスト階層を文書化し、片方だけの記法へ依存しないようにします。

i18nは翻訳カタログとlocale、翻訳キー、変数を明確にします。React Emailならlocaleをpropsで受け、Maizzleならビルドデータや言語別ファイルから値を入れます。日本語の改行、英語やドイツ語の長い文、日付と通貨をサンプルに加え、未翻訳の値を送らない流れにします。

クライアント互換性はフレームワークの名前だけでは決まりません。テーブル、インラインCSS、画像寸法、代替テキスト、リンク先、ダークモードの色を対象メーラーに合わせます。送信前に変数が残っていないことと、購読解除やトラッキングの扱いが契約に沿うことも確認します。

送信APIと予算

React EmailとMaizzleは無料のオープンソースです。SaaSの月額予算には別に配送サービスを置きます。Resend Freeは月3,000通、Proは月額 $20 で月50,000通です。月100,000通ではResend Proが月額 $35 です。いずれも送信数を基準にした月額です。

Postmark Basicは月額 $15 で月10,000通から、50,000通では月額 $55 です。Mailgun Basicは月額 $15 で月10,000通、Foundationは最初の1か月以降に月額 $35 で月50,000通です。無料の月を恒常的な単価として扱わないようにします。

SendGrid Essentialsは月額 $19.95 からで、月50,000〜100,000通の範囲が対象です。月100,000通では開始価格と選択数量の価格を分けます。送信数、超過、ログ保持、専用IP、ドメイン数を同じ表に置くと比較が混ざりません。

API接続では、宛先、件名、HTML、テキスト版、タグ、イベントIDの契約を決めます。レンダリング済みHTMLをAPIへ渡す方式も、Maizzleの出力をジョブが読む方式も選べます。秘密鍵はテンプレートに置かず、再試行と重複送信をジョブ側で制御します。

React EmailからMaizzleへの移行

通知、共通部品、入力データ、翻訳キー、送信呼び出しを一覧にします。表とボタンを含む代表的な通知を選び、Reactのpropsと条件をMaizzleのデータとHTMLブロックへ写します。同じ入力でリンク、文面、数値、言語を照合し、ヘッダーはlayout、明細はincludeやデータループへ分けます。

旧レンダリングと新ビルドを段階的に送信側へ渡せるようにし、成果物のバージョン、設定、翻訳を記録します。HTMLだけでなく、イベントID、送信元、購読解除URLの受け渡しも変わっていないか確認します。

MaizzleからReact Emailへの移行

HTMLからデータを取り出し、layout、include、Tailwindのクラスを分類します。外枠、ロゴ、見出し、表、CTAをReactコンポーネントに置き換え、受け取る値を型で定義します。Tailwindのクラスをそのまま移さず、メールで必要なスタイルを部品と規約に合わせます。

一つのlocaleと代表入力でレンダリングし、Maizzleの成果物と比較します。共通部品を固めてから種類を増やし、送信APIの場所は当面保ちます。テンプレートと配送経路を同じリリースで変えないと、問題を切り分けやすくなります。

チームに合わせた選択

Reactの型、レビュー、モジュール構成をメールにも使いたいチームにはReact Emailが自然です。HTMLの最終形を見ながらTailwindとビルド成果物を管理したいチームにはMaizzleが向きます。複数チームなら所有者、翻訳の責任者、送信APIの担当を決めます。併用するなら通知ごとにソース形式を宣言し、同じメールを二つの場所で編集しない運用にします。