はじめに
HTMLメールの良いところは何か、と聞かれれば「表現力が豊かなこと」と答えるでしょう。
高い表現力があれば、情報を伝達するだけにとどまらず、ブランドを認知させる役割も担えます。
そういうわけでHTMLメールを使うことには価値がある！
この記事では以下の点についてまとめています。
- 制約について知る
- 実装方法を知る
- 確認方法を知る
制約について知る: 制約の数々
1. メールクライアントごとの挙動の違い
クロスブラウザ対応以上に厄介です。
「どうせ古いoutlookが厄介なんでしょ？」って思うでしょう。
確かに古いやつは厄介です。もうそんなやつは捨てろ。
モダンなものの話をしましょう。
最近のメールクライアントで一番厄介なのは、意外なことにgmailです。
逆にoutlook.comは優秀で、こと表示に関してはgmailの方がレガシー感あります。
| gmail | outlook.com | Mail.app | |
|---|---|---|---|
| linkタグ | 使えない | 使える | 使える |
| styleタグ | 使えない | 使える | 使える |
- linkタグが使える -> WEbフォントが使える
- styleタグが使える -> メディアクエリが使える
そうは言っても上記の対応は比較的新しいものです。
大半はgmailと同程度と考えて臨むべきでしょう。
2. テーブルレイアウト
「HTMLメールの作り方についてテーブルレイアウトの記事が見つかったけど、古い情報なんでしょ？」って思うことでしょう。
残念ながら、2015年もテーブルレイアウトです。
そしてたぶん、来年もテーブルレイアウトです。
諦めましょう。
3. スタイル属性からのCSS指定
linkタグもstyleタグも使えなかったらこういうことになります。
諦めましょう。
実装方法を知る
どこからかBoilerplateを引っ張ってくる
一から組むとか大変面倒くさいです。
なのでボイラープレートを引っ張ってきましょう。
A. Faundation for Emails
http://foundation.zurb.com/emails.html
CSSフレームワークのFaundation製のHTMLメールボイラープレートです。
B. SendGridなどからインスパイアする
メール配信サービスの中にはマーケティングメールを送信できる機能があります。
中にはHTMLメールを直接編集できるものもあり、そこからコードをインスパイアして構築する手もあります。
タスクランナーで作業を効率化する
自分の場合はgulpで構築しました。
以下の記事がとても参考にしました。
http://qiita.com/k-takam/items/1a58551868a453631bb9
特にCSSコードを自動でスタイル属性にマッピングしてくれる gulp-inline-css が役に立ちました。こいつがいなかったら仕事してなかったな〜。
確認方法を知る: PutsMailでメールの配信テスト
作ったコードはメールクライアントで読まなきゃ検証できません。
litmusが提供しているPutsMailという無料の送信サービスがありますので、そちらを利用しましょう。
https://putsmail.com/
お金に余裕のある人はlitmusの有料サービスを使うといいんじゃないでしょうか。
まとめ
- テーブルレイアウトは現役
- レスポンシブというよりリキッドデザインを主眼に置きましょう
- 新しいoutlookは意外と良い