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

酒井涼

2017年2月17日

2,816

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
　　
>> 執筆記事一覧はこちら

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ファイルを用意しなくていいというのも直感的で分かり易いかもしれません。

2. 豊富なテンプレート

MJMLでは、テンプレートが豊富に用意されています。
イメージに合ったテンプレートがあれば、ゼロからコーディングをしなくてもよいのです。

また、自身で作成したメールの型をテンプレートとして登録することもできます。
クールで汎用的だと思うテンプレートができたら、ぜひMJMLのホームページでテンプレートを配布してみてください。

3. コンポーネントもいろいろ

ソーシャルボタンやテーブルなど、メールテンプレートでよく使うパーツはコンポーネントとして配布されています。
中にはカルーセルやナビゲーションメニューなど、通常ならjQueryプラグインで実装するような複雑なコンポーネントをメールマガジンに差し込むこともできます。

MJMLのインストール方法

MJMLをコンピュータにインストールするには、npm経由かGitHubからダウンロードしてインストールします。
また、Atom、Sublime Textをお持ちの方は、プラグインという形でインストールすることも可能です。

1. npm

npmでのインストールは、下記のコマンドを実行するだけでOKです。

$npm install mjml

また、MJMLをHTMLに変換するには、次のコマンドを実行します。

$ mjml -r index.mjml -o index.html

npmでのコードの詳細は、Documentationから確認することができます。

2. GitHub

GitHubからインストールする場合は、こちらからダウンロードできます。
Mac・Linuxに対応していますが、残念ながら2017年2月1日現在Windowsには対応していません。

Atom・Sublime Textのプラグインとして

AtomやSublime Textのプラグインとしても配布されています。

Atomのパッケージはこちら
Sublime Textのパッケージはこちら

Live Email Editorを使ってみよう

https://mjml.io/try-it-live/

MJMLではLive Email Editorという、オンライン上でリアルタイムに確認しながら作業ができるエディターも用意されています。
このエディターはMJMLをインストールしなくても利用することができるので、「ひとまず触ってみたい！」という方はまずこのエディターをいじってみてください。

それでもコーディングが面倒な方はこちら

ここまでMJMLについて触れてきましたが、「美しいHTMLメールの配信は魅力的だけれど、コーディング作業は面倒！」という方もいるかもしれません。
そうした方は、下記のように、ドラッグ＆ドロップでメールを作成することができるサービスもありますので、ぜひ活用してみてください。

Benchmark Email

http://www.benchmarkemail.com/jp/

Benchmark Emailは、毎月250通までは無料で配信することができるHTMLメール配信プラットフォームです。
件名のA/Bテストやセグメント配信も行うことができます。

blaynmail

http://blaynmail.jp/function/1.html

blaynmailの機能のひとつとして、HTMLメール作成機能が作成可能です。
空メール登録や効果測定を行うこともできます。

MailChimp

https://mailchimp.com

MailChimpは世界で最も利用されているHTML配信プラットフォームです。
残念ながら日本語対応はしていませんが、さまざまなカスタマイズ機能を備えています。
2,000購読者もしくは12,000配信数までは無料で利用できます。

まとめ

以上、MJMLの概要とその他のHTMLメール作成サービスを見てきました。

実際のところ、確かにHTMLメールを簡単に作成できるサービスは便利です。
しかしながら、MJMLはカスタマイズ性に優れているので、自在にメールのデザインを行いたい、デザインにこだわりたいひとに向いています。

とてもシンプルに、クロスプラットフォームで表示できるMJMLで、ぜひかっこいいHTMLメールを作成してみてください。