お客様に自社のサービスや商品を広告するメルマガは、数あるマーケティングの方法の中でも高い効果を持っています。
高い訴求力をもつメルマガですが、効果的に訴求ができるメルマガを自力で作成するには、ある程度のIT関連の知識が不可欠でしょう。
写真や文字に装飾のある「HTMLメール」はメルマガを使ったマーケティングでは主流になっています。
そこで今回は、メルマガ広告の土台をなす「HTMLメール」の作成方法に関してご説明していきたいと思います。
また、「HTMLメール」を1から作る方法の他に、とても簡単に「HTMLメール」を作る事ができる「エディタ」というシステムをこっそりご紹介しています。
ビジネスにメルマガを導入しようと思っている方はもちろん、すでに「HTMLメール」を使った広告を導入している方もぜひご覧ください。
直観的な操作で思い通りのHTMLメールを作るならブラストメールのHTMLエディタがおすすめです。
テンプレートを使って誰でも簡単にデザインはもちろん、自社ブランドに合わせたこだわりのデザインまで実現できます。
目次
HTMLメールとは
そもそも「HTMLメール」とは一体どんなメールのことを指すのか、厳密には理解していない方もいるのではないでしょうか。
HTMLメールに使われる「HTML」とは、Hyper Text markup language（ハイパーテキスト・マークアップ・ランゲージ）の略で、web上で使われる言語です。
文章と言ってもテキストメールのようにメールに直接文章を打ち込むものではなく、「HTMLタグ」を目印にして、web上でのみ認識される特別な文章のことを指します。
HTMLタグとは「<>」に囲まれているのが特徴です。
例えば、
- <h1>（見出し）
- <img>（画像の表示）
- <p>（段落を指定する）
- <strong>（太文字）
などはHTMLメールやWebページでよく使われるHTMLタグです。
他にもたくさんのHTMLタグがありますが、このようなタグを使うことで、「ここは見出し」、「この文字は太文字」といったように細かな指定をして、HTMLメールの基礎を作っています。
HTMLメールの基礎と言ってもなかなかイメージしづらいと思うので、実際にHTMLタグを記述したwebページを見てみましょう。
ご覧のように文字が「<>」で囲まれたHTMLタグで挟まれているのがわかるかと思います。
これが、web上では下の画像のように表示されます。
ちなみに今ご覧になっているこの記事を含めて、web上の記事の全ては「HTMLタグ」によって構成され、後述する「CSS」によって装飾が施されています。
「文字の色・大きさ」から、「改行」のような細かな部分に到るまで、web上では目に見えるほとんど全てのものに「HTMLタグ」と「CSS」が関係しています。
「HTMLメール」とはこの「HTMLタグ」と「CSS」をメールに使って装飾を施したメールのことを呼ぶのです。
他にも文字のみで書かれている「テキストメール」や文字に装飾を入れた「リッチテキスト」メールなどがあります。これらの違いは下記の記事で詳しく解説してあるのでご参照ください。
関連記事：HTMLメールとリッチテキストメールの違いとは。両者の違いをはっきりさせよう！
テキストメールとの違いは以下の記事にまとめてあります。
関連記事：HTMLメールとは？テキストメールとの違いを徹底解説！
メルマガもHTMLメールが主流に！
テキストメールとは違い、デザイン性が高い「HTMLメール」でのメルマガは、訴求力も高く、上手に使うことができれば、自社のサービス・商品を宣伝する上での大きな味方になってくれるでしょう。
「一般社団法人 日本ビジネスメール協会」の調査によれば、2011年〜2018年までの7年間で「HTMLメール」や同じくHTMLタグを使った「リッチテキストメール」の会社での使用率が約1.５倍にまで伸びています。
オフィシャルの場でも「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メールを自力で作成するには、ある程度のITに関する知識が必要です。
したがって、現状として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>
上記のDOCTYPE宣言ではこれから始まる文章がHTMLであることと、「HTML 4.01移行型DTD（Transitional）」というバージョンであることを宣言しています。
また、HTMLメールの作成では・というHTMLタグがないと、どれだけ他にHTMLタグを記述しても、HTML形式で展開されません。
HTMLメール内の共通事項を記述する
作成するHTMLメールの中で「共通事項」として使うフォントやCSSスタイルを記述していきます。
記述の仕方は「埋め込み形式」や「インライン形式」などがありますが、詳しい記載の方法は後ほどご紹介しております。
フォントなどを指定する際にスマートフォン表示用のCSSを追加しておかないと、スマートフォンでHTMLメールを確認した時に表示が乱れてしまう可能性があります。
スマートフォンでもコンテンツを見やすく表示するには、端末の画面幅に合わせてコンテンツの表示を最適化するために以下のような記述をタグ内に記述する必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
もしくは
<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,maximum-scale=1.0,user-scalable=yes">
PCでHTMLメールのビジュアルを確認した時は普通に展開されていたのに、スマートフォンで表示が乱れてしまった場合は、この作業に問題がある可能性が高いので注意しましょう。
HTMLメールの作り方【実用】
ここからは、HTMLメール内で使われるフォントやCSSスタイルを記載する方法をご紹介していきます。
CSSを書き込む方法には「埋め込み形式」「インライン形式」などがあります。
他の記事や書籍でもいくつかの方法が紹介されていますが、この2つはよく使われている記述の方法です。
「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%!important;
height: 100%;
}
</style>
上記の記述が間に入る形になります。
今回は、行間（マージン）やパディング領域、フォントなどをCSSで指定しています。
例文の最後にある</style>の後に</head>が記載され、本文にあたる部分が始まります。
「インライン形式」でのHTMLメールの作り方
インラインスタイルというのは、HTMLのデザインを指定するCSSの適用方法の1つで、HTMLの各要素にstyle属性を追加したコードの執筆方法です。
HTMLタグでいうと「<要素名 style=”～”>」このような形で記載することになります。
フォントの色やサイズなども同様に、「””」の間にCSSを打ち込むことで、HTMLタグとして展開されます。
<img src="img_02.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;"/>
上記は画像を挿入しインラインスタイルでCSSを追加した例です。
これまでご紹介してきたHTMLタグとCSSをまとめると以下のような形になります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<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>
ーーーーー埋め込みーーーーー↓↓↓
<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%!important;
height: 100%;
}
</style>
ーーーーー埋め込みーーーーー↑↑↑
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="width:100%; margin:0; padding:0; font-family:"メイリオ","Meiryo","ＭＳ ゴシック",sans-serif;">
ーーーーーインラインーーーーー↓↓↓
<img src="img_02.jpg" alt="オルト" style="width: 100%; margin:0; padding:0; border:none;"/>
ーーーーーインラインーーーーー↑↑↑
<!-- /FOOTER -->
</body>
</html>
HTMLメールの作成でよく使われる「テーブル（table）」とは
テーブルレイアウトとは、テーブルと呼ばれる表を作るためのコードを使ったレイアウト手法です。
テーブルレイアウトはHTMLを使ったもので、現在主流であるCSSと同様、サイトやメールのレイアウトを決めるものです。CSSが主流となる以前に主に使われていました。ここでは、テーブルレイアウトの効果と作成方法を紹介します。
テーブルレイアウトのメリット
テーブルレイアウトのメリットは、受信側の環境に左右されずにHTMLを展開できる点です。テーブルレイアウトは一昔前の手法ではあるものの、CSSよりもより多くの環境に対応しているため、現在でも使用されています。
テーブルレイアウトの基本的な作り方
テーブルレイアウトを作成する際は、4つのタグを使用します。大まかな流れとして、まずは<table>タグでメール（テーブル・表）の枠組みを作ります。次に、<tr>タグで必要な分の行を作り、その<tr>タグ内に見出しとなる<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データへのリンクを設置しておくとよいでしょう。
見やすい横幅に設定しよう
HTMLメールをパソコンとスマートフォンの両方から閲覧できるようにする際は、レスポンシブデザインを使用しましょう。レスポンシブデザインとは、閲覧しているデバイスの画面サイズに応じて表示を最適化するデザインのことです。
レスポンシブデザインのHTMLメールについては、こちらの記事でも解説していますので、ぜひご覧ください
※同月に作成した「レスポンシブHTMLメールとは？メリットや作成方法、注意点を解説」記事へのリンク
また、フォントのサイズと文字数も考慮しましょう。フォントサイズは15pt以上、テキスト1行あたり45文字以内であれば、スマートフォンでも読みやすいデザインになります。
エディタで楽にHTMLメールが作れる
今までお伝えしてきた方法以外にも、HTMLにCSSを記述する方法はありますが、やはりある程度IT関係の知識がなければ、効果的な「HTMLメール」を自力で作成するのは難しいでしょう。
時間対効果で考えると、HTMLやCSSに詳しくない方は、ITに関する知識がある方にHTMLメールの作成をお願いし、他のアプローチでビジネスを進めていった方が効率的です。
しかし、「メールエディタ」と言う機能を使うことで、ITに詳しくない方でも簡単に「HTMLメール」を作成することができます。
ブラストメールのHTMLメールエディタを例にとって簡単にご紹介します。
上記のようなテンプレートの中から、好みのレイアウトを選択します。
メール全体や文章のカラー、画像、リンクボタンや、SNSアイコンなどを挿入していきます。ここまで説明したような、面倒な作業は必要としないので、直感的に作業を進めることができます。
「メールエディタ」でHTMLメールを作成する場合、HTMLやCSSの記述に関しての知識は全くと言っていいほど必要ありません。スマホ、PCのどちらでもレイアウトが崩れないようなデザインも可能です。
HTMLメールエディタ機能の多くは、このようなブロックを何個も組み合わせてメールを作っていく形式になっています。
初心者の方が、HTMLメールを一から作るとなると、端末によって綺麗に表示されなかったり、リンクが機能しない、レイアウトが崩れるといった不具合が頻発し、本来の目的であるメール配信にまで辿り着けないということがよくあります。
すぐにHTMLメールを使ったメール配信を行いたいなら、こうしたエディタ機能を利用することをおすすめします。
HTMLメールエディタを利用するメリット
改めて、HTMLメールエディタを利用するメリットをおさらいしましょう。
まずは先述した「コーディングの知識が不要」という点です。特に、メール作成に関する知識が乏しい場合、レイアウト崩れを防ぎ、スマホとPC両方に問題なく表示されるようなレスポンシブデザインを行なうのは、至難の業と言えます。
その点、エディタを利用すればその問題は解決できます。
次に、エディタ機能付きのメール配信システムを利用することで「メールの効果測定が容易に行える」というメリットがあります。
HTML形式のメールを使用することにより、メールの開封率や文中リンクのクリック率を簡単に測定することができますが、この効果測定も、自分で組み込むとなると大変です。
読者の興味を惹くようなメール配信を行なっていくためにはデータ分析が必須です。なるべく作業負担を減らして、効率的にメールマーケティングを行ないたいのであれば、こうしたシステムの利用をおすすめします。
ブラストメールでは「HTMLエディタ」が使える！
「ブラストメール」のHTMLエディタは、すぐにHTMLメールを作成することができます。
IT関係の知識が少ない方でも簡単にHTMLメールを作成できるように、面倒な作業をせずともHTMLメールを作成することができます。
選択できるレイアウトもこれまでに10万通以上のメルマガを見てきたメール配信業界のプロが選んだ「本当に使えるレイアウト」だけを厳選してあります。
他にも画像を好きな比率でトリミングする機能なども搭載しており、外部の編集ソフトを使わずに画像をトリミングすることが可能です。
「HTMLメールを作って配信したい、けど一から作るのは難しそう…」
という方は、ぜひ一度エディタ機能を使用してみてくださいね。
まとめ
視覚的訴求に優れたHTMLメールは高い宣伝効果がある一方で、作成にはIT関係の知識や経験を必要とします。
全くITに関する知識がない方が、効果的なHTMLメールを自作しようとするのは現実的ではありません。
したがって、簡易的にHTMLメールを作成できる「HTMLエディタ」でHTMLメールを作成することをオススメします。
下記の記事ではHTMLメールを簡単に作成できるツールを20個、紹介しています。ツールを検討されている方は、ぜひご確認ください。
関連記事：メール配信システム比較20選！機能・料金を徹底比較
エディタを使うことで、HTMLメールの作成にかかる時間を大幅に短縮でき、他の業務に割くことができる時間が増え、結果として高い費用対効果が期待できます。
HTMLメールを使った広告を考えている方は「htmlエディタ」の使い心地をぜひお試しください。
キーワード検索
