マルチクライアント対応でレスポンシブの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)

以上!

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでこちらから行うことが可能です。

あなたにおすすめ

横画面にしてビックリ! 縦横でデザインが異なるアプリ... こんにちは。M.Sです。 先日、初めて高尾山を訪れました。山頂で食べたお弁当は、日ごろ会社で食べるお弁当の味より、100倍美味しく感じました。やっぱり、自然の中で食べると美味しさが増しますね。 カロリー消費、足の筋肉を鍛えるのにも...
スマホでどう見せる!?複数カラムテーブルのレイアウト... こんにちは。スマホ壊れiQOSを店に忘れた郎です。 4月1日で1人暮らしの要といえるスマホとiQOSを同時に失うという事件が発生しました。厄年ではありません。 複数カラムテーブルのレイアウトとは 複数カラムテーブルと書きましたが、はっき...
スマートフォン対応しないとGoogle検索で順位が下がる?【対策と対応方法】... こんにちは。bitwave編集部です。今回は編集部特別編として「スマートフォン対応しないとGoogle検索で順位が下がる?【対策と対応方法】」をお送りします。 はじめに もうご承知の方も多いと思いますが、Googleは「4月21日より、...
【Xperia XZ2 compact VS iPhone SE】徹底比較|あなたに合ったスマホを診... スマホが誕生して以来、そのディスプレイサイズは徐々に大型化してきています。 2018年現在では主流のスマホは概ね5.5〜6.3インチのディスプレイを搭載しています。 スマホユーザーの中には「大画面スマホの映像は迫力があるけど操作...