「画像やボタンを使った見栄えのするメルマガを作りたい」「テキストのメルマガをHTMLメールに切り替えたい」。
そう思って調べ始めると、HTMLやCSSといった専門用語が出てきて、難しそうに感じるかもしれません。
しかし、仕組みと手順さえ分かれば、HTMLメールは意外とシンプルに作れます。作り方は2つ。HTMLとCSSを自分で書く方法と、コードを書かずに専用の「エディタ」で作る方法です。
この記事では、HTMLメールの基本から、そのまま試せるサンプルコード付きの作成手順、そして知識がなくても手早く作れるエディタの使い方までを、初めての人向けに解説します。
直観的な操作で思い通りのHTMLメールを作るならブラストメールのHTMLエディタがおすすめです。
テンプレートを使ったデザインはもちろん、自社ブランドに合わせたこだわりのデザインまで実現できます。
目次
HTMLメールとは
HTMLメールとは、画像・文字色・レイアウト・リンクボタンなどを盛り込み、Webページのように見せられるメールのことです。
たとえば、写真を載せる、文字の色や大きさを変える、「詳しくはこちら」のボタンを置く、といった表現ができます。文字だけでは伝わりにくい情報を視覚的に見せられるため、開封後のクリック率が高く、現在のメルマガ配信の主流になっています。
こうした表現は、Webページを作るための言語「HTML」と「CSS」をメールに使うことで実現しています。
HTMLメールとCSSの関係
HTMLメールは、「HTML」と「CSS」という2つの言語を組み合わせて作ります。
HTMLは文書の「構造」を指定する
HTMLは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、文書の構造を指定するマークアップ言語です。「ここは見出し」「ここは段落」「ここは画像」「ここはリンク」というように、文章の各要素が何であるかを定義します。
要素は、山括弧 < > で囲んだ「タグ」で示します。開始タグと終了タグのペアで内容を挟むようにし、たとえば段落なら <p>本文</p> のように書き、終了タグにはスラッシュ（/）が付きます。
CSSは文書の「見た目」を指定する
CSSは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、HTMLで定義した要素の見た目を指定するスタイルシート言語です。文字の色・大きさ・書体、背景色、余白、要素の配置（レイアウト）などを指定します。
CSSは単体では使えず、必ずHTMLとセットで使います。HTMLが「何を書くか（構造・内容）」を、CSSが「どう見せるか（見た目）」を担当するという役割分担で、同じHTMLでもCSSの指定を変えるだけで見た目を変えられます。
HTMLメールではCSSをタグに直接書く（インライン）
CSSは、Webサイトでは別ファイルや <head> にまとめて書くのが主流です。しかしHTMLメールでは、受信側のメールソフトによって、まとめて書いたCSSが読み込まれず、見た目が反映されないことがあります。
そのため、HTMLメールでは各タグの中に style=”…” を直接書く「インライン」という方法でCSSを指定するのが主流です。少し手間はかかりますが、環境による表示崩れを最も防ぎやすい方法です。具体的な書き方は【応用】で解説します。
CSSの基本的な使い方をさらに詳しく知りたい場合は、以下の記事で解説しています。
HTMLメールの作り方は2通り
HTMLメールを作る方法は、大きく2つに分かれます。違いは次の通りです。
| 作り方 | 特徴 | 向いている人 |
|---|---|---|
| 自分で書く | テキストエディタにHTML・CSSを書く。知識と手間は必要だが、デザインを自由に作れる | デザインにこだわりたい人 |
| エディタを使う | 編集ツールでテンプレートやパーツを選ぶだけ。知識が不要で、短時間で作れる | 手早く作りたい人 |
この記事では、まず「自分で書く方法」を解説し、続けて「エディタを使う方法」を紹介します。
HTMLメールの作り方【基礎】：HTMLで骨組みを作る
HTMLメールは、テキストエディタ（Windowsの「メモ帳」、Macの「テキストエディット」、無料の「Visual Studio Code」など）にHTMLのコードを書いて作ります。
手順1：文書全体の枠組みを用意する
最初に、メール全体の「枠組み」を用意します。1行目の <!DOCTYPE html> から始まるこの部分は、どのHTMLメールでも共通の決まった形なので、そのままコピペで使えます。
下のコードで、黄色の部分だけを内容に合わせて書き換えます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>メールの件名</title> </head> <body> <!-- ここにメールの中身を書きます --> </body> </html>
手順2：body の中に中身を書く
枠組みができたら、<body> の中にメールの中身を書きます。前述の通り、HTMLでは「タグ」で文章の役割を指定します。よく使うタグは次の通りです。
| タグ | 役割 | 書き方の例 |
|---|---|---|
| <h1>〜<h6> | 見出し（数字が小さいほど大きい） | <h1>新商品のお知らせ</h1> |
| <p> | 段落（本文） | <p>本文が入ります</p> |
| <a> | リンク | <a href=”URL”>こちら</a> |
| <img> | 画像 | <img src=”画像URL” alt=”説明”> |
実際に <body> の中を書くと、次のようになります。
<body> <h1>新商品のお知らせ</h1> <p>いつもご利用ありがとうございます。</p> <p>新商品を<a href="https://example.com/">こちら</a>で公開しました。</p> </body>
これで、見出し・本文・リンクを持つHTMLメールの土台ができます。
HTMLメールの作り方【応用】：CSSとテーブルで見た目を整える
骨組みができたら、CSSで見た目を指定し、テーブルでレイアウトを組みます。ここでは、HTMLメールを崩れにくく作るための実践的な書き方を解説します。
CSSは各タグに直接（インラインで）書く
HTMLメールでは、各タグの中に style=”…” を直接書く「インライン」でCSSを指定します。style の中に「文字サイズは16px」「色は#333333」のように見た目を書き、複数の指定はセミコロン（;）で区切ります。
<p style="font-size: 16px; color: #333333;"> この度、春の新作コレクションが入荷しました。 </p>
▼ このコードは、次のように表示されます。
この度、春の新作コレクションが入荷しました。
レイアウトはテーブル（表）で組む
HTMLメールでは、本文が横に広がりすぎないように、テーブルで「決まった幅の枠」を作り、その中に中身を入れるのが基本です。表のデータを見せるためではなく、レイアウトの土台としてテーブルを使う点が、通常のWebページと違うところです。メールソフトごとの表示差に左右されにくく、レイアウトが安定します。レイアウトに使う主なタグは次の3つです。
- <table>：枠組み全体（width で幅、align で配置を指定）
- <tr>：横一列の行
- <td>：中身を入れるマス（余白は padding で指定）
基本は、幅100%の外枠の中に幅600px程度の枠を中央寄せで置き、その中に中身を縦に積んでいきます。実際のHTMLメールは、次のように「ヘッダー（店名やロゴ）→本文（見出し・文章・ボタン）→フッター（会社情報や配信停止リンク）」を縦に並べて作るのが一般的です。それぞれのブロックが1つの行（<tr>）にあたります。
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="background: #f4f4f4;">
<table width="600" cellspacing="0" cellpadding="0">
<tr>
<td style="background: #c12620; padding: 20px; text-align: center;
color: #ffffff; font-size: 20px; font-weight: bold;">
○○ STORE
</td>
</tr>
<tr>
<td style="background: #ffffff; padding: 30px;">
<p style="font-size: 18px; font-weight: bold; margin: 0 0 12px;">
春の新作コレクションが入荷しました
</p>
<p style="font-size: 14px; color: #333333; margin: 0 0 20px;">
この春のおすすめアイテムを集めました。ぜひご覧ください。
</p>
<a href="https://example.com/"
style="display: inline-block; background: #c12620; color: #ffffff;
padding: 12px 28px; border-radius: 4px; text-decoration: none;">
商品を見る
</a>
</td>
</tr>
<tr>
<td style="background: #f4f4f4; padding: 16px; text-align: center;
color: #888888; font-size: 12px;">
○○ストア株式会社<br>
配信停止はこちら
</td>
</tr>
</table>
</td>
</tr>
</table>
▼ このコードは、次のような見た目になります（グレーの背景の中央に、幅600pxのメール本体が表示されます）。
この春のおすすめアイテムを集めました。ぜひご覧ください。
商品を見る
配信停止はこちら
各行（<tr>）が1つのブロックになり、ヘッダー・本文・フッターが上から順に積み重なります。画像とテキストを左右に並べたいときは、1つの行の中で <td> を横に増やして列を作ります。
フォントや色を指定する
文字のフォント（書体）や色も、CSSで指定します。段落やセルの style に書き加えます。
<td style="font-family: 'Helvetica', 'Arial', sans-serif; color: #d10000;"> 今だけ全品20%OFF </td>
▼ このコードは、次のように表示されます。
font-family には、使いたいフォントを、使えない環境用の予備とあわせて書きます（この例では最後の sans-serif が予備）。色は color で指定します。
ここまでを組み合わせた最小の例
骨組み（HTML）・インラインCSS・テーブルを組み合わせると、HTMLメールの最小構成は次のようになります。ここでも、黄色の部分が内容に合わせて書き換える箇所です。それ以外の枠組みは、そのまま使い回せます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新商品のお知らせ</title> </head> <body> <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td align="center"> <table width="600" cellspacing="0" cellpadding="0"> <tr> <td style="padding: 20px; font-family: sans-serif; color: #333333;"> <h1 style="font-size: 20px;">新商品のお知らせ</h1> <p style="font-size: 16px;">この度、春の新作コレクションが入荷しました。</p> <p><a href="https://example.com/">詳しくはこちら</a></p> </td> </tr> </table> </td> </tr> </table> </body> </html>
▼ このコードは、次のように表示されます。
文字色やサイズを変えたいときは、style=”…” の中の数値や色を書き換えます。ここに画像やボタン、複数のセルを足していくことで、実用的なHTMLメールになります。デザインの参考にしたい場合は、以下の記事で参考サイトや無料テンプレートを紹介しています。
HTMLメールを作るときの注意点
HTMLメールを自分で作る際は、次の点に注意します。
マルチパートで配信する
マルチパートとは、受信者の環境に応じて表示形式を自動で切り替える仕組みです。読者全員がHTMLメールを表示できる環境とは限らないため、マルチパート配信にしておくと、HTMLに対応していない環境には自動的にテキスト版が表示されます。
あわせて、メールの内容をWeb上にも用意し、「メールが正しく表示されない場合はこちら」のリンクを設置しておくと、崩れたときの保険になります。
スマホでも読みやすいレイアウトにする
パソコンとスマートフォンの両方で快適に読めるようにするには、レスポンシブデザイン（画面サイズに応じて表示を最適化する仕組み）を使います。フォントサイズは14px以上、1行あたり45文字以内を目安にすると、スマートフォンでも読みやすくなります。
また、左右に情報を並べる2カラム・3カラムのレイアウトはスマホで崩れやすいため、上から下へ一列に並べるシングルカラム（1列）を基本にすると、どの端末でも崩れにくくなります。
迷惑メールに分類されないようにする
迷惑メールに分類されると、読者に届きません。分類を避けるためのポイントは次の通りです。
- 件名や本文で不自然な大文字や記号を避け、自然な文章を心がける
- 画像を過度に使わず、テキストとのバランスを取る
- 送信ドメイン認証（SPF・DKIM・DMARC）を正しく設定する
送信事故を防ぐ！HTMLメール配信前のチェックリスト
HTMLメールは一度送信すると修正できません。画像が表示されない、レイアウトが崩れているといった送信事故は、企業の信頼性を損ないます。本番配信の前に、次の点を確認します。
複数のデバイス・メールソフトで表示を確認する（テスト送信）
HTMLメールは、受信側の環境によって表示が変わります。自分のPCできれいに見えても、読者のスマホでは崩れていることは珍しくありません。自分のテスト用アドレス宛に「テスト送信」を行い、以下の環境で目視確認します。
- スマートフォン（iPhone）：標準メールアプリ
- スマートフォン（Android）：Gmailアプリなど
- PC：Gmail・Yahoo!メールなどの主要Webメール
- PC：Outlook・Thunderbirdなどのメールソフト
特にOutlookは独自の表示エンジンを使うため、ほかの環境とは違う崩れが起きやすい傾向があります。BtoB向けの配信ではOutlookを使う読者も多いため、あわせて表示を確認しておくと安心です。
画像がオフでも伝わるよう「代替テキスト（Alt）」を設定する
受信者の設定によっては、画像が自動で読み込まれず「画像オフ」の状態で開かれることがあります。このとき画像しか設定していないと、空白の枠が表示されるだけで内容が伝わりません。
これを防ぐため、画像を入れる <img> タグには、alt 属性で画像の説明文を書いておきます。次のように、alt=”…” を追加するだけです。
<img src="spring-sale.jpg" alt="春の新作コレクション 好評販売中">
こうしておくと、画像が表示されない環境では、画像の代わりに alt に書いた文字が表示されます。
▼ 画像オフのときの表示イメージ
空白の枠ではなく内容が伝わるため、重要な画像には必ず説明文を入れておきます。
HTMLを書かずに作るなら「HTMLメールエディタ」が便利
ここまで見てきたように、HTMLメールを一から作るには、HTMLタグやCSS、テーブルを自分で書く必要があります。こうしたコードを書かずに作れるのが、メール配信システムなどに付いている「HTMLメールエディタ（メール作成用の編集ツール）」です。
テンプレートを選び、文字を入力したり、画像やボタンをドラッグして置いたりするだけで、HTMLメールが完成します。先ほどのような <table> や style=”…” を自分で入力する必要はなく、パソコンで文書を作るような感覚で作成できます。
まず、テンプレートから好みのレイアウトを選びます。
次に、メール全体や文章のカラー、画像、リンクボタン、SNSアイコンなどを配置していきます。
多くのエディタは、このようなブロックを組み合わせてメールを作る形式です。コードの知識がなくても、また端末による表示崩れを気にせずに、HTMLメールを作成できます。エディタを使う主なメリットは次の通りです。
- コード不要：HTMLやCSSを書かずに作れ、スマホ表示も自動で整う
- 効果測定：開封率やクリック率を計測できる
- 時短：テンプレートを使って短時間で作れる
おすすめのメール配信システム「ブラストメール」
ブラストメール（blastmail）は、15年連続で導入社数シェアNo.1（※）を獲得している日本最大級のメール配信システムです。27,000社以上の導入実績があり、官公庁からさまざまな業種の企業まで幅広く利用されています。
HTMLエディタの使いやすさに定評があり、ドラッグ&ドロップで要素を配置するだけで、レスポンシブ対応のHTMLメールを作成できます。
- HTMLメールエディタ：テンプレートに画像や文字を足すだけで作れる
- 効果測定：開封率・クリック率・エラー数を確認できる
- フィルタ配信：条件で絞ったグループに配信できる
- 迷惑メール対策：SPF/DKIMに対応し、到達率を高める
基本的な機能が一通り揃い、月額4,000円から利用できます。まずは無料トライアルで、HTMLメールの作りやすさとエディタの使いやすさを試せます。
すぐに使えるHTMLテンプレートが30種類以上
ブラストメールでは、アパレル・不動産・BtoB企業向けなど、さまざまな用途に適したHTMLテンプレートを30種類以上、無料で使えます。無料トライアルではすべてのテンプレートを使ったメール作成が可能です。
アパレル業界向け：新作アイテムを魅力的に伝え、販売サイトへ誘導するデザインです。
EC・小売業界向け：期間限定クーポンや新商品を強調するレイアウトです。
セミナー向け：セミナー内容や開催概要を強調し、参加申し込みを促すデザインです。
このほかにも、飲食・不動産・宿泊・旅行・メディア・出版・教育・イベント・人材・年賀状向けなど、豊富なテンプレートを用意しています。
※ミックITリポート2025年8月号「クラウド型eメール一斉配信サービスの市場動向と中期予測（売上高/アクティブ法人顧客数）」より
おすすめのメール配信システム「blastengine」
blastengine（ブラストエンジン）は、自社システムからメールを送信したい企業・エンジニア向けのメール配信サービスです。お客様のシステムとAPIで連携、またはSMTPリレーで接続することで、会員登録・決済完了などのトランザクションメールから一斉配信まで対応できます。会員登録の完了通知など、システムから自動送信するHTMLメールを確実に届けたい場合に適しています。
- API連携・SMTPリレー：自社システムに組み込みやすい
- 高い到達率：国内キャリア・ISPに個別最適化して届ける
- SPF/DKIM/DMARC対応：なりすまし・迷惑メール判定を回避する
- バウンス自動対応：エラーメール管理を自動化する
初期費用無料、月額3,000円から利用でき、メールサーバーの構築・管理は不要です。
ブラストエンジン公式サイト：https://blastengine.jp/
FAQ
- Q：HTMLメールとテキストメールの違いは何ですか？
- A：テキストメールは文字のみで構成されますが、HTMLメールは画像・文字装飾・リンクボタンを配置でき、Webページのように見せられます。視覚的に訴求できるため、開封後のクリック率が高い傾向があります。
- Q：HTMLとCSSはどう違うのですか？
- A：HTMLは文書の「構造・内容」を、CSSはその「見た目（色・大きさ・配置）」を指定する言語です。HTMLで作った骨組みにCSSで見た目を加えて、HTMLメールを作成します。
- Q：HTMLの専門知識がなくても作成できますか？
- A：はい、HTMLエディタ機能のあるメール配信システムを使えば、コードを書かずに作成できます。テンプレートやパーツを選ぶだけで、レスポンシブ対応のHTMLメールを作れます。
- Q：HTMLメールを作るときの注意点は何ですか？
- A：受信環境によって表示が崩れることがある点です。配信前に複数のデバイス・メールソフトでテスト送信し、表示を確認することが重要です。マルチパート配信や画像の代替テキスト設定も有効です。
まとめ
HTMLメールの作り方には、HTMLとCSSを自分で書く方法と、コード不要のエディタを使う方法の2つがあります。自分で書く場合は、HTMLで骨組みを作り、CSSとテーブルで見た目を整えるのが基本の流れです。HTMLが文書の構造を、CSSが見た目を担当するという役割分担を押さえておくと、仕組みを理解しやすくなります。
手早く確実に作りたい場合は、テンプレートを使えるHTMLエディタが便利です。作成時間を短縮でき、表示崩れも起きにくくなります。
HTMLメールを作成できるツールを比較したい場合は、以下の記事で機能・料金を徹底比較しています。
