2026年1月23日 · 14分読了

メールクライアントの互換性：どこで何が動作するか

どのメールクライアントでどの CSS と HTML 機能が動作するかを把握する。

HTML メール開発の核心的な課題はメールクライアントの互換性です。ウェブブラウザとは異なり、標準にほぼ収束したのに対し、メールクライアントは HTML と CSS を一貫性のない方法でレンダリングします。このガイドでは、どこで何が動作するかを文書化しています。

互換性を直接扱いたくない場合、Sequenzy のようなメールビルダーや MJML のようなフレームワークがこれらの問題を処理します。しかし、状況を理解することで情報に基づいた決定ができます。

主要なメールクライアント

Outlook (Windows)

最も挑戦的なクライアントです。Outlook 2007-2019 はブラウザエンジンではなく Microsoft Word のレンダリングエンジンを使用します。これにより：

CSS フロート非対応
div の背景画像非対応（テーブルセルは可）
margin/padding サポート制限
CSS 位置指定非対応
レイアウトにはテーブル必須

Outlook 365 (新 Outlook) は多少改善されていますが、依然として重大な制限があります。

Gmail

Gmail は head 内にない style タグを削除します（一部のクライアントの場合）。また、多くの CSS プロパティを削除します。主要な制限：

一部の CSS セレクタを削除
一部のコンテキストで埋め込み @media クエリ非対応
信頼性のためにインラインスタイル必須
デフォルトで外部画像をブロック

Gmail App (モバイル) は Gmail web より一部の領域で優れた CSS サポートがあります。

Apple Mail (macOS/iOS)

最も機能豊富なメールクライアントです。Safari に似た WebKit を使用。対応：

メディアクエリ
CSS アニメーション（限定されたユースケース）
背景画像
モダンな CSS プロパティ

主なユーザーが Apple の場合、デザインの柔軟性が高まります。

Yahoo Mail

中程度の CSS サポート。一部のスタイルを削除しますが Gmail より穏やか。フォールバック付き背景画像対応。

Outlook.com (Hotmail)

デスクトップ Outlook とは異なります。ブラウザベースのレンダラー使用。デスクトップ Outlook より優れた CSS サポートですが、依然として癖があります。

CSS プロパティのサポート

どこでも安全に使用可能

/* These work in all major clients */
color: #333333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 10px; /* on table cells */
width: 100%;
max-width: 600px;

部分サポート（テスト必須）

/* Work in most clients, issues in Outlook */
border-radius: 4px; /* No Outlook support */
background-image: url(...); /* Use VML for Outlook */
box-shadow: ...; /* Limited support */
margin: 10px; /* Inconsistent in Outlook */

避けるか慎重に使用

/* These cause problems */
display: flex; /* No email support */
display: grid; /* No email support */
position: absolute/relative; /* Very limited */
float: left/right; /* Outlook issues */
transform: ...; /* Limited support */
animation: ...; /* Only Apple Mail */

レイアウト手法

構造のためのテーブル

テーブルは信頼できるレイアウト手法として残っています：

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding: 20px;">
      <table width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td>Content here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Outlook 条件付きコメント

Outlook を特化して対象化：

<!--[if mso]>
  <!-- Outlook-only code -->
  <table width="600"><tr><td>
<![endif]-->

  <div style="max-width: 600px;">
    Content for all clients
  </div>

<!--[if mso]>
  </td></tr></table>
<![endif]-->

Outlook 背景画像のための VML

セクションの背景画像には Outlook で VML が必要です：

<!--[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="background.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url(background.jpg); background-color: #ffffff;">
  Content here
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

画像

基本画像コード

<img
  src="https://example.com/image.jpg"
  alt="Description"
  width="600"
  height="300"
  style="display: block; max-width: 100%; height: auto; border: 0;"
>

主要な属性：

width/height: 寸法を設定（Outlook で必要）
display: block: 画像下の隙間を除去
max-width: 100%: レスポンシブスケーリング
border: 0: リンク画像の枠線を除去

画像形式

JPG: 写真、複雑な画像
PNG: 透過、シンプルなグラフィックス
GIF: アニメーション（慎重に）
SVG: サポート制限あり、メールでは避ける
WebP: Outlook で非対応

フォント

Web セーフフォントスタック

font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, Times, serif;
font-family: 'Courier New', Courier, monospace;

カスタムフォント

Web フォントは一部のクライアント（Apple Mail、iOS、一部の Android）で動作します。フォールバック付きで使用：

<style>
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>

<p style="font-family: 'Open Sans', Arial, sans-serif;">
  Text with custom font
</p>

Outlook と Gmail はフォールバックを使用します。Apple Mail はカスタムフォントを使用します。

メディアクエリ

サポートは大きく異なります：

<style>
  @media screen and (max-width: 600px) {
    .mobile-full-width {
      width: 100% !important;
    }
    .mobile-hide {
      display: none !important;
    }
    .mobile-stack {
      display: block !important;
    }
  }
</style>

メディアクエリのサポート：

Apple Mail: 完全サポート
iOS Mail: 完全サポート
Gmail App (iOS): サポート
Gmail App (Android): サポート
Gmail (web): 限定サポート
Outlook: 非対応

互換性のためのメールビルダーの使用

メールビルダーは互換性の懸念を抽象化します。Sequenzy はクライアント間で動作する HTML を生成します。視覚的にデザインし、ツールが技術的な出力を処理します。

MJML のようなフレームワークはセマンティックマークアップを互換性のある HTML にコンパイルします。クリーンなコードを書き、フレームワークがネストされたテーブルとインラインスタイルを生成します。

Litmus のようなテストツールは 90 以上のクライアントでのレンダリングを表示します。送信前に問題を確認。

テスト戦略

まず Outlook でテスト。 そこで動作すれば、おそらくどこでも動作します。
Gmail を確認。 CSS 削除が問題を引き起こす可能性。
モバイルで確認。 開封の 60%以上がモバイル。
画像オフでテスト。 画像なしでもメッセージが明確か確認。

結論

メールクライアントの互換性は複雑ですが、管理可能です。実証済みの手法を守る：レイアウトにテーブル、インラインスタイル、フォールバック付き Web セーフフォント。送信前にクライアント間でテスト。

複雑さを避けたいチーム向けに、Sequenzy や MJML のようなツールが互換性を自動処理します。出力はテスト済みで、レンダリングの癖ではなくコンテンツに集中できます。