配信ツールやWeb上で入手したHTMLメールのテンプレートが、受信環境によってレイアウトが崩れる。この問題は、テンプレートの品質が低いから起きるとは限りません。
原因の多くは、メールクライアントごとにHTMLとCSSの解釈が異なることにあります。この記事では、入手先ごとの違いを整理したうえで、崩れる理由をコード単位で説明し、無料テンプレートで足りる範囲と足りない範囲、自社で直す場合の手順までを解説します。
結論から述べます。テンプレートが崩れる原因は配布元の品質ではなく、メールクライアントごとにHTMLとCSSの実装が異なることにあります。
Webサイトの場合、主要なブラウザはHTMLとCSSの仕様がおおむね統一されています。同じコードを書けば、どのブラウザでもほぼ同じ結果になります。
メールは違います。Outlook、Gmail、iPhoneのメールアプリは、それぞれ独自の方法でHTMLを解釈します。同じテンプレートを送っても、環境によって結果が変わります。
したがってテンプレートを選ぶ基準は、デザインの好みではなくどの環境で表示が検証されているかになります。以下、その理由を具体的に見ていきます。
入手先は大きく4つに分かれ、それぞれ想定している表示環境が異なります。
| 入手先 | 想定環境 | 編集のしやすさ | 確認すべき点 |
|---|---|---|---|
| 配信ツール付属 | そのツールの配信経路 | 編集画面で容易 | 他ツールへの流用可否 |
| Web上の無料配布 | 配布元による | HTMLの直接編集 | ライセンス、対応環境の記載 |
| デザインツールの書き出し | Webページ向けの場合あり | 書き出し後に要調整 | メール向けの最適化の有無 |
| 制作会社 | 取り決めた環境 | 依頼して修正 | 検証範囲の取り決め |
配信ツール付属のテンプレートは、そのツールの配信経路を前提に作られているため、ツールを変えると崩れることがあります。
編集画面での操作は容易ですが、HTMLを直接触ると構造が壊れやすい面があります。また他ツールへ移行する際、そのまま流用できるとは限りません。
無料テンプレートは、対応環境の記載が配布元ごとに異なります。ダウンロード前に、検証済みの環境とライセンスを確認してください。
海外で配布されているものは、日本語のフォントや文字数を前提にしていない場合があります。行間や折り返しが想定と変わることがあります。
商用利用の可否とクレジット表記の要否は、配布元の記載に従ってください。
デザインツールの書き出しは、レイアウトの再現性が高い一方で、メールクライアント向けの最適化が入らないことがあります。
Webページ向けのCSSがそのまま出力される場合があるため、書き出した後に手を入れる前提で使ってください。
制作会社のテンプレートは、検証環境を条件として事前に取り決められます。表示の保証が必要な場合の選択肢になります。
また、差し替えの頻度や編集する担当者のスキルに合わせて設計できます。
同一のテンプレートでも、環境によって崩れ方が異なります。崩れ方は次の5つに分類できます。
| 崩れ方 | 主な原因 | 本検証での確認 |
|---|---|---|
| レイアウトの分解（横並びが縦積みになる） | Flexbox・Gridの非対応 | 本検証で再現 |
| 余白の消失 | div要素へのmarginが無視される | 本検証で再現 |
| 装飾が全て失われる | head内のstyle要素が削除される | 本検証の26環境では再現せず |
| フォントの置換 | Webフォントの非対応 | 本検証で再現 |
| 画面幅からのはみ出し | メディアクエリの非対応 | 本検証の26環境では再現せず |
右列は、後述する26環境での実機検証で実際に確認できたかどうかです。「再現せず」の2つは、検証したいずれの環境でも正常に表示されました。これらは対応状況が環境によって分かれる項目であり（後述のCan I Emailの数値を参照）、今回の26環境に該当する環境が含まれていなかったことを意味します。存在しない問題という意味ではありません。
以下の画像は、検証用に作成したHTMLメールを実際の受信環境で表示したものです。検証にはEmail on Acidを使用し、13のメールクライアント×通常／ダークモードの計26環境で確認しました。
| 検証日 | 2026年9月9日〜10日 |
|---|---|
| 使用ツール | Email on Acid |
| 検証環境 | 13クライアント × 通常／ダークモード ＝ 26環境 |
| PC（8種） | Apple Mail 16（macOS 13）／Outlook Microsoft 365（Windows 11）／Outlook Office 365（Windows 10）／Outlook 2021（Windows 11）／Microsoft365.com Chrome・Edge（Windows 10）／Outlook.com Chrome・Edge（Windows 10） |
| スマートフォン（5種） | iPhone 16 Pro・iPhone 16（iOS 18）／iPhone 15 Pro（iOS 17）／iPhone 14 Pro・iPhone 14（iOS 16） |
左が対策前、右がtableのセル分割とセルのpaddingで組み直したものです。同じOutlook 2021で、実装だけを変えて比較しています。
画像をクリックすると拡大表示します。
対策前
対策後左がダークモードで色が反転した状態、右が対策済みの実装です。
対策前
対策後Outlookはレンダリングの仕組みが他と異なるため、レイアウトと余白の再現性がもっとも低くなりやすい環境です。
特に、divとFlexboxで組んだ横並びのレイアウトが縦積みに分解される、div要素に指定した余白が反映されない、といった状態が起きます。
メールクライアントの中には、head内のstyle要素を削除するものがあります。そこに書いた指定はすべて失われ、文字サイズも背景色も余白も、指定していない状態で表示されます。
後述のCan I Emailによれば、<style>要素の対応状況は約63%です。今回検証した26環境ではいずれも正常にスタイルが反映されましたが、対応していない環境は実在します。対策として、崩れて困る指定は各要素のstyle属性へ直接書いておく方法があります。
iPhoneは再現性が比較的高い環境ですが、画面幅とダークモードの扱いで見え方が変わります。
ダークモードでは背景色と文字色が自動的に反転する場合があり、白背景を前提にした濃色のロゴや、薄いグレーの文字が読めなくなることがあります。
なぜ環境によって結果が変わるのか、コードのレベルで説明します。対応状況は、メールクライアント別のHTML／CSS対応表であるCan I Emailの値を参照しています（2026年9月5日参照）。
メールでは今もtableを使ったレイアウトが基本です。Webページで一般的なdivとFlexboxに置き換えると、対応していない環境で分解します。
Can I Emailによれば、display:flexの対応状況は約78.05%（一部対応を含めると82.93%）です。
出典：Can I Email「display:flex」
https://www.caniemail.com/features/css-display-flex/
2割弱の環境では意図どおりに表示されません。横並びのレイアウトは、tableのセル分割で組むのが確実です。
Webページでは、CSSを<head>内の<style>にまとめます。しかしメールでは、この<style>要素を削除する環境があります。
Can I Emailによれば、<style>要素の対応状況は約63.04%（一部対応を含めると78.26%）です。
出典：Can I Email「<style> element」
https://www.caniemail.com/features/html-style/
したがって、崩れて困る指定は各要素のstyle属性に直接書きます。
メディアクエリが効かない環境があるため、画面幅に応じてレイアウトを切り替える設計は、そのままでは成立しません。
対策は、単一カラムを基本にして、メディアクエリが効かなくても読める設計にしておくことです。メディアクエリは「効けばより良くなる」補助として使い、依存しない構造にします。
Can I Emailによれば、@font-faceによるWebフォントの対応状況は約21.95%（一部対応を含めると24.39%）です。
出典：Can I Email「@font-face」
https://www.caniemail.com/features/css-at-font-face/
大半の環境では読み込まれないため、端末に標準で入っているフォントを複数指定し、どれかが適用される形にします。
画像についても、表示がブロックされる環境があります。画像に文字情報を含めすぎると、ブロックされた際に内容が伝わりません。代替テキストを設定し、画像がなくても意味が通る構成にしてください。
無料テンプレートが不適切というわけではありません。条件によっては十分に機能します。
これらに当てはまる場合、無料テンプレートで運用を始めることは合理的です。
特に4つ目は見落とされやすい点です。テンプレート自体に問題がなくても、編集のたびに崩れる状態が続くなら、運用のコストが積み上がります。
崩れを自社で修正する場合の手順を、影響範囲の小さい順に示します。工数はおおよその目安であり、テンプレートの構造によって変わります。
| 手順 | 目安の作業時間 | 必要なスキル |
|---|---|---|
| 1・崩れている環境と箇所を特定する | 1〜3時間程度 | 崩れの分類ができる程度の知識 |
| 2・インラインCSSへ書き換える | 2〜6時間程度 | HTMLとCSSの基本的な理解 |
| 3・レイアウトをtable構造へ戻す | 半日〜数日 | HTMLメール特有の実装の知識 |
| 4・主要環境で実機確認する | 確認する環境数による | 検証環境を用意できること |
手順3は構造の作り替えにあたるため、影響範囲がもっとも広くなります。各手順の詳細は以下のとおりです。
どの環境で何が崩れているかを先に切り分けないと、直しても別の環境で崩れます。
まず、崩れの報告があった環境と、正常に見えている環境を分けます。そのうえで、崩れ方が前掲の5分類のどれに当たるかを判定します。
<head>内の<style>に依存している指定を、各要素のstyle属性へ移します。これだけで解消する崩れがあります。
div主体のレイアウトを、崩れて困る箇所だけでもtableへ戻すと安定します。ただしこの作業は構造の作り替えにあたり、影響範囲が広くなります。
修正の確認は、送信側の画面ではなく実際の受信環境で行います。テスト送信して自分の環境で見るだけでは、他の環境の状態が分かりません。
確認した環境と日付を記録に残してください。次に崩れが起きた際、どこまで確認済みかが分かります。
手順そのものより問題になるのが、検証環境を揃えられるかです。
メールクライアントは種類とバージョンが多く、すべてを自社で用意することは現実的ではありません。1つの環境で直しても、別の環境では崩れたままということが起こります。
また、修正のたびに全環境を再確認する運用も負荷が高くなります。ここが自社対応の限界です。
無料で配布されているテンプレートは多く、条件が合えばそのまま使えます。ただし対応環境と商用利用の可否は配布元ごとに異なるため、ダウンロード前の確認が必要です。特に海外配布のものは日本語のフォントや文字数を前提にしていない場合があります。
ソースをそのまま貼り付けて使えるテンプレートはあります。ただし配信ツールのエディタに貼ると構造が書き換えられる場合があるため、貼り付け後にテスト送信で確認してください。またWordなどから書式ごと貼り付けると不要なタグが混入し、特定の環境でのみ崩れる原因になります。
Outlookは他のメールクライアントとHTML／CSSの解釈が異なるためです。とくにレイアウトと余白の指定で差が出ます。divとFlexboxで組んだ横並びが縦積みに分解される、div要素に指定した余白が反映されない、といった状態が起きます。対策としては、レイアウトをtableのセル分割で組み、余白をセルのpaddingで確保する方法があります。
スマートフォンでの閲覧が多い場合は必要です。ただしメディアクエリが効かない環境があるため、対応しなくても読める単一カラム設計を土台にしてください。メディアクエリは効けばより良くなる補助として使い、それに依存しない構造にすることをおすすめします。
ここまで述べたとおり、HTMLメールのテンプレートは「どこで配っているか」ではなく「どの環境で検証されているか」で選ぶ必要があります。
B.A.Dでは、崩れやすい環境を含めて表示を検証した状態で納品しています。配信した後に崩れが見つかる事態を減らせます。
デザインと実装の担当が分かれていないため、メールクライアントの制約を前提にした設計ができます。デザインの段階で実装できない構成を避けられます。
作り直しではなく、いま崩れているテンプレートの修正からご相談いただけます。どこが原因かの切り分けからお引き受けしています。
なお、自社で使えるテンプレートの実例については、HTMLメールのデザインテンプレートを公開もあわせてご覧ください。
この記事の要点は次のとおりです。
HTMLメールの制作、プロに任せませんか
B.A.Dは約30通りのメーラー×OS環境で表示検証済みのHTMLメールを、
デザインからコーディング・配信・分析改善までワンストップで提供しています。