
メルマガをレスポンシブ対応!メール用HTMLテンプレートを作成するフレームワーク「MJML」の使い方
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のプラグインとしても配布されています。
Live Email Editorを使ってみよう
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
MailChimpは世界で最も利用されているHTML配信プラットフォームです。
残念ながら日本語対応はしていませんが、さまざまなカスタマイズ機能を備えています。
2,000購読者もしくは12,000配信数までは無料で利用できます。
まとめ
以上、MJMLの概要とその他のHTMLメール作成サービスを見てきました。
実際のところ、確かにHTMLメールを簡単に作成できるサービスは便利です。
しかしながら、MJMLはカスタマイズ性に優れているので、自在にメールのデザインを行いたい、デザインにこだわりたいひとに向いています。
とてもシンプルに、クロスプラットフォームで表示できるMJMLで、ぜひかっこいいHTMLメールを作成してみてください。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- メルマガ
- メルマガとは、電子メールにて発信者が、情報を配信する手法の一つで、『メールマガジン』の略です。 一部有料のものもありますが、多くのメルマガは購読も配信も無料で行っています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ナビゲーション
- ナビゲーションとは、もともと「目的地までの経路」や「道順案内」を意味する英単語です。しかし、インターネットの分野では、ホームページにある主要コンテンツをまとめたリンクを指します。これがあることで、ユーザーは目的のページがどこにあるかを短時間で見つけることができます。また、検索エンジンのクローラー(検索ロボット)に対して、効率的にサイト内を巡回させるという効果もあります。 ナビゲーションには「グローバルナビゲーション」と「ローカルナビゲーション」の二つがあります。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- A/Bテスト
- ホームページを作るときや何か商品を売りたいときに掲載する写真、あるいはデザインで迷ったときに、不規則ででたらめな順番でホームページや画像のデザインを変えて表示し、利用者がどちらをより多くクリックしたのか、より多く購入につながったのか、ということを試験できる技術やサービスまたは行為自体をA/Bテストといいます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
●課題
●その他
