HTMLメールの作り方と注意点｜初心者にも分かりやすく解説

テキストだけでなく画像やボタンを使った多彩なレイアウトが魅力のHTMLメール。視覚的な訴求力が強く、メルマガの効果を高める手法として広く活用されています。一方で、「実際の作り方が分からない」「専門知識がないと難しそう」と感じている方も多いのではないでしょうか。

本記事では、HTMLメールの基本的な知識から、具体的な作成手順、作成時の注意点まで、初心者の方にも分かりやすく解説します。

HTMLメールとは？

HTMLメールとは、Webサイトの構築に用いられるHTMLを使って作成されたメールのことです。文字の大きさや色を変えたり、画像を挿入したり、リンクをボタンとして表示したりすることができ、テキストメールと比較して視覚的に情報を伝えやすい点が特長です。

Webページのようなデザイン表現が可能な一方で、メールソフトごとに表示仕様の違いがあるため、作成に際してはいくつかの注意点もあります。

HTMLメールのメリット・デメリットや注意点については、以下の記事で詳しく解説しています。
HTMLメールとは？テキストメールとの違いや送信時の注意点を解説 – ベアメールブログ

HTMLメールを作成する2つの方法

HTMLメールの作成方法には、大きく分けて次の2つがあります。それぞれに特徴があるため、目的やスキルに応じて適した方法を選びましょう。

ツールを活用して作成する

1つ目は、メール配信ツールやMA（マーケティングオートメーション）ツールに搭載されているHTMLメールエディタを利用する方法です。あらかじめ用意されたテンプレートを使ったり、ドラッグ＆ドロップの直感的な操作でパーツを配置したりするだけで、専門知識がなくても比較的簡単にデザイン性の高いHTMLメールを作成できます。

また、配信設定や効果測定（開封率・クリック率など）を一元管理できる点も大きな特長です。

メリット	デメリット
HTMLやCSSの専門知識が不要	ツールの利用料金が発生する
短時間で作成できる	デザインの自由度に制限がある
配信設定や効果測定をまとめて管理できる

HTMLを直接コーディングして作成する

2つ目は、HTMLやCSSを直接記述して（コーディングして）HTMLメールを作成する方法です。専門知識は必要になりますが、テンプレートに縛られず、デザインや構成を細かく調整できる点が特長です。

Web制作の経験がある方や、デザインにこだわったメールを作成したい場合に適しています。ただし、HTMLメール特有の制限があるため、表示テストや調整には一定の手間がかかります。

メリット	デメリット
デザインや構成の自由度が高い	HTMLやCSSの専門知識が必要
ツールに依存しない	作成・テストに時間がかかる
	表示崩れのリスクがある

HTMLメールを作成する手順

ここでは、HTMLやCSSを直接記述してオリジナルのHTMLメールを作成する基本的な手順を、5つのステップで解説します。HTMLメールは、メールソフトごとに表示ルールが大きく異なります。HTMLメール特有のポイントを押さえながら進めましょう。

ステップ1：HTMLファイルの基本構造（雛形）を用意する

まず、HTMLメールのベースとなる雛形を作成します。テキストエディタ（Windowsの「メモ帳」や「Visual Studio Code」など）を開き、以下の基本構造を記述します。

＝＝＝＝＝＝

HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title>HTMLメールのタイトル</title>

/* ここに後述するレスポンシブ対応のCSSなどを記述します */

</style>

</head>

<body>

</body>

</html>

＝＝＝＝＝＝

ポイント

文字化けを防ぐため、UTF-8の文字コード指定は必ず行います
メールの件名は、配信セット時やメール送信時に設定します（<title>は入れても問題ありませんが、実際の表示には影響しない場合があります）

ステップ2：テーブルレイアウトで骨組みを作る

HTMLメールでは、<div>を使ったレイアウトではなく、<table>タグによるレイアウトが基本です。これは、GmailやOutlookなど主要なメールソフトでは古い表示エンジンが使われている場合が多く、<table>で組まれたレイアウトの方が表示崩れを起こしにくいためです。

以下のように、<table>（表全体）、<tr>（行）、<td>（セル）を入れ子にしながら、ヘッダー、本文、フッターといった全体の骨組みを作ります。

＝＝＝＝＝

HTML

<!– 背景用の外枠 –>

<tr>

<!– コンテンツ用の内枠 –>

<tr>

<td>

ヘッダー

</td>

</tr>

<tr>

<td>

メインコンテンツ

</td>

</tr>

<tr>

<td>

フッター

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

＝＝＝＝＝

ポイント

本文コンテンツの横幅は、600px前後に設定するとPCでもスマートフォンでも読みやすくなります

ステップ3：コンテンツを配置しインラインCSSで装飾する

レイアウトができたら、テキストや画像などのコンテンツを配置していきます。HTMLメールでは、文字色や背景色、余白などの装飾はインラインCSSで指定するのが最も確実です。

インラインCSSとは、style=”…”のように、各HTMLタグに直接スタイルを書き込む方法です。メールソフトによっては外部CSSや<head>内のCSSを無視することがあるため、この方法が推奨されます。

＝＝＝＝＝

【テキストの例】

HTML

ここに本文を記述します。

</p>

＝＝＝＝＝

【画像の例】

HTML

<img src=”https://example.com/image.jpg”

alt=”商品画像”

width=”600″

style=”display: block; border: 0;” />

＝＝＝＝＝

画像のポイント

src属性には、サーバーにアップロードした画像のURLを絶対パスで指定します
画像が表示されなかった場合に備えて、alt属性（代替テキスト）を必ず記述します
画像下の不要な余白を防ぐため、display: block;を指定します

ステップ4：メディアクエリでスマートフォン表示に対応させる

コンテンツを配置したら、スマートフォンで閲覧した際に文字や画像が小さくなりすぎないよう、レスポンシブ対応を行います。

表示デバイスの種類や画面の幅・高さなどの特性に応じて、適用するCSSスタイルを切り替える技術をメディアクエリといいます。<head>内の<style>タグにメディアクエリを記述することで、画面幅に応じたスタイル指定が可能です。

＝＝＝＝＝

HTML

@media screen and (max-width: 600px) {

.content-width {

width: 100% !important; /* PCでは600px、スマホでは画面幅いっぱいに */

}

.text-size {

font-size: 16px !important; /* スマホでは文字を少し大きく */

}

</style>

＝＝＝＝＝

ポイント

一部のメールソフトではメディアクエリに対応していないため、メディアクエリが効かなくても、ある程度読めるレイアウトにしておくことが重要です

ステップ5：様々な環境で表示テストを行う

メールが完成したら、本番配信の前に必ず表示テストを行います。コーディングで作成したHTMLメールは、閲覧する環境によって表示が大きく変わる可能性があります。

主なチェック環境

主要なメールソフト: Gmail、Outlook、Yahoo!メール
主要なデバイス: PC（Windows/Mac）、スマートフォン（iPhone/Android）、タブレット

最低でもこれらの環境で受信テストを行い、レイアウト崩れがないか、画像の表示に問題がないか、リンクが正しく機能するか等を入念にチェックしましょう。特にOutlookは独自の表示ルールが多く、崩れやすいため注意が必要です。

HTMLメールを作成する際の注意点

HTMLメールを作成する際には、見た目だけでなく、表示環境や受信者の体験を考慮して設計することが重要です。ここでは、HTMLメールを作成するうえで押さえておきたい注意点について解説します。

レスポンシブデザインに対応させる

レスポンシブデザインとは、PCやスマートフォン、タブレットなど、受信するデバイスの画面サイズに応じて、レイアウトや文字の大きさを自動で最適化する仕組みのことです。現在では多くのメールがスマートフォンで閲覧されているため、HTMLメールでもレスポンシブ対応を意識することが重要です。

レスポンシブ対応がされていない場合、スマートフォンで閲覧した際に文字が小さく読みにくくなったり、ボタンが押しづらくなったりすることがあります。その結果、内容を十分に読まれないまま離脱されてしまう可能性もあります。

ただし、すべてのメールソフトがレスポンシブ表示に対応しているわけではないため、対応できない環境でも最低限読めるレイアウトを前提に設計することが大切です。

マルチパート配信を設定する

マルチパート配信とは、HTMLメールとテキストメールの両方を同時に送信し、受信者の環境に応じて最適な形式を表示させる配信形式です。例えば、HTMLメールの表示が制限されている環境では、自動的にテキストメールが表示されます。

マルチパート配信を設定しておくことで、「HTMLメールが表示されず、内容が全く伝わらない」といった事態を防ぐことができます。受信環境に左右されず、確実に情報を届けるためにも、マルチパート配信を積極的に活用しましょう。

画像の容量を最適化する

HTMLメールに画像を多用すると、メール全体のデータ容量が大きくなり、表示速度が遅くなったり、受信サーバーに負荷をかけたりする原因になります。

画像を使用する際は、専用のツールなどを利用してファイルサイズを圧縮し、容量を最適化することを心がけましょう。また、画像が表示されなかった場合でも内容が伝わるように、画像の内容を説明する「alt属性」を設定しておくことも重要です。

HTMLメールを正しく作成しても届かないことがある

ここまで、HTMLメールの作成方法や注意点について解説してきました。しかし、HTMLメールを正しく作成しても、受信者に届かなかったり、迷惑メールフォルダに振り分けられてしまったりするケースは少なくありません。

これは、受信側（メールソフトや携帯キャリアなど）が、メール本文の内容やHTMLのフォーマットだけでなく、配信環境や送信元の信頼性、認証状況など複数の要素を総合的に評価して、受信可否の判断や迷惑メール判定を行っているためです。

本章では、HTMLメールが届かない場合に考えられる主な要因について解説します。

HTMLメールの内容・配信方法の問題

まずは「どのような内容のメールを、どのようなリストに、どのような方法で配信しているか」を整理し、問題がないかを確認することが重要です。

迷惑メール判定される主な原因として、以下が挙げられます。

画像のみ、または画像が大半を占めるHTMLメール
テキストがあまりにも少ないと、スパムの恐れがあるとして迷惑メール判定のリスクが高まります。
HTMLフォーマットの不備や大容量ファイルの添付
構文エラーや数MBを超える添付ファイルは、受信拒否の原因となる場合があります。
件名・本文にスパムワードを多用している
「今すぐ」「無料」「限定」「緊急」など、過度な訴求表現は注意が必要です。
本文内のURLに問題がある
ブラックリスト登録されたドメインや短縮URLの使用は、迷惑メール判定リスクを高めます。
購読解除（ワンクリック登録解除）が設定されていない
対応できていないと、メールが届きにくくなるだけでなく、ユーザから迷惑メールとして通報されるリスクも高まります。
不適切な配信頻度や無効なアドレスへの配信
迷惑メールとしての通報や配信エラーの増加は、送信元の評価低下につながります。

送信元の信頼性の問題

受信側は、送信元IPアドレスやドメインの過去の配信実績を基に、送信元の信頼性を判断しています。そのため、配信環境によっては、HTMLメールの内容に問題がなくても、到達率に影響が出る可能性があります。

例えば、自社で構築したメールサーバから配信している場合、短期間での大量配信や急激な配信量の増加、エラーや迷惑メール報告の多発などが原因となり、送信元IPアドレスの評価（レピュテーション）が低下することがあります。

一方で、メルマガ配信ツールなどの外部サービスを利用している場合は、あらかじめ送信実績のある配信基盤が使われることが多く、利用者自身が個別にIPレピュテーションを管理する必要はありません。ただし、共有IPプランなどで送信基盤を他の利用者と共有している場合には、他の利用者の配信状況の影響を受け、自社に問題がなくても評価が下がるケースもあります。

レピュテーション低下の原因や改善方法については、以下の記事で詳しく説明しています。
IPレピュテーションとドメインレピュテーションとは？レピュテーション向上のポイントを解説｜ベアメールブログ

送信ドメイン認証（SPF・DKIM・DMARC）の設定不備

HTMLメールが届かない原因として、送信ドメイン認証（SPF・DKIM・DMARC）の設定不備も見逃せません。これらの認証は、メールが正規の送信元から送られているか、改ざんされていないかを受信側が判断するための重要な仕組みです。

送信ドメイン認証が未設定、または設定されていても正しく機能していない場合、受信側は送信元の正当性を確認できず、迷惑メール判定や受信拒否につながる可能性があります。特にHTMLメールは、広告やフィッシングに悪用されやすい形式であるため、認証が整っていない状態では厳しく評価されやすい傾向があります。

HTMLメールを安定して届けるためには、SPF・DKIM・DMARCを正しく設定し、継続的に運用状況を確認することが不可欠です。これらの認証は、送信元の信頼性を支える基盤となる要素であり、配信環境やコンテンツの改善と併せて取り組む必要があります。

SPF・DKIM・DMARCの仕組みや設定方法については、以下の記事で詳しく解説しています。
SPFレコードとは？書き方・設定手順・確認方法まで完全ガイド｜ベアメールブログ
 DKIMレコードの書き方は？設定・確認方法や失敗例も解説｜ベアメールブログ
 DMARCとは？ SPF・DKIMとの関係、導入メリット、設定方法まで解説｜ベアメールブログ

まとめ

本記事では、HTMLメールの基礎知識や具体的な作成手順、作成時の注意点について解説しました。HTMLメールは、視覚的に情報を伝えやすいだけでなく、開封率やクリック率といった効果測定が行えるのも大きな魅力です。適切に設計・運用することで、メールマーケティングの成果向上が期待できます。本記事で紹介した手順や注意点を参考に、まずは基本を押さえたHTMLメールの作成にチャレンジしてみてください。

一方で、HTMLメールを作成できても、受信者へ確実に届くかどうかは別の課題です。ベアメールでは、高い到達率と高速・大量配信を実現する「メールリレーサービス」と、送信メールが迷惑メール判定される可能性・原因を可視化する「迷惑メールスコアリング」を提供しており、HTMLメールを安定して配信したいお客さまを支援しています。1,000社以上の導入実績があり、導入から運用まで手厚いサポートが受けられる点も特長です。メール配信環境に課題を感じている方は、まずはお気軽にご相談ください。

ベアメールのサービス内容・機能詳細・料金等の詳細はこちら
サービス紹介資料をダウンロードする