HTMLメールの効果的な作り方　基礎（初心者向け）から実践まで

TOPお役立ち情報メール配信・メールマーケティングHTMLメールの効果的な作り方　基礎（初心者向け）から実践まで

公開日:2022/11/18
更新日:2023/08/15

近年、メルマガはマーケティングの効果的手法の一つとして認識されています。多くの企業がマーケティングにメルマガを活用しており、それゆえに他社との差別化のためにも写真の挿入や文字の装飾が施されたHTMLメールの重要性が増しています。本記事ではHTMLメールとは何か解説した上で、HTMLメールを作成する際の基礎知識や効果的な作り方、ポイントと注意点などについて解説します。

メールマーケティングとは？基礎知識ややり方、メリットについてご紹介！ – SMS送信サービス「KDDIメッセージキャスト」

メールマーケティングツールとは？特徴やメリット・比較の仕方を解説 – SMS送信サービス「KDDIメッセージキャスト」

1 そもそもHTMLメールとは
2 HTMLメールの特徴
3 HTMLメールを作る前の基礎知識
4 HTMLメールの効果的な作り方
- 4.1 埋め込み形式の場合
- 4.2 インライン形式の場合
5 HTMLメールのポイントと注意点
6 目的によってはSMSの方が使いやすい場合も
7 法人向けSMS送信サービスなら「KDDI Message Cast」
8 まとめ

そもそもHTMLメールとは

HTMLメールとはHTMLで構成された電子メール全般を指します。HTMLメールは本文に画像を挿入できる他、文字に色付けもできます。テキストメールよりも華やかな見た目に仕上げることもできるため販促や物販にも効果的です。

アメリカのHubSpot社の調査では、回答者のうち65％が画像を含むHTMLメールを好むことが明らかにされています。一方、テキストメールを好むと答えた人は35％です。

テキストメールとは？HTMLメールとの違いや使い分け方を徹底解説！ – SMS送信サービス「KDDIメッセージキャスト」

HTMLメールの特徴

HTMLの特徴は次の4つです。

WebのHTMLとは異なる
効果検証が行いやすい
メールクライアントによって変わる
CSSを活用してメールを装飾できる

それぞれ詳しく解説します。

WebのHTMLとは異なる

HTMLメールはWebページのHTMLと異なるものであることを理解しておくようにしましょう。

例えば、HTMLメールには標準的なサポートが存在しないため、問題点や疑問点について自身で解決策を導き出す必要があります。

また、HTMLメールは100万種類以上の閲覧環境が存在しているため、Outlookなどマージンがサポートされていないクライアントがいる他、divを使えないケースもあります。

HTMLメールを利用する際は最新のCSS仕様、および一般的なHTMLが役立たないことを覚えておきましょう。

効果検証が行いやすい

HTMLメールではメールクライアントがメールを開封したか確認できる開封数を取得できます。

開封数はHTMLメールに挿入されている画像が読み込まれるごとにカウントされます。画像の読み込み数の取得により、配信したメールの件数から開封率の算出が可能です。

効果検証を行うことで、送信相手の反応によってメールの改善を行えます。開封率が低いメールを送り続けても効果は期待できないでしょう。開封率が低い場合、件名をより読者の興味を惹くものに変更する必要があります。また、クリック率が低い場合は件名とコンテンツの乖離を洗い出す他、より魅力的なコンテンツの作成が必要です。

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

すべてのメールクライアントが閲覧できるHTMLメールはありません。

スマートフォンの普及によって、HTMLメールをさまざまな環境で閲覧できるようになりました。こうした状況に対応するため、複数のメールクライアントとデバイス、およびこれらのバージョンの組み合わせでの閲覧が想定されています。

そのパターンは100万種類以上と膨大な量です。そのため、すべての環境で閲覧可能なHTMLメールの作成は不可能に近いといえます。

CSSを活用してメールを装飾できる

CSSはCascading Style Sheetsの略語で、HTMLと組み合わせて使う言語です。

スタイルシート（Style Sheets）という言葉が入っているCSSはHTMLメールやWebページのスタイルを定義し、HTMLタグで定義された文字や画像の配置や装飾を決められます。

CSSとHTMLタグを掛け合わせてHTMLメールを作成することで、初心者でも優れたデザインのメルマガを作成できます。

HTMLメールを作る前の基礎知識

HTMLメールを作る前の基礎知識は次の4つです。

DOCTYPE宣言をする
テーブルレイアウトで構成する
CSSは埋め込み形式を使う
避けた方がいい属性・タグ

それぞれ詳しく解説します。

DOCTYPE宣言をする

DOCTYPE宣言とは、この文書がHTMLであること、HTMLのバージョン、HTMLタグ、HTML、およびCSSがどのルールに該当しているのかをプログラムに知らせるためのコードです。

HTMLメールの作成はDOCTYPE宣言から行うのが一般的です。

HTMLメールを作成する際は、テーブルレイアウトの使用が許容されているHTML 4.01 TransitionalやXHTML 1.0 Transitionalの宣言をします。

HTML 4.01 TransitionalとXHTML 1.0 Transitionalの宣言方法は以下のとおりです。

HTML 4.01 Transitionalの宣言

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

XHTML 1.0 Transitional」の宣言

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

この３つのうちのいずれか

テーブルレイアウトで構成する

HTMLメールの作成はテーブルレイアウトで行うのが一般的です。

モバイルやデスクトップで閲覧する際はarticle要素やsection要素よりも、テーブルレイアウトの方が好都合です。

また、tableタグを組む際はcolspanとrowspanの適切なサポートは受けられません。そのため、colspanとrowspanを使わず組み立てなければなりません。

CSSは埋め込み形式を使う

リッチなHTMLメールにはCSSが含まれています。CSSとは書式設定やコンテンツのスタイルを行うものです。CSSを活用することで、リンクの色や見出しのフォントなどを設定できます。

CSSを用いる際は埋め込み形式、インライン形式のいずれかを利用することが一般的です。

以下、埋め込み形式とインライン形式について詳しく説明します。

埋め込み形式

埋め込み形式はCSSをHTMLドキュメントのヘッド部分に配置するための形式です。スマートフォンが普及している昨今、レスポンシブ・デザイン需要の増加により人気が向上しています。

電子メールクライアントの中にはタグに埋め込まれているCSSを取り除く人も少なくないようです。Gmailにおいてこの問題が多く見られましたが、現在ではサポートに対応できるようになっています。

インライン形式

インライン形式はHTMLに直接記述を行う形式です。

インライン形式はメールクライアント間でレンダリングの適合性を保証するにあたり信頼できる方法です。

ただし、インライン形式にはデメリットもあります。管理の難易度が高い他、作成に長時間を要します。また、思ったように機能しないことも多く、コンテンツが表示されないといった問題が指摘されています。

避けた方がいい属性・タグ

前述したとおり、すべてのメールクライアントが閲覧できるHTMLメールの作成は不可能でしょう。

しかし、多くのメールクライアントが閲覧できるよう作成することは可能です。例えば、サポートしているメールクライアントが少ないフォントサイズの一括指定プロパティ（style = “font：8px / 14px Arial、sans-serif;”）を避けるのも一つの方法です。

サービス資料ダウンロード(無料)

お問い合わせ・無料トライアル

HTMLメールの効果的な作り方

埋め込み形式の場合

埋め込み形式でHTMLメールにCSSを記載する方法を見ていきましょう。

埋め込み形式の特徴はセクション中の情報の記載です。

以下は埋め込み形式でCSSを記載した例になります。

<style type="text/css">
* {
   margin:0;
   padding:5px auto;
}
* { font-family: "ＭＳ ゴシック",sans-serif; }
img {
   max-width: 90%;
}
body {
   -webkit-text-size-adjust:100%;
   width: 100%!important;
   height: 100%;
}
</style>

上記の記述が間に入る形になります。

このソースコードでは、CSSで行間やフォント、パディング領域などを指定しています。

例文の最後にある</style>の後で</head>が記載され、本文が始まります。

インライン形式の場合

インライン形式はHTMLのデザインの指定を行うCSSを適用するための方法です。

HTMLの各要素にstyle属性を追加したコードを記述します。

インライン形式ではHTMLタグの「<要素名 style=”～”>」のような形で記述を行います。

フォントのサイズ、および色なども「””」の間にCSSを入れることでHTMLタグとして設定可能です。

<img src="img_01.jpg" alt="SMS画像" style="width:200px; margin:0; padding:10px; border:none;"/>

上記のソースコードは、画像を挿入してCSSをインライン形式で追加したものです。

HTMLメールのポイントと注意点

HTMLメールのポイントと注意点は次の4つです。

メールの横幅はスマホとPCで変える
画像を正しく表示する
ATL属性を設定しておく
画像は絶対パスで指定する

それぞれ詳しく解説します。

メールの横幅はスマホとPCで変える

HTMLメールの横幅はスマホとPCで変えなければなりません。

PC用の横幅は600px前後に設定しましょう。この横幅は多くのPCメールクライアント、およびWebメールに適しています。

一方、スマホ用の横幅は画面の横幅に合わせて拡大縮小できるように100%指定で設定します。スマホと一括りでいっても画面の大きさは機種によって異なるため、横幅に合わせて拡大縮小できるよう設定しておく必要があります。

レスポンシブデザインに対応しない場合は、PCとスマホで同様の横幅のHTMLメールを表示するよう設定します。画面のサイズが小さいスマホでの見え方に合わせて、横幅の設定は小さめにしておきましょう。PCのサイズに合わせた場合、スマホで見た場合に文字が小さすぎて読めない、画像が欠けるといった問題が生じます。