HTMLメールフレームワーク「MJML」の導入事例

こんにちは。ATOM事業部フロントエンドテックリード兼デザイナーの河原です。

最近HTMLメールを作成する機会が増えたので、HTMLメールフレームワークの「MJML」を導入しました。今回はその導入事例の紹介です。

面倒なHTMLメール

HTMLメールは通常のWebサイト向けのHTMLとは異なる独特のベストプラクティスがあります。

例えば。

幅を 600px に設定する
テーブル要素ですべての構造をコーディングする
CSSをシンプルに保ち、インライン化する
JavaScriptは使わない
モバイルを意識してレスポンシブにする

また、さまざまなサービスやメーラーでテストしなければならず、結構面倒くさい作業です。

この面倒くさい作業が、MJMLを利用することでかなり楽になります。

MJML

mjml.io

HTMLメールに特化したフレームワーク。これを使うことで、以下のメリットがあります。

上記ベストプラクティスを意識しなくても対応できる
共通部品を生成できるためプロジェクト全体で一貫性のあるメールが作成できる
コスト削減
- table構成やインラインCSSを自分で記述する必要がないのでコーディング量が削減できます

公式のOnline Editorを見て頂くとイメージがつきやすいかと思います。

導入事例

ATOMでは専用のリポジトリを作成して管理しています。

インストール

mjmlはnpmパッケージとして公開されてますので、npm installやyarn addでインストールします。詳細は公式のガイドを参照ください。

ディレクトリ構成

リポジトリのディレクトリ構成は下記の通りとしました。

├── dist   #生成されるHTMLメール
├── scripts  #テストメール送信などのスクリプト（今回は詳細は割愛）
└── src
    ├── components #共通部品
    └── templates #各種メール(のテンプレート)

スクリプト

  "scripts": {
    "build": "mjml src/templates/*.mjml -o dist/",
  },

buildスクリプトを実行すると、src/templates/ にあるmjmlファイルごとに dist/ 下に HTMLメールが生成されます。

IDEのPlugin

IDEにPluginを導入すると出力されるHTMLをリアルタイムで確認しながら編集できて便利です。

JetBrains
vscode
etc...

メールの作成

MJMLではmj-section や mj-columnなどの独自のタグを使って開発します。

詳細は公式のガイドを参照ください。

共通部品

プロジェクト全体で一貫性のあるメールを作成するためにまず共通部品を作成しました。

例１：スタイルやクラスを共通定義をまとめたもの

(src/components/common-class.mjml)

<mj-attributes>
    <!--テキスト共通スタイル -->
    <mj-text font-size="14px" line-height="24px"/>
    <!-- 共通Class: テキスト -->
    <mj-class name="sm" font-size="12px" line-height="20px"/>
    <mj-class name="lg" font-size="18px"/>
    <mj-class name="xl" font-size="22px"/>
    <!-- 以降省略 -->
</mj-attributes>

mj-classで定義したものもHTMLに生成される際にインラインCSSとして展開されます。

例2：Footerコンポーネント

(src/components/footer.mjml)

<mj-section>
    <mj-column>
        <mj-divider mj-class="divider" padding-top="0"/>
        <mj-text mj-class="sm gray">
            本メールはXXXより自動送信しています。ご返信いただきましても返答できませんのでご了承ください。
        </mj-text>
        <!-- 以降省略 -->
    </mj-column>
</mj-section>

メール本体を作成する

(src/templates/example.mjml)

<mjml>
    <mj-head>
        <!-- 共通スタイル、クラスを読込  -->
        <mj-include path="../components/common-class.mjml"/>
    </mj-head>
    <mj-body>
        <mj-section padding-bottom="0">
            <mj-column>
                <mj-text mj-class="title">
                    サンプルタイトル
                </mj-text>
            </mj-column>
        </mj-section>
        <mj-section padding-bottom="0">
            <mj-column>
                <mj-text>
                    HTMLメールフレームワーク「MJML」の導入事例のサンプルです。
                </mj-text>
                <mj-button mj-class="submit-btn"
                           href="https://xxx/xxx/xxx">
                    サンプルボタン
                </mj-button>
            </mj-column>
        </mj-section>
        <!-- 共通コンポーネントのFooterを読込 -->
        <mj-include path="../components/footer.mjml"/>
    </mj-body>
</mjml>

生成されるメール

HTMLの一部抜粋

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
  <tbody>
  <tr>
    <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
      <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:14px;line-height:24px;text-align:left;color:#000000;">サンプルタイトル</div>
    </td>
  </tr>
  </tbody>
</table>

共通スタイルやクラスで定義したものも含めて、インラインCSSで展開されていることが確認できます。

まとめ

MJMLを使うことでHTMLメール作成の開発体験がとてもよくなりました。

メールクライアント固有の要因によるデザイン崩れのリスクも軽減できるので、助かります。

参考

HTML Email Basics
- HTMLメールのベストプラクティスの参考にさせて頂きました
Can I email
- HTMLメール版のCan I useです