はじめに：HTMLメールはWebの常識が通じない別世界

Webサイトと同じ感覚でHTMLメールを作ると、必ず痛い目に遭う。

  • flexbox、grid、position：使えない
  • <head> の <style>：無視するメーラーがある
  • @media（ダークモード時の指定）：Gmailで無視される
  • <!--[if mso]>（Outlook用条件分岐）：崩れの原因になる場合がある

一方で、一度テンプレートを作ってしまえば使い回しができる。
この記事は、実案件（メルマガ）を複数制作するなかで得た知見をまとめたものだ。

    1. CSS Resetのベース選定

    Cerberus、ZURB、Benchmark Email、Antwort、ColorlibHQ など
    複数のHTMLメール用テンプレートを調査した結果、ColorlibHQ（MITライセンス）をベースとして採用した。理由はシンプルな構造と、主要なGmailハックが含まれている点。

    ただし、そのままでは日本語制作環境に合わないので、以下のカスタマイズが必要になる。

    2. 基本方針：「どのクライアントでも崩れない」設計

    2-1. 幅は max-width: 680px 〜 750px 程度

    経験的に、このくらいがPCメーラーとスマートフォンのバランスが良い。
    （あまり、幅が小さいとPCメーラーで大きく表示される）

    <div style="max-width:680px; margin:0 auto;" class="email-container">
  <!-- コンテンツ -->
</div>

    2-2. レイアウトは <table> 一択

    CSSの display:flex や display:grid はOutlookが無視する。
    テーブルレイアウトのみが現状もっとも安全。

    <table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding: 20px 5%;">
      <!-- コンテンツ -->
    </td>
  </tr>
</table>

    MSO条件分岐（<!--[if mso]>）は使わない
    効かないメーラーが多く、崩れの原因になるケースもあったため削除した。table構造に統一した方が結果的にシンプルで安定する。

    2-3. スタイルはすべてインライン

    <head> の <style> を無視するメーラーが存在する（代表例：一部のOutlook・旧来のYahoo!メール）。そのため主要なスタイルはインラインで記述する。

    CSS クラスは保守用として記述しても良いが、表示はインラインに依存させる。

    3. 使えるHTMLタグとCSS

    使えるタグ（主要なもの）

    table, tr, th, td
img
p, strong, small, span
h1, h2, h3, h4, h5, h6
a, u, hr, br

    使えるCSSプロパティ（インライン限定）

    background, background-color
border（各辺指定含む）
color
display
font, font-family, font-size, font-style, font-weight
height, width
letter-spacing, line-height
padding（各辺指定含む）
table-layout
text-align, text-decoration, text-indent, text-transform
vertical-align

    position、float、flexbox、grid は使わない。

    4. Gmailのクセに対するハック集

    ColorlibHQのCSS Resetに含まれる代表的なハック。なぜ必要なのかを簡潔にまとめる。

    /* ① 大きい非リンク画像にGmailが「ダウンロード」ボタンを表示するのを防ぐ */
.a6S {
  display: none !important;
  opacity: 0.01 !important;
}

/* ② スレッド表示時にGmailがテキストカラーを変更するのを防ぐ */
.im {
  color: inherit !important;
}

/* ③ GmailのiOSアプリで右に余白ができる問題を防ぐ */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
  u~div .email-container {
    min-width: 375px !important;
  }
}

/* ④ Android 4.4で上下に余白が入る問題を防ぐ */
div[style*="margin: 16px 0"] {
  margin: 0 !important;
}

    5. ダークモード対策

    Gmail（iOS/Android）は @media (prefers-color-scheme: dark) を無視する。

    そのため、@media でダークモード時のスタイルを切り替えるアプローチは機能しない環境が多い。
    採用した方針は「ダークモードに左右されないデザインを作る」こと。

    5-1. 薄い背景色は background-color ではなく background-image で表現する

    background-color はメーラーによってダークモード時に自動反転される（白→黒など）。
    一方、画像ファイルはメーラーが反転しない。

    → 薄いクリーム色などの背景は、1×1pxの画像（または帯状の画像）を background-image で指定することで、ライト/ダーク両環境で固定できる。

    <td style="
  background: #f8f8ff;
  background-image: url(https://example.com/bg-cream.png);
  background-size: contain;
">

    5-2. グレーのテキストは color:#888888 + filter:brightness(52%)

    color:#888888 は16進数の中間値であるため、ダークモード時の自動反転の影響を受けにくい（反転されても #777777 相当と大きく変わらない）。

    ただし #888888 単体では薄すぎて読みにくいため、filter:brightness(52%) で実質的に #484848 相当の濃さまで引き下げる。

    <small style="
  color: #888888;
  filter: brightness(52%);
  display: block;
  line-height: 1.44;
  font-size: 85%;
">
「グリーンコート武蔵野」おかげさまをもちまして、残り5棟となりました。
</small>

    この組み合わせにより、ライトモード/ダークモードのどちらでも同じ濃さのグレーテキストが薄い背景の上に乗る。

    （↑ダークモードでもグレーテキストが薄い背景の上に乗っている）



    補足：濃い背景色（グリーン、ダークブルーなど）の上に color:#FFFFFF のテキストを置く場合は、このハックは不要。

    （↑濃い背景色の上に、color:#FFFFFF のテキストを置く場合は反転されない）

    5-3. 重要な情報は画像で表現する

    ヘッダーのタイトル、価格、キャッチコピーなど、デザイン上重要な情報は画像にしてしまうのが最も確実。

    <img
  src="https://example.com/headline.png"
  alt="吉祥寺駅徒歩10分&#13;&#10;続々ご成約中！ 残り5棟"
  style="width: 100%; display: block;"
/>

    （↑画像だと間違いない）

    6. 画像が読み込まれないときのフォールバック

    「画像をブロックしているメーラー」や「画像OFFで読んでいる受信者」への対策。

    6-1. alt のフォントスタイルは <img> の親要素で指定する

    <img> 自体ではなく、その親要素にフォントスタイルを指定すると、alt表示時にも反映される。

    <h1 style="font-size: 24px; font-weight: 700; text-align: center;">
  <img
    src="https://example.com/title.png"
    alt="見出しテキスト"
    style="width: 100%; display: block;"
  />
</h1>

    6-2. alt の中で改行する（&#13;&#10;）

    alt="1行目のテキスト&#13;&#10;2行目のテキスト"

    6-3. 読み込み失敗時に余白を確保する（onerror）

    画像が表示されなかった時、altテキストが四方に詰まって読みにくくなるのを防ぐ。

    <img
  src="https://example.com/image.png"
  alt="説明テキスト"
  onerror="this.style.margin='15px auto';"
/>

    （↑画像が表示されない場合も、フォントスタイル・改行・余白は指定することができる）

    7. 制作上の注意点まとめ

    項目推奨理由
    幅max-width: 680px 〜 750px 程度PCメーラーとスマートフォンのバランスが良い
    レイアウト<table> 統一Outlookでの互換性
    スタイルインラインのみ<head>のCSSを無視するメーラーがある
    背景色（薄い色）background-imageダークモードで反転されない
    グレーテキスト#888888 + filter:brightness(52%)ライト/ダーク両対応
    重要コンテンツ画像化最も確実なダークモード対策
    画像パス絶対パス（https://）相対パスは添付扱いになる場合がある
    MSO条件分岐不使用崩れの原因になるケースがある

    おわりに

    HTMLメールの難しさは「環境ごとに正解が違う」点にある。@media で丁寧にダークモードを書いても、Gmailでは無視される。MSO条件分岐でOutlook対応しても、別のメーラーで崩れる。

    たどり着いた方針は「CSSに頼らず、どの環境でも同じように見えるHTMLを書く」こと。Webの常識をいったん捨てて設計すると解決する。

    CSS Reset ベース：ColorlibHQ / Free Email Templates（MIT License）