HTMLメールのクライアント互換性：どこで何が動くか、日本語メールで何を確かめるか

三つのグループに分けて考える

一つ目は Outlook（Windows） です。caniemailのデータでは2007から2019までのデスクトップ版が対象で、表の中で「非対応」が最も多い列になります。display:flex、float、border-radius、background-image、@media などがここで引っかかります。二つ目は Gmail です。styleタグの項目によると、Gmailは body 内の style を認めず、タグの大きさを16 KBまでに制限し、iOSとAndroidのアプリでは、Googleアカウント以外のメールボックスで style タグそのものを解釈しません。Maizzleのドキュメントも、IMAPアドレスでGmail Androidを使う場合に <style> が無視されることを、GANGAという呼び名とともに説明しています。三つ目は Apple Mail、Outlook.com、Samsung Email、Yahoo! などで、多くの機能が使えますが、細かな例外があります。

日本の配信では、もう一つ考慮が必要です。caniemailの一覧に載っているのは、Gmail、Outlook、Yahoo! Mail、Apple Mailなどの国際的なクライアントで、日本のキャリアメールやYahoo!メール（日本）を個別に測った項目は見当たりません。「Yahoo! Mail」の列を日本のサービスの結果として読むのではなく、配信リストに多いアドレスにテストメールを送って、自分の目で確かめることをお勧めします。

表から読み取れること

Outlook（Windows）の列は、角丸、背景画像、Flexbox、Grid、float、メディアクエリのすべてが「非対応」で、padding も「セルのみ」という条件が付きます。caniemailのpaddingのページには、同じ行のセルでは縦のpaddingが最も大きい値に揃ってしまう不具合の注記もあります。そのため、余白は td のpaddingで取り、レイアウトの骨格は role="presentation" を付けたテーブルで作ります。Apple Mailの列は「対応」が多く並びますが、ここだけを基準に作ると、ほかのクライアントで崩れます。「部分」と書かれた項目は、使えないという意味ではなく、条件を読んでからテストする項目です。

角丸のボタンは、Outlook（Windows）ではVMLの roundrect を使う方法がborder-radiusのページに紹介されています。背景画像も同様で、background-imageのページがVMLでの代替方法を案内しています。条件付きコメントとVMLを組み合わせた典型例は次のとおりです。bgcolor の指定は、画像が読み込まれなかったときでも文字が読めるようにするための保険です。

<td background="https://example.co.jp/img/hero.jpg" bgcolor="#2b3a55" width="600" valign="top"
    style="background-image:url('https://example.co.jp/img/hero.jpg'); background-color:#2b3a55;">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
    <v:fill type="tile" src="https://example.co.jp/img/hero.jpg" color="#2b3a55" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div style="padding:40px 30px; color:#ffffff;">新生活応援フェア 10月21日まで</div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

サイズ、色、関数まわりの項目

ここまでの表に載せていない、よく使うプロパティを続けます。Outlook（Windows）の「非対応」が目立つ一方で、Apple Mailは関数や変数まで対応しており、同じ書き方でもクライアントによって結果がまったく変わる領域です。

HTML要素の対応状況

CSSだけでなく、HTMLの要素にも差があります。caniemailの記録では、table と見出しはどこでも使えますが、HTML5で追加された構造用の要素は、GmailとOutlook（Windows）、Yahoo!で扱いが分かれます。

caniemailの記号の読み方

caniemailは、各機能を「対応」「部分対応」「非対応」「不明」「混在」の五つに分類しています。ここの表はそれを日本語に直したもので、「不具合あり」だけは、caniemailが注記で「Buggy」と書いている項目をまとめた独自の区分です。

幅を固定しないレイアウトの書き方

メディアクエリに頼らず、狭い画面でも読めるレイアウトにする典型例が次のコードです。外側のテーブルは width:100% と max-width:600px で広がりを抑え、Outlook（Windows）には条件付きコメントで幅600pxのテーブルを見せます。max-width はOutlook（Windows）でtableにのみ効くため、この形が使いやすくなります。画像は属性で寸法を書いたうえで、CSSで流動的にします。

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center">
      <!--[if mso]>
      <table role="presentation" width="600" align="center" cellspacing="0" cellpadding="0" border="0"><tr><td>
      <![endif]-->
      <table role="presentation" width="100%" style="max-width:600px;" cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td style="padding:24px; font-family:Arial, sans-serif; font-size:16px; line-height:28px; color:#333333;">
            10月分のご利用明細を公開しました。
          </td>
        </tr>
      </table>
      <!--[if mso]>
      </td></tr></table>
      <![endif]-->
    </td>
  </tr>
</table>

<img src="https://example.co.jp/img/hero.jpg" width="600" height="300"
     alt="秋の新商品フェア 10月21日まで"
     style="display:block; width:100%; max-width:600px; height:auto; border:0;">

CSSをどこに書くか

書く場所によって、届く範囲が変わります。使い分けを表にしました。

クライアント別に見た症状と対策

同じ崩れでも、原因がクライアントごとに違います。症状から逆引きできるように、表にまとめました。「確認」の列は、その対策が効いたかどうかを見るための方法です。

日本語メールで確かめたい組版まわりの項目

日本語は、欧文と違って単語の区切りがなく、行間を広く取り、縦書きや圏点といった独自の表現も使えます。caniemailは日本語専用のデータではありませんが、組版に関わるプロパティの対応は測っています。次の表は、日本語メールで関係しそうなものを抜き出したものです。

この表から言えるのは、どの組版機能も「あれば効果が出る補助」であって、「なければ崩れる土台」にしてはいけない、ということです。縦書きは、使えるクライアントでは縦に、使えないクライアントでは横に表示されるだけなので、見出し一行の装飾に向いています。圏点も、使えないクライアントではただ点が付かないだけです。反対に、本文の折り返しと行間は全員に影響するので、基本の指定をインラインで確実に書いてください。

<p style="margin:0; font-size:20px; line-height:32px; writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; height:160px;">
  秋の特別セール
</p>

フォントについては、caniemailの@font-faceのページが示すとおり、Webフォントを読み込めるのはApple Mailなど一部です。GmailとOutlook.comは非対応で、Outlook（Windows）は宣言だけ受け付けて外部フォントを無視します。日本語のWebフォントはファイルも大きいため、メールではシステムフォントのスタックを書くのが現実的です。次のスタックは一例で、フォント名が各環境に入っているかは保証されないため、末尾に総称の sans-serif を置き、サイズはpx、行間は mso-line-height-rule:exactly 付きで指定します。

font-family: system-ui, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "Yu Gothic", sans-serif;
font-size: 16px;
line-height: 28px;
mso-line-height-rule: exactly;

W3CはHTMLでの言語宣言について、html 要素に言語属性を付けることを勧めています。メールでは、クライアントがラッパーを取り除くことがあるため、body にも同じ指定を重ねておくと安全です。ja か ja-JP かについては、言語タグの選び方のページが、日本語に地域サブタグを付けても区別の役に立たないと説明しています。

<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>10月分のご利用明細のお知らせ</title>
</head>
<body lang="ja">

画像とメディアクエリ

画像の形式は、PNGとJPEGが全クライアントで対応です。GIFは、Outlook（Windows）でアニメーションが動かないため、最初のコマだけで意味が通じるように作ります。WebPはOutlook（Windows）が非対応で、Gmailは部分対応です。SVGは、Gmailが表示するもののPNGに変換されます。画像の中に日付や金額を書き込むと、画像オフのときに情報が失われるため、必要な情報は本文のテキストにも置いてください。

メディアクエリは、Gmailが高さ基準の条件を受け付けず、Yahoo!が screen、min-width、max-width とそれぞれの高さ版に限られ、Outlook（Windows）は一切解釈しません。スマートフォンで読める細い幅を既定にして、メディアクエリは「広い画面でさらに整える」ために使うのが基本です。詳しい書き方はメールのCSSガイドにまとめています。

確認の進め方

1. 配信リストの上位クライアントを調べる。配信サービスの管理画面にあるクライアント別の開封データを見て、上位三つから確認します。
2. グループごとに一つずつ実機で見る。Outlook（Windows）、Gmailアプリ（Googleアカウントとそれ以外のアカウントの両方）、iPhoneのメールの三つを最低限そろえます。
3. 画像オフで読む。日付、金額、ボタンのラベルが本文のテキストでも読めるか確認します。
4. 配信サービス経由で確認する。Litmusの解説によると、配信サービスはトラッキングピクセルの追加やリンクの書き換えを行い、コードの一部を取り除くことがあるので、本番と同じ経路で送ったメールを確認します。
5. ダークモードも見る。配色の扱いはダークモード対応のガイドを参照してください。

最低限そろえる確認環境と、それぞれで見るポイントを表にまとめます。

テンプレートの確認リスト

ここまでの内容を、テンプレートを受け入れるときの確認リストにまとめます。項目ごとに、書き方と理由が対応しています。

ツールの選び方

互換性の課題をツールに任せる方法は三つあります。MJMLは、mj-section や mj-column のようなタグで書くと、表組みのHTMLにコンパイルします。ドキュメントには、mj-style に inline="inline" を付けるとスタイルをインライン化できること、lang と dir を mjml タグに指定できることが書かれています。React Emailは、Reactのコンポーネントで書いたメールをHTMLの文字列に変換し、Html コンポーネントで lang を指定します。Maizzleは、書き出し時にCSSのインライン化を既定で行います。どれも、すべてのクライアントでの同一表示を約束するものではなく、書き出し後の確認は残ります。ドキュメントが互換性について述べていることを表にまとめます。

2つのコードベースのフレームワークの比較はMJMLとReact Emailの比較、視覚的に作るビルダーを探す場合はHTMLメールビルダーのガイドが出発点になります。