HTML メールビルダーの選び方：誰が編集するかで決める

種類ごとに「何を渡して、何が返ってくるか」

「HTML メールビルダー」と呼ばれる道具は、入力と出力が違います。コード系は部品を書いて HTML を受け取り、ビジュアル系は画面で組んで HTML を書き出します。組み込み型は自社製品の中に編集画面を置き、テストツールは完成した HTML を渡してクライアント別のスクリーンショットを受け取ります。配信サービスは HTML を渡して実際の受信箱に届けます。比較表に全部を並べると同じ土俵に見えますが、同じ土俵ではありません。先に決めるのは、ソースの持ち主、文面を直す人、HTML の送り先、そして「動いた」と判断する根拠の4点です。

開発チームがテンプレートを持つ場合

MJML の FAQ によると、MJML は MIT ライセンスです。公式ドキュメントの最小例と同じ形で書くと、次のようになります。

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>ご注文の商品を発送しました。</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

React Email は、GitHub リポジトリに MIT ライセンスと記載されています。render のドキュメントにある書き方に合わせ、日本語の文面にすると次のとおりです。

import * as React from 'react';
import { Html, Button, Hr, Text } from "react-email";

export function MyTemplate(props) {
  return (
    <Html lang="ja">
      <Text>ご注文の商品を発送しました。</Text>
      <Hr />
      <Button href="https://example.com/orders">注文を確認する</Button>
    </Html>
  );
}

export default MyTemplate;

Maizzle は Vue と Tailwind CSS で HTML メールを作るフレームワークで、公式の紹介ページにもそう書かれています。3つに共通する落とし穴は、コンパイルできたことと、各クライアントで正しく見えることは別だという点です。費用はライセンスではなく、CI、プレビュー環境、配信サービスとの接続に出ます。CSS の制約はメールの CSS ガイドにまとめました。

マーケターがコードなしで作る場合

ここでは、書き出し回数と席数が実質的な価格です。Stripo の料金ページでは、Free が2人、月4回まで書き出し、保存10通。Basic が2人、月50回。Medium が3人、月300回。Pro が10人、月4,000回です。Beefree の無料の Starter は、10デザインまで、月6回の書き出しです。月1回のニュースレターなら1回分しか使いませんが、配信サービスへ渡すたびに1回と数える仕様かどうかは、利用条件で確かめてください。週次で修正を2、3回挟むと、月6回はすぐ尽きます。

製品に編集画面を組み込む場合

組み込み型は、キャンペーン単位ではなく製品単位で料金が発生します。Topol の Startup は50ユーザーで月額$70なので、1ユーザーあたり$70÷50＝$1.40です。Expansion は$140÷100＝$1.40、Business は$300÷500＝$0.60になります。Chamaileon は、月払いなら12か月で$400×12＝$4,800、年払いなら$4,000なので、差は$800です。Unlayer は月額$250から始まり、各プランに1TBの帯域が含まれます。Unlayer の react-email-editor の README には、EmailEditor を置き、ref から exportHtml を呼ぶ基本形が載っています。契約前に、顧客のデザインを保存して開き直し、書き出すところまでを一度通す試作をおすすめします。README の基本形は次のとおりです。

import { useRef } from 'react';
import EmailEditor from 'react-email-editor';

const App = () => {
  const emailEditorRef = useRef(null);

  const exportHtml = () => {
    const unlayer = emailEditorRef.current?.editor;

    unlayer?.exportHtml((data) => {
      const { design, html } = data;
      console.log('exportHtml', html);
    });
  };

  const onReady = (unlayer) => {
    // 編集画面の準備完了。保存済みのデザインはここで読み込める
  };

  return (
    <div>
      <button onClick={exportHtml}>Export HTML</button>
      <EmailEditor ref={emailEditorRef} onReady={onReady} />
    </div>
  );
};

組み込み型で見落としやすいのは、ライセンス料より先にテナント分離です。ある顧客のデザインを別の顧客が読めないこと、独自ブロックが保存と再読み込みで壊れないこと、書き出した HTML に自社のフッターが必ず入ることを、試作の段階で表にして確かめてください。

組み込み型の3社を、料金ページの表示で並べ直します。1ユーザーあたりの単価は、ユーザー数で割った私の計算です。

1ユーザーあたりで比べられるのは、ユーザー数をプランに含める Topol だけです。Unlayer と Chamaileon は、利用者の人数ではなく、機能や支援の範囲でプランが分かれているため、自社の利用者数で割った単価は、契約前に自分で試算する必要があります。

編集と配信を1つにまとめる場合

Mailchimp と Brevo は、編集画面とリストと配信が一体です。例として、顧客500人のリストに週1回送ると、月4回×500通＝2,000通になります。Mailchimp の無料プランは月500通までなので Standard（$20）が必要で、Brevo の Starter（$9、月5,000通から）なら収まります。また、Brevo の無料プランは1日300通なので、500通を1回で送るには2日に分ける必要があります。ここに載らない費用が、あとで乗り換えるときのテンプレート移行です。デザインが各社の編集画面の中に残るためです。

Mailchimp は、連絡先の数の帯ごとに Standard の価格が変わります。料金ページに表示されていた帯と、月間の送信上限を並べます。金額は割引前の表示価格です。

たとえば顧客4,000人に週1回送る場合、月に16,000通で、Mailchimp の送信上限には余裕がありますが、連絡先の帯が2,501〜5,000件になるため、価格は $20 ではなく $100 からです。連絡先の数で価格が決まる Mailchimp と、送信量で決まる Brevo は、リストが大きくて配信頻度が低いチームほど差が出ます。

表示テストを足すと何が変わるか

開発者が持つ構成の最小は、React Email や MJML（無料）と、Resend の Pro（公式ページで月額$20、50,000通まで）の組み合わせで、月額$20です。ここに Email on Acid の Basic（$99）を足すと$20＋$99＝$119になり、テスト費用が、ほかの構成より高くなります。同社の料金ページには、現行の契約者は2026年6月から Mailgun Inspect へ移行すると書かれているため、どの製品を買うことになるのかを確認してください。Litmus は料金表を公開しておらず、この記事では価格を載せません。

表示テストの費用は、プレビュー1回あたりに直すと比べやすくなります。割り算は私の計算です。

Basic と Premium は、1回あたりの単価がほとんど変わりません。Premium で増えるのは回数のほか、アクセシビリティのテストや HTML 解析といった機能です。上限を超えた分の $0.15 は、どちらのプランの単価よりも高くなります。Basic で超過分を払い続けた場合、$99 + 超過分が Premium の $199 に並ぶのは、超過が667回（$100 ÷ $0.15）を超えたとき、つまり月に約1,670回を使うあたりです。それより少ない使用量なら、Basic に超過分を足すほうが安く済みます。

無料プランの上限を並べて比べる

最初の候補は無料プランで試すことが多いので、どこで頭打ちになるかを先に確認します。数字は各社の公式ページに書かれている上限です。

たとえば顧客800人にニュースレターを送る場合、Brevo の無料プランは1日300通なので3日に分けることになります。Resend の無料プランなら1日100通で8日です。リストが小さいうちは無料で足りても、1回の配信の大きさで先に壁に当たるため、上限は月間の合計だけでなく、1日あたりでも確認してください。

Stripo のプラン別の上限を読む

ビジュアルビルダーの価格差は、機能の多さよりも上限の差で生まれます。Stripo の料金ページに載っている数字を並べると、次のようになります。年払いの価格も表示されており、「Save 20%」と書かれています。実額での差は、このあとの段落で計算します。

たとえば3人の制作チームが月20本のメールを書き出すなら、メンバー数で Basic は足りず、Medium の$45が最小になります。逆に2人で月20本なら、Basic の$20で収まります。年払いの$200は月払い12回分の$240より$40安く、Medium の$450は$540より$90安い計算です。割引率の見方は、あとの「年払いにすると、いくら変わるか」で整理します。Beefree は同じ観点で、Professional が無制限のプロジェクトフォルダと再利用ブロック、Business が高度なブランド管理を挙げています。Topol の追加ユーザーは、Startup が1人$1.60、Expansion が$1.40、Business が$0.70です。

年払いにすると、いくら変わるか

ビジュアルビルダーは、年払いの価格も表示されています。月額の12か月分と並べると、次のとおりです。金額は各社の料金ページの表示で、差額と割合は私の計算です。

どの行も、月払いの合計から約16〜17%の値引きです。Stripo は料金ページに「Save 20%」と書いていますが、これは年額を基準にして月払いが20%高い、という同じ差の言い方で、月払いの合計から見た割引率とは基準が違います。Beefree の年払いの金額は、料金ページに月額換算で表示されたものです。

月に作る本数から、プランの目安をつける

書き出し1回を、メール1本の出力1回と数える前提で、月に何本作るかから、必要になる最小のプランを探します。書き出しの数え方は、利用条件で確かめてください。

表の最後の2行は、Topol がプラグイン用のプランとは別に用意している、自社エディタのプランです。料金ページには、PRO が月額 $10 でテンプレートと HTML の書き出しが無制限、Team が月額 $15 でメンバー3人と書かれています。回数の上限が気になる運用なら、候補に入れる価値があります。多くのチームでは、書き出しの回数より先に、同時に作業する人数の枠に当たります。月20本でも、3人で作業するなら Basic ではなく Medium になる、という具合です。数字を見るときは、本数と人数の両方を確認してください。

ビルダーを選ぶ前の5つの質問

費用の組み合わせ例

公式ページの価格を足し合わせると、構成による差がはっきりします。いずれも月額の定価で、各社のいちばん安い該当プランを前提にしています。

目立つのは2点です。いちばん安いのは開発者が持つ構成で、いちばん大きな段差は、自分が使うビジュアルビルダーと、顧客に提供する組み込み型エディタのあいだにあります。表示テストを足すと、小さな開発者向け構成では、そのテスト費用だけで全体の大半を占めることもあります。なお、Parcel はコードエディタ、Stripo はビジュアルエディタなので、5人以上の費用比較はあくまで目安です。

書き出した HTML を配信サービスへ渡すときの確認点

ビルダーから HTML を書き出しても、そのまま配信できるとは限りません。配信サービスごとに差し込みタグの書き方が違い、配信停止リンクや追跡リンクの扱いも違います。Stripo の料金ページには、無料プランは ESP への書き出しを予定しない人向けとあるため、配信まで通すなら有料プランが前提です。確認する項目を表にまとめます。

確認するクライアントの目安は、Gmail（Web とモバイル）、Outlook（2016、2019、2021、365）、Apple Mail（macOS と iOS）、Yahoo!メール、Outlook.com / Hotmail です。古い Outlook の細部はつまずきやすいので、クライアント互換性ガイドの手順で確認してください。

選ぶ前の確認手順

1. 実際のメールを1通選ぶ：ロゴ、ボタン、画像、差し込み項目、配信停止リンク入りのフッターを含むもの。
2. 2つの候補で作る：初稿にかかった時間と、エンジニアの助けが要ったかを記録する。
3. 実際の引き渡し経路を通す：書き出しまたはコンパイルをして、配信サービスに読み込み、差し込みと追跡リンクを確かめる。
4. 届いたメールを見る：Gmail、Outlook、Apple Mail を、スマートフォンとデスクトップ、ダークモードも含めて確認する。詳しくはダークモードの記事を参照。
5. 現在の送信量と2倍の量で費用を計算する：席数、書き出し回数、プレビュー枠を含める。

2つの製品で迷ったら、比較ページに個別の比較があります。たとえばStripoとBeefreeやMJMLとReact Emailです。システムメールと配信メールの分け方は、トランザクショナルメールとマーケティングメールで扱っています。