いまどきHTMLメールを作るにはどうするの？

Posted at 2015-12-14

はじめに

HTMLメールの良いところは何か、と聞かれれば「表現力が豊かなこと」と答えるでしょう。
高い表現力があれば、情報を伝達するだけにとどまらず、ブランドを認知させる役割も担えます。
そういうわけでHTMLメールを使うことには価値がある！

この記事では以下の点についてまとめています。

クロスブラウザ対応以上に厄介です。
「どうせ古いoutlookが厄介なんでしょ？」って思うでしょう。
確かに古いやつは厄介です。もうそんなやつは捨てろ。

モダンなものの話をしましょう。
最近のメールクライアントで一番厄介なのは、意外なことにgmailです。
逆にoutlook.comは優秀で、こと表示に関してはgmailの方がレガシー感あります。

	gmail	outlook.com	Mail.app
linkタグ	使えない	使える	使える
styleタグ	使えない	使える	使える

そうは言っても上記の対応は比較的新しいものです。
大半はgmailと同程度と考えて臨むべきでしょう。

「HTMLメールの作り方についてテーブルレイアウトの記事が見つかったけど、古い情報なんでしょ？」って思うことでしょう。
残念ながら、2015年もテーブルレイアウトです。
そしてたぶん、来年もテーブルレイアウトです。

諦めましょう。

linkタグもstyleタグも使えなかったらこういうことになります。

諦めましょう。

一から組むとか大変面倒くさいです。
なのでボイラープレートを引っ張ってきましょう。

http://foundation.zurb.com/emails.html
CSSフレームワークのFaundation製のHTMLメールボイラープレートです。

メール配信サービスの中にはマーケティングメールを送信できる機能があります。
中にはHTMLメールを直接編集できるものもあり、そこからコードをインスパイアして構築する手もあります。

自分の場合はgulpで構築しました。
以下の記事がとても参考にしました。
http://qiita.com/k-takam/items/1a58551868a453631bb9

特にCSSコードを自動でスタイル属性にマッピングしてくれる gulp-inline-css が役に立ちました。こいつがいなかったら仕事してなかったな〜。

作ったコードはメールクライアントで読まなきゃ検証できません。
litmusが提供しているPutsMailという無料の送信サービスがありますので、そちらを利用しましょう。
https://putsmail.com/

お金に余裕のある人はlitmusの有料サービスを使うといいんじゃないでしょうか。