【初心者向け】HTMLメール制作・配信で知っておきたい5つのポイント

2019-03-12（更新：2020-11-26）ラボ編集部

メール配信 HTMLメール

写真やイラスト、アニメーションなどを利用して、幅広い表現が可能なHTMLメール。

文字だけではなく、写真やイラストを使用することで、より具体的なイメージを読者に与えられるため、非常に効果的なメールマーケティング手法のひとつです。

ここではHTMメール制作の初心者の方に向けてHTMLメールの作り方、流れの基礎をご紹介していきます。

HTMLメールを制作するには、HTMタグなどの知識をある程度知っておく必要があります。

本記事では、HTMLメールを制作するうえで、最低限抑えておきたいいくつかの知識を紹介していきます。

目次[非表示]

1.HTMLメール制作の前に知っておきたい５つのポイント

1.1.ポイント１：テキストメールとHTMLメールの違いを理解する

1.1.1.テキストメール
1.1.2.HTMLメール

1.2.ポイント２：基本的なHTMLタグを理解する
1.3.ポイント３：文章、画像などの要素を理解する
1.4.ポイント４：CSSのルールを理解する
1.5.ポイント５：メーラーによってHTMLの解釈に差があることを理解する

2.HTMLメールの制作の際に知っておきたい５つの流れ

2.1.ポイント１：基本構造となるHTMLを記述する
2.2.ポイント２：メールは要素単位に分割して構成する
2.3.ポイント３：装飾はインラインスタイルで行うようにする
2.4.ポイント４：CSSで文字サイズや色を装飾する
2.5.ポイント５：PCとスマートフォン向けで表示崩れが起きないようスマホ用CSSを作成する

3.HTMLメール配信の際に知っておきたいこと

3.1.メール配信系機能

3.1.1.ステップメール配信機能
3.1.2.セグメント配信機能
3.1.3.A/Bテスト

3.2.メール分析機能

3.2.1.開封率分析
3.2.2.リンククリック分析

4.HTMLメール制作についてまとめ

HTMLメール制作の前に知っておきたい５つのポイント

ポイント１：テキストメールとHTMLメールの違いを理解する

メール配信の形式には、HTMLメールの他に「テキストメール」があります。

テキストメール

内容が文字のみで構成されたメールです。

日常的に使われるメールと同じ形式のため専門的な知識・ツールがなくても制作は可能です。

その一方で、テキストのみの表現となるため、視覚的な訴求がしにくいというデメリットも存在します。

HTMLメール

HTMLというWebページ制作等に用いられるマークアップ言語を用いることで、文字サイズや色の変更や、画像の表示など、自由度高いレイアウトが可能なメール形式です。

テキストメールに比べ視覚に訴えることで、受信者に具体的なイメージを伝えることができます。

ポイント２：基本的なHTMLタグを理解する

HTMLメールを制作するためには、HTMLの記述やタグの種類を理解しておく必要があります。

まずHTMLは、文書型を宣言する「DOCTYPE宣言」を先頭に記述します。

これにより、続く文書がHTMLであること、また、HTMLのバージョンなどの情報をWebブラウザに知らせます。

次にHTML文章は、<html>、 <head>、 <body>という3つのタグで構成することを理解しておく必要があります。

ポイント３：文章、画像などの要素を理解する

HTMLメールを記述する際には、<table>タグを使い、文書全体を構造化しながら進めていきます。

これをテーブルレイアウトと呼びます。

<tr>タグで行を作り、表示したい文章をタグでセルを作り、そのセルの中にテキストなどの各要素を入れてデータを定義していきます。

また、画像データを使う場合は<img>タグで画像のリンクをくくることで、メール本文に差し入れることが可能です。

ポイント４：CSSのルールを理解する

フォントのサイズなどテキストの装飾を変更したい場合、CSSを用いて指定します。

CSSを使うと通常のテキストでは表現できない、色合いや装飾が可能になります。

ポイント５：メーラーによってHTMLの解釈に差があることを理解する

HTMLメールは受信者のメーラーの種類やバージョン・設定によって、表示結果が異なることが度々おこるため、注意が必要です。

HTMLメールの制作の際に知っておきたい５つの流れ

ポイント１：基本構造となるHTMLを記述する

HTMLメール制作の工程は大きく分けると、文書や画像などを記述する「マークアップ」と、文章をCSSで装飾する「スタイリング」の2つが主な工程です。

マークアップは、主にタグなどを使ってメール全体の骨格を定義し、構造化する作業です。

これに対してスタイリングは、主にマークアップに対して装飾の情報を与えていく作業となります。

ポイント２：メールは要素単位に分割して構成する

HTMLメールを制作する際は、メールの「本文」、大見出しや中見出しなどの「見出し」、「画像」などの要素単位に分解して構成を考えていきます。

この流れを主にコンポーネント化と呼びます。

コンポーネントの内容を適宜編集して組み合わせ、積み上げていくことにより、全体に統一感のあるメールを効率よく作成できます。

ポイント３：装飾はインラインスタイルで行うようにする

HTMLには見出しをつけるための<h1>、<h2>タグや、フォントの大きさを変えるための<font size>タグなど、装飾用のタグが多数存在します。

しかし、HTMLメールではこれらのタグは使用せず、代わりにテーブルレイアウト方式で記述したテキストブロックに CSSによるインラインスタイルでまとめて装飾していく方式が主流です。

ポイント４：CSSで文字サイズや色を装飾する

CSSの代表的なタグには、フォントの大きさを指定する<font-size>や、文字の太さを指定する、<font-weight>、文字色を決める<color>などが存在します。

値を設定することで、任意のレイアウトを実現できます。

このほかにも、テーブルセル内の余白サイズを指定する<cellpadding>、セルの間隔を決める<cellspacing>、枠線の太さを指定する<boder>などもあります。

ただし、これらはHTMLメールの場合には必要がないケースが多いため、いずれの値も0を指定するのがオススメです。

ポイント５：PCとスマートフォン向けで表示崩れが起きないようスマホ用CSSを作成する

現在はメールをスマートフォンなどで閲覧することが多くなってきています。

このため、小さな画面でも快適に読めるようにするため、画面サイズに合わせてレイアウトを変化させる「レスポンシブメール」を作成することをおすすめします。

レスポンシブメールを作成するには、CSSの機能である「Media Queries（メディアクエリ）」を用います。

これによって、たとえば画面幅が一定のサイズ以下のデバイスでは、そのサイズに対応したレイアウトが適応されます。

より詳しいことを知りたい方はこちら↓

HTMLメールの作り方とは？作成の基本から応用的なテクニックまでご紹介

HTMLメール配信の際に知っておきたいこと

HTMLメールに限った話ではありませんが、ここでどんなメール配信手法があるのか簡単に説明します。

メール配信系機能

ステップメール配信機能

ステップメールとは特定の日付や行動を起点として定期的かつ自動的に配信するメールです。

たとえばお客様が商品を購入してから、1カ月後、2ヶ月後に使用状況を尋ねたり、追加でおすすめの商品情報を配信したりします。

ステップメールは目的によって配信内容は大きく異なります。

資料請求から本購入/契約を促すためのステップメール。
商品購入後から再購入(Life Time Value向上)を促すためのステップメール。

こういった情報はテキストメールで配信するより、HTMLメールで配信する方が視覚的に訴求できるので効果的です。

また、ステップメール開始後3カ月-6ヶ月程度は定期的にコンテンツ改善が必要ですが、それ以降は基本的にメンテナンス頻度は年に1回程度で継続した成果を上げることができます。

費用対効果という面でもステップメールは有効な配信方法です。

ステップメールに関してもっと知りたい方はこちらの記事を参考にしてみてください。

こんなにスゴい！ステップメール活用５つのメリット成功事例を大公開！

セグメント配信機能

セグメント配信はある属性や条件に合わせて配信する手法です。

たとえば、男性と女性に分けて、一部だけ異なるメールを配信します。

伝えたいメッセージが同じでも、配信相手の属性が変われば受け取り方はさまざまです。

メッセージの表現を変えてセグメント配信することでクリック率やコンバージョン率も変化していきます。

A/Bテスト

メール配信におけるA/Bテストは大きく2つあります。

ひとつは、件名だけを変えて配信すること。

もう一つはメインビジュアルを変えて配信することです。

A/Bテストなので基本的な条件は同じで1カ所だけ内容を変えることが鉄則です。

複数内容を変更して配信してしまうと、結果を見たときに要因がわかりづらくなってしまうためです。

どんなに心を込めてメールを作ったとしても、開封率は20～30％程度です。

また、メールを最後までくまなく見る読者はほとんどいないと考えた方が妥当です。

A/Bテストはたしかに大事ではありますが、やりすぎても労力に対する結果がついてくることは少ないので、ほどほどにしておくことをおすすめします。

メール分析機能

開封率分析

開封率に影響する要因は「件名」です。

お客様は日常的に多くのメールを受信します。

その中から興味を持っていただくには件名で興味を引くものにしなければなりません。

他にもプレヘッダーというものがあります。

これは任意の内容を件名のすぐ下に表示させることができるものです。

以下のソースコードを<body>タグの直後に記述することで実装できます。

受信者の環境によりますが、表示されるのは40文字程度です。

<!-- プレヘッダー -->
<table border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:○○px;">
<tr>
<td style="width:0;min-height:0;mso-hide:all;font-size:0;"><span style="color:#f3f3f3;font-size:0;line-height:0;">プレヘッダーが入ります。</span></td>
</tr>
</table>

リンククリック分析

リンククリック率はコンテンツの導線設計が大きく影響を与えます。

先ほども書いたとおり、メールをじっくり見る読者は少ないです。

伝えたい内容にもよりますが、メールからランディングページに遷移させたい場合は余計な内容は省き、読者がメールを開封したらすぐにクリックして遷移できる導線にするとクリック率は改善されます。

HTMLメール制作についてまとめ

HTMLメールを上手に活用することで、テキストメールでは実現できない、デザイン性の高いメールを制作することができます。

テキストメールに比べ表現力が飛躍的に向上するため、より効果的な商品・サービスのアピールが可能となります。