LabHub

ブログ

HTMLメール開発 2026 — Maizzle / MJML / react-email / Postmark Templates / Foundation for Emails / Cerberus 徹底ガイド

2026-05-16 · 30 分で読めます · #email#html-email#maizzle#mjml#react-email#postmark#foundation-for-emails#cerberus#litmus#email-on-acid#heml#mosaico#stripo#bee#stensul#unlayer#tabular#amp-for-email#deep-dive#japanese

한국어English日本語

プロローグ — 1998年のtableがいまだに生きている

モダンなHTMLしか書いてこなかった人がはじめてメールテンプレートを開いたときの衝撃は、なかなか消えない。CSS Gridは安全ではない。Flexboxも安全ではない。divベースのレイアウトすら安全ではない。Outlook(特にMicrosoft 365のデスクトップ版でWordレンダリングエンジンを使う構成)を一度でも触れば嫌でも理解する — 1998年に固まったtableベースのレイアウトが、今もなお事実上唯一の互換手法だ。

それなのに、その化石の上で2024年から2026年にかけて起きていることは興味深い。Resendが作ったreact-emailはインディースタートアップの事実上の標準になり、MaizzleはTailwind CSSのワークフローをメールに持ち込んだ。MJMLはオープンソースのコンポーネント標準として安定の地位を保ち、Postmarkのサーバーサイドテンプレートは1行のMustache変数でマーケティングとエンジニアリングの境目を曖昧にした。同時にStripo、BEE、Stensul、Unlayerといったドラッグアンドドロップ系SaaSは、マーケティング部門の作業を着々と取り込んでいる。

本稿はこの4分類 — コード(Maizzle、Cerberus)、コンポーネントDSL(MJML、react-email、Foundation for Emails、HEML)、サーバーサイドテンプレート(Postmark、HubSpot)、ドラッグアンドドロップSaaS(Stripo、BEE、Stensul、Unlayer、mosaico、Email-Builder.js、Tabular) — を一度に整理する。さらにダークモード、アクセシビリティ、MIME multipart、AMP for Email、そして韓国 / 日本の実例まで取り扱う。

1章 · 2026年HTMLメール地図 — コード / コンポーネント / ドラッグアンドドロップ / SaaS

ツール群は大まかに4つに分かれる。

分類代表ツール主なユーザー強み
コード優先Maizzle、Cerberus、ZURB Foundation 旧版フロントエンドエンジニア生HTML / Tailwind
コンポーネントDSLMJML、react-email、HEML、Foundation for Emailsフルスタックエンジニアコンポーネント抽象化
サーバーサイドテンプレートPostmark、HubSpot、SendGrid Dynamic Templatesバックエンド+マーケ変数置換 / 多言語
ドラッグアンドドロップSaaSStripo、BEE、Stensul、Unlayer、mosaico、Email-Builder.js、Tabularマーケ / デザイナー非エンジニアでも可

境界はあいまいだ。Maizzleはコード優先だがコンポーネント的にも使えるし、react-emailはコンポーネントだが結局はコード優先。Stripoはドラッグアンドドロップだがコードを直接編集できる。表は出発点にすぎない。

2026年5月時点で意味のある5つのトレンド:

  1. react-email(Resend)の独走 — 非公式推定でインディー / スタートアップ採用率8割超。
  2. Maizzleの静かな伸び — Tailwindチームが自然に選ぶ。
  3. MJMLの安定期 — 大型機能より統合とAI支援に注力。
  4. マーケ部門を吸収するドラッグアンドドロップSaaS — Stripo / BEE / Stensulがそれぞれの座を確保。
  5. AMP for Emailの事実上の死 — 公開から6年、ほぼ全ての導入企業が撤退。

2章 · なぜメールは依然として難しいのか — クライアントの分断

2026年のクライアントシェア、ざっくり:

問題はOutlookデスクトップだ。Microsoftは2024年に「New Outlook」を推進したが、2026年でも企業環境の約60%はいまだにWordエンジンを使う。Wordエンジンは:

そのため2026年でもメールテンプレートはtable+td+align="center"の1998年パターンに依存する。Maizzle、MJML、react-emailはすべてそこに落ち着く。

<!-- 2026年も基準はこれ -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>
    <td align="center">
      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
        <tr>
          <td style="padding: 20px;">
            本文ここに
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

肝はrole="presentation" — スクリーンリーダーにこの表はデータ表ではなくレイアウト用だと伝える。アクセシビリティは13章で再度扱う。

3章 · Maizzle — TailwindCSS駆動のワークフロー

3.1 出発点

Maizzleはルーマニアの開発者Cosmin Popoviciが2018年に始めた。中核アイデアは「メールにTailwindを使う」。Tailwindは元々Webページ向けのユーティリティクラスフレームワークだが、同じDXをメールでも実現するために作られたのがMaizzleだ。2024年のMaizzle 5でVite基盤に書き直され、2026年現在は6.x系。

npx create-maizzle
# Maizzle Starter? Default
# Project name? my-emails
cd my-emails
npm install
npm run dev

既定構成:

my-emails/
  src/
    components/    # 再利用コンポーネント
    layouts/       # レイアウト(main.html等)
    templates/     # 実際のメール(welcome.html等)
  tailwind.config.js
  config.js
  package.json

3.2 何をしてくれるか

ビルド時にMaizzleは:

  1. Tailwindクラスをインラインスタイルに変換。
  2. <style>ブロックに残せないクラスをインライン化。
  3. メディアクエリは<style>ブロックに残す(Outlookが無視してもOK)。
  4. HTMLをminify。
  5. オプションでplain-text版を生成。

書き手はこう書く:

<table class="w-full max-w-[600px] mx-auto bg-white">
  <tr>
    <td class="p-6 text-base font-sans text-slate-800">
      <h1 class="text-2xl font-bold mb-4">ようこそ</h1>
      <p>ご登録ありがとうございます。下のボタンから始めましょう。</p>
    </td>
  </tr>
</table>

ビルド後はこうなる:

<table style="width: 100%; max-width: 600px; margin: 0 auto; background-color: #ffffff;">
  <tr>
    <td style="padding: 24px; font-size: 16px; font-family: ui-sans-serif, system-ui; color: #1e293b;">
      <h1 style="font-size: 24px; font-weight: 700; margin-bottom: 16px;">ようこそ</h1>
      <p>ご登録ありがとうございます。下のボタンから始めましょう。</p>
    </td>
  </tr>
</table>

3.3 強み

3.4 弱み

Maizzleが最も輝くのは「フロントエンドチームがメールを直接所有する」場合だ。

4章 · MJML — Mailjet製のコンポーネントDSL

4.1 沿革

Mailjet(現 Sinch Email)が2015年にMJMLをオープンソース化。読み方は「エム・ジェイ・エム・エル」。メール専用のマークアップ言語と、それを1998年互換HTMLに変換するコンパイラの組み合わせだ。

<mjml>
  <mj-head>
    <mj-title>ようこそ</mj-title>
    <mj-preview>ご登録ありがとうございます。さっそく始めましょう。</mj-preview>
    <mj-attributes>
      <mj-all font-family="Inter, Arial, sans-serif" />
      <mj-text color="#1e293b" line-height="1.5" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#f8fafc" width="600px">
    <mj-section background-color="#ffffff" padding="24px">
      <mj-column>
        <mj-text font-size="24px" font-weight="700">ようこそ</mj-text>
        <mj-text>ご登録ありがとうございます。下のボタンから始めてください。</mj-text>
        <mj-button background-color="#3b82f6" href="https://example.com">
          始める
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

4.2 良いところ

import mjml2html from 'mjml'

const { html, errors } = mjml2html(mjmlSource, {
  minify: true,
  keepComments: false,
})

4.3 弱み

MJMLは「オープン標準を使いたいがReactは導入したくない」チームに今でも妥当だ。

5章 · react-email(Resend) — JSXネイティブの定着組

5.1 立ち上がり

Resend創業者Zeno Roccaが2023年にreact-emailを公開。出発点はシンプル — 「メールもコンポーネントで、JSXで書きたい」。Resendの成長に乗って2024年にはインディー / スタートアップの事実上の標準になり、2026年1月に4.x系がリリースされた。

npm install react-email @react-email/components -D
npx react-email dev    # ローカルプレビューサーバ

// emails/welcome.jsx
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
} from '@react-email/components'

export default function Welcome({ name = 'お客様' }) {
  return (
    <Html lang="ja">
      <Head />
      <Preview>ご登録ありがとうございます。さっそく始めましょう。</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>ようこそ、{name}さん</Heading>
          <Section>
            <Text>ご登録ありがとうございます。下のボタンから始めてください。</Text>
            <Button href="https://example.com" style={btn}>
              始める
            </Button>
          </Section>
        </Container>
      </Body>
    </Html>
  )
}

const main = { backgroundColor: '#f8fafc', fontFamily: 'Inter, Arial, sans-serif' }
const container = { maxWidth: 600, margin: '0 auto', backgroundColor: '#fff', padding: 24 }
const h1 = { fontSize: 24, fontWeight: 700, color: '#1e293b' }
const btn = { backgroundColor: '#3b82f6', color: '#fff', padding: '12px 24px', borderRadius: 6 }

(注: 上のJSXの中括弧はコードブロック内なので問題ない。本文では中括弧+識別子をむき出しにしないこと。)

5.2 強み

import { Resend } from 'resend'
import Welcome from '../emails/welcome'

const resend = new Resend(process.env.RESEND_API_KEY)
await resend.emails.send({
  from: 'Acme <hello@mail.acme.com>',
  to: ['user@example.com'],
  subject: 'ようこそ',
  react: <Welcome name="ヨンジュ" />,
})

5.3 弱み

5.4 react-email vs MJML

同じコンポーネントモデルだが決定的差異がある。

Reactチームならreact-email、そうでなければMJML。

6章 · Postmark Templates — サーバーサイド変数置換

6.1 ポジション

Postmarkはトランザクショナル特化型のESP。MJMLとMustachio(Mustache派生)に基づく強力なテンプレートシステムを持つ。2024年にActiveCampaignに買収されたが、2026年現在も独立プロダクトとして運営されている。

<!-- Postmark テンプレート本文 -->
<table>
  <tr>
    <td>
      <h1>こんにちは {{name}}さん</h1>
      <p>ご注文 #{{order_id}} を承りました。</p>
      {{#each items}}
        <p>{{name}} x {{quantity}} = {{total_jpy}}円</p>
      {{/each}}
      <a href="{{tracking_url}}">配送状況を確認</a>
    </td>
  </tr>
</table>

このようにMustachio構文で変数を埋め込み、送信時にAPIからデータを注入する。

import { ServerClient } from 'postmark'

const client = new ServerClient(process.env.POSTMARK_TOKEN)

await client.sendEmailWithTemplate({
  From: 'orders@example.com',
  To: 'user@example.com',
  TemplateAlias: 'order-confirmation',
  TemplateModel: {
    name: 'ヨンジュ',
    order_id: 'A-1234',
    items: [
      { name: '本', quantity: 1, total_jpy: '2,000' },
      { name: 'コーヒー', quantity: 2, total_jpy: '1,200' },
    ],
    tracking_url: 'https://example.com/track/A-1234',
  },
})

6.2 強み

6.3 弱み

サーバーサイドテンプレートは「マーケはコピーを頻繁に変えるが構造はあまり変えない」という前提で最もよく機能する。

6.4 比較 — SendGrid Dynamic Templates / HubSpot

7章 · Foundation for Emails(ZURB) — クラシックなフレームワーク

7.1 ZURBの遺産

ZURBは2010年代にFoundationというCSSフレームワーク(Bootstrapのライバル)で有名だった。2015年にメール特化派生のFoundation for Emails(コードネーム Ink)を公開。2017年にv2が出てから大型更新はないが、現在もメンテされている。

<!-- Foundation for Emails - Inky マークアップ -->
<container>
  <row>
    <columns small="12" large="6">
      <h1>ようこそ</h1>
      <p>ご登録ありがとうございます。</p>
      <button href="https://example.com">始める</button>
    </columns>
    <columns small="12" large="6">
      <img src="https://example.com/welcome.png" alt="Welcome" />
    </columns>
  </row>
</container>

Inkyマークアップではcontainer、row、columns、buttonといったセマンティックタグを書き、コンパイラが1998年互換のtableベースHTMLに変換する。MJMLの精神的祖先である。

7.2 2026年に使う価値はあるか

新規プロジェクトには概ね非推奨。MJMLとreact-emailがほぼ全側面で上回る。ただし:

これらに対しては今でも合理的だ。

8章 · Cerberus テンプレート(Ted Goas)

8.1 何者か

Cerberusはデザイナー兼開発者Ted Goasが2013年頃に公開した素のHTMLメールテンプレート集。ビルドツール無し、HTMLファイルをコピーして編集するだけ。2026年でもGitHubリポジトリは維持されており、約8.5kスター。

3つの核テンプレート:

  1. cerberus-fluid.html — 1カラム、モバイルファースト。
  2. cerberus-responsive.html — メディアクエリベースのレスポンシブ。
  3. cerberus-hybrid.html — Outlook用条件付きコメント+モバイルメディアクエリ。
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0"
       style="max-width: 600px; margin: auto;" class="email-container">
  <tr>
    <td>本文</td>
  </tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

これが有名なOutlook条件付きコメント(MSO conditional comments) パターン。Outlookは<!--[if (gte mso 9)|(IE)]>内のマークアップだけを読む。Outlookはmax-widthを無視するので、固定幅600pxのtableを別途与える必要がある。

8.2 なぜ今も使うのか

メールを始めるエンジニアの最短経路は、Cerberusを一度読んでから、Maizzle / MJML / react-emailに移ること。

9章 · HEML / mosaico — その他のOSS

9.1 HEML

SparkPost(現MessageBird)が2018年に公開した別のセマンティックマークアップ。

<heml>
  <head>
    <subject>こんにちは</subject>
  </head>
  <body>
    <container>
      <h1>ようこそ</h1>
      <p>ご登録ありがとうございます。</p>
      <button href="https://example.com">始める</button>
    </container>
  </body>
</heml>

MJMLとほぼ同じコンセプトだが、2020年以降の更新がほぼ無い。2026年現在、事実上メンテナンスモード。

9.2 mosaico

Vox Media系列が作ったOSSドラッグアンドドロップエディタ。セルフホストしてマーケチームに提供できる。

社内マーケ用ツールが必要だがSaaSコストが厳しい現場で稀に採用される。

10章 · Stripo / BEE / Stensul / Unlayer — ドラッグアンドドロップSaaS

10.1 4ツールの立ち位置

ツール親会社価格帯(2026)主顧客
StripoStripo(独立)無料~$95/月中小マーケチーム
BEEBEE Content Design無料~$150/月大企業、埋め込みSDKに強み
StensulStensulエンタープライズのみ大企業、ブランドガバナンス
UnlayerUnlayer無料~$200/月SaaS埋め込み優先

10.2 Stripo

最も親しみやすい汎用エディタ。セルフホスト / ダウンロード / 直接ESPへ送信のすべてに対応。モジュールライブラリ(Shutterstock画像統合等)が豊富。

10.3 BEE

元はMailUpのBEE Freeエディタ。最大の差別化要素は埋め込みSDK — 自社SaaSにBEEエディタを統合できる。HubSpot、ClickFunnelsなど数多くのツールがOEM採用。

10.4 Stensul

エンタープライズ専用。単なるエディタというよりメール協業ワークフロー(ブランドガイドライン強制、承認ルーティング、多言語翻訳パイプライン)に強み。大手の金融 / 製薬 / 通信社が主顧客。

10.5 Unlayer

SaaS埋め込み特化。react-email-editorというReactコンポーネントで自社プロダクトに5分でメールエディタを組み込める。

import EmailEditor from 'react-email-editor'

export default function Editor() {
  return (
    <EmailEditor
      projectId={12345}
      onLoad={(unlayer) => {
        // ready
      }}
      onReady={(unlayer) => {
        unlayer.exportHtml((data) => {
          console.log(data.html)
        })
      }}
    />
  )
}

(上のJSX中括弧もコードブロック内。)

10.6 mosaico vs SaaS — トレードオフ

11章 · Email-Builder.js(Microsoft) / Tabular — 新興勢

11.1 Email-Builder.js

Microsoftが2024年にOSS化したReactベースのメールビルダーライブラリ。Outlookを作っている会社が直接出している点に意味がある。

import { Reader } from '@usewaypoint/email-builder'

const document = {
  root: {
    type: 'EmailLayout',
    data: {
      backdropColor: '#F5F5F5',
      canvasColor: '#FFFFFF',
      children: ['block-1', 'block-2'],
    },
  },
  'block-1': {
    type: 'Heading',
    data: { props: { text: 'ようこそ', level: 'h1' } },
  },
  'block-2': {
    type: 'Text',
    data: { props: { text: 'ご登録ありがとうございます。' } },
  },
}

export default function Preview() {
  return <Reader document={document} rootBlockId="root" />
}

11.2 Tabular

2024年登場の新参ドラッグアンドドロップSaaS。差別化点はAI優先 — GPT等のLLMでコピー / 画像 / レイアウトを一緒に生成する。インディーマーケで話題。

12章 · Litmus / Email on Acid — テスト

12.1 2ツールの沿革

メールクライアントは100種類以上あり、実際に開いてみないとどこで壊れるか分からない。LitmusとEmail on Acidはそのために登場した。

両ツールとも機能は本質的に同等:

  1. クライアントプレビュー — 90~100以上のクライアントでどう見えるかのスクリーンショット。
  2. スパム分析 — SpamAssassin、Microsoft等のフィルタでどう評価されるか。
  3. リンク / 画像チェック — 壊れたリンク、欠落画像。
  4. アクセシビリティ検査 — altテキスト、色コントラスト、フォントサイズ。
  5. 分析 / トラッキング — 開封 / クリック分析。

12.2 使い方

典型的なワークフロー:

  1. Maizzle / MJML / react-emailでHTML生成。
  2. Litmus / EoAにアップロード(直接 or ESP統合経由)。
  3. クライアント別プレビュー確認。
  4. 壊れている箇所を修正 → 再アップロード。
  5. 通ったらESPで送信。
// Litmus API でプレビュー要請(仮想例)
import fetch from 'node-fetch'

const res = await fetch('https://api.litmus.com/v1/emails', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer ' + process.env.LITMUS_TOKEN,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    html: htmlSource,
    subject: 'テスト',
    clients: ['outlook2021', 'gmail-web', 'ios-mail-17', 'samsung-mail'],
  }),
})

12.3 価格

2026年時点で両方とも高い。スタート価格は月$99程度、本格利用で$199~$400/月。インディー開発者には負担なので、代替でMailtrap、HTML Email Check、PutsMail(Litmusの無料ツール) 等を使う。

13章 · ダークモード+アクセシビリティ+MIME multipart+AMP for Email

13.1 ダークモード — Outlookの新しい地獄

2024年以降、主要全クライアントがダークモードに対応。だが処理方法が3通りに分かれる。

  1. Apple Mail(iOS / macOS) — prefers-color-scheme: darkメディアクエリを正直に守る。きれいなケース。
  2. Outlookデスクトップ / モバイル — 勝手に色を反転。白背景を黒に変えるが、一部の色だけ反転して企業ロゴが崩れる。
  3. Gmail — 部分的反転。クライアントとOS設定の組合せで挙動が変わる。

対応パターン:

<head>
<style>
  /* カラースキームメタ */
  :root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
  }

  @media (prefers-color-scheme: dark) {
    .body-bg { background-color: #0f172a !important; }
    .text { color: #e2e8f0 !important; }
  }

  /* Outlook 強制反転を抑制(クライアントに依存) */
  [data-ogsc] .body-bg { background-color: #0f172a !important; }
  [data-ogsc] .text { color: #e2e8f0 !important; }
</style>
</head>

肝はロゴ / アイコンはPNGではなくSVG、もしくはダーク / ライト両版を用意 — 色が反転しても壊れないように。

13.2 アクセシビリティ — メール版のWCAG

メールにもWCAG 2.2 AAが適用される。要チェックリスト:

<table role="presentation" aria-hidden="false">
  <tr>
    <td>
      <img src="logo.png" alt="Acme ロゴ" width="120" height="40" />
    </td>
  </tr>
</table>

13.3 MIME multipart — plain-textの義務

実質的に全マーケティングメールはmultipart/alternativeで送るべき。理由は2つ。

  1. plain-textが無いとスパムスコアが上がる — SpamAssassin等はHTML-onlyを疑う。
  2. Apple Watch、テキストベースクライアント、スクリーンリーダーはplain-textを使う。
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="boundary42"

--boundary42
Content-Type: text/plain; charset=utf-8

ようこそ。

ご登録ありがとうございます。下のリンクから始めてください:
https://example.com/start

--boundary42
Content-Type: text/html; charset=utf-8

<html>...</html>
--boundary42--

react-emailはrender(<Welcome />, { plainText: true })で、Maizzleはjuiceベース変換で自動生成。

13.4 AMP for Email — 死にかけだがまだ

Googleが2019年に発表したメール内動的コンテンツ標準。受信箱内でフォーム送信 / カルーセル / リアルタイムデータ更新を可能にする夢だった。

<!-- AMP for Email -->
<!DOCTYPE html>
<html amp4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    .container { padding: 16px; }
  </style>
</head>
<body>
  <amp-form method="post" action-xhr="https://example.com/subscribe">
    <input type="email" name="email" required />
    <input type="submit" value="登録" />
  </amp-form>
</body>
</html>

2026年現在、事実上の死。理由:

Booking.com、Pinterest等の初期採用組も2024年頃にほぼ撤退。新規に始めるならAMPは無視。

14章 · メールにおけるAI — MJML AI、Maizzle AI?、ChatGPTでデザイン

14.1 MJML AI

Mailjetが2024年に発表したツール。自然言語で「ウェルカムメール、青基調、CTAボタン1つ」のように入力するとMJMLコードを生成する。

[入力]
登録ウェルカムメールを作って。青基調、上部に会社ロゴ、挨拶、CTA「始める」ボタン、下部にSNSリンク。

[出力]
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image src="logo.png" width="120px" />
      </mj-column>
    </mj-section>
    ...
  </mj-body>
</mjml>

品質は平均以上。デザインが少々凡庸なので、最終の磨きは人間がやる。

14.2 Maizzle / react-email + ChatGPT

専用ツールなしでも、ChatGPT / Claudeに「Maizzleコンポーネントで~を書いて」と投げれば結果がよく出る。2026年のLLMはメールマークアップを十分理解している。

効果的なプロンプトのコツ:

14.3 TabularのAI統合

Tabularは「メール本文をLLMが自動生成」を一級機能としている。マーケがブランドトーンだけ決めれば、毎週のニュースレター本文を自動で書く流れ。2026年のインディーマーケで急速に採用が進む。

15章 · 韓国 / 日本 — トス、カカオ、メルカリ、クックパッド

15.1 韓国

15.2 日本

15.3 韓国 / 日本に共通 — レビューと送信時刻

16章 · ツール選定ガイド — 2026年5月時点

状況別の推奨:

どの道を選ぶにせよ、テストはLitmusまたはEmail on Acid。インディーなら無料のPutsMailから始める。

ダークモード / アクセシビリティ / MIME multipartは全ケース共通で必須。そしてAMP for Emailは無視して安全な時期である。

参考 · References

コメント

まだコメントはありません。

ログインするとコメントできます