メルマガをレスポンシブ対応！メール用HTMLテンプレートを作成するフレームワーク「MJML」の使い方

2018年05月25日（公開: 2017年02月17日）

プログラミング

SNSやブログを使って発信している人も多いと思いますが、まだまだ息が続いている、無視することのできないメディアがメールです。
SNSには投稿の際に守らなければいけない規約も多いですが、一方でメールは自由度が高く、メールアドレスがあれば確実にリーチできるので、情報配信者にも未だに人気があります。

そんなメールですが、美しく見せたいときにはHTML形式のメールを採用することも多いのではないでしょうか。
しかし、HTML形式のメールだと、メールクライアントによって挙動が違ってくるので、それぞれのクライアントに応じた対策が必要なときがあります。
そんな手間を解消するのが、今回ご紹介する「MJML」です。

今回は、レスポンシブデザインのHTMLテンプレートライブラリである「MJML」について、インストール方法から使い方まで詳しく解説していきます。
通常のホームページならともかく、HTMLを使ったメールとなると、敷居が高いと感じているひともいるでしょう。
実際のところ、「MJML」を使えば簡単に美しいレスポンシブ対応の画像付きメールを作成することができます。

それでは、見ていきましょう。

MJMLとは？

MJMLとは、レスポンシブ対応の鮮やかなHTMLメールマガジンを作成できるメルマガテンプレートライブラリです。
MJMLではXMLにも似た独自のマークアップ言語を採用しており、コンパイルすることでHTMLに変換されます。

MJMLを使えば、上の写真のようなスタイリッシュなメールも簡単に作成することができます。
ブラウザ上で編集できるLive Email Editorを使えば、変更を即座に確認しながらやりとりを行うことができるリアルタイム編集を行うこともできます。

MJMLを使うメリット

1. HTMLに似たコーディング方法

先述したように、MJMLでは独自のマークアップ言語を採用しています。
基本的にHTMLに似ているので直感的にコーディングを行うことができるでしょう。

例えば、下記のコードはMJMLで「Hello World」を表示したときのコードです。

<mjml>
　<mj-body>
　　<mj-container>
　　　<mj-section>
　　　　<mj-column>
　　　　　<mj-image width="100" src="/assets/img/logo-small.png"></mj-image>
　　　　　<mj-divider border-color="#F45E43"></mj-divider>
　　　　　<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
　　　　</mj-column>
　　　</mj-section>
　　</mj-container>
　</mj-body>
</mjml>

見た目こそ違いますが、HTMLにそっくりなのが分かりますね。
CSSで記述するようなプロパティもインラインで記述することができるので、別途CSSファイルを用意しなくていいというのも直感的で分かり易いかもしれません。