こんにちは、中村です。
今回はWebサイトから少し離れて、HTMLメールについてです。
HTMLメールはあまり作る機会がなく、数年前に作ったきりだったので作り方の注意点が変わっていないか確認していきたいと思います。
主な注意点
・WEBブラウザ以上に仕様が定まっていないので複雑なレイアウトにはしないこと
・CSS3などはほとんど使えない
・レイアウトはテーブルで組むこと
・HTMLは4.01 Transitionalで記述すること
・スタイルはインラインで記述すること
HTMLメールはメーラーの仕様が定まっていないので、HTMLの書き方として正しいやり方というより、いろんな方の経験を参考にさせていただくことが多いです。
対応範囲を定めることも必要です。そうは言ってもユーザーのことを思うとできるだけ読める状態にはしておきたいです。
読めないものが送りつけられたら嫌ですからね。
レイアウトを複雑にしないのはそういった対応範囲外の方でも崩れにくくするために大切なことだと思います。
もちろん仕様の都合だけでなく、せっかく開いてもらったメールが読みやすいようにするため、というのが一番の理由になります。
もし複雑な表現で伝えたい場合や、ボリュームが多くなる場合は専用のWebページを作り、メールはWebページへの案内として発信するのが良いでしょう。
では現状はどうなっているか、確認していきたいと思います。
メーラーのCSS対応状況を確認する
こちらのサイトで確認できます。
CSS Support Guide for Email Clients [+Checklist] | Campaign Monitor
head内のstyle
レスポンシブにする場合はメディアクエリをhead内に記述するのでこのあたりは少し心配です。
対応状況を見ると、概ね問題ないなようですが、モバイルのGメールアプリとヤフーのアプリが未対応なので対応範囲に含めるか確認しましょう。
linkタグ
こちらはさらに対応していないものが多いです。
やっぱりスタイルはインラインに書いた方が良いですね。
セレクタ
#idや.classnameは概ね問題ないです。
フォント
Webフォントは使えそうにないです。
SVGも怪しいので特殊な書体は画像にします。
Background
Background-colorなら使えます。
念のため、表示されなかったとしても大丈夫なところに使いましょう。
タイトルで白抜き文字や装飾をしたい場合は画像にします。
余白
margin・paddingを使いたいところですがメーラーによって解釈が違うようです。
width・height・画像で工夫しましょう。
この他のプロパティは非対応が多かったので省略します。
レイアウトに使うプロパティの対応がまだまだ行き届いていないのでテーブルで組むところは変わらないですね。（HTML 4.01 Transitionalにするのはテーブルレイアウトが許容されているから）
その他の注意点
文字コード
iso-2022-jpまたはutf-8にします。
※現在はほとんどのメーラーがutf-8にも対応しているようですが送信するシステムの都合もあるので制作前に確認しましょう。
画像
絶対パスで記述します。
pngは重たくなりがちなのでjpegかgifにすると良いです。
ビューポート
<meta name="viewport" content="width=device-width,initial-scale=1.0">
※initial-scale=1.0があるとAndroidで不具合があったという方もいたので何か起きたらここも疑った方が良さそうです。
最終的には圧縮をする
注意点の中で「スタイルをインラインにする」というものがありますが、制作中はインラインだととても見づらいので後からツールを使ってインラインにすると作業しやすいと思います。
変換ツール：Foundation for Emails | Responsive Email CSS Inliner
まとめ
2018〜2019年に書かれた記事を色々と読んでみましたが基本的にはあまり変わっていないようです。HTMLメールはまだまだテーブルコーディングが主流なんだなということがわかりました。
以前作った時は特に問題になったことはないので今回書いた注意点で大丈夫だとは思いますが、outlook、Windows 10 Mailは対応していないものが多いので注意していきたいと思います。
