HTMLメールビルダー おすすめ15選【2026年版】
すべてのメールクライアントで崩れない HTML メールを作るのは、Web 開発でも指折りの面倒な作業です。このページでは、その作業を現実的なものにするツールを集め、どんな人に向いているかを説明します。
執筆:Mara Levin。価格はすべて各社の料金ページから、機能は公式ドキュメントから取っています。
結論:状況別の選び方
- コードで作るなら: スタックに依存しないマークアップなら MJML、React と TypeScript が主力なら React Email、Vue と Tailwind を使うなら Maizzle。
- マーケティング担当が編集するなら: ドラッグ&ドロップで配信基盤へ書き出せる Stripo(月額$20から)か、無料プランと月額$30の Professional がある BEE Free。
- 自社プロダクトにエディタを組み込むなら: Unlayer か Chamaileon。公開されている価格は、それぞれ月額$250と月額$400からです。
- 送信前にテストしたいなら: 数十種類のクライアントでプレビューできる Litmus か Email on Acid。
- すでに配信基盤があるなら: 別のツールを買う前に、Mailchimp か Brevo の標準エディタから試してください。
クイック比較
| ツール | 種類 | 向いている人 | 開始価格 |
|---|---|---|---|
| MJML | マークアップ言語 | 開発チーム | 無料(MITライセンス) |
| React Email | React コンポーネント | React を使うチーム | 無料(MITライセンス) |
| Maizzle | Vue と Tailwind のフレームワーク | フロントエンド開発者 | 価格の公開なし |
| Stripo | ビジュアルエディタ | マーケティング、デザイン | 無料。Basic は月額$20 |
| BEE Free | ビジュアルエディタ | 小規模チーム | 無料。Professional は月額$30 |
| Chamaileon | 組み込み型エディタ | SaaS プロダクト | 月額$400から |
| Unlayer | 組み込み型エディタ | アプリ開発者 | Launch は月額$250 |
| Postcards | ビジュアルエディタ | デザインチーム | 有料プラン |
| Litmus | テストとエディタ | QA の工程があるチーム | 有料プラン |
| Email on Acid | テスト | QA チーム | Basic は月額$99 |
| Mailchimp | プラットフォーム内エディタ | Mailchimp の利用者 | 無料。Standard は月額$20から |
| Brevo | プラットフォーム内エディタ | Brevo の利用者 | 無料。Starter は月額$9 |
| Parcel | コードエディタ | メール開発者 | $0。Production は1ユーザーあたり月額$29 |
| Topol | エディタプラグイン | 編集機能を持つ製品 | Startup は月額$70 |
| EDMdesigner | 組み込み型エディタ | ホワイトラベルの案件 | 提供元に問い合わせ |
全ツールの詳細
ツールは品質順ではなく、ワークフローの種類(コード、ビジュアルエディタ、組み込み型エディタ、テスト、プラットフォーム内エディタ)ごとに並べています。番号は読む順番を示すだけです。
MJML(Mailjet Markup Language)は、入れ子のテーブルを mj-section や mj-column といったタグに置き換え、メールクライアント向けの HTML にコンパイルします。ドキュメントによると、列はモバイルで自動的に縦へ積まれます。ライセンスは、同プロジェクトの FAQ にあるとおり MIT です。
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>こんにちは、さくらさん</mj-text>
<mj-button href="https://example.com">
はじめる
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml> npm install mjml で導入し、mjml input.mjml -o output.html か、Node から mjml2html を呼んでコンパイルします。Visual Studio Code 用のプラグインと、無料のオンラインエディタもあります。
弱点:コンパイルの手順が必要で、送信そのものはできません。個性の強いレイアウトは HTML を手で書く場面も出ます。また、ドキュメントには、一部のクライアントで mj-button の全面がクリックできないという注意書きがあります。
向いている人:テンプレートを Git で管理したく、React に依存したくない開発チーム。
React Email は、コンポーネント指向の開発をメールに持ち込みます。現行のドキュメントでは npm install react-email react react-dom で導入し、ローカルのプレビューサーバー(email dev)を使い、render というユーティリティでコンポーネントを HTML 文字列へ変換します。その文字列は、どの送信サービスにもそのまま渡せます。
import { Html, Button, Text } from "react-email";
export default function Welcome() {
return (
<Html lang="ja">
<Text>こんにちは、さくらさん</Text>
<Button href="https://example.com">はじめる</Button>
</Html>
);
} ドキュメントに載っている連携先は、Resend、Nodemailer、SendGrid、Postmark、Mailgun、AWS SES、Brevo などです。プレーンテキスト版は toPlainText で生成できます。プロジェクトの説明では、コンポーネントは Gmail、Apple Mail、Outlook、Yahoo!、HEY、Superhuman で検証済みとされています。
弱点:React の知識とビルド環境が必要で、デザイナーやマーケターがテンプレートを受け取るには、開発者の手を介する必要があります。
向いている人:プロダクトがすでに React で、メールとアプリで型やユーティリティを共有したいチーム。
Maizzle の現行バージョンは、公式ドキュメントによると、Vue の単一ファイルコンポーネントで書き、Tailwind CSS でスタイルを当てます。本番ビルドではコンポーネントを HTML にレンダリングし、CSS のインライン化、未使用 CSS の削除、Outlook 向けの代替コードの追加などを行うトランスフォーマーを通します。
ライブリロード付きの開発サーバー、ダークモードのエミュレーション、CLI、そして Laravel、Nuxt、SvelteKit、Astro のプロジェクトで使える Vite プラグインを備えています。ドキュメントでは30以上のメール用コンポーネントがうたわれています。MJML との比較もご覧ください。
弱点:Vue も Tailwind も知らない人にはいちばん敷居が高い選択肢です。ネット上の古い解説は以前のバージョンの話なので、鵜呑みにしないでください。
向いている人:すでに Vue や Vite の世界にいて、Web とメールで同じ書き方を使いたい開発者。
Stripo はドラッグ&ドロップのエディタで、期限のない無料プランがあります。料金ページには、Basic が月額$20(年額$200)、Medium が月額$45(年額$450)、Pro が月額$125(年額$1,250)と載っています。
購入の決め手は入口の価格ではなく、各プランに含まれる書き出し、保存できるテンプレート、共同編集の範囲です。支払う前に、自社の配信基盤との組み合わせでその条件を確かめてください。
弱点:エディタであって配信システムではありません。書き出した HTML は配信基盤でリンクや画像が書き換えられることがあるため、最後にもう一度テストが必要です。
向いている人:キャンペーンを頻繁に作り、すでに使っている配信基盤にアップロードするマーケティングチーム。BEE Free との比較があります。
Beefree の Starter プランは無料で、デザイン10件、書き出し月6回までです。Professional は月額$30で、プロジェクトフォルダと再利用できるブロックが無制限になり、Business は月額$160でブランド管理機能が加わります。いずれも料金ページの記載です。
Beefree は、チーム向けエディタとは別に、組み込み用の SDK も販売しています。購入の判断は2つに分かれます。
弱点:無料プランの書き出し月6回は、定期的に配信する人にはすぐ足りなくなります。コード系フレームワークに比べると、HTML の細かい制御もできません。
向いている人:習得の手間をかけず、見栄えのするメールが必要な個人や小規模チーム。
Chamaileon の料金ページでは、開始価格が年額$4,000、月払いなら月額$400と示され、個別のオンボーディング、メール用デザインシステムの構築、24時間365日のサポートが含まれます。無料プランはありません。
1通のメールに複数の人が関わり、誰かが承認しなければならない企業向けです。その承認フローが本当に課題になっている場合にだけ、出す価値のある費用です。
弱点:1人で運用する場合や、月1回のニュースレターだけを送るチームには向きません。プロダクト内のエディタとして組み込むには、開発の手間もかかります。
向いている人:多数のチーム、ブランド、承認者がいて、テンプレートを統制したい企業。
Unlayer は、自社プロダクトに埋め込めるドラッグ&ドロップのエディタです。料金ページには3つのプランがあり、Launch が月額$250、Scale が月額$750、Optimize が月額$2,000。どれも14日間の無料試用と1TBの帯域が付いています。
公式の React コンポーネントは、プロジェクトの README によると次のように使います。
import EmailEditor from 'react-email-editor';
function Editor() {
const emailEditorRef = useRef(null);
const exportHtml = () => {
emailEditorRef.current?.editor?.exportHtml((data) => {
const { design, html } = data;
console.log(html);
});
};
return <EmailEditor ref={emailEditorRef} />;
} 弱点:費用は個人のプロジェクトではなく、企業向けの水準です。長く使うなら、デザインの JSON を自社で保存しておき、ベンダーに依存しすぎないようにしてください。
向いている人:顧客にメールエディタを提供したいが、自前では作りたくない SaaS プロダクト。
Designmodo の Postcards は、モジュール式のブロックを組み合わせ、見た目の整ったメールを作るエディタです。編集の層であり、配信システムやオートメーションの代わりにはなりません。
提供元のページで最新の価格を確認できなかったため、金額は載せていません。予算を組む前に公式ページをご確認ください。
弱点:商品情報や深いパーソナライズなど、動的な内容が多いメールでは、見た目中心のモジュールだけでは足りなくなります。
向いている人:デザインを一定に保ちつつ、モジュールを再利用するニュースレターやキャンペーン。
Litmus は何よりもテストのプラットフォームで、さまざまなクライアントとデバイスでメールを表示し、レビューを一か所にまとめます。プレビューを横に見ながら作業できるコードエディタも備えています。
料金ページは現在、プランの一覧ではなく問い合わせフォームになっています。ユーザー数と月ごとのテスト回数を伝えて、見積もりを依頼するのが確実です。2つのツールの違いはLitmus と Email on Acid の比較で並べています。
弱点:スクリーンショットは、メールが受信トレイに届くことの証明にはなりません。月に数回しか送らないなら、費用を正当化しにくいでしょう。
向いている人:承認フローと、対応クライアントの網羅性が求められる大きなチーム。Parcel との比較もあります。
料金ページによると、Basic は月額$99で、100以上のクライアントとデバイスでのプレビューが月1,000回分、API も使えます。Premium は月額$199でプレビューが月2,000回分になり、アクセシビリティのテストと HTML 解析が加わります。プレビューの追加は1回$0.15です。
同じページには、2026年6月から既存の契約者が順次 Mailgun Inspect に移行すると書かれています。新しく契約するなら、どちらの製品になるのかを確認してください。
弱点:メールを作るツールではなく、無料プランもありません。
向いている人:毎回の送信の前に、決まった確認の工程を置きたいチーム。
すでに Mailchimp を使っているなら、標準のエディタで HTML の書き出しと取り込みの手間が省けます。料金ページによると、無料プランは連絡先250件まで、月500通(1日あたり最大250通)で、Standard は連絡先500件の選択で月額$20からです。独自コードのテンプレートも使えます。
弱点:料金が送信数だけでなく連絡先数で決まり、テンプレートを別の基盤へ移すには手間がかかります。テンプレートが製品コードの一部になっている場合は、あまり向きません。
向いている人:ツールを1つにまとめたい小規模な事業者やニュースレター。
Brevo(旧 Sendinblue)は、送信量に応じて費用が決まる基盤の中にエディタを含みます。料金ページでは、無料プランが1日300通まで、Starter が月額$9で月5,000通・1日の上限なし、Standard が月額$18から始まります。
弱点:エディタとオートメーションの機能の深さはプランで変わり、コードで書いた再利用テンプレートの代わりにはなりません。
向いている人:連絡先数ではなく送信量で払い、ツールを別々に管理したくないチーム。
Parcel は、メール用の HTML を書くために設計されたコードエディタで、プレビューと共同作業の機能を備えます。料金ページには、コード用プランが$0、制作用が1ユーザーあたり月額$29、大規模チーム向けが月額$56と載っています。
弱点:コードを書く人専用で、リスト管理や配信は含まれず、コミュニティは MJML より小さめです。
向いている人:フレームワークに移らず、汎用の IDE より書きやすい環境がほしい人。
Topol の料金ページには、前払いのユーザー数で決まる3つのプランが載っています。Startup は月額$70で50ユーザー、Expansion は月額$140で100ユーザー、Business は月額$300で500ユーザーで、追加ユーザーの単価は$1.60から$0.70まで下がります。
弱点:製品に埋め込むプラグインを前提にした料金体系で、単体のエディタを探す個人向けではありません。権限管理と書き出しは、自社の組み込みの中で確かめる必要があります。
向いている人:多数のユーザーが、ときどきメールを編集する製品。Topol と Stripo の比較もあります。
料金は「何に対して」払うのか
同じ「月額$20」でも、請求の単位はツールごとに違います。比べる前に、単位をそろえて考えてください。
- プランごとの定額:Stripo(月額$20、$45、$125)と BEE Free(月額$30、$160)は、機能と書き出しの上限でプランが分かれます。
- ユーザー数:Parcel は1ユーザーあたり月額$29、Topol は50、100、500ユーザーの前払いパックです。
- プレビューの回数:Email on Acid は月1,000回($99)または月2,000回($199)で、超過は1回$0.15です。
- 連絡先数や送信量:Mailchimp は連絡先250件まで無料、Brevo は1日300通まで無料で、増えるほど上位プランに移ります。
- ライセンス料なし:MJML と React Email は無料ですが、そのぶん開発の工数と、送信サービスの費用が別にかかります。
機能に迷わないための決め方
テンプレートを Git で管理したいとき
MJML、React Email、Maizzle のどれにするかは、チームがすでに使いこなしている言語で決めます。独自のマークアップか、React か、Vue か。最初の2つで迷うなら、コード付きで比べたMJML と React Email の比較が役立ちます。
マーケティング担当が自分で編集したいとき
Stripo や BEE Free のようなビジュアルエディタが近道です。実際のメールで試してください。文章を変え、ブロックを動かし、配信基盤に書き出します。その過程で配信停止リンクのあるフッターが崩れるなら、運用後に何が起きるかも見えてきます。
自社プロダクトで顧客にエディタを提供したいとき
Unlayer、Chamaileon、Topol は、同じテストで比べてください。保存して、開き直して、書き出して、顧客ごとのデザインを分離できるか。開始価格は月額$70から$400の幅ですが、選び間違えた組み込みは、ライセンスよりも開発の工数で高くつきます。
課題が制作ではなく品質のとき
送信前の工程として Litmus か Email on Acid を足します。メールを直してくれるわけではありませんが、不具合が読者に届く前に止められます。
予算がかなり厳しいとき
まずライセンス料のかからない MJML か React Email から。ビジュアル編集なら、BEE Free の無料プランか、配信まで含む Brevo の無料プランです。あとでコードから送りたくなったら、API ファーストのメール送信サービスの一覧で提供元を比べられます。
まとめ
抽象的な意味で最良のビルダーはありません。あるのは、誰が編集し、誰が送信し、何かが壊れたとき誰が対応するか、に合う1つです。その人が開発者なら、無料のコード系の選択肢はなかなか超えられません。マーケティング担当なら、配信基盤へ書き出せるビジュアルエディタのほうが、どのフレームワークより時間を節約できます。
何かを買う前に、最終候補の2つで同じメールを作ってください。ボタン、画像、パーソナライズ、法定の表記を入れ、実際の配信基盤から送り、読者が使うクライアントで開きます。この1時間の確認は、このページの表を含め、どんな機能比較よりも価値があります。
よくある質問
HTMLメールのコーディングはなぜ難しいのですか?
メールクライアントごとに HTML の解釈が違うからです。Windows 版 Outlook は Word の描画エンジンを使い、Gmail は CSS の一部を取り除き、ブラウザのような共通の標準もありません。そのため、まじめなメールはほとんどテーブルレイアウトとインラインスタイルで組まれます。この一覧のツールは、その面倒を肩代わりするために存在します。
通常の CSS はメールで使えますか?
一部だけです。どのプロパティが安全かは、クライアント別の対応表を公開している caniemail.com で確認してください。Flexbox や Grid は対応が限られ、メディアクエリが届く読者も一部で、いちばん確実なのはインラインスタイルです。この一覧のツールは、そこを代わりに処理してくれます。
送信用に別のツールが必要ですか?
ほとんどの場合は必要です。MJML、React Email、Maizzle、Stripo、BEE Free、Parcel、Topol が出力するのは HTML で、それを配信プラットフォームにアップロードするか、送信サービスから送ります。Mailchimp と Brevo はエディタが配信基盤に含まれているので、流れは簡単になりますが、その基盤に縛られます。
ビジュアルエディタの費用はどれくらいですか?
マーケティングチーム向けと、自社プロダクトに組み込むタイプとでは、大きな開きがあります。2026年10月7日に確認した料金ページでは、Stripo は月額$20から、BEE Free の Professional は月額$30です。一方、Unlayer(月額$250)や Chamaileon(月額$400から)のような組み込み型は、別の予算区分になります。
ダークモードはどうですか?
改善は進んでいますが、まだ一様ではありません。caniemail.com の2026年9月16日更新のデータでは、prefers-color-scheme メディアクエリに対応しているのは、掲載された43のクライアント・環境のうち18で、約42%です。どのビルダーでも全クライアントで同じ見た目になるとは約束できません。自動反転に耐える配色を選び、読者が実際に使うクライアントで確認するのが現実的です。