ChatGPTを使えば、HTMLメールのたたき台は短時間で作れます。ただし、生成コードをそのまま一斉配信するのは危険です。HTMLメールは受信アプリによって対応するCSSや表示方法が異なり、Webページではきれいでもメールでは崩れることがあります。
初心者は、要件を決める→最小構成で生成する→内容を直す→代替手段を用意する→テスト送信するの順に進めましょう。本記事では、見た目より「読める・押せる・誤解しない」を優先した作り方を解説します。文章自体を先に整えたい場合は、ChatGPTでメール文章を作る方法から始めてください。
HTMLメールと通常メールは何が違う？
テキストメールは文字とURLが中心です。HTMLメールは色、見出し、ボタン、画像などで情報を整理できます。
| 項目 | テキストメール | HTMLメール |
|---|---|---|
| 見た目 | 文字中心 | 色・画像・ボタンを使える |
| 作りやすさ | 比較的簡単 | HTMLと表示確認が必要 |
| 表示差 | 小さい | 受信環境で差が出やすい |
| 向く用途 | 個別連絡、簡潔な通知 | メルマガ、イベント案内 |
HTMLメールは「Webページを小さくしたもの」ではありません。JavaScriptや複雑なCSSに頼らず、メール向けの単純な構造で作ります。
最初に「HTMLメール要件カード」を作る
ChatGPTへいきなり「おしゃれなメールを作って」と頼むと、目的に合わない装飾や長いコードが増えます。まず次を決めてください。
- 誰に、何を伝えるか
- 読者にしてほしい行動は何か（1つに絞る）
- 件名と差出人名
- 必要な見出し、画像、ボタン
- ボタンの文言とリンク先
- 配信に使うサービス
- プレーンテキスト版に残す内容
個人情報、未公開情報、顧客名簿はChatGPTへ入力しないでください。例文では仮名やダミーURLを使い、実際の情報は手元で差し替えます。
ChatGPTでHTMLメールを作る5ステップ
1. 目的と内容を固定する
要件カードを埋め、目的を1つに絞ります。「新サービスの紹介」「資料請求」「問い合わせ」を同時に求めると、読者が迷います。ChatGPTでメルマガを作る方法の「1通1目的」も参考になります。
2. 最小構成のHTMLを作らせる
最初は、背景、幅600px程度の本文、見出し、本文、ボタン、フッターだけで十分です。レイアウト用の表には role="presentation" を付け、CSSは各要素へ直接書くインラインCSSを基本にします。
Gmailは複数のCSSプロパティに対応していますが、すべてのメールアプリが同じではありません。複雑なアニメーション、JavaScript、Webサイト用の大規模なCSSは避けましょう。
3. 文章・リンク・画像を人が確認する
- 件名と本文が一致している
- 日付、料金、固有名詞が正しい
- すべてのリンク先が正しい
- 「こちら」ではなく行き先が分かる文言である
- 意味のある画像に短い代替テキストがある
- 画像を非表示にしても要点が伝わる
分からないコードは、ChatGPTでコードレビューをする方法のように役割と注意点を行ごとに説明させてください。
4. プレーンテキスト版を用意する
HTMLが表示されない場合や、受信者がテキスト表示を選んでいる場合に備え、同じ内容のプレーンテキスト版も作ります。見出し、要点、URL、送信者情報が分かれば十分です。価格、期限、リンク先などの重要情報がHTML版と食い違わないようにします。
5. 4つの環境へテスト送信する
プレビューだけで本番配信せず、自分や担当者のテスト用アドレスへ送ります。
| 確認枠 | 主な確認点 |
|---|---|
| PCのWebメール | 横幅、余白、ボタン、リンク |
| PCのメールアプリ | フォント、背景色、段組み |
| スマホのWebメール | 文字サイズ、横スクロール |
| スマホのメールアプリ | ボタンの押しやすさ、画像幅 |
画像を表示した状態と非表示の状態も確認します。問題があれば、列を1つにする、余白を減らす、画像幅を100%以下にするなど、構造を単純にして直します。
そのまま使えるプロンプト例
あなたはHTMLメール制作の補助担当です。
次の要件で、初心者が修正しやすい最小構成のHTMLメールを作ってください。
目的：（ここにメールの目的を書く）
読者：（ここに対象読者を書く）
件名：（ここに件名を書く）
本文：（ここに確定済みの本文を貼り付ける）
ボタン文言：（ここにボタンの文字を書く）
リンク先：https://example.com/
条件：
- 本文幅は最大600pxを目安にする
- 1列構成、インラインCSSを基本にする
- レイアウト用テーブルに role="presentation" を付ける
- JavaScript、フォーム、動画の埋め込みは使わない
- 画像に分かりやすいalt属性を付ける
- 画像が非表示でも要点が伝わる文章にする
- スマホで横スクロールが出にくい構成にする
- HTMLの後に、同内容のプレーンテキスト版も出す
- 最後に、人が確認すべき項目を列挙する最小構成のサンプル
配信サービスの仕様に合わせて調整してください。
<!doctype html>
<html lang="ja">
<body style="margin:0;background:#eef6fb;font-family:Arial,Meiryo,sans-serif;color:#102a43;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background:#eef6fb;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:600px;background:#ffffff;border-radius:12px;">
<tr><td style="padding:32px 24px;">
<h1 style="margin:0 0 16px;font-size:24px;line-height:1.5;">新サービスのご案内</h1>
<p style="margin:0 0 24px;font-size:16px;line-height:1.8;">ここに伝えたい内容を簡潔に書きます。</p>
<a href="https://example.com/" style="display:inline-block;padding:14px 22px;background:#087f5b;color:#fff;text-decoration:none;border-radius:8px;font-weight:bold;">サービス内容を確認する</a>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>ボタンがCSS非対応環境で見えにくくても、リンク文言とリンク先が分かることを優先します。
よくある失敗と直し方
Webページのコードをそのまま貼る
ナビゲーション、JavaScript、複雑な段組みを含むWebページはメールで正しく動かないことがあります。必要な情報だけを1列へ戻します。
画像だけで内容を伝える
画像が読み込まれないと内容が分かりません。重要な見出し、期限、価格、リンクは本文の文字でも示します。
PCのプレビューだけで決める
スマホで横スクロールが発生したり、ボタンが小さくなったりします。実端末へ送り、指で押せるかまで確認します。
「ここをクリック」だけを書く
リンク先が分からず、読み上げ利用者にも不親切です。「資料を確認する」のように目的を書きます。
AIに最終判断を任せる
ChatGPTは送信先、法的な表示義務、配信サービス固有の設定を保証しません。配信への同意、配信停止方法、送信者情報などは、利用サービスの規約と自社ルールに沿って担当者が確認してください。
送信前チェックリスト
- 件名、差出人名、本文が一致している
- 日付、料金、固有名詞を原資料と照合した
- すべてのリンクを実際に開いた
- 画像に必要な代替テキストがある
- 画像なしでも要点が分かる
- プレーンテキスト版と重要情報が一致する
- PCとスマホの複数環境へテスト送信した
- 横スクロールや文字切れがない
- 配信停止方法と送信者情報を確認した
- 最終送信は権限を持つ人が承認した
よくある質問
Gmailの作成画面へHTMLコードを貼れば送れますか？
コードを文字として貼るだけでは、期待したHTMLメールになりません。HTML編集に対応する配信サービスやエディターを使い、そのサービスの手順でテスト送信してください。
どのメールアプリでも同じ表示になりますか？
なりません。メールアプリごとにHTMLやCSSの対応範囲が違います。最小構成にしたうえで、実際の受信環境で確認します。
HTMLが分からなくても作れますか？
簡単な1列構成なら作れます。ただし、リンク先、文章、画像、表示結果を確認できないまま本番送信しないでください。ChatGPTでプログラミングを始める方法も参考になります。
まとめ
ChatGPTはHTMLメール制作を短くできますが、完成品を保証する道具ではありません。要件カードで目的を固定し、最小構成のHTMLとプレーンテキスト版を作り、4つの環境でテストしてください。
見た目を豪華にするより、画像がなくても読めること、リンクの目的が分かること、スマホで操作できることが大切です。最初の1通は小さく作り、テスト結果を記録しながら改善しましょう。
コメント