Knowhow KNOWHOW

HTMLメールの作り方・作成時の注意点をわかりやすく解説

メールマーケティングは長年にわたり活用されているマーケティング手法です。SNSや動画コンテンツが広く浸透した現代においても、マーケティング施策として高いROI（投資効果）があることが知られています。

一方で、メールマーケティングを成功させるにはコンテンツの魅力を高めることが重要です。今回は、メールマーケティングに欠かせない「HTMLメール」について解説します。

HTMLメールとは
HTMLメールの特徴
HTMLメールの基本
HTMLメールの作り方
- HTMLを自分で記述する
- エディタ上で作成する
HTMLメールを効率よく作成するには？
- 埋め込み形式で作成する場合
- インライン形式で作成する場合
HTMLメールを作成する際の注意点
- PC表示とスマートフォン表示を分ける
- 画像は絶対パスで指定し、ALT属性を設定する
まとめ

HTMLメールとは

そもそもHTMLメールとはどのようなメールを指すのでしょうか。テキストメールとの違いやHTMLメールの重要性について押さえておきましょう。

HTMLで構成されたメール

HTMLメールとは、HTMLで構成されたメールのことを指します。HTMLを用いないメールはテキストメールと呼ばれており、HTMLメールとの大きな違いは「文字の装飾や画像挿入といった表現が可能かどうか」という点です。

HTMLでメールを構成することにより、テキストメールでは不可能だったデザイン性の高い表現が可能になります。皆さんが受け取ったことのあるメルマガなどの中には、文字に色が付いていたり、画像やイラストが埋め込まれていたりすることがあるでしょう。こうした装飾を施されたメールがHTMLメールと捉えてください。

メルマガはHTMLメールが主流になりつつある

HTMLメールとテキストメールの大きな違いは訴求力の高さです。テキストメールよりも多彩な表現が可能なHTMLメールは視覚的な効果が高く、訴求力にも優れていることが知られています。

一般社団法人日本ビジネスメール協会の調査によれば、ビジネスで活用されているメールのうち、2020年の時点で3割弱をHTMLメールが占めています。2011年にはHTMLメールの使用率が16％弱だったことを踏まえると、この10年あまりの間にHTMLメールの使用率が顕著に伸びているのです（※）。

メルマガ施策においても、近年はHTMLメールの使用が主流になりつつあります。多くのユーザーはHTMLメールを見慣れており、装飾ができないテキストメールよりもHTMLメールのほうが好まれる確率が高まっているのです。このように、メールマーケティングを成功させる上でHTMLメールは不可欠な存在となりつつあります。

※参考：一般社団法人日本ビジネスメール協会「ビジネスメール実態調査2020 」

WebサイトのHTMLとは別物

HTMLと聞いて、Webサイトに使われている記述言語HTMLを連想する人も多いでしょう。実は、Webサイトに使われているHTMLとメールに使用されるHTMLは根本的に異なります。WebサイトのHTMLは規格が定められているのに対して、HTMLメールには標準規格が存在しません。したがって、Webサイト構築で使用する記述方法をそのまま使うことはできないのです。

つまり、HTMLメールはどのメールクライアントで開いても同じ表示になるよう保証されているわけではありません。HTMLメールを作成する際には、できるだけ幅広い環境で正常に表示される記述方法を検討する必要があります。

HTMLメールの特徴

HTMLメールの主な特徴を紹介します。テキストメールとは異なる特徴を押さえて、HTMLメールを活用するために必要な予備知識を培いましょう。

効果検証に適している

HTMLメールの大きな特徴として、効果検証がしやすい点が挙げられます。HTMLメールに埋め込まれた画像が表示された回数をカウントできるため、メールの開封数を取得可能です。つまり、送信したメールのうち何割が開封されたのかを示す「開封率」を測定できます。

開封率を検証することによって、メールの件名や送信する曜日・時間帯などの改善に役立てられます。開封率が改善しない限り多くのユーザーにメールの内容を読んでもらえません。効果検証を通してメールマーケティング施策の改善に役立てられることは、HTMLメールの重要な特徴の1つといえます。

CSSによるスタイルの定義も可能

HTMLメールはCSSを使用したスタイルの定義にも対応しています。HTMLとCSSを組み合わせてHTMLメールを作成することにより、デザイン性の高いメルマガなどを作成できるのです。後述するように、近年はCSSを埋め込んだ形式のHTMLメールがよく使われています。スマートフォン、タブレット、PCなど多彩な環境でメールを閲覧するユーザーが増えていることに加え、各デバイスの画面サイズもまちまちです。こうした環境に対応するには、デバイスの画面サイズに応じて表示を最適化するレスポンシブデザインが求められます。CSSでスタイルを定義することによって、レスポンシブデザインへの対応も可能になるのです。

メールクライアントによって表示が変わる

前述の通り、HTMLには標準規格が存在しません。したがって、受信するメールクライアントによって表示がまちまちになる可能性が十分にあります。メールクライアントやデバイスの違いに加え、各OS・ソフトウェアのバージョンも加味すると、組み合わせは100万通り以上存在するのが実情です。よって、あらゆるデバイスで問題なく表示できるHTMLメールを作成するのはほぼ不可能といえます。

裏を返すと、HTMLメールを作成する際には「受信する環境によって表示が異なる」ことを織り込んでおかなくてはなりません。特定の条件下での表示のみを想定するのではなく、可能な限り幅広い条件で正常に表示できる記述方法を採用する必要があります。

HTMLメールの基本

HTMLメールを作成する際に押さえておきたい基本的な知識を紹介します。次に挙げる4つのポイントを踏まえてHTMLメールを作成しましょう。

冒頭でDOCTYPE宣言をする

HTMLメールを記述する際には、冒頭で「DOCTYPE宣言」をする必要があります。DOC TYPE宣言とは、文書がHTMLで作られていることや、そのバージョン・ルールなどをプログラムに知らせるためのコードのことです。

HTMLメールで多く使われているのは、HTML 4.01 TransitionalやXHTML 1.0 TransitionalといったHTMLのバージョンです。それぞれのDOCTYPE宣言は次のように記述します。

【HTML 4.01 TransitionalのDOCTYPE宣言】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

【XHTML 1.0 TransitionalのDOCTYPE宣言】

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

テーブルレイアウトで作成するのが一般的

HTMLメールでは一般的に「テーブルレイアウト」を使用します。テーブルレイアウトは本来、表組みのデータを記述する際に使用されるレイアウトです。表の枠内にコンテンツを配置するように記述することで、さまざまな画面サイズでメールを表示した際にデザインが崩れるのを防いでいます。

前に触れたDOCTYPE宣言でHTML 4.01 Transitional、またはXHTML 1.0 Transitionalを使用するのは、これらがテーブルレイアウトの使用が許容されているHTMLのバージョンだからです。Webサイトなどでよく用いられているarticle要素やsection要素は使用しない前提でHTMLメールを作成する必要があります。

CSSは埋め込み形式がよく使われる

HTMLメールの作り方には、HTMLを直接記述する「インライン形式」と、CSSをHTMLのヘッド部分に配置する「埋め込み形式」の2種類があります。スマートフォンでメルマガを閲覧するユーザーが増えている昨今では、レスポンシブデザインに対応しやすい埋め込み形式を採用するのが一般的です。

かつてはCSSを削除して表示するタイプのメールクライアントも少なくなかったことから、インライン形式でメルマガを作成するケースも多く見られました。しかし、近年は多くのユーザーを抱えるGmailを筆頭にこの問題が解消されつつあることから、よりリッチな表現に対応しやすい埋め込み形式が好まれているのです。

使用できない属性・タグが存在する

前述の通り、Webサイトでは問題なく使用できるHTMLの記述方法であっても、HTMLメールではサポートされていないケースがあります。たとえば、フォントの一括指定プロパティなどはその代表例です。メールクライアントによってはフォントの一括指定プロパティに対応していないものもあるため、使用を避けたほうがよいでしょう。

このように、一般的にWebサイトで用いられている属性・タグがHTMLでは利用できないケースがある点に注意が必要です。基本的にWebサイトの構築とは別物と捉え、HTMLメールに特化した記述方法を採用する必要があります。

HTMLメールの作り方

HTMLメールを作成する方法には、大きく分けて「自分でHTMLを記述する方法」と「エディタ上で作成する方法」の2種類があります。それぞれのメリット・デメリットを踏まえて、適切な作り方を選択しましょう。

作り方1：HTMLを自分で記述する

HTMLメールを自分で1から記述していく方法です。自由度が高く、文字の色や大きさ、画像の配置など自社が求める表現を指定できる点がメリットといえます。

一方で、HTMLをすべて記述する必要があることから、HTMLに関する知識やコーディングのスキルが求められる点がデメリットです。1通あたりのHTMLを作成する手間と時間がかかるため、担当者にとって大きな負担となりかねません。こうした工数の多さ・煩雑さは、HTMLをすべて記述する自由度の高さとトレードオフの関係にあるといえるでしょう。

作り方2：エディタ上で作成する

すでにHTML用のテンプレートやパーツなどが用意されているエディタ上で作成する方法もあります。HTMLを1から記述する必要がなく、通常のドキュメントと同じように直感的に作成できる点が大きなメリットです。HTMLやCSSに関する知識・スキルがない方でも、手軽にHTMLメールを作成できます。

ただし、あらかじめ用意されているテンプレートなどの範疇でHTMLを作成することになるため、HTMLを自分で記述する場合と比べて自由度は下がります。オリジナリティの高いデザインにしたいなど、こだわりがある場合はこの点がデメリットとなり得るでしょう。

HTMLメールを効率よく作成するには？

HTMLメールを効率よく作成するには、基本となるテンプレートを用意しておき、コンテンツを書き換える形で作成するとよいでしょう。埋め込み形式・インライン形式について、それぞれHTMLメールを効率よく作成する方法を紹介します。

埋め込み形式で作成する場合

埋め込み形式でHTMLメールを作成する場合、セクション内で情報を記述します。一例として、以下のように行間やフォント、パディング領域をCSSで指定しておくとよいでしょう。

【CSSの記述例】

<style type="text/css">
* {
  margin:0;
  padding:0;
}

* { font-family: "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif; }
img {
  max-width: 100%;
}

body {
  -webkit-text-size-adjust:100%;
  width: 100%!;
  height: 100%;
}
</style>

なお、HTMLのデザインテンプレートを提供しているWebサイトも複数あります。こうしたテンプレートを活用することで、デザイン性の高いHTMLを手軽に作成するのも1つの方法です。

【HTMLのデザインテンプレート配布サイトの例】
・ZURB　 https://zurb.com/playground/responsive-email-templates
・Antwort　 https://internations.github.io/antwort/
・BeeFree　 https://beefree.io/templates
・Mosaico　 https://mosaico.io
・HTMLメールテンプレート by Benchmark Email https://www.benchmarkemail.com/jp/resources/Free-HTML-Email-Templates/

インライン形式で作成する場合

インライン形式で作成する場合には、HTMLの各要素にstyle属性を追加することでデザインを指定します。たとえば、以下はHTMLメール内に画像を挿入する際の記述例です。

【HTMLの記述例】

画像挿入・文字サイズや色の指定など、さまざまなパターンのHTMLを雛型として用意しておくことで、毎回1からHTMLを記述することなく要素を組み合わせてHTMLメールを作成できます。

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

HTMLメールを作成する際に、とくに注意しておきたいポイントを紹介します。表示の不具合やデザインの崩れを防ぐためにも、次の2点は必ず押さえておきましょう。

PC表示とスマートフォン表示を分ける

メルマガの読者がPC・スマートフォンのどちらで表示した場合にも読めるよう、HTMLメールの横幅を指定しておく必要があります。この工程が抜けていると画面を横向きにスクロールしながら文章を読み進めなければならない・文字が小さすぎて読めないなど、読者のユーザビリティを低下させる原因となりかねません。

具体的には、PC表示用には横幅を600px前後に指定し、スマートフォンの場合は拡大縮小に対応できるよう100％に指定するとよいでしょう。

画像は絶対パスで指定し、ALT属性を設定する

HTMLメールに埋め込む画像は、必ず絶対パスで指定してください。絶対パスとは、https://から始まるURLのことを指します。Webサイトとは異なり、HTMLメールに掲載する画像ファイルはサーバー上を参照して取得できません。したがって、相対パスでは指定できない点に注意しましょう。

また、画像が正常に表示されなかった場合に備えてALT属性を設定しておくことも大切なポイントの1つです。メールクライアントや通信速度など、読者がHTMLメールを開く環境によっては画像が表示されないことが想定されます。ALT属性を設定することで、画像の内容を読者に伝えられるのです。

まとめ

HTMLメールはテキストメールと比べて視覚的な訴求効果が高く、近年ではメルマガの主流となっています。一方で、Webサイトで用いられるHTMLのように標準規格が存在しないことから、記述する際には押さえておくべき注意点が複数あるのも事実です。

今回紹介したポイントや注意点を参考に、ぜひHTMLメールを効率よく作成し、メルマガの魅力を存分に伝えてください。HTMLメールを適切に活用していくことで、読者にとって有益な情報を届け、メルマガの信頼性を高めることにもつながるはずです。