配信ツールやWebで入手したHTMLメールのテンプレートを、自社の内容に差し替えて使う。この作業自体は難しくありませんが、どこまで触ってよいかの線引きが分からないまま編集すると、レイアウトが崩れます。
この記事では、配信ツールの編集画面でできることとできないことを整理し、HTMLを直接編集する場合に守るべき最小限のルール、そして自社対応の限界がどこにあるかを解説します。
結論から言えば、テンプレートが壊れる原因のほとんどは、見た目を整えようとしてHTMLの構造に手を入れたときです。
文言の差し替え、画像の入れ替え、色の変更といった作業で壊れることは、通常ありません。壊れるのは、表を追加する、レイアウトの入れ子を変える、Wordなどから書式ごと貼り付ける、といった操作です。
HTMLメールは、Webページとは異なる制約のうえに成り立っています。この制約を知らないまま編集すると、送信側の画面では正常に見えていても、読者の環境で崩れます。
多くの配信ツールには、HTMLを直接触らずに編集できる画面があります。まずはこの範囲で対応できるかを判断します。
| 操作 | 編集画面での可否 | 備考 |
|---|---|---|
| 本文の文言変更 | できる | 最も安全。構造に影響しない |
| 画像の差し替え | できる | 元の画像とサイズを揃えるのが安全 |
| リンク先の変更 | できる | — |
| ボタンの文言・色 | できる場合が多い | ツールによる |
| ブロックの並び替え | できる場合が多い | ツールが用意した単位でのみ安全 |
| ブロックの追加 | 注意が必要 | ツール標準のブロックなら安全 |
| レイアウトの段組み変更 | 難しい | 構造の作り替えになる |
| 余白の細かい調整 | 難しい | HTMLの直接編集が必要になることが多い |
ツールが用意した編集画面は、そのツールが生成するHTMLの構造を壊さないように作られています。この範囲で目的が達成できるなら、HTMLを直接触る必要はありません。
配信ツールに付属するテンプレートは、そのツールの編集機能を前提に作られています。別のツールへ移行する際、HTMLをそのまま持ち込んでも、編集画面で扱えない状態になることがあります。
ツールの変更を検討している場合は、テンプレートを作り直す前提で考えておくほうが安全です。
編集画面で対応できない場合、HTMLを直接触ることになります。守るべきルールは3つです。
HTMLメールのレイアウトは、多くの場合table要素で組まれています。Webページで一般的なdivとFlexboxではなく、古い方式が今も使われているのには理由があります。
メールクライアント別のHTML／CSS対応状況をまとめたCan I Emailによれば、display:flexの対応状況は約78.05%（一部対応を含めると82.93%）です（2026年9月5日参照）。裏を返せば、2割弱の環境では意図どおりに表示されません。
出典：Can I Email「display:flex」
https://www.caniemail.com/features/css-display-flex/
このため、<table>・<tr>・<td>の入れ子構造には手を入れないでください。セルの中身を差し替えるのは安全ですが、セルそのものを増やしたり削ったりすると、レイアウトが崩れます。
Webページでは、CSSを<head>内の<style>にまとめるのが一般的です。しかしメールでは、この<style>要素を削除する環境があります。
Can I Emailによれば、<style>要素の対応状況は約63.04%（一部対応を含めると78.26%）です（2026年9月5日参照）。
出典：Can I Email「<style> element」
https://www.caniemail.com/features/html-style/
<style>が削除された環境では、そこに書いた指定がすべて失われます。文字サイズも背景色も余白も、指定していない状態で表示されます。
したがって、崩れて困る指定は、各要素のstyle属性に直接書きます。テンプレートが最初からそう作られている場合、その形式を保ってください。
Can I Emailによれば、@font-faceによるWebフォントの対応状況は約21.95%（一部対応を含めると24.39%）です（2026年9月5日参照）。
出典：Can I Email「@font-face」
https://www.caniemail.com/features/css-at-font-face/
大半の環境では読み込まれず、代替フォントに置き換わります。フォントを指定する際は、端末に標準で入っているフォントを複数並べて指定し、どれかが適用される形にします。
現場でよく起きる、レイアウトが崩れる操作を挙げます。
Wordなどで作成した原稿を、書式ごとコピーしてHTMLの編集画面に貼り付けると、不要なタグや独自の書式指定が大量に混入します。
見た目には正常でも、混入したコードが元の構造と衝突し、特定の環境でのみ崩れる状態になります。原因の特定が難しい崩れ方をするため、影響が長引きます。
対処は単純で、いったんテキストエディタなどに貼って書式を落としてから、あらためて貼り付けます。編集画面に「書式なしで貼り付け」の機能があれば、それを使います。
元の画像より大きい画像に差し替えると、レイアウトの横幅を押し広げることがあります。特にスマートフォンでの表示で、画面からはみ出す原因になります。
差し替える画像は、元の画像と同じ幅に揃えるのが最も安全です。
本文中に表を入れたい場合、既存のtable構造の中にさらにtableを追加することになります。入れ子が深くなるほど、環境による差が出やすくなります。
比較表などをどうしても入れる必要がある場合は、この操作が崩れやすい部類であることを認識したうえで、複数の環境で確認してください。
1カラムのテンプレートを2カラムに変えるのは、構造の作り替えです。セルを追加するだけでは意図どおりになりません。
スマートフォンでの表示も考慮する必要があるため、この変更は編集ではなく制作の領域と考えたほうが確実です。
要素の間隔を空けたいとき、空の行を挿入して調整することがあります。この方法は環境によって解釈が異なり、意図した間隔になりません。
余白は、セルのpaddingで調整するのが正しい方法です。
崩れてしまった場合の対処です。
最も確実なのは、編集前のHTMLを別ファイルとして保存しておくことです。壊れた際に戻せます。
配信ツールによっては、テンプレートの複製機能や版の履歴があります。編集を始める前に、元のテンプレートを複製してから作業する運用にしておくと安全です。
元に戻せない場合は、原因を特定します。手順は次のとおりです。
特定の環境だけで崩れている場合、その環境が対応していないCSSを使っている可能性があります。
自社で対応する範囲と、外部に依頼したほうがよい範囲の線引きです。
| 内容 | 目安 |
|---|---|
| 文言・画像・リンクの差し替え | 自社で対応できる |
| 色の変更、ボタンの文言変更 | 自社で対応できる |
| ブロックの並び替え（ツールの機能内） | 自社で対応できる |
| 余白の細かい調整 | HTMLの知識が必要 |
| 段組みの変更、レイアウトの作り替え | 制作の領域 |
| 特定環境で崩れる問題の解決 | 制作の領域。検証環境が必要 |
| ダークモードへの対応 | 制作の領域 |
技術的な難易度以上に問題になるのが、修正した結果を確認できるかです。
HTMLメールは、メールクライアントによってHTMLとCSSの解釈が異なります。1つの環境で直しても、別の環境では崩れたままということが起こります。自社で複数の環境を用意することは現実的ではないため、ここが自社対応の限界になります。
編集のたびに全環境を確認する体制がない場合、レイアウトに関わる変更は外部に依頼するほうが結果的に手戻りが少なくなります。
文言、画像、リンク先、色の変更は自社で対応できる範囲です。一方、余白の細かい調整はHTMLの知識が必要になり、段組みの変更やレイアウトの作り替え、特定環境で崩れる問題の解決は制作の領域になります。判断の基準は技術的な難易度よりも、修正結果を複数の受信環境で確認できるかどうかです。
HTMLの構造に手を入れた操作が原因であることが多くあります。よくあるのは、Wordなどから書式ごと貼り付けて不要なタグが混入した、元より大きい画像に差し替えた、表を追加してtableの入れ子が深くなった、空行で余白を調整した、といった操作です。直前の編集を1つずつ戻して原因を切り分けてください。
そのまま貼り付けることはおすすめしません。不要なタグや独自の書式指定が大量に混入し、元の構造と衝突して特定の環境でのみ崩れる状態になります。原因の特定が難しい崩れ方をするため、いったんテキストエディタなどに貼って書式を落としてから貼り付けるか、編集画面の「書式なしで貼り付け」機能を使ってください。
崩れて困る指定は、各要素のstyle属性に直接書いてください。head内のstyle要素は削除する環境があるためです。Can I Emailによれば、style要素の対応状況は約63.04%（一部対応を含めると78.26%）です。style要素が削除された環境では、そこに書いた指定がすべて失われます。
大半の環境では使えません。Can I Emailによれば、@font-faceの対応状況は約21.95%（一部対応を含めると24.39%）です。対応していない環境では代替フォントに置き換わるため、端末に標準で入っているフォントを複数並べて指定し、どれかが適用される形にすることをおすすめします。
テンプレートを自社で編集する際の要点は次のとおりです。
HTMLメールの制作、プロに任せませんか
B.A.Dは約30通りのメーラー×OS環境で表示検証済みのHTMLメールを、
デザインからコーディング・配信・分析改善までワンストップで提供しています。