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

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

ツールは、 MJML AppのページからデスクトップPC向けアプリ（Windows / Mac / Linux用）をダウンロード＆インストールすれば足ります。または、VSCodeなどのコードエディタにはMJMLプラグインがあり、プラグインのみでもプレビュー機能を提供しています。

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

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

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

編集画面

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

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

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

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

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

基本的なレイアウト

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

mj-section: 横１行のブロック範囲（PC表示）
mj-column: section内の１列のブロック範囲（PC表示）
mj-text / mj-image など各要素の羅列

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

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

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