Smart Communication Design Company
ホーム > ナレッジ > Blog > フロントエンドBlog > 2017年3月 > MJMLでレスポンシブ Eメール デザインを作ってみる

フロントエンドBlog

Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

MJMLでレスポンシブ Eメール デザインを作ってみる

UI開発者 郡司

MJMLとはレスポンシブ Eメール デザインを作成するためのフレームワークです。MJMLという独自のマークアップ言語で記述し、コンパイルするとHTMLファイルが出力されます。

1stリリースから約1年が経過しましたが、SitePointのFront-end Tools: My Favorite Finds of 2016という記事で存在を知り興味を持ったので実際に使用してみました。

今回使用するにあたって、HTMLメールを作成・編集できるデスクトップアプリケーションのMJML Appを使用しています。

ミツエーリンクス ニュースで作ってみる

MJMLはコンポーネントベースで作成することができ、ドキュメント上には解説と一緒にサンプルもあります。今回はこちらを見ながら、縮小版ミツエーリンクス ニュース Vol.178をざっくりとですがMJMLで作ってみました。

今回はさらにThe Biggest Email Marketing Trends in 2017 Will Be...から2017年のトレンドとしてインタラクティブなHTMLメールの需要が上がると予想しているとのことなので、MJMLで用意されているカルーセルを新規で追加しています。

テーブルレイアウトで作成しないのでコードの見通しがよく、実際にコンパイルされたHTMLを送信してみるとデザインの再現度が高く、HTMLをみるだけでも大変勉強になります。

MJMLでは1つの要素でもコンパイルされたHTML上は複数の要素で構成されているため既存のデザインを再現するのは難しく、本物のミツエーリンクス ニュースと同じデザインにするのは困難でした。

MJML Appをダウンロードして以下のソースコードを貼り付けると今回作成したHTMLメールを見ることができます。

<mjml><mj-head><mj-title>ミツエーリンクス ニュース Vol.178</mj-title><mj-attributes><mj-all /><mj-text font-size="16" font-family="'\30D2\30E9\30AE\30CE\89D2\30B4\20Pro\20W3', 'Hiragino Kaku Gothic Pro','\30E1\30A4\30EA\30AA', Meiryo,'Helvetica', 'Arial', sans-serif" /></mj-attributes></mj-head><mj-body><mj-container><mj-section><mj-column><mj-text color="#216aad" align="right" font-size="14"><a href="https://www.mitsue.co.jp/knowledge/mailnews/178.html" style="text-decoration: none; color: inherit;"> メールをブラウザで見る</a></mj-text></mj-column></mj-section><mj-section border-bottom="#e6e6e6 1px dotted"><mj-column width="20%"><mj-image src="https://www.mitsue.co.jp/cmn/img/mailnews/logo.gif" /></mj-column><mj-column width="80%"><mj-text color="#000000" padding-bottom="0" font-size="18">- 2017.02.15 -</mj-text><mj-text font-size="25" color="#000000" line-height="25px">ミツエーリンクス ニュース Vol.178</mj-text></mj-column></mj-section><mj-section><mj-column><mj-text color="#333333" font-size="18">ミツエーリンクスから最新のWeb業界動向や当社サービスの情報をお届けします。</mj-text></mj-column></mj-section><mj-section background-color="#f2f2f2" padding-bottom="0"><mj-column><mj-text padding-bottom="0">Index</mj-text></mj-column></mj-section><mj-section background-color="#f2f2f2" padding-bottom="0"><mj-group><mj-column width="10%" vertical-align="middle"><mj-button background-color="#666666" color="#ffffff" inner-padding="10px" padding-bottom="0" border-radius="0">1</mj-button></mj-column><mj-column width="90%" vertical-align="middle"><mj-text padding-bottom="0">コラム:運用ファーストでいきましょう(第15回)</mj-text></mj-column></mj-group></mj-section><mj-section background-color="#f2f2f2"><mj-group><mj-column width="10%" vertical-align="middle"><mj-button background-color="#666666" color="#ffffff" padding-bottom="0" inner-padding="10px" border-radius="0">2</mj-button></mj-column><mj-column width="90%" vertical-align="middle" padding-bottom="0"><mj-text>サービス閲覧ランキング TOP 10(2017.1.1~1.31)</mj-text></mj-column></mj-group></mj-section><mj-section><mj-column><mj-spacer height="10px" /><mj-column></mj-section><mj-section><mj-column><mj-carousel tb-hover-border-color="#216aad"><mj-carousel-image src="https://www.mitsue.co.jp/img/index/kv/default.jpg" /><mj-carousel-image src="https://www.mitsue.co.jp/img/index/kv/why.jpg" /><mj-carousel-image src="https://www.mitsue.co.jp/img/index/kv/how.jpg" /></mj-carousel></mj-column></mj-section><mj-section padding-bottom="0"><mj-group><mj-column width="10%" vertical-align="middle"><mj-button background-color="#666666" color="#ffffff" padding-bottom="0" inner-padding="10px" border-radius="0">1</mj-button></mj-column><mj-column width="90%" vertical-align="middle" padding-bottom="0"><mj-text>コラム:運用ファーストでいきましょう(第15回)</mj-text></mj-column></mj-group></mj-section><mj-section padding-top="0" padding-bottom="0"><mj-column><mj-image src="https://www.mitsue.co.jp/cmn/img/mailnews/bg_hdg_03.gif" /></mj-column></mj-section><mj-section><mj-column><mj-text>Webサイトの運用業務と並行して、Webデザインに関する最新の技術やトレンドについて情報収集したり学習することは、何かと動きが速いと言われるこの業界だけに、Web担当者の皆様はハードルがやや高いとお感じではないでしょうか。</mj-text></mj-column></mj-section><mj-section><mj-column><mj-button background-color="#fff" color="#0a77c4" padding-bottom="0" inner-padding="5px" border-radius="0" border="1px solid #0a77c4" font-weight="bold" font-size="18" align="left" font-family="'\30D2\30E9\30AE\30CE\89D2\30B4\20Pro\20W6', 'Hiragino Kaku Gothic Pro'">コラム</mj-button><mj-text font-size="18" font-weight="bold">日本発の民間月面探査チーム「HAKUTO」への協賛について</mj-text></mj-column></mj-section><mj-section background-color="#f4f4f4" background-url="https://www.mitsue.co.jp/cmn/img/mailnews/bg_dot_01.gif" border-radius="4px"><mj-column width="30%" vertical-align="middle"><mj-image width="103" src="https://www.mitsue.co.jp/cmn/img/people/kidachi.jpg" /></mj-column><mj-column width="70%" vertical-align="middle"><mj-text>2017年1月27日<br />取締役社長<br />木達 一仁</mj-text></mj-column></mj-section><mj-section><mj-column><mj-button href="https://www.mitsue.co.jp/column/backnum/20170127.html" font-size="18" background-color="#f2f2f2" color="#0a77c4" width="100%" inner-padding="20px" font-family="'\30D2\30E9\30AE\30CE\89D2\30B4\20Pro\20W6', 'Hiragino Kaku Gothic Pro'">コラムを読む</mj-button></mj-column></mj-section></mj-container></mj-body></mjml>

簡単ではありますが以下に、頻繁に使用した要素について記載します。以下の要素に独自の記法でスタイルを当てることでデザインを適用します。

コンパイルされたHTMLファイルをブラウザで表示すると以下のようになります。

気になるカルーセルの対応状況

個人調査の元ではありますが、カルーセルの対応状況は以下になります。崩れを起こしている環境ですが個人的見解となっていますので実際にカルーセルを使用する際はどの程度の崩れを許容とするか協議が必要です。

注意点

CSSのサポート状況にバラツキが大きく、閲覧環境によって表示が異なるHTMLメールを作成するにあたって対応環境の策定は重要な部分となります。

MJMLでは使用するコンポーネントに付与するスタイルによって対応環境が確認できますので、デザイナーと一緒に確認しつつ進めるのが得策と言えます。

また、コンパイルしたHTMLファイルをそのまま配信するのは、要件によっては難しいかもしれません。

まとめ

MJMLは以下の特徴を掲げています。

Flexible Boxが使えるようになっている昨今、テーブルレイアウトのようなある意味で特別な知識をもって実装する必要がないので、HTML、CSSが使えるデザイナーであれば、MJMLの特徴を十分に発揮してレスポンシブ Eメール デザインを作成できると考えます。