こんにちは。バナナデスクです。
HTMLメールを作ろうとして、まずおしゃれなテンプレートを探していませんか。先に「11月18日の講座は誰向けで、何を確認してもらうメールか」を一枚の原稿にすると、必要な部品はかなり絞れます。
日時、対象、参加費、案内先が決まっていれば、見出しと本文、ひとつのボタンで形になります。反対に、内容が決まらないままレイアウトを埋めると、空いた場所へ別の案内を足したくなります。
この記事では、架空の講座案内をHTML版とテキスト版に分けて作り、配信できる状態に整える手順を説明します。HTMLファイルを作成する工程と、配信ツールへ設定して受信確認する工程は分けて進めましょう。
配信エディタと独自HTML、どちらで作るか
普段の案内メールなら、利用中の配信ツールのエディタで、見出し・本文・ボタンを置く方法から検討できます。独自HTMLは、配置を細かく管理したい場合の選択肢ですが、ツールの取込機能や受信側の表示制約への対応が必要です。
HTMLメールはWebページと同じようには表示されません。Mailchimpの公式資料も、メールクライアントによって対応する要素が異なり、JavaScriptやフォーム、埋込みコンテンツなどを避けるよう案内しています。記事ページを丸ごと貼り付けるのではなく、メール用の簡単な構成へ移します。HTMLメールで使える要素と制約
| 作り方 | 向いている条件 | 別途確認すること |
|---|---|---|
| 配信エディタ | 標準の一段レイアウトで足りる。担当者が後から文面を更新する | モバイル表示、配信停止欄、テンプレート利用条件 |
| 独自HTML | コードを管理し、表示差を直せる担当がいる | HTML取込みの契約条件、CSS制約、クライアント別表示 |
| テキスト中心 | 短い連絡や、装飾より文章を優先したい | 見出し、改行、長いURL、HTML版との情報一致 |
HTMLにする前の原稿を完成させる
仮の「説明資料の順番を整える60分」という講座案内を使います。入力する内容は、次のように決めます。
件名：11月18日｜説明資料の順番を整える60分
見出し：説明資料の順番を、一緒に整える60分
本文：見出しを増やす前に、「誰に何を決めてほしいか」を一文にしてみませんか。今回の講座は、架空の3ページ資料を使い、伝える順番を組み直します。
対象：サービスの説明が長くなり、何を先に話せばよいか迷っている方。ソフトの全機能解説や、個別資料の制作代行は含みません。
日時：11月18日19〜20時、日本時間。オンライン、3,300円（税込）。筆記用具をご用意ください。実在の顧客資料は不要です。
案内：講座の内容と参加条件を見る。
日時や金額は説明用の仮設定です。この見本では、参加条件を確認する一つの行動に絞りました。ボタンを「こちら」にするより、移動先で何を確認できるかが伝わります。
同じ内容から、HTML版とテキスト版を作る
次のZIPには、編集できるHTML見本、テキスト版、書き換える箇所の説明を入れています。架空の講座のため、内容とURLを自分の案内に変更して使います。
HTMLメールとテキスト版の制作見本をダウンロード（ZIP）
HTML見本は、一段のレイアウト、最大幅600px、幅の狭い画面では親要素の幅に収まる指定で作りました。本文16px、見出し25px、行間1.8を初期値としています。これは今回の見本の設定であり、すべてのメールに必須の数値ではありません。
例えば、ボタンに見せるリンクの部分は次のような構造です。配信先での表示を確認したうえで、実際のURLに置き換えます。
<a href="https://example.invalid/course-outline"
style="color:#172b40;font-weight:bold;
text-decoration:underline;font-size:17px;">
講座の内容と参加条件を見る
</a>example.invalidは、到達しない見本用アドレスです。そのまま配信するためのURLではありません。実際には公開済みの案内先へ変更し、受信したメールから開けるかを確認します。
テキスト版では装飾を使わず、「対象」「日時と参加条件」といった見出しと改行で順番を残します。HTMLのタグを機械的に削るだけでなく、ボタンの行き先も読める文字列として入れます。
Mailchimpは、HTMLとプレーンテキストを同じメールの代替形式として送る仕組みを説明し、テキスト版を自動生成するとしています。別の配信ツールでも、テキスト代替版がどう作られ、編集できるかを確認してください。二つのファイルを持っているだけで、二形式が正しく送信されるわけではありません。HTMLメールとテキスト代替の説明
画像がなくても、日時と判断材料を残す
今回の見本は、日時・対象・料金を文字で記載し、画像を使わずに成立するよう作成しました。画像が必要な案内でも、重要な情報を画像の中だけに入れないことです。
画像を加える場合は、公開可能なサーバーへ配置したURLを使います。自分のパソコンの保存先では、読者は読み込めません。Mailchimpの公式資料も、画像に絶対URLを使用し、公開アクセス可能な場所へ置くことを案内しています。
代替テキストには「画像1」ではなく、伝える情報に応じた説明を付けます。日程などが画像と本文の両方にある場合は、変更の際に二か所を更新します。フォーム入力や動画再生が必要なら、メール内へ無理に埋め込まず、Webの該当ページへ案内する方法を検討します。
ファイル表示、ツールのプレビュー、実受信を分けて確認する
ブラウザでHTMLファイルを開く確認は、原稿や大きなレイアウト崩れを見つける工程です。受信メールの表示確認の代わりにはなりません。メールクライアントでHTMLの解釈が異なるためです。
| 工程 | 見ること | まだ分からないこと |
|---|---|---|
| HTMLファイル | 文章、余白、狭い画面での横はみ出し | 配信システムによる書換えや受信側の表示 |
| 配信ツールのプレビュー | 差し込み、画像、配信停止欄、スマホの想定表示 | 実際の受信箱での到達と最終的な見え方 |
| 許可された宛先へのテスト | 件名、本文、リンク、画像、テキスト代替、返信先 | 未確認の全クライアントや全読者への到達 |
今回のHTML見本は、2026年10月1日にブラウザで幅375pxと1265pxを確認しました。375pxでは内側のレイアウトが355px、1265pxでは最大600pxになり、ページ全体の横はみ出しはありませんでした。見出し、本文、ボタン、末尾の配信停止リンクまで表示を点検しています。これはブラウザでの描画確認であり、GmailやOutlookで受信した結果ではありません。
本記事の成果物は編集可能なHTMLとテキストの制作見本です。実送信や受信クライアントの試験は行っていません。配信時は、利用するツールへ原稿を移し、発行者情報と有効な配信停止リンクを設定したうえで、許可されたテスト宛先へ送って確認してください。
原稿の一か所を変えたら、HTML版とテキスト版、案内先の内容を揃えます。ファイルがきれいにできたことを配信完了とせず、読者が受け取る状態まで確認してから、送信や予約へ進みましょう。