お問い合わせ

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/knowledge/column/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>

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

  • mjml-section
    • HTML5のsection要素としてコンパイルはされませんので単純にコンテンツの区切りとして使用します
  • mjml-column
    • 常にmjml-sectionとセットになっており、複数設置することで、複数のカラムを実現し、モバイル上では1カラムになります
  • mjml-group
    • 複数カラムを実装した際にモバイル表示時も複数カラムを維持したい場合に使用します
  • mjml-button
    • ボタンとして使用する要素ですが、一部だけ背景色を入れるなど、ラベルのような役割をもたせたデザインを再現することも可能です
  • mjml-text
    • テキストを記述する場合に使用します
  • mjml-image
    • 画像を配置する場合に使用します

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

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

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

  • カルーセルとして動く環境
    • Thunderbird
    • Opera Mail
    • Gmail（Firefoxで確認）
    • Gmail アプリ（Android）
  • 表示されるが動かない環境
    • Inbox（FireFoxで確認）
    • Gmail アプリ（iOS）
    • Inbox アプリ（iOS）
    • Inbox アプリ（Android）
    • Outlook アプリ（Android）
  • 1枚画像として表示される環境
    • Outlook 2013
    • Outlook（Firefoxで確認）
  • 崩れを起こしている環境
    • Yahoo! メール（Firefoxで確認）
    • Yahoo! メール アプリ（iOS）
    • Yahoo! メール アプリ（Android）
    • Outlook アプリ（iOS）

注意点

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

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

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

  • MJMLの対象環境にYahoo! JAPANのメールがないため、崩れる可能性があります
  • 日本ではHTMLメールを作るときの文字コードはISO-2022-JPが主流なので文字コードの変換を別途行う必要があります

まとめ

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

  • 簡単に素早く作成
  • レスポンシブデザイン
  • コンポーネントベース

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

2017年の記事一覧に戻る