リキッド＆レスポンシブ対応のHTMLメールをつくる

リキッドとレスポンシブ対応のHTMLメール用gulp開発環境をつくった。
Githubにサンプルメールとともにアップ。ほぼ大抵のメーラーでうまく表示できる。

Githubと対応メーラー

• Outlook2010(win7)： 固定幅表示/リキッドとレスポンシブ非対応のため
• Gmail(mac)： リキッドのみ/レスポンシブ非対応のため
• thunderbird(mac)： リキッドとレスポンシブどちらも正しく挙動する
• iOS 標準メーラー(iOS10)： リキッドとレスポンシブどちらも正しく挙動する
• Android 標準メーラー(Android4.3)： リキッドとレスポンシブどちらも正しく挙動する
• Android Gmail(Android6)： リキッドとレスポンシブどちらも正しく挙動する

あるあるバグ＆仕様一覧

outlook2010

• レンダリングがwordモード
• 背景画像がひけない
• リキッドもレスポンシブもできない
• line-heightの指定に注意（※mso用のcssを記載する必要がある）
• paddingがおかしい（marginはOK / https://www.campaignmonitor.com/css/　←こちらのサイトで使えるCSSは確認できる）
• floatが効かない
• cssの角丸などが効かない
• インラインブロックが効かない
• インライン要素へのスタイル描画が他メーラーと異なる
• HTMLメールが長すぎる場合、wordでいう改ページ部分で画像やテキスト関係なく白い区切りが入る
• 現状は、ボタンなどaタグのクリッカブルエリアをボタン全体とするには、aタグのborderで背景分を塗る or VMLタグを使うなどの工夫が必要

Gmail

• メディアクエリが効かない（なのでレスポンシブが効かない / リキッドはOK）

Thunderbird、Android 標準メーラー、iOS標準メーラー

• 特に問題なし

以上を踏まえての組み方

• tableコーディングが基本。
• リキッドもレスポンシブもできないOutlookのために、mso用のコメントタグでソースを出しわける（例えば、Outlookではtableタグを採用して、その他のメーラーはdivへのスタイルが効くのでdivで対応するなど）。リキッドエリアでは、上記をネストしていくことでOutlookでも他メーラーでも、正しく表示することができる。
• line-heightの指定は、タグに入れるのが良い。その際、Outlookでもline-heightを正しく表示させるためには mso-line-height-rule:exactly; を忘れずに記載する。
• メール全体をtableで囲むと、「ぶち抜きレイアウトに対応できない」「Outlookの改ページバグ(※1)に遭遇する」などが起きるため、モジュールごとに囲いのtableを区切るやり方を推奨する。通常のWEB制作におけるCSS設計などと一緒で、モジュールごとに構造を分解しておくことで、どんなデザイン、どんなレイアウトでも、素早く対応＆流用ができる。
• ボタンは、クリックエリアをテキストエリアのみでいい場合はtableタグの中のテキストをaタグで囲う構造が全てのメーラーで同じ表示となって良い。クリッカブルエリアをボタン全体としたい場合は、素のスタイルtableタグ内のaタグにpadding　or borderで余白を持たせるなどが必要になる。paddingを使用する場合、Outlook2010と他メーラーでは若干のpx数の違いが出る。クリッカブルエリアは全体としたいが、余白も正確にしたい場合、テキストにアンチがかからなくて良ければOutlookのみVMLタグによるボタンとするやり方もある。
• gulp環境では、通常のWEB制作と同じく、よく使うインラインスタイルなどは変数に持たせて共通化している。これによって一気に修正ができる。

HTMLメール参考サイト

https://www.campaignmonitor.com/css/

今後も追記する、かも。おしまい。