このブログとは別に、AIのニュースを紹介するブログも運営しています。毎日の記事はAI（Claude Code）に下書きまで作ってもらっていて、10月の終わりからは、その1週間分の記事から3本を選んで「週刊メルマガ」の原稿を作る仕事も任せるようになりました。

ブログの記事はもう何本もAIと作ってきたので、メルマガも同じ感覚でできるだろうと思っていました。ところが、HTMLメールはWebページとは「別の世界」でした。AIが作ったファイルを見ながら、「ああ、この書き方はメール用なんだ」と気づくことがいくつもありました。

今回は、AIにHTMLメールを作らせて分かった、Webページとの6つの違いをまとめます。HTMLメールを初めて作る方や、AIに作らせてみたい方の参考になればうれしいです。

作っている週刊メルマガの仕組み

最初に、仕組みを簡単に説明します。

• 毎週月曜：前の週（月〜日）のブログ記事から、AIが3本を選ぶ
• 中身を作る：件名・導入文・3本の要約・締めの言葉などを、AIがデータのファイル（JSON形式）にまとめる
• ファイルにする：決まった形に流し込むプログラムが、テキスト版（.txt）とHTML版（.html）の2つを作る

10月26日号から始めて、11月9日号までで3号分のファイルができています。ただ、配信の方法はまだ決めておらず、今のところは「コピーして使えるファイルを作る」ところまでです。

違い①：見た目の指定は「1つずつタグに書く」

Webページでは、見た目（文字の色や大きさ、余白など）はCSSファイルにまとめて書くのが普通です。HTMLとデザインを分けておくと、あとで直すのが楽だからです。

ところがHTMLメールでは、AIは次のように、見た目の指定をタグ1つ1つに直接書いていました。

<td style="padding:16px;color:#1b2a4a;font-size:15px;">本文</td>

これを「インラインCSS」と呼びます。メールソフトによっては、外部のCSSファイルを読み込まなかったり、<style> の指定を消してしまったりすることがあるため、メールではこの書き方が安全だとされています。

Web制作の仕事では「インラインCSSはなるべく使わない」と考えてきたので、正反対の書き方です。最初に見たときは少し驚きました。

違い②：レイアウトは今も「table組み」

もう1つ驚いたのが、レイアウトの組み方です。AIが作ったHTMLは、全体が <table>（表）で組まれていました。

<table role="presentation" width="600" cellpadding="0" cellspacing="0">

昔のホームページは、表のタグを使って画面を区切る「table組み」が当たり前でした。その後、CSSで配置する作り方に変わり、table組みは「古いやり方」になりました。

ところがHTMLメールでは、メールソフトごとにCSSの対応がバラバラなため、今でもtable組みがいちばん崩れにくいそうです。role="presentation" は、「これは表ではなく、見た目を整えるための枠です」と読み上げソフトに伝えるための目印です。

長くWeb制作をしてきた身としては、昔の書き方が「現役の正解」として戻ってきたようで、少し懐かしい気持ちになりました。

違い③：幅は「最大600px」に決める

Webページは、スマホからパソコンまで、画面の幅に合わせて広がったり縮んだりする作りにします。

HTMLメールでは、AIは本文の幅を「最大600px」に決め、それより狭い画面では100%に縮む作りにしていました。

• パソコンのメールソフト：中央に600pxの白い枠で表示される
• スマホ：画面いっぱいに縮んで表示される

600pxという数字は、多くのメールソフトの表示欄に収まる幅として、昔からよく使われてきた目安だそうです。ブログのように画面いっぱいに広げないのは、読む場所が「メールソフトの中の小さな枠」だからです。

違い④：ブログで使っている「図解（SVG）」は使わない

AIニュースのブログでは、記事の要点を図にした「SVG」という形式の図解を入れています。文字や図形をコードで描くので、画像ファイルを作らなくても済む便利な方法です。

ただし、メルマガでは「SVGは使わない」と決めました。メールソフトによってはSVGを表示しなかったり、消してしまったりするためです。

じつはブログでも、最初はSVGの図がWordPressで消えてしまうことがあり、書き方を工夫して乗り越えてきました。せっかく作った図をメールでも使いたい気持ちはありましたが、「表示されないかもしれないもの」はメールには入れない、と割り切りました。代わりに、見出しの色や枠線で、区切りが分かるようにしています。

違い⑤：テキスト版も一緒に作る

Webページは1つのHTMLで完成ですが、メルマガではテキスト版（文字だけのメール）も一緒に作っています。

テキスト版では、色や太字が使えないので、区切りを記号で表します。たとえば、記事の区切りに「──────」の線を入れたり、リンクの前に「▶詳しくはこちら：」と書いたりしています。

HTMLメールを表示しない設定にしている人や、HTMLが崩れて読めなかったときのために、テキスト版を用意しておくのが基本とされています。同じ中身から2つの形を作れるのは、データとプログラムを分けた仕組みのよいところです（このあと「作り方で決めたこと」で説明します）。

違い⑥：「プレヘッダー」という見えない1行がある

Webページにはない、メールならではの部品が「プレヘッダー」です。

メールソフトの受信一覧では、件名の下に本文の最初の1行が少しだけ表示されます。ここに何も指定しないと、本文の最初にある文字（「ブラウザで見る」などの決まり文句）が出てしまいます。

そこで、受信一覧のプレビュー専用の1行を、本文の先頭に「画面には表示しない形」で入れておきます。AIが作ったHTMLでは、次のように書かれていました。

<div style="display:none;max-height:0;overflow:hidden;opacity:0;">（プレビュー用の一行）</div>

件名で興味を持ってもらい、プレヘッダーで中身を少し見せる。Webページでいえば、検索結果に出る「メタディスクリプション」に近い役割だと感じました。

作り方で決めたこと：AIには「中身」だけを書いてもらう

6つの違いとは別に、作り方で決めて正解だったことがあります。それは、AIにはHTMLを毎回書かせず、「中身」だけを書いてもらうことです。

• 中身（AIが毎週書く）：件名、プレヘッダー、導入文、3本の記事の要約、締めの言葉
• 見た目（プログラムが固定）：table組み、色、幅、フッター

毎回AIにHTMLを一から書かせると、週によって色や余白が微妙に変わったり、インラインCSSを書き忘れたりするおそれがあります。見た目をプログラムに固定しておけば、AIは文章を考えることに集中でき、仕上がりも毎週そろいます。

実際、始めてすぐの10月27日に、メルマガの名前を変えることになりました。このときも、直したのはプログラムと手順書の名前の部分だけで、HTMLを作り直す必要はありませんでした。

まだ確かめていないこと

正直に書くと、まだ確かめ切れていないこともあります。

HTMLメールは、Gmail・iPhoneのメール・Outlookなど、メールソフトごとに表示が変わります。本来は、いくつかのメールソフトで実際に受信して、崩れていないかを見るのが大切です。【要確認：実際のメールソフトで受信して表示を確かめたか、確かめたならどのソフトか】

ブログの下書きのときと同じで、AIが作ったものは「最後に人の目で確かめる」ことが欠かせないと考えています。

まとめ

AIにHTMLメールを作らせて分かった、Webページとの違いは次の6つでした。

1. 見た目の指定は、CSSファイルではなくタグごとに書く（インラインCSS）
2. レイアウトは今もtable組みがいちばん崩れにくい
3. 幅は最大600pxにして、スマホでは縮める
4. 表示されないおそれのあるSVGの図解は使わない
5. 文字だけのテキスト版も一緒に作る
6. 受信一覧に出る「プレヘッダー」を用意する

Webページの「当たり前」が、メールではそのまま通じない。長くWebに関わってきても、新しく知ることはまだまだあると感じました。

そしてAIに任せるときは、「見た目は固定、中身だけをAIに」という分け方がうまくいきました。HTMLメールに限らず、毎回同じ形で作りたいものをAIに頼むときに使える考え方だと思います。