Zenn
📐

HTMLメールのコンテンツ作成時に注意すべきことを整理してみた

2021/08/13に公開
CSS
HTML
htmlメール
tech

はじめに

お仕事でメールをHTMLを使ってデコレーションする取り組みをはじめました。
それによってエンゲージメントのアップが期待できますが、閲覧者の環境差が大きいので、注意すべきことがありそうでした。

やったことがないので、色々調べてまとめてみました。

結論

一番無難と思われる書き方は以下

  • 文字エンコーディング方式にはiso-2022-jpかUTF-8を使う
    • メタタグ <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp" /> を入れる
  • DOCTYPE宣言には4.01 Transitionalを利用する
  • CSS3は利用しない
  • スタイルはインラインで記述する
  • レイアウトは <table> タグで行う
  • 縦方向の間隔調整は <br> タグを使う
  • 横方向の間隔調整は文字実体参照( &nbspとか )などを使う
  • 色を表現したいなら画像を使う
  • 文字で表現したいことがあるなら画像を使う
  • 画像は絶対パスを使う

この中で、どうしてもやりたいことが出てきたら、対応メーラーを決めて https://www.campaignmonitor.com/css/ のサイトで対応していると書いてある機能だけを使って、実機でテストしてから公開する。

前提

閲覧者の環境

そもそもメーラはどんなものがよく使われるのでしょうか。

litmus社が公開している2021年のデータを見てみると、iPhoneが37%,とGmailが34%と大部分を占めているようです。

Email Client Market Share and Popularity - July 2021 > https://emailclientmarketshare.com/

「ビジネスメール実態調査2021」（一般社団法人日本ビジネスメール協会）より引用すると、仕事で利用しているメールソフトは「Outlook」と「Gmail」の二強であるとのことでした。
（内容をみだりに共有すると問題が起きそうなので、ここでは概要だけにします。すみません。）

母数と集計方法の違う統計情報ですが、いずれにしてもiPhone, Gmail, Outlookが多くのシェアを占めていることは筆者の実感としても合っているのでそうなんだろうなぁと思っています。

問題点

「iPhone（のビルトインのメーラ）」「Outlook」「Gmail」のどれでも期待する表示にしたい、と考えた時に問題になってくるのが、HTMLやCSSへの対応状況です。

PCのブラウザのようにフルで対応していないどころか、CSS3やdivのpaddingの挙動など、対応状況は3つの中でもバラバラのようです。

具体的にどのメーラで何に対応しているのかについて、こちらのサイトにまとまっていました。

CSS Support Guide for Email Clients [+Checklist] | Campaign Monitor https://www.campaignmonitor.com/css/

いくつかピックアップしてみてみました。

  • iPhone(iOS11)のビルトインのメーラー
    そこまで「非対応」の情報が多くないです

  • Webmail > Gmail
    <link> in <head> や <link> in <body> が使えないとか min-height が使えないとか、基本的な機能の制限が結構ありました。Flexboxとかは使えないですね。

  • Desktop > Outlook 2007-16
    <link> in <head> や <link> in <body> が使えないのはGmailと同じでした。気になったのが、 非対応の項目がめちゃくちゃ多いことです。あと「buggy」と書いてある項目も多いです。
    特に気になったのが、 margin や padding が「buggy」と書かれていることです。これ、どうやってスタイリングするんだろう？

Outlookについて追加で調べてみたところ、複数のサイトで「Outlookでdivのパディングがうまく動かない」といった旨が書かれていました。
例として、salesforceのhelpサイトにこのような情報があります。

https://help.salesforce.com/s/articleView?id=000312825&type=1

Outlook では次の機能がサポートされないため、可能な限りこれらの機能の使用は避けてください。
- アニメーション GIF。Outlook では GIF の最初のフレームのみが表示されます。
- 背景画像。Outlook にこれらは表示されません。
- <head> タグ内の CSS。メールで CSS を使用する必要がある場合は、インラインにします。ただし、Outlook ではサポートされない CSS 属性がいくつかあります。
- <div>、<p>、および <a> タグのパティング。Outlook では無視されます。画像やテーブルで hspace または vspace 属性を使用してコンテンツを書式設定します。
- <div> および <p> タグの幅。Outlook では無視されます。画像やテーブルで hspace または vspace 属性を使用してコンテンツを書式設定します。

ということなので、3つの閲覧環境に対応するだけでも、スタイリングをどこまで実現したいのかを考えて、ある程度割り切ってゴール設定する必要がありそうです。

注意すべきこと

前セクションで書いた通り、Outlookとそれ以外で対応する機能に大きく違いがあるし、シェアが高いGmailやiPhoneビルトインのメーラとも結構機能に差があります。

色々調べた結果、筆者が一番無難だと思った方法を具体的に書きます。

  • 文字コードにはiso-2022-jpかUTF-8を使う
  • DOCTYPE宣言には4.01 Transitionalを利用する
    • HTML5は対応されていない可能性があるので利用しない
  • CSS3は利用しない
    • 対応されていない可能性があるので
  • レイアウトは<table>タグで行う
    • floatやflexboxは使わない
    • margin, padding, position等は使わない
  • 縦方向の間隔調整は
    タグを使う
  • 横方向の間隔調整は文字実体参照( &nbspとか )などを使う
  • スタイルはインラインで記述する
    • linkタグに入れない
  • 色を表現したいなら画像を使う
    • background系のプロパティに対応していない懸念がある
  • 文字で表現したいことがあるなら画像を使う
    • webフォントは使わない
      • linkタグは使えないものと思ったほうがいい
  • 画像は絶対パスを使う
    • SVGは使わない

おわりに

安全に外出する方法みたいなのを書くつもりが、家から出るなみたいな結果になってしまった。

Discussion