はじめに
Webページを作れる人なら、メルマガのHTMLくらい簡単に書けそうに思えます。ところが実際にやってみると、これが想像以上に厄介です。ローカルで完璧に見えたレイアウトが、いざ配信するとOutlookで崩れ、Gmailで余白がずれ、スマホで文字が小さすぎる——こんなことが平気で起きます。
理由はシンプルで、メール用のHTMLはWebのHTMLとは別世界のルールで動いているからです。この記事では、なぜメールHTMLがこれほど特殊なのか、そして崩れないメルマガを作るために守るべき制約を、AIに生成させる前提で整理します。
メールHTMLがWebと違う理由
レンダリングするのはブラウザではない
Webページはブラウザが表示します。ブラウザは最新のCSSをきちんと解釈してくれるので、私たちは安心してFlexboxやGridを使えます。ところがメールを表示するのは、Outlook・Gmail・Apple Mail・各種スマホアプリといった多種多様なメールクライアントです。
これらは表示エンジンがバラバラで、しかも古い仕様のまま止まっているものもあります。特にデスクトップ版OutlookはWordのエンジンでHTMLを描画するため、Web標準の常識がまったく通じません。「どこで見られるか分からない」——これがメールHTMLの出発点です。
使える技術が大きく制限される
環境がバラバラなので、確実に動く技術しか使えません。外部CSSファイルの読み込みは多くのクライアントで無視され、JavaScriptはセキュリティ上そもそも動きません。position指定やFlexboxのような新しいレイアウト手法も、環境によって効いたり効かなかったりします。
つまりメルマガでは、「モダンな書き方」ほど危険で、「枯れた書き方」ほど安全という、Web開発とは逆の価値観が求められます。
「最新」ではなく「最大公約数」で作る
Webでは最新ブラウザに合わせて作れますが、メールでは受信者の環境を選べません。誰の環境でも同じように見えることが最優先です。だから設計思想も「かっこよく」ではなく「どこでも壊れない」を目指します。この割り切りが、メールHTML特有の制約を生んでいるんです。
よくある失敗
Webの感覚でdivとFlexboxを使ってメルマガを組むと、送信先の半分で崩れることがあります。ローカルのブラウザで見て「完璧」と思っても、それはテスト環境が優しいだけかもしれません。
崩れないための具体的な制約
tableレイアウトで骨組みを作る
メールHTMLでもっとも重要なのが、レイアウトをtableタグの入れ子で組むことです。今のWeb開発ではまず使わない手法ですが、tableによる段組みはほぼすべてのメールクライアントで安定して表示されます。列を分けたい、ボタンを中央に置きたい、といった配置は、divではなくtableのセルで表現します。
古臭く見えますが、これが「どこでも同じに見える」ための最も確実な方法なんです。
スタイルはすべてinline CSSで書く
外部CSSも<style>タグも当てにできないため、スタイルは各要素のstyle属性に直接書きます。これをinline CSSと呼びます。文字色も余白もフォントサイズも、要素一つひとつに書き込んでいく、かなり冗長な書き方です。
手で書くと膨大で管理も大変ですが、逆に言えば「決まったルールを機械的に適用する」作業でもあります。だからこそAIに生成させる価値が出てきます。
幅・画像・リンクのルール
レイアウトの幅は600px程度に固定するのが定番です。これより広いとPCでもスマホでも扱いにくくなります。画像は相対パスが使えないため、必ずhttps://から始まる絶対URLで指定します。メール本体には画像を埋め込まず、外部に置いた画像を参照する形です。
クライアント差にどう備えるか
主要クライアントの傾向を押さえる
「どこでも壊れない」を目指すとはいえ、対策の当たりをつけるには主要クライアントの癖を知っておくと役立ちます。特にデスクトップ版Outlookは鬼門で、多くの表示崩れはここで起きます。逆にApple Mailは比較的Web標準に近く、素直に表示してくれます。
すべてのクライアントを個別最適化するのは現実的でないので、「一番厳しいOutlookで崩れない書き方」を基準にすると、他の環境はだいたいうまくいきます。
制約はチェックリスト化できる
こうした制約は感覚で守るものではなく、明文化してチェックリストにできます。「divでレイアウトしていないか」「styleは全部inlineか」「画像は絶対URLか」——項目ははっきりしています。
これがポイントで、明確なルールは人にもAIにも守らせやすいということです。次の記事AIに「壊れないメールHTML」を書かせる工夫では、この制約をプロンプトに落とし込み、生成結果を検証する方法を解説します。
制約は敵ではない
制約が多いとうっとうしく感じますが、裏を返せば「守るべきことが明確」ということです。ルールがはっきりしている作業ほど、自動化やAIとの相性が良くなります。
まとめ
メールHTMLがWebと別物なのは、表示する相手がブラウザではなく、仕様の古い多種多様なメールクライアントだからです。だからこそ、崩れないメルマガには次のような制約があります。
- レイアウトは
tableの入れ子で組む - スタイルはすべて
inline CSSで要素に直接書く - 外部CSS・JavaScriptは使えない
- 幅は600px程度、画像は絶対URL
これらは面倒ですが、明確なルールなので機械に守らせやすいという利点があります。この特性を活かしてAIに生成させる工夫は、AIに「壊れないメールHTML」を書かせる工夫で、システム全体像はAIメルマガ作成の概要で解説しています。