HTMLメールの作り方を5分で解説！簡単に作成する方法もこっそり教えます。

2024.10.04 メール

お客様に自社のサービスや商品の販売促進やブランディングを目的とするメルマガは、数あるマーケティングの方法の中でも高い効果があると言われています。

そんな高い訴求力をもつメルマガですが、効果的に訴求ができるメルマガを自力で作成するには、ある程度のIT関連の知識が不可欠でしょう。現代では、写真や画像を添付したり、文字に装飾のある「HTMLメール」はメルマガ配信において主流となっています。

そこで今回は、メルマガ配信の土台をなす「HTMLメール」の作成方法に関してご説明していきたいと思います。

また、「HTMLメール」を1から作る方法の他に、とても簡単にHTMLメールを作る事ができる「HTMLエディタ」というシステムをこっそりご紹介しています。ビジネスにメルマガを導入しようと思っている方はもちろん、すでにHTMLメールを使ったメール配信、メルマガ配信を実践している方もぜひご覧ください。

直観的な操作で思い通りのHTMLメールを作るならブラストメールのHTMLエディタがおすすめです。

テンプレートを使って誰でも簡単にデザインはもちろん、自社ブランドに合わせたこだわりのデザインまで実現できます。

⇒専門知識不要ですぐに使える、ブラストメールのHTMLエディタの詳細はこちらから

1 HTMLメールとは
2 HTMLメールを作る2つの方法
- 2.1 HTMLを使って自分で作る方法
- 2.2 HTMLエディタを使って作る方法
3 HTMLメールの作り方【基礎】
- 3.1 HTMLメールのベースを作成する
- 3.2 HTMLメール内の共通事項を記述する
4 HTMLメールの作り方【実用】
5 HTMLメールを作る際の注意点
6 HTMLメール作成エディタを活用するとHTMLメールが簡単に作れる
- 6.1 HTMLメールエディタを利用するメリット
7 HTMLエディタが無料で使える「ブラストメール」
8 すぐに使えるHTMLテンプレートが30種類以上
9 まずは無料で「ブラストメール」を試してみよう
10 まとめ

HTMLメールとは

そもそも「HTMLメール」とは一体どんなメールのことを指すのか、厳密には理解していない方もいるのではないでしょうか。

HTMLメールに使われる「HTML」とは、Hyper Text markup language（ハイパーテキスト・マークアップ・ランゲージ）の略で、web上で使われる言語です。

文章と言ってもテキストメールのようにメールに直接文章を打ち込むものではなく、「HTMLタグ」を目印にして、web上でのみ認識される特別な文章のことを指します。

HTMLタグとは「<>」に囲まれているのが特徴です。例えば、以下の4つはHTMLメールやWebページでよく使われるHTMLタグです。

<h1>（見出し）
<img>（画像の表示）
<p>（段落を指定する）
<strong>（太文字）

他にもたくさんのHTMLタグがありますが、このようなタグを使うことで、「ここは見出し」、「この文字は太文字」といったように細かな指定をして、HTMLメールの基礎を作っています。

HTMLメールの基礎と言ってもなかなかイメージしづらいと思うので、実際にHTMLタグを記述したwebページを見てみましょう。

ご覧のように文字が「<>」で囲まれたHTMLタグで挟まれているのがわかるかと思います。

これが、web上では下の画像のように表示されます。

ちなみに今ご覧になっているこの記事を含めて、web上の記事の全ては「HTMLタグ」によって構成され、後述する「CSS」によって装飾が施されています。「文字の色・大きさ」から、「改行」のような細かな部分に到るまで、web上では目に見えるほとんど全てのものに「HTMLタグ」と「CSS」が関係しています。

「HTMLメール」とはこの「HTMLタグ」と「CSS」をメールに使って装飾を施したメールのことを呼ぶのです。他にも文字のみで書かれている「テキストメール」や文字に装飾を入れた「リッチテキスト」メールなどがあります。これらの違いは下記の記事で詳しく解説してあるのでご参照ください。

HTMLメールとテキストメールの違い

メールには大きく分けて「テキストメール」と「HTMLメール」の2種類があります。

テキストメールは、その名の通りテキストのみで構成されておりシンプルな形式です。一方、HTMLメールはリッチコンテンツが盛り込まれた形式で、画像の挿入や文字装飾などに加えURLへのリンクを使うことができます。

HTMLメールはブランドイメージを視覚的に強調したり、サービス情報やイベント情報などを視覚的に表現できるため、開封率やクリック率を向上させることができます。そのため、現代では多くの企業がHTMLメールを使ってメールやメルマガを配信しています。

メルマガもHTMLメールが主流に！

テキストメールとは違い、デザイン性が高い「HTMLメール」でのメルマガは、訴求力も高く、上手に使うことができれば、自社のサービス・商品を宣伝する上での大きな味方になってくれるでしょう。

「一般社団法人日本ビジネスメール協会」の調査によれば、2011年〜2018年までの7年間で「HTMLメール」や同じくHTMLタグを使った「リッチテキストメール」の会社での使用率が約1.５倍にまで伸びています。オフィシャルの場でも「HTMLメール」が浸透してきている証拠ですね。

また、スマホの普及に伴って、文字だけのメルマガは少なくなっています。視覚的な訴求が主流になってきている現代では、文字だけを並べた「テキストメール」よりも装飾が施された「HTMLメール」の方が、読者にも受け入れられやすい環境になっています。

HTMLメールのメリットとデメリット

HTMLメールの最大の特徴はデザイン性の高いメルマガが配信できることです。文章だけでなく、画像などを挿入することで視覚的に訴求でき読者から興味を持ってもらいやすくなります。

また、HTMLメールではメールの開封率とクリック率を計測することができます。利用するサービスにもよりますが、多くのメール配信システムではHTMLメールでの効果測定が可能となります。

一方で、HTMLメールにはデメリットも存在します。例えば、メールクライアントによってはHTMLの表示が崩れることがあります。意図した表示がされないことによって思い通りの訴求ができずクリック率が下がったり、ブランドイメージを損なう可能性もあります。また、テキストメールに比べてファイルサイズが大きくなるため、読み込みに時間がかかることもあります。

ただし、最近ではHTMLメールに対応したメールサービスがほとんどです。これらのメリットとデメリットを理解し、適切に使い分けることが重要です。

HTMLメールとCSSの関係

先述したCSSとはHTMLと組み合わせて使う言語のことで、正式な名称は「Cascading Style Sheets（カスケーディングスタイルシート）」と言います。

スタイルシート、と呼ばれているくらいなのでCSSの役割はHTMLメールやwebページのスタイルを定義することで、HTMLタグによって定義された文字や画像を、どのように配置・装飾するかを決めています。

HTMLタグとCSSを組み合わせてHTMLメールを作ることで、デザイン性の高いメルマガを作ることができるでしょう。

おしゃれなメールを作成する自信がないという方は、有名企業のメルマガやデザイン案を集めたサイトを参考にしましょう。詳しくはこちらをご参考ください。

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

HTMLメールを作るには主に2つの方法があります。それぞれのメリット・デメリットを見てみましょう。

HTMLを使って自分で作る方法

この方法のメリットは、オリジナルで作り込める点です。HTMLを使ったメールの最大の特徴は、その表現力にあります。ある程度の制限はありますが、Webサイトのように自由に文字の大きさや色、画像の配置などを決められます。

自社商品やブランドの世界観を表現したオリジナルのメールを作ることもできるため、よりユーザーにインパクトを与えられるのが特徴です。

一方、デメリットとしては、HTMLのタグや仕組みについての知識が必要な点、時間とコストがかかる点が挙げられます。HTMLの知識がない場合、調べたり勉強したりしなければなりません。知識を得るには時間もかかります。また、HTMLの知識があったとしても、HTMLメールには特有のルールや注意点があるため、それらをきちんと把握しておく必要があるでしょう。

さらに、一から自分で作るとなると、後述するエディタを使って作成する方法と比較して時間がかかるため、その分コストもかかります。これらの特徴を踏まえると、HTMLを使用したメール作成は、HTMLの知識がある方や人とは違うオリジナリティのあるメールを作りたい方におすすめです。

なお、詳しい作り方はこのあと『HTMLメールの作り方【基礎】』で紹介しています。

HTMLエディタを使って作る方法

この方法は、HTMLの知識がなくても簡単に作れる点がメリットです。テンプレートやパーツなどが用意されているため、それらを使って簡単にメールを作れます。また、自作の場合と比較して短時間で済むため、コストも削減できるでしょう。

一方、自作と比較してオリジナリティや自由度が低いことが難点です。エディタを使用する場合、テンプレートや用意されたパーツなどを使うことになります。そのため、自作と比較してオリジナリティや自由度が損なわれる恐れがあるのです。

エディタを使用したメール作成は、HTMLの知識がない方、時間やコストをかけず簡単に作りたい方に向いているといえます。なお、詳しい作り方は記事の後半『エディタで楽にHTMLメールが作れる』で紹介しています。併せてご覧ください。

HTMLメールの作り方【基礎】

ここからは、実際に「HTMLメール」を作る方法をご紹介します。ただし、効果的なHTMLメールを自力で作成するには、HTMLやCSSに関する基本的な知識が必要です。現状では、HTMLタグとCSSを組み合わせて自力でHTMLメールを作成することも可能ですが、多くの場合はエディタやテンプレートを使って簡単に作成する方法が主流です。

この記事では、HTMLメールをゼロから作成する方法をご紹介しますが、専門知識がない方やもっと手軽にHTMLメール作りたい方はメール配信システムを活用する方法も参考にしてください。

HTMLメールのベースを作成する

まずはHTMLメールの基礎となるHTMLタグをテキストエディタに記述しましょう。HTMLメールの作成は「DOCTYPE宣言（文章型宣言）」から始まります。HTMLにはいくつかのバージョンがあり、バージョンごとに使用できるタグや属性の名前、配置の仕方などが異なっています。

DOCTYPE宣言とは、これから作成する文章がHTMLであることや、どのHTMLのバージョンなのかをプログラムに伝える役割を持っています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
　<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,maximum-scale=1.0,user-scalable=yes">
　<meta http-equiv="Content-Language" content="ja">
　<meta charset="shift_jis">
　<title>タイトル</title>
</head>
<body>
　<!-- コンテンツをここに記述してください -->
</body>
</html>

上記のDOCTYPE宣言ではこれから始まる文章がHTMLであることと、「HTML 4.01移行型DTD（Transitional）」というバージョンであることを宣言しています。また、HTMLメールの作成では・というHTMLタグがないと、どれだけ他にHTMLタグを記述しても、HTML形式で展開されません。

HTMLメールは「HTML 4.01 Transitional」を使うことが多いですが、最近は「HTML5」も利用されるケースが増えています。HTML5では<!DOCTYPE html> だけでDOCTYPE宣言が済むため、よりシンプルです。

<!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>

この例では、文字エンコーディングに「UTF-8」を指定し、レスポンシブデザインに対応するために<meta name=”viewport”>を追加しています。

HTMLメール内の共通事項を記述する

次に、作成するHTMLメールで共通して使用するフォントやスタイルをCSSで指定します。スタイルの記述には「埋め込み形式」や「インライン形式」がありますが、メールクライアントによっては埋め込み形式のCSSが正しく反映されないことがあるため、インラインスタイルが推奨されます。

インラインスタイルの例

<p style="font-family: 'Meiryo', sans-serif; font-size: 16px; color: #333;">
　こちらはインラインスタイルが適用された段落です。
</p>

埋め込み形式の例

<style type="text/css">
　body {
　　font-family: "Meiryo", sans-serif;
　　color: #333;
　　width: 100%;
　}
</style>

埋め込みスタイルはすべてのメールクライアントで対応しているわけではないので、重要なスタイルはインラインで指定するのが安全です。

HTMLメールの作り方【実用】

HTMLメールでは、レイアウトをテーブルで作成するのが一般的です。ここからは、テーブルレイアウトやインラインCSSを使った具体的な作り方を紹介します。

HTMLメールの作成でよく使われる「テーブル（table）」とは

テーブルレイアウトとは、表（テーブル）を作るためのHTMLコードを使ったレイアウト手法です。本来はデータの表を表示するために作られたものですが、HTMLメールのレイアウトを安定させるために使用されています。

現在のWebページではCSSによるレイアウトが主流ですが、メールクライアントの互換性の問題からHTMLメールではテーブルレイアウトが依然として多く使用されています。ここではテーブルレイアウトのメリットと作成方法を紹介します。

テーブルレイアウトのメリット

テーブルレイアウトの最大のメリットは、受信側のメールクライアントの環境に左右されずにHTMLメールのレイアウトを安定して表示できる点です。

テーブルレイアウトは古い手法ではありますが、CSSがサポートされないメールクライアントでも意図通りのデザインを維持するために効果的です。そのため、現在でも多くのHTMLメールで使用されています。

テーブルレイアウトの基本的な作り方

テーブルレイアウトを作成する際には、以下の4つのタグを使用します。

<table> タグ：メール全体のレイアウトの枠組みを作成します。
<tr> タグ：行（row）を作成します。
<th> タグ：見出しを作成します。
<td> タグ：データ（セル）を挿入します。

以下は、テーブルレイアウトの基本的な例です。

<table border="0" width="100%" cellspacing="0" cellpadding="0">
　<tr>
　　<th>会社名</th>
　　<th>部署</th>
　　<th>担当者</th>
　</tr>
　<tr>
　　<td>○○会社</td>
　　<td>人事部</td>
　　<td>田中</td>
　</tr>
</table>

このコードを使うと、以下のような表が生成されます：

会社名	部署	担当者
○○会社	人事部	田中

また、<th>タグや<td>タグの配置を変えることで、表のレイアウトを自由に変更することができます。作成したい形式に合わせて、タグの配置を工夫してみましょう。

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

HTMLメールを作成する際には、注意しなければならない点もあります。以下の2点について押さえておきましょう。

マルチパート設定をしよう

マルチパートとは、「受信者の環境によって表示形式を自動で切り替える」機能です。メルマガなど多くのユーザーに向けたメールを送信する際、全てのユーザーがHTMLメールを閲覧できる環境にあるとは限りません。

そこで、マルチパート設定をすることによって、マルチパート設定をすることにより、HTMLメールに対応していないデバイスには、自動的に「テキストメール」が表示されます。これによりメールが受信者に正しく届きます。

ただし、この設定にはある程度の専門知識が必要です。もし設定に自信がない場合は「ブラストメール」などのメール配信システムを活用すると簡単に行えます。

また、メールが正しく表示されない可能性に備え、HTMLメールの内容をサーバーにアップロードし、「メールが正しく表示されない場合はこちら」のリンクを設置しておくことも有効です。リンク先のページもレスポンシブデザインを使用して、スマートフォンでも適切に表示されるようにしましょう。

見やすい横幅に設定しよう

HTMLメールをパソコンとスマートフォンの両方から閲覧できるようにする際は、レスポンシブデザインを使用しましょう。レスポンシブデザインとは、閲覧しているデバイスの画面サイズに応じて表示を最適化するデザインのことです。

また、フォントサイズや行の文字数もデバイスに応じて調整することが重要です。フォントサイズは14px以上、1行あたりの文字数は45文字以内に設定するとスマートフォンでも読みやすいデザインになります。これにより、視認性の高いメールを作成でき開封率や反応率の向上につながります。

HTMLメールが迷惑メールに分類されないための対策

HTMLメールを送信する際、重要な点はメールが迷惑メールに分類されないようにすることです。多くのメールクライアントやプロバイダは、スパムフィルターを使用して迷惑メールを自動的に分類します。これを避けるためには、以下のポイントを押さえる必要があります。

件名や本文で不自然な大文字や記号を避け自然な文章を心がける
過度に画像を使用せずテキストとのバランスを取る
送信ドメインの認証設定（SPF、DKIM、DMARC）を正しく設定する

HTMLメール作成エディタを活用するとHTMLメールが簡単に作れる

今までお伝えしてきた方法以外にも、HTMLにCSSを記述する方法はありますが、やはりある程度IT関係の知識がなければ、効果的な「HTMLメール」を自力で作成するのは難しいでしょう。時間対効果で考えると、HTMLやCSSに詳しくない方は、ITに関する知識がある方にHTMLメールの作成をお願いし、他のアプローチでビジネスを進めていった方が効率的です。

しかし、メール配信システムに搭載されている「HTMLメールエディタ」という機能を使うことで、ITに詳しくない方でも簡単に「HTMLメール」を作成することができます。ブラストメールのHTMLメールエディタを例にとって簡単にご紹介します。

⇒HTMLメールエディタの詳細はこちら

上記のようなテンプレートの中から、好みのレイアウトを選択します。

メール全体や文章のカラー、画像、リンクボタンや、SNSアイコンなどを挿入していきます。ここまで説明したような、面倒な作業は必要としないので、直感的に作業を進めることができます。

「メールエディタ」でHTMLメールを作成する場合、HTMLやCSSの記述に関しての知識は全くと言っていいほど必要ありません。スマホ、PCのどちらでもレイアウトが崩れないようなデザインも可能です。

HTMLメールエディタ機能の多くは、このようなブロックを何個も組み合わせてメールを作っていく形式になっています。

初心者の方が、HTMLメールを一から作るとなると、端末によって綺麗に表示されなかったり、リンクが機能しない、レイアウトが崩れるといった不具合が頻発し、本来の目的であるメール配信にまで辿り着けないということがよくあります。

すぐにHTMLメールを使ったメール配信を行いたいなら、こうしたエディタ機能を利用することをおすすめします。

HTMLメールエディタを利用するメリット

改めて、HTMLメールエディタを利用するメリットをおさらいしましょう。

コーディングの知識が不要
HTMLやCSSの知識がなくても、誰でも簡単にHTMLメールを作成できるのが最大のメリットです。レイアウト崩れやリンクの不具合に悩むことなく、レスポンシブデザインにも自動で対応します。
効果測定が簡単に行える
HTMLメールは開封率やリンクのクリック率などのデータを取得することができます。データを分析することで、次回の配信に向けた改善が容易に行えます。
メールマーケティングの作業負担を軽減
HTMLメールエディタ機能を活用することで、初心者でも手間をかけずにHTMLメールを作成できるため本来のビジネス業務に集中できます。

このようにHTMLメールはエディタを使って効率よく作るのが主流となっています。特にメルマガ配信を担当するマーケティング担当者や営業担当者は、コーディングの知識を持っていないことがほとんどです。また、HTMLメルマガ配信をするためにエンジニアの稼働を使うのは非効率です。