
メルマガをレスポンシブ対応!メール用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プラグインで実装するような複雑なコンポーネントをメールマガジンに差し込むこともできます。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- 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の略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ナビゲーション
- ナビゲーションとは、もともと「目的地までの経路」や「道順案内」を意味する英単語です。しかし、インターネットの分野では、ホームページにある主要コンテンツをまとめたリンクを指します。これがあることで、ユーザーは目的のページがどこにあるかを短時間で見つけることができます。また、検索エンジンのクローラー(検索ロボット)に対して、効率的にサイト内を巡回させるという効果もあります。 ナビゲーションには「グローバルナビゲーション」と「ローカルナビゲーション」の二つがあります。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング