動画チュートリアル：FigmaからメールをMJMLコードにエクスポートする

この動画では、FigmaのEmailifyプラグインからメールをMJMLコードにエクスポートする方法を解説します。

EmailifyプラグインからメールをエクスポートするときにMJML Source Codeオプションを選択した場合、エクスポートされたメールのフォルダには、通常のHTMLファイルに加えてindex.mjmlが含まれます。

MJMLのバージョンを選ぶ

MJML Versionドロップダウンで、エクスポートするindex.mjmlにMJML 4、MJML 5、MJML 6のどれを使うかを選びます。既存のMJMLワークフローとの互換性のため、初期設定ではMJML 4が選択されています。後工程のコンパイラーやツールがMJML 5に対応している場合は、MJML 5を選んでください。

MJML 6はMJML 6.0.0-alpha.1を使っており、対応する後工程のツールでのテストを目的としています。このアルファ版では生成されるHTMLと一部の標準スタイルが変わるため、キャンペーンで使う前にプレビューとエクスポートしたメールを確認してください。MJML 4やMJML 5にはいつでも戻せます。

MJML 6でカスタムCSSを使う場合、省略可能な> tbody >セグメントが6つより多いセレクターでは、それらのセグメントをすべて含む形と1つも含まない形だけが残ります。その深さで入れ子が混在している場合は、よりシンプルなセレクターが必要になることがあります。コメントと書式は保持されるため、セレクターが同じ要素に一致する場合でも、エクスポートされるCSSが以前のバージョンと異なることがあります。

MJML Source Codeを選択している間は、Preview HTMLと付随するindex.htmlにも、ドロップダウンで選んだのと同じMJMLのバージョンが使われます。

MJML Versionの設定が適用されるのは、MJML Source Codeのエクスポートだけです。MJML 5とMJML 6はオプトイン方式で、Emailifyのほかのエクスポート形式には影響しません。

MJMLファイルがあれば、開発者はコードエディターでファイルを開いて手動で更新やカスタマイズをするのがとても簡単になります。扱いがずっと難しい、コンパイル済みのHTMLテーブルに対処する必要はありません。

更新が済んだら、MJMLのドキュメントサイトの使い方のセクションで紹介されているいずれかの方法で、HTMLにコンパイルできます。

Emailifyは、ファイルサイズをできるだけ小さくするためにHTMLのエクスポートを自動でミニファイします。ただし、MJML Source Codeオプションを選択してメールをエクスポートする場合は、Minify HTMLトグルをオフにするとミニファイをスキップでき、プラグインはエクスポートするそれらのメールのミニファイを自動でオフにします。