マルチクライアント対応でレスポンシブのHTMLメール作成ツール

マルチクライアント対応でレスポンシブのHTMLメール作成ツール

HTMLメールのコーディングはとても大変!

メールクライアントによってレンダリングは全然違うので、コツがたーくさんあります。
20年前の不思議なHTMLタグも書かないといけないですし。

英語出来る方が下記のPDFを読んだら、コーディングルールの酷さがすぐ分かると思います:
Definitive Results : GUIDEAN HTML-MAIL

でも、実は、そこまで苦労しなくてもいい。

マークアップの手助けにMJMLが凄い!

MJML(MailJet Markup Language)はレスポンシブのHTMLメールのフレームワークです。
オープンソースです。

簡単に説明すると、とても単純なマークアップの入力だけで天才が作ったメール用HTMLをアウトプットできる。

アウトプットのHTMLは下記のメールクライアント・OSと対応します:

  • Outlook 2000, 2002, 2003, 2007
  • Outlook 2010, 2011, 2013, 2016 (OSX)
  • Office 365, Outlook.com
  • Gmail, AOL Mail, Yahoo Mail
  • Apple Mail 7, 8
  • Android 4.4
  • Gmail App (android)
  • iPhone 5s (iOS7, iOS8), 6, 6 Plus
  • iPad, iPad Mini

サンプルを見ましょう

確かに、サンプルを見れば、MJMLのすごさで気持ち良くなるよ!

このシンプルなマークアップから・・・

image05

・・・この複雑なHTMLがアウトプットされる:

image09

<

h2>使い方は?
使い方は結構楽です。

まず、サイトに行きましょう:
https://mjml.io/try-it-live

そう、ブラウザの中で作成もエクスポートも出来ます!
そして、レスポンシブ機能の検証UIもあります:

image06

ドキュメンテーションは分かりやすくて少ない!
こちらです(英語版のみ):
https://mjml.io/documentation/#standard-components

3つのテンプレートも使えます:

image07

https://mjml.io/templates

結論

今日も生産性を上げるツールを見つけたんじゃないですか!

嬉しいでしょう!
(相変わらず単純過ぎる結論w)

以上!

Franck VESCHI

Franck VESCHI

シニア UI/UX デザイナー・デベロッパー at 株式会社ショーケース・ティービー
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。

今まで書いた記事:
http://bitwave.showcase-tv.com/author/franck/
Franck VESCHI

コメント