category

MJMLでレスポンシブHTMLメール作成

MJMLはHTMLメールを生成する言語&ツールです。Outlookなど、普及しているメールソフト間で見た目の再現性の高いHTMLコードを出力できる点が特長です。

ツールは、MJML AppのページからデスクトップPC向けアプリ(Windows / Mac / Linux用)をダウンロード&インストールすれば足ります。

HTMLメール作成の基本的な流れは以下のとおりです。

  1. 準備:Project名を指定して新規ファイル作成
  2. 編集:仕上がりのプレビューを眺めながらMJMLコードを編集
  3. HTMLファイルをエクスポート

なお、MJMLは編集ツールであり、完成したHTMLメールを配信する機能はありません。送信ツールは別途準備する必要があります。

編集画面

編集画面の主機能は2ペイン構成になっており、左の編集ペインでコードを変更するとリアルタイムに右ペインに仕上がりをプレビュー表示できます。

MJMLデスクトップアプリ編集画面

MJMLの構文はmj-section, mj-imageのように”mj-“から始まる独自の文法ですが、基本的にはHTMLだと考えて利用した方が習得が早いと言えます。
mjmlプロジェクトのGetting startedに公式の編集チュートリアル記事もあります)

padding-leftfont-sizeといった属性はCSSの文法をそのまま書く文法になっているため、CSSの段組みデザインスキルと高い互換性があります。

出来上がりのHTMLは、画面右上の「Export HTML」ボタンから任意のタイミングでファイル保存できます。
HTMLになったファイルは、ブラウザで開いて(ドラッグ&ドロップなど)確認することも可能です。

基本的なレイアウト

MJMLの段組は、基本的には以下の3階層の構造を繰り返すことでOutlookなどでも表示崩れしないデザインを作成できます。

  1. mj-section: 横1行のブロック範囲(PC表示)
  2. mj-column: section内の1列のブロック範囲(PC表示)
  3. mj-text / mj-image など各要素の羅列

2段組の行の記載例は以下のようになります。

<mj-section>
 <mj-column>
  <mj-text>左ブロック</mj-text>
 </mj-column>
 <mj-column>
  <mj-text>右ブロック</mj-text>
 </mj-column>
</mj-section>

レスポンシブ表示できるコードに変換されるため、スマートフォンなど横幅の狭いデバイスでは、mj-columnは縦並び表示になります。

右ペインのプレビュー画面にマウスオーバーすると、DesktopとMobileの表示切り替えも可能です。

また、mj-columnは羅列することで均等2段組、3段組を表現できますが、<mj-column width="300">のように、列幅の指定も可能です。
なお、固定値で指定したい場合、mj-section内のmj-columnの列幅は合計600という仕様になっています。割合指定で段組したい場合にはパーセント指定も可能です。

また、段組以外にもmj-imageのサイズ指定などにも固定数値を使用できますが、全体的にメールの横幅が600の想定でレイアウトします。

mj-imageについて

HTMLメールでは、画像は外部からアクセスできるサイトに置いておきメール本体には含まれない構成が一般的です。

MJMLで編集する際も、あらかじめ掲載する画像をWebにアップしておき、MJMLコードには<mj-image src="http://...">のようにアドレス指定して掲載します。

リファレンス

mjmlの文法は公式documentationからたどれます。
基本的な段組などのタグリファレンスは、Standard Body componentsの章にまとまっています。

配布テンプレート集

プロジェクトの新規作成時に配布テンプレートを選択してカスタマイズ利用することも可能です。
プロジェクト名称指定後のダイアログで(別タブ内に隠れている)Galleryに切り替えて選択すると、出来上がり作例から編集スタートできます。

このテンプレートは、mjml.ioのギャラリーでブラウザから確認することも可能です。

まとめ

HTMLメールで気のきいたレイアウトをしたいとなると、メールクライアント依存コードを書く必要があります(とくにOutlook)。
Webブラウザのように実装標準がある程度成立する日が来るまで、直接編集するものではないと考えるべきでしょう。

MJMLは、MITライセンスのオープンソースとして提供されており、現時点の再現品質も実用十分であることから、それなりに生き残っていくべきツールと見ています。

一般的な想定用途は継続的にカバーしうるプラットフォームと考えられ、HTML/CSSの範囲でスキルセットを習得中のコーダーにとっては地続きの学習分野と言えます。

MJMLを含めてCSSレイアウトの上達度を上げておくと、ランディングページ・HTMLメールを手堅く作れるようになるため、商業ページ分野では守備範囲を広くカバーできます。