はじめに：HTMLメールは“Webページ”ではありません
「デザインは完璧のはずなのに、送った瞬間にレイアウトが崩れる」——HTMLメールでは、本当にありがちな現象です。ブラウザで見るWebページと違って、メールは受信する環境がバラバラで、しかも多くのクライアントがCSSを自由に解釈してくれません。
Gmail、Outlook、Apple Mail、iPhoneの標準メール、Androidの各アプリ、さらには企業のセキュリティフィルタ……。同じHTMLでも、表示ルールが違う世界に投げ込まれます。つまり、HTMLメールは「見た目の正しさ」より先に「壊れにくさ」を設計しないと、誰かの画面で必ず崩れます。
この記事では、HTMLメールが崩れる代表的な理由と、現場で効く対策を、できるだけ実装目線で整理します。読み終わったら、次の配信で“崩れ率”を目に見えて減らせるはずです📩
なぜ崩れる？まず前提を押さえる
HTMLメールが崩れる理由は、大きく分けて3つです。
- CSS対応が不統一：Webで当たり前のCSSが無視されたり、別の意味で解釈されたりします。
- セキュリティ都合の制限：scriptは基本NG、外部CSSも落とされることが多く、要素の属性も一部制限されます。
- 表示環境が多すぎる：画面サイズ、ダークモード、フォント、言語設定、画像の自動ダウンロード設定など、条件が多いです。
この前提があるので、Webのノリで「Flexで整えよう」「CSSでまとめよう」とすると、どこかで破綻します。メールは“古い作法”が、今も実務では一番強いんです。
崩れの定番パターンと原因
1）横幅がはみ出る／スマホで左右スクロールが出る
一番多いのがこれです。原因は、固定幅の要素が親幅を超えたり、画像が本来のサイズで表示されてしまうこと。メールクライアントによっては、max-widthやwidth:100%の効き方が不安定で、思った通りに縮んでくれません。
さらに、余白の指定（padding）を多用していると、見た目は整っているのに合計幅がオーバーして、モバイルだけはみ出すことがあります。
2）ボタンがボタンに見えない／位置がズレる
WebならCSSでボタンは簡単ですが、メールでは角丸や影、ホバーなどが安定しません。特にOutlook系では、CSSが想定通りに働かず、文字がずれたり、背景色が出なかったりすることがあります。
「クリックできる領域が小さくなる」問題も多いです。見た目はボタンでも、リンクの当たり判定が文字だけになってしまい、タップしにくくなります。
3）フォントが変わる／行間が詰まる
指定したフォントが相手の端末に無ければ代替フォントになります。さらに、行間（line-height）の解釈がクライアントごとに違うので、同じ文章でも“密度”が変わります。日本語は特に差が出やすく、丁寧に組んだはずの文章が、端末によっては窮屈に見えることがあります。
4）画像が欠ける／大きすぎる／余白が出る
画像は「表示しない設定」のユーザーも多いです。会社PCだと自動ダウンロードがOFFになっていることも珍しくありません。その結果、画像に依存したレイアウトは一気に崩れます。
また、画像の縦横比が崩れたり、上下に謎の隙間が出るケースもあります。これは、メールクライアントが画像をインライン要素として扱い、ベースラインの余白が残ることが原因になりがちです。
5）ダークモードで色が反転して見えない
最近いちばん厄介なのがダークモードです。クライアントによっては背景や文字色を勝手に変えます。淡いグレーの文字が消えたり、背景が反転してカードが境界不明になったり、ロゴが見えなくなったりします。
「自分の端末ではOKだったのに、相手のiPhoneで壊れている」——その代表がダークモード由来です。
今すぐ効く対策：壊れにくいHTMLメールの基本設計
1）レイアウトはテーブルで“枠”を作る
メールでは、テーブルレイアウトが今も最強です。古く感じますが、互換性を取りにいくなら、ここが土台になります。外枠（コンテナ）→中身（カラム）→要素（テキスト/画像/ボタン）を、テーブルで段階的に組むと崩れにくくなります。
ポイントは「全体幅を固定しつつ、モバイルでは縮むようにする」こと。無理に最新CSSで戦わず、枠の安定を優先します。
2）CSSは基本インライン。重要な指定はstyle属性へ
外部CSSや