HTMLメールを作成した時の備忘録

HTMLメールを作成してと言われた時に
気をつけたことをまとめました。

主流の書き方

HTMLメールは昔のIE対応ごとくメーラー独自のバグが非常に多いです。

そのため
2018年4月現在のHTMLメール作成の主流は未だ**「テーブル組」**です。
HTMLのバージョンは
XHTML1.0やHTML4で作成するのが主流です。

テーブル組の理由

メーラーは多くの種類存在していますが
CSSプロパティで指定できることは、メーラー毎に異なります。

以下参考URLで主流なメーラーのCSSを対応一覧がわかります。
The Ultimate Guide to CSS
https://www.campaignmonitor.com/css/

こちらに書いている通り
普段多用しているCSSがほぼ使用することが難しいです。
marginやpaddingなどレイアウトを構築する上でよく使うプロパティも使えないので
HTMLメールでは、
CSSではなくテーブルでレイアウトし、装飾には幅広いメーラーで使えるCSSのみを使う。
というのがポイントになります。

その他コーディングする上で注意する点

テーブル組以外で注意する点は以下になります。

• 文字コードはISO-2022-JP（今回は送信に使用するツールで文字コード変換機能がついていたためUTF-8で作成）
• 画像、リンクパスなどは絶対パス
• brタグで空行を作ってはいけない。(br2つで空行を作ることができないメーラーが存在する。)
• CSSはインライン形式で指定（GmailなどWEBメールでstyleタグや外部CSSに対応していない。）
• 画像はjpgかgif（pngファイルは重いので使用しない。）

制作方法

今回のHTMLメール作成で使用したツール、導入したものを紹介します。

タスクランナー（Gulp）

https://www.npmjs.com/package/gulp
タスクランナーで効率化を図りました。

テンプレートエンジン（EJS）

https://www.npmjs.com/package/gulp-ejs
今回は毎月HTMLメールを配信する予定だったので
テンプレートエンジンでなるべく共通部分を流用できるようにした。
拡張の自由度が高いことを理由にEJSを選定。
table組で階層が深くなり可読性が悪くなることも
これで若干解消！

CSS プリプロセッサ（Stylus）

https://www.npmjs.com/package/gulp-stylus
使い慣れていたためStylusを選定

inlineCSS

https://www.npmjs.com/package/inline-css
CSSをHTMLファイルのStyle属性にインライン展開してくれるツール
HTMLメールはCSSはインライン形式にするのが望ましいが、
毎度htmlタグのstyle属性にcssを書いていると大変ですし
可読性も悪いのでこちらを採用。

stylusとinlineCSSは並列に処理はできないため
stylusで外部のCSSを作成後、inlineCSSでHTMLにインライン化するよう工夫が必要です。

画像圧縮（imagemin）

https://www.npmjs.com/package/imagemin
HTMLメールはファイルが重いと表示できないことがあるので、
なるべく画像は圧縮をかけて軽量化します。

リセットCSS

メール用のリセットCSSは以下を参考にしました。
https://github.com/dudeonthehorse/normalize.email.css

レスポンシブ対応

Outlookはmax-widthを指定しても反映されないため、
Outlookのみレスポンシブはせず、横幅固定のソリッドデザインで割り切る必要があります。

通常はレスポンシブ
Outlookのみソリッドデザインする例は以下になります。

レスポンシブ対応しつつOutlook対策の例（横幅最大800px）

<!--[if gte mso 9]><table width="800" bgcolor="#FF0000" style="width:800px;"><tr><td><![endif]-->
<table bgcolor="#FF0000" style="max-width:800px;width:100%">
・
・
・
</table>
<!--[if gte mso 9]></td></tr></table><![endif]-->

検証ツール

PC用メーラーに加え、スマホ用のメーラーアプリなど
全てをチェックするのは大変です。
そのため、表示確認は以下サービスを利用しました。

Litmus
http://litmus.com/

こちらは有料なのですが
多くのメーラーを確認できるのでオススメです。

まとめ

メーラーは様々な種類があるため、すべてを網羅して対応することは難しいです。
そのためコーディングはなるべくCSSを使わない設計が理想です。
動作保証のメーラーをどれにするかをクライアントやディレクターさんなどにはっきり決めてから
作業することでトラブルを回避できるので、
現状のHTMLメール制作の難しさしっかり説明することが大切だと思います。

それでは良きHTMLメールライフを。。。