✉️

HTMLメール作成の忘備録

2022/09/18に公開

CSS

HTML

mail

tech

HTMLメールについて調査したこと

業務でHTMLメールを作成する機会があり、想像以上に苦戦したため、忘備録としてまとめておきます。

標準的なHTMLメールの仕様

テーブルコーディングで作成する
CSSはインラインで記述する
画像の拡張子はgifかjpgを使用する(png、svgは使用不可能)
- 配信テストの際には、base64 形式で埋め込むなどの方法もあります。iOSのGmailアプリなどで画像が表示されなくなるため、本番の際にはサーバーにアップロードしておく必要があります。
HTML4.01 を使用する
文字の自動調整を防ぐためbodyにsize-adjust (100%)を指定する

その他特有の仕様

テーブルの最大幅は600px〜800pxで固定する
- 多くのECサイトなどのHTMLメールではこの値となっていました
レスポンシブ対応は不可能
- 基本はモバイルファーストかPCファーストで、テーブルを固定幅で作成し、画面幅に応じて何の要素(ボタンなど)を可変とするか、という考え方がベースになりそうです。
メールクライアントのダークモードは制御不可能
- Gmailなどのメーラーはダークモードに対応していますが、<style>ブロックを使ったCSSの指定や、メディアクエリは使えません(!important なども利きません)
- メディアクエリは2016年9月からGmailもサポートしたようで、GmailがサポートするCSSプロパティ・メディアクエリの一覧ページがありますが、2022年9月時点では使えませんでした
- 送信元のメーラーに依存する可能性があります。他の環境では未検証ですが、筆者の検証環境(Thunderbird)では適用されませんでした。Web版でうまくいかなかったという情報もあります
margin: 0 auto; は使えない
中央寄せなどは基本的にpaddingと<table>の入れ子構造でなんとかします。テーブルレイアウト力が試されます
outlookはmarginを認識しない
- <td>　のheight指定などでなんとかします
position:absolute; が使えない
Gmailでpositionやz-index が使えないため、画像と文字の重ね合わせなどはbackground を使います(background-color はGmail Android appなど一部メーラーが非対応)
rgba で色指定ができない
- Descktop OutlookやYahoo! Mailなどで非対応です

その他メールクライアントごとの違い

各種メーラーのCSS対応については、下記のサイトで調べることができます。

標準的な作り方

ヘッダーとメタタグは下記のように記述します。

ヘッダー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

前述しましたが、HTMLメールではHTML4.01 が一般的です。

メタタグ

<meta http-equiv="content-type" content="text/html; charset=iso-2022-jp">

配信時にはメーラー標準の文字コードであるiso-2022-jp を使用しますが、ローカルのブラウザ上で開くと文字化けするため、編集中にローカルで確認を行う際はcharset にUTF-8 を指定します。

<table>要素の骨組みは以下のようになります。

<table
  width="100%"
  border="0"
  cellpadding="0"
  cellspacing="0"
  style="width:100%; border:none; margin:0 auto; max-width: 600px;"
>
  <tr>
    <td></td>
  </tr>
</table>;

配信テストをする

HTMLメールを送信可能なメーラーはThunderBirdがありますが、Thunderbirdで配信テストを行った場合、ブラウザのGmailなどで送信後のcssが適用されなくなり、メールの表示が崩れてしまうことがありました。
そのため、下記のサイトを推奨します。
https://putsmail.com/
メールアドレスによる会員登録が必要ですが、無料で利用することができます。

表示テストをする

Gmailのモバイル版ブラウザ表示は、GoogleChromeのDevToolsでも確認することができます。(切り替え後ブラウザの更新が必要です)

まとめ

HTMLメールはメーラーによって挙動がまったく異なるため、事前に動作保証をするメーラーを定める必要があります。
デザインの修正などによってデザイナーさんにかかる負担を減らすためにも、HTMLメールの基本的な仕様を把握した上で、事前の情報共有や検証環境の共有をしっかりと行うことが大切だと感じました。

参考サイト

https://blog.gmo.media/html-mail/