HTMLメールの作成方法：どのメールソフトでも表示崩れしないコードの書き方

HTMLメールのコードがウェブと違う理由

ブラウザーは、ほぼ一貫した1つのCSS仕様を共有しています。メールソフトはそうではありません。WindowsのOutlook ClassicはMicrosoft Wordの描画エンジンで表示し、Gmailはクラス名を書き換えたうえで、<style>ブロックをheadにあるものだけ、上限の範囲内で残します。Yahoo Mailは独自のラッパー用スタイルを追加します。対応するCSSの範囲がそれぞれ違うため、どこでも動くコードは、ウェブ向けに書くコードより古く、簡素なものになります。

Outlookが対応しているCSSは、プロパティごとにOutlookのCSSガイド（英語）にまとめています。GmailのルールはGmailのHTMLメールガイド（英語）にあります。特定のメールソフトだけに適用したいルールがある場合は、別のレイアウトの仕組みを用意するのではなく、クライアントターゲティングCSS（英語）を使います。実機のメールソフトで実際に何が表示されるかについては、24のプロパティを実機のメールソフトで撮影したスクリーンショット（英語）をご覧ください。

コピーして使えるHTMLメールのテンプレート

これは完全なトランザクションメールです。head、Outlookの設定、プレビューテキスト、ロゴ、見出し、本文、ボタン、フッターがそろっています。Emailens CLI（emailens lint、バージョン0.10.0）でリントするとエラーは0件です。出る警告2件は意図的なもので、コードの下で説明しています。example.comのURL、文言、色を差し替え、構造はそのまま使ってください。コード中のコメントのみ日本語にしています。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Your order has shipped</title>
  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <style>
    * { font-family: Arial, sans-serif !important; }
  </style>
  <![endif]-->
  <style>
    @media only screen and (max-width: 620px) {
      .container { width: 100% !important; }
      .px { padding-left: 20px !important; padding-right: 20px !important; }
    }
    @media (prefers-color-scheme: dark) {
      .bg-page { background-color: #18181b !important; }
      .bg-card { background-color: #27272a !important; }
      .text-strong { color: #f4f4f5 !important; }
      .text-body { color: #e4e4e7 !important; }
      .text-muted { color: #a1a1aa !important; }
    }
  </style>
</head>
<body class="bg-page" style="margin: 0; background-color: #f4f4f5;">
  <!-- プリヘッダー（件名の後に表示されるプレビューテキスト） -->
  <div style="display: none; max-height: 0; max-width: 0; overflow: hidden; mso-hide: all; opacity: 0; color: #f4f4f5; font-size: 1px; line-height: 1px;">
    Your order ships Tuesday. Track it or change the address until Monday.
    &#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;&#847;&zwnj;&nbsp;&#8199;&shy;
  </div>

  <!-- 外側のラッパー（全幅、メールを中央に配置） -->
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="bg-page" bgcolor="#f4f4f5" style="background-color: #f4f4f5;">
    <tr>
      <td align="center" style="padding: 32px 10px;">

        <!-- コンテナー（600px、スマートフォンでは縮小） -->
        <table role="presentation" class="container bg-card" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="width: 600px; max-width: 600px; background-color: #ffffff;">

          <!-- ヘッダー -->
          <tr>
            <td class="px" style="padding: 24px 40px; border-bottom: 1px solid #e4e4e7;">
              <a href="https://example.com">
                <img src="https://example.com/logo.png" width="120" height="32" alt="Example Store" style="display: block; border: 0; height: auto; font-family: Arial, sans-serif; font-size: 16px; color: #18181b;">
              </a>
            </td>
          </tr>

          <!-- 本文 -->
          <tr>
            <td class="px" style="padding: 32px 40px 8px;">
              <h1 class="text-strong" style="margin: 0 0 16px; font-family: Arial, Helvetica, sans-serif; font-size: 24px; line-height: 32px; font-weight: bold; color: #18181b;">
                Your order is on its way
              </h1>
              <p class="text-body" style="margin: 0 0 24px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; color: #27272a;">
                Order #10482 left our warehouse this morning and should arrive on Tuesday. You can change the delivery address until Monday at 6pm.
              </p>
            </td>
          </tr>

          <!-- ボタン（Outlook ClassicにはVML、それ以外にはスタイル付きのリンク） -->
          <tr>
            <td class="px" align="left" style="padding: 0 40px 32px;">
              <div>
                <!--[if mso]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/orders/10482" style="height:48px;v-text-anchor:middle;width:200px;" arcsize="13%" strokecolor="#18181b" fillcolor="#18181b">
                  <w:anchorlock/>
                  <center style="color:#ffffff;font-family:Arial, sans-serif;font-size:16px;font-weight:bold;">Track your order</center>
                </v:roundrect>
                <![endif]-->
                <a href="https://example.com/orders/10482" style="background-color: #18181b; border: 1px solid #18181b; border-radius: 6px; color: #ffffff; display: inline-block; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; line-height: 48px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all;">Track your order</a>
              </div>
            </td>
          </tr>

          <!-- フッター -->
          <tr>
            <td class="px" style="padding: 24px 40px; border-top: 1px solid #e4e4e7;">
              <p class="text-muted" style="margin: 0 0 8px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; color: #3a3a3a;">
                You are receiving this email because you placed an order at Example Store.
                <a href="https://example.com/unsubscribe" class="text-muted" style="color: #3a3a3a;">Unsubscribe</a>
              </p>
              <p class="text-muted" style="margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; color: #3a3a3a;">
                Example Store, 123 Main Street, Springfield, IL 62701, USA
              </p>
            </td>
          </tr>

        </table>

      </td>
    </tr>
  </table>
</body>
</html>

各部分の役割は次のとおりです。

• doctype、名前空間、headのmetaタグ。通常のウェブページと同じく、HTML5のdoctype、lang、utf-8のcharset、viewportタグを入れます。xmlns:vとxmlns:oの名前空間はOutlookがVMLのボタンを描画するためのものです。x-apple-disable-message-reformattingはApple Mailにレイアウトを拡大縮小しないよう求め、2つのcolor-schemeタグはこのメールがダークモードに対応していることを宣言します。
• Outlook用のブロック。<!--[if mso]>の中でPixelsPerInchを96にして、Outlookの拡大率を安定させます。* { font-family: Arial, sans-serif !important; }のルールは、OutlookがTimes New Romanにフォールバックするのを防ぎます。この対処法はメールのフォント（英語）で検証しています。条件付きコメントについてはOutlookのメールテンプレート（英語）で詳しく説明しています。
• styleブロック。インライン化できないものだけを入れます。スマートフォン向けのメディアクエリと、prefers-color-scheme: darkのブロックです。レイアウトが依存するものはすべてインラインで書いています。
• プリヘッダー。本文の先頭にある非表示の1行が、受信トレイで件名の後に表示されるプレビューテキストになります。その後に続く文字参照の列は、本文のテキストがプレビューに入り込むのを防ぎます。この作りにしている理由はメールのプリヘッダー（英語）で説明しています。
• 2つのテーブル。外側のテーブルは幅いっぱいに広がり、メールを中央に配置します。内側のテーブルは600pxで、メディアクエリによって画面幅まで縮みます。どちらにもrole="presentation"を付けているため、スクリーンリーダーは行や列を読み上げません。また、どちらもOutlook向けに背景色をbgcolor属性でも指定しています。
• ロゴ。width属性を付け、display: blockで画像の下にできる隙間をなくし、画像がブロックされたときにも読めるよう代替テキスト（alt属性）にスタイルを付けています。各枠の画像サイズはメールの画像サイズ（英語）にまとめています。
• ボタン。Outlook Classic向けにはVMLの<v:roundrect>、それ以外にはスタイルを付けたリンクを使います。バレットプルーフボタン生成ツール（英語）が出力するのと同じマークアップです。Outlookでこれが必要な理由はOutlookのCSSフォールバック（英語）で説明しています。
• フッター。配信停止リンクと住所です。一括送信のメールに両方が必要な理由はメール到達率ガイド（英語）で説明しています。

リンターが残す警告は2件です。1つ目は、ボタンのtext-decoration: noneがProton Mailで指摘されるものです。Proton Mailはこのプロパティに対応していないため、そこではラベルに下線が表示される場合があります。2つ目は、プリヘッダーのfont-size: 1pxが極端に小さい文字として指摘されるものですが、非表示のプリヘッダーではそれこそが目的です。文字色は、一般的なグレーよりあえて濃くしています。中間のグレーでは、リンターがプレビューしたGmail Androidのダークモードでコントラスト不足が報告されました。このダークモードは明るい背景を塗り替えますが、中間色の文字はそのまま残すためです。

HTMLメールで使えるCSS

以下のリストは、エンジンが21種類のメールソフトについて持つサポートデータから生成しているため、データが変われば内容も変わります。追跡している300のCSS・HTML機能のうち、すべてのメールソフトで動作するのは6個です。

• background-color（英語）
• color（英語）
• direction（英語）
• font-family（英語）
• list-style-type（英語）
• vertical-align（英語）

このリストは短いため、実際には、Outlook Classicで「一部対応」の注記が付いているだけのプロパティも使うことになります。注記の大半は、適用できる要素についてのものです。テーブルのセルに指定すれば正しく効きます。

• padding（英語）：21種類中20種類が対応、1種類が一部対応。
• width（英語）：21種類中20種類が対応、1種類が一部対応。
• max-width（英語）：21種類中20種類が対応、1種類が一部対応。
• border（英語）：21種類中20種類が対応、1種類が一部対応。
• line-height（英語）：21種類中20種類が対応、1種類が一部対応。
• letter-spacing（英語）：21種類中20種類が対応、1種類が一部対応。
• text-transform（英語）：21種類中20種類が対応、1種類が一部対応。

次のよく使われるプロパティは、どこかのメールソフトで動作しません。それがなくてもメールが読める箇所で使い、フォールバックがある場合はOutlook Classicに用意してください。

• border-radius（英語）：21種類中16種類が対応しています。Outlook Classicは非対応です。Yahoo Mail、Yahoo Mail Android、Yahoo Mail iOSほか1種類は一部対応です。
• background-image（英語）：21種類中16種類が対応しています。Outlook Classicは非対応です。Yahoo Mail、Yahoo Mail Android、Yahoo Mail iOSほか1種類は一部対応です。
• display:flex（英語）：21種類中18種類が対応しています。Outlook Classicは非対応です。Gmail Android、Gmail iOSは一部対応です。
• box-shadow（英語）：21種類中14種類が対応しています。Gmail、Outlook Classic、Yahoo Mail Androidほか2種類は非対応です。Gmail Android、Gmail iOSは一部対応です。
• margin（英語）：21種類中8種類が対応しています。Gmail、Gmail Android、Gmail iOSほか10種類は一部対応です。
• @media（英語）：21種類中5種類が対応しています。Outlook Classic、Thunderbirdは非対応です。Gmail、Gmail Android、Gmail iOSほか11種類は一部対応です。
• @media prefers-color-scheme（英語）：21種類中9種類が対応しています。Gmail、Gmail Android、Gmail iOSほか8種類は非対応です。Superhumanは未検証です。
• @font-face（英語）：21種類中6種類が対応しています。Gmail、Gmail Android、Gmail iOSほか12種類は非対応です。

すべての機能のメールソフトごとの対応状況はメールCSS対応表（英語）にあります。お手持ちのHTMLと照合するには、CSS互換性チェッカー（英語）にHTMLを貼り付けてください。

重要なスタイルのインライン化

Gmailのアプリは、Googleアカウント以外のアカウントでは<style>ブロックを削除します。そのため、レイアウトや文字組みが依存するものは、要素のstyle属性に書く必要があります。ブロックには、インライン化できないもの（メディアクエリ、:hover、ダークモード用のルール）だけを残してください。font-familyは継承に頼らずすべてのテキスト要素に指定し、セルにはbackground-colorに加えてbgcolor属性も指定します。Outlookは属性のほうを読むためです。

インライン化の仕組みと、インライン化で移せないものについてはメールのCSSインライン化（英語）で説明しています。ビルド工程なしでインライン化するには、CSSインライナー（英語）にHTMLを貼り付けてください。

Outlook Classic向けのフォールバック

Outlook Classicでは、いくつかの箇所で専用のマークアップが必要です。これは、ほかのメールソフトが無視する<!--[if mso]>の条件付きコメントで渡します。条件付きコメントとmso-プロパティについてはOutlookのメールテンプレート（英語）で解説しています。

• 段組み。Outlookはmax-widthを無視するため、横に並ぶ段組みにはゴーストテーブルが必要です。Outlookのゴーストテーブル（英語）またはゴーストテーブル生成ツール（英語）をご覧ください。
• 背景画像。background-imageはOutlook Classicでは非対応です。代わりにVMLを使ってください。Outlookの背景画像（英語）またはVML背景生成ツール（英語）をご覧ください。
• 角丸ボタンとグラデーション。border-radiusはOutlook Classicでは非対応です（英語）。対処法はOutlookのCSSフォールバック（英語）にあり、バレットプルーフボタン生成ツール（英語）でマークアップを作成できます。

Gmailの上限への対応

Gmailが<style>ブロックを残すのはheadにあるものだけで、上限は16KBです。bodyにあるものや上限を超えたものは丸ごと削除されます。これとは別に、HTMLが102KBを超えるメールはクリップされ、切れた位置より下はすべて非表示になります。配信停止リンクも例外ではありません。ルールはGmailのHTMLメールガイド（英語）とGmailがメールをクリップする理由（英語）にあります。上限までの余裕はメールサイズチェッカー（英語）で確認できます。

スマートフォンへの対応

@mediaの対応状況：21種類中5種類が対応しています。Outlook Classic、Thunderbirdは非対応です。Gmail、Gmail Android、Gmail iOSほか11種類は一部対応です。そのため、メディアクエリがなくても画面に合わせて変わるレイアウトを組んでください。max-width: 600px; width: 100%のコンテナー、パーセント指定の段組みの幅、画像にはmax-width: 100%; height: autoを指定します。そのうえで、対応しているメールソフトではメディアクエリで調整します。各手法とそのトレードオフはレスポンシブメールデザインのガイド（英語）にあります。

ダークモードへの備え

メールの色を独自に変えるメールソフトもあれば、メール側のダークモード用スタイルを適用するメールソフトもあります。prefers-color-schemeの対応状況：21種類中9種類が対応しています。Gmail、Gmail Android、Gmail iOSほか8種類は非対応です。Superhumanは未検証です。このテンプレートは両方のカラースキームを宣言し、このメディアクエリでダークモードの色を指定しています。各メールソフトの動作と、ロゴやブランドカラーを読みやすく保つ方法はダークモードメールのガイド（英語）にあります。ダークモードプレビュー（英語）では、メールを各モードで表示できます。

アクセシビリティとテキストパート

<html>にlangを指定し、すべての画像に代替テキストを付け、文字のコントラストを読みやすい水準に保ってください。そのほかの点はメールのアクセシビリティガイド（英語）で解説しています。HTMLと一緒にtext/plainのパートも送ってください。詳しくはテキストメール（英語）をご覧ください。

フレームワークを使ったHTMLメールの作成

入れ子のテーブルを手で書きたくない場合は、React Email（英語）やMJML（英語）を使えば、コンポーネントが同じテーブルベースのHTMLにコンパイルされます。定型コードは省けますが、フレームワーク独自のバグもあります。それらはReact Emailのトラブルシューティング（英語）とGmailでのTailwind v4メール（英語）にまとめています。デザインファイルから始める場合はFigmaから受信トレイまで（英語）をご覧ください。

送信前のテスト

送信前のチェックリストと、変更のたびに実行できるテストの手順はHTMLメールのテスト方法（英語）にあります。すでにどこかのメールソフトで表示がおかしい場合は、メールの表示崩れ（英語）で症状から調べてください。最初の確認には、CSS互換性チェッカー（英語）にHTMLを貼り付けてください。

HTMLメールのガイド一覧

上の各ステップには、それぞれ専用のガイドがあります。目的別に分けて、すべて紹介します。

メールをそもそも受信トレイに届けるのは別の作業です。SPF、DKIM、DMARCと送信の習慣は到達率のガイド（英語）にあります。