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

酒井涼

2017年2月17日

4,059

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。
　　
>> 執筆記事一覧はこちら

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 メールを作成してみてください。