ログイン
HTMLメールの作り方とは？基本の作成方法や配信効果・注意点を解説！
Webページと同様のデザインが可能なHTMLメールは、テキストメールよりも情報が伝えやすく、高い訴求力が期待できるメリットがあります。そこでここでは、成果の上がるメールマーケティング手法として活用したいHTMLメールについて、その概要や作り方、メリットとデメリットのほか、注意点などを詳しく解説します。HTMLメールが作れるシステムも紹介しますので、ぜひお役立てください。
目次
HTMLメールとは？
HTMLは、Webページを作成するために開発された言語です。そして、HTMLメールはこの言語を使用して作成された、まるでWebページのような「デザイン性が高く、カラフルで表現力の高いメール」のことを意味しています。
レイアウトの自由度の高さはもちろん、文字情報のみのテキストメールとは違い、画像や動画なども配置できるため、より多くの情報を伝えられるだけでなく、わかりやすく・見やすい内容で伝えられる点がHTMLメールの最大の特徴といえるでしょう。
そのため、このようなHTMLメールは、顧客への商品・サービスの効果的な訴求手段として主に活用されています。
メルマガをHTMLで配信するメリット
見込み顧客や既存顧客との「定期的な接点」や「プロモーションツール」として、メルマガを活用している企業も多いでしょう。
このメルマガをHTMLメールで配信すると、下記の3つのメリットが得られます。
- 開封率・CTR・CVR等の効果測定が容易になる
- 時代遅れと感じさせないブランディングが可能
- 画像・動画で装飾でき視覚的に情報を伝えられる
それぞれのメリットを詳しく解説していきましょう。
(1)開封率等の効果測定が容易になる
HTMLメールは、メール配信システムやGoogleアナリティクスなどのアクセス解析システムなどで、クリック率の計測が可能です。
具体的にHTMLメールでは下記のような項目の計測ができるようになります。
- メールの開封率
- リンクのクリック率
- ユーザーの端末
- 開封時間やクリック時間
- 開封場所
ほかにも、ヒートマップと呼ばれるメールを閲覧したユーザーのクリックやファーストタッチなど、「メルマガ上の行動」を色分けして表示するアクセス解析により、ユーザーの行動をより詳細に可視化することも可能です。
そのため、これらの客観的なデータをもとにデザイン変更やクリック率向上のための具体的な改善策が講じやすくなるのです。
(2)時代遅れと感じさせないブランディングが可能
HTMLメールでは、Webページとデザインを合わせたメールを配信することもできるため、統一されたブランディングにより、認知度を高めたり、商品・サービスのイメージを向上させたりすることも可能です。
ブランド価値の向上は、リピート顧客の増加や競合他社との差別化といった、事業における大きなメリットへとつながる効果が期待できるでしょう。
(3)画像・動画で装飾でき視覚的に情報を伝えられる
HTMLメールでは、カラフルなページデザインのほか、イラストや画像、動画を交えた情報発信ができるため、視覚的な訴求力が高い点もメリットです。
商品に関する「より具体的な情報」を伝えられるだけでなく、YouTubeやInstagramなど「視覚的な訴求」が主流になりつつある現代社会においては、テキストのみのメールよりもデザイン性のあるHTMLメールの方がユーザーに受け入れられやすいとされています。
メルマガをHTMLで配信するデメリット
さまざまなメリットをもたらしてくれるHTMLメールですが、デメリットが全くないというわけではありません。
代表的なデメリットについても確認しておきましょう。
送信時にHTML・CSSの知識が必要
HTMLメールを作成するには、HTMLのほか、HTMLとセットで使用される言語のCSS、両方の知識が必要となります。そのため、これらの知識とスキルが社内に不在の場合は、外部に作成を委託する、あるいは、人材を育成する必要があります。
アウトソーシングのためのコストが発生し続けたり、人材が育つまでのコストや期間が求められる点は、組織にとって小さくはないデメリットといえるでしょう。
受信環境によっては正しく表示されない
HTMLメールは、テキストメールに比べてデータ容量が大きくなりがちなため、読者の通信環境によっては、正しく表示されなかったり、読み込みに時間がかかったりしてしまいます。
「読み込みの遅さ」や「表示の不具合」は、開封率やクリック率にも大きな影響を与えるリスクであり、メルマガの登録解除といった読者離れも引き起こしてしまいます。
HTMLメールの基本的な作り方
続いて、HTMLメールの作成方法についてですが、方法は主に2通りあります。
(1)HTMLタグを使って作成する
ひとつ目は、HTMLタグを使って作る方法です。HTMLタグは、半角の不等号（<>）で囲ったテキストのことで、このタグによって、文字を大きくするなどの装飾をしたり、画像を挿入したりすることができるようになります。
さらに簡単に言うならば「この箇所や文字は、こんな風に装飾する」といった指示をコンピューターに認識させるための言語であり、CSSは、そこへさらに細かい装飾や調整を加えるための言語と覚えておくと良いでしょう。
ちなみに、よく使用されるHTMLタグの例には以下のようなものがあり、目にしたことがある方も多いかと思います。
- 見出し：<h2></h2>
- 画像の表示：<img>
- 太文字：<strong></strong>もしくは<b></b>
- センタリング：<center> </center>
このほかにもあらゆる装飾のできるHTMLタグがあり、このような専門的な言語の知識とスキルがあればHTMLメールを自力で作ることができます。
(2)メール配信システムのテンプレートを利用する
知識があればゼロベースで作ることも可能なHTMLメールですが、多くの企業においては、HTMLメール作成が可能なメール配信システムのテンプレートを活用するケースが一般的です。
このようなシステムでは、好みのテンプレートを選び、画面の指示に従って入力を進めるだけでデザイン性の高いHTMLメールが作れるため、専門的な知識は必要ありません。
また、テンプレートはある程度のカスタマイズもできるため、オリジナルデザインのメールを作成することもできます。
HTMLメールの構造をわかりやすく解説
システムを利用することで誰でも簡単に作成できるHTMLメールですが、カスタマイズ性やより高いオリジナリティを求めるのであれば、基本的な構造を理解しておくと便利です。
また、構造の基礎知識は、不具合が起きた際の原因追求にも役立つでしょう。そこでここからは、HTMLメールの基本的な構造をわかりやすく解説していきます。
DOCTYPE宣言（文書型宣言）から開始
HTMLメールを作成するときは、必ず「DOCTYPE宣言（文書型宣言）」が必要になります。DOCTYPE宣言とは、HTMLの文書の冒頭に記述する、その文書が「HTML言語」であることと「どのHTMLバージョンを使っているか」を、宣言するコードです。
つまりは、その宣言文から始まる文書が、「HTML」で書かれていること、かつ「HTML4.0」のバージョンを使用していることなどをコンピューターに伝える役割がDOCTYPE宣言です。
HTMLメールのマークアップは、DOCTYPE宣言から始まると把握しておきましょう。
テーブルレイアウトで構成
DOCTYPE宣言（文書型宣言）を指定した後は、パソコンやモバイルなどあらゆる端末からの閲覧を考慮したレイアウトが可能な<table>という表を作成するためのタグを使用し、文字を装飾する<td>タグや<font>タグなどを活用しながらレイアウトを構成していきます。
HTMLメールを作成する際の注意点として、Webページの構築に使用される<article>タグや<section>タグは、表示された際のレイアウトのズレなどが発生しやすく、HTMLメールに使用するタグとしては不向きとされているため気をつけましょう。
基本的にCSSは埋め込み形式
さらにリッチな内容のHTMLメールを作成するのであれば、レイアウトの微調整やリンクの色、見出しフォントなどの繊細な装飾ができる「CSS」を利用します。
CSSの記述は、「埋め込み形式」と「インライン形式」のどちらかが一般的な方法とされているため、この2つをご説明します。
埋め込み形式とは？
埋め込み式は<head>タグ内に、<style>タグを使ってまとめてCSSを記述する形式です。適用されるスタイルは、そのページのみとなるため、変更や修正が発生した際は、ページごとにCSSの記述も変更しなければなりません。
インライン形式とは？
インライン形式は、HTMLメールの各タグ内に直接CSSを入力して行く方法です。
スタイルを適用したいタグに直接CSSを記述していくため、直感的な把握がしやすいというメリットがありますが、共通のデザイン変更などが発生した場合は、各タグのCSSを全て修正する手間が発生してしまいます。
そのため、埋め込み式よりも修正や追加の手間が大きいことから、HTMLメールのCSSには、埋め込み式が使われることがより一般的です。
容量が大きくなりすぎないように注意が必要
HTMLメールは、HTMLの構造が複雑になりすぎたり、画像が多すぎたりすると、メール自体の容量が大きくなりすぎてしまうことがあります。
最悪の場合、送信先のメールサーバーに受信を拒否されてしまったり、正常に表示されないといったトラブルにつながってしますでしょう。実際にGmailでは、102kbを超えるデータ容量のメールは、表示が省略されてしまうことがわかっています。
そのため、HTMLメールを作成する際には、100kb以内の容量をひとつの目安として作成する必要があります。
HTMLメールを簡単に作れるメール配信システム5選
HTMLメールは、自力で作成することも可能ですが、マークアップ言語などの専門的な知識を持つ人的リソースを十分に確保することは容易ではありません。そのため、メルマガなどの配信を効率的におこなうのであれば、メール配信システムの利用がおすすめです。
ここでは、厳選した5つのメール配信システムについて特徴の違いや主な料金プランなどをまとめました。ぜひ、システム選びの参考としてご活用ください。
(1)blastmail（ビズクロ編集部おすすめ！）
blastmailは、標準装備された多彩なテンプレートにより専門知識がなくてもスムーズに、かつおしゃれなHTMLメールの作成ができるツールです。
HTMLメール以外にも、絵文字を使ったデコメールの作成も可能なほか、効果測定機能も充実しているため、メール配信分析をシステムを探している人にもおすすめします。
| 提供元 | 株式会社ラクスライトクラウド |
|---|---|
| 初期費用 | Lightプラン・Standardプラン：11,000円(税込) Proプラン：55,000円(税込)※７日間の無料トライアルあり |
| 料金プラン | 【Lightプラン】 0〜3,000件：3,300円(税込)/月 5,000件まで：4,400円(税込)/月 7,000件まで：5,500円(税込)/月【Standardプラン】 0〜10,000件まで：6,600円(税込)/月 13,000件まで：8,800円(税込)/月 15,000件まで：9,900円(税込)/月 20,000件まで：13,200円(税込)/月 25,000件まで：16,500円(税込)/月 30,000件まで：19,800円(税込)/月 40,000件まで：26,400円(税込)/月 50,000件まで：33,000円(税込)/月【Proプラン】 50,000件以上：33,000円(税込)/月～※送信件数ではなく、登録アドレス数による金額です。 |
| 導入実績 | 早稲田大学、テレビ東京、ANA、NTTdocomoなど約18,000社 |
| 機能・特徴 |
|
| URL | 公式サイト |
(2)Cuenote FC
Cuenote FCは、月間63億通の配信実績を持つ人気のメール配信システムです。
標準搭載されている機能の充実ぶりが人気の理由となっており、知識がなくても簡単にHTMLメールが作れるHTMLエディター機能のほか、多言語配信や予約配信・シナリオメールの作成や効果測定・データ分析などの機能が揃っています。
ワンタイムパスワード制の採用やログイン時の二要素認証など、高いセキュリティ性を兼ね備えている点も特徴です。
| 提供元 | ユミルリンク株式会社/YMIRLINK,Inc. |
|---|---|
| 初期費用 | クラウド型サービス（ASP・SaaS型） 2,000件：33,000円(税込) 5,000件～150,000件：55,000円(税込) 無制限：220,000円(税込)～オンプレミス型（ライセンス）：要問い合わせ |
| 料金プラン | クラウド型サービス（ASP・SaaS型） 2,000件：5,500円 5,000件：11,000円 10,000件：22,000円 30,000件：55,000円 50,000件：77,000円 100,000件：110,000円 150,000件：165,000円 無制限：165,000円～オンプレミス型（ライセンス）：要問い合わせ |
| 導入実績 | COOKPAD、イーデザイン損保、日本旅行、紀伊国屋書店など約1,900社以上 |
| 機能・特徴 |
|
| URL | 公式サイト |
(3)配配メール
配配メールはメール配信システムの中でも、シンプルな機能による操作性の高さに優れたシステムです。
顧客の反応に合わせたシナリオメールの作成やメールを通じたWebページへの来訪ユーザーを知らせてくれる通知機能・顧客がメールを開封した時間に合わせて自動で配信時間の調整が行われるメモリー機能など、メールマーケティングに特化した機能が豊富な点が特徴です。
迷惑メール対策機能やABテスト機能なども備わっているため、データ分析を行いながら効果的なHTMLメールを作成したいと考える企業におすすめです。
| 提供元 | 株式会社ラクス |
|---|---|
| 初期費用 | 要問い合わせ |
| 料金プラン | Bridge Premium Standard Light ※登録アドレス数により月額料金が変動するので、すべてのプランが要問い合わせになっています。 |
| 導入実績 | 関西大学、株式会社阪急交通社、ぐるなびなど9,000社以上 |
| 機能・特徴 |
|
| URL | 公式サイト |
(4)Benchmark Email
Benchmark Emailは日本だけでなく、世界各国で導入されているメール配信システムです。
HTMLメールに特化しているシステムだけあって、プロのデザイナーが手掛けた500種類以上のデザインテンプレートが利用できる点は、デザイン性の高いHTMLメールを手軽に作成したい企業にとって、大きなメリットとなるでしょう。
| 提供元 | Benchmark Internet Group |
|---|---|
| 初期費用 | リストプラン：無料 配信数プラン：要問い合わせ |
| 料金プラン | リストプラン 無料トライアル(250 通)：０円/月有料プラン(登録アドレス数500件～) 月額：1,800円～/月 年額：1,260円～/月大規模プラン：要問い合わせ 配信数プラン（１万通～1500万通）：5,000円～1,200,000円/月 |
| 導入実績 | 株式会社LOUPE、株式会社SPICE LIFE、世界50万社以上 |
| 機能・特徴 |
|
| URL | 公式サイト |
(5)SendGrid
SendGridも、月間1,000億通以上の配信実績を持つ、世界各国で利用されているメール配信システムです。
HTMLメールの作成時は、直接編集とドラッグ＆ドロップで作成する方法からユーザーが使いやすい方を選べる仕組みとなっているなど、優れたUI設計が魅力といえるでしょう。
さらに、HTMLコードと表示プレビューを1画面で同時に確認できるので、HTMLコードを実際に入れた際にどのように表示されるのかを確認しながらメールの作成ができます。
リンクのクリック状況・メールの開封率・配信停止申請などの分析もリアルタイムでできる点は、分析によりメルマガ配信をスピーディに最適化したい組織にもおすすめです。
| 提供元 | Twilio Inc.(正規代理店：株式会社 構造計画研究所) |
|---|---|
| 初期費用 | 要問い合わせ |
| 料金プラン | 【Free】 12,000通/月まで0円【Essentials】 40,000通～100,000通 2,090円～4,180円/月【Pro】 100,000通～2,500,000通 11,000円～130,900円/月 |
| 導入実績 | ランサーズ株式会社、株式会社オミカレ、株式会社クラウドワークス、株式会社Kubellなど |
| 機能・特徴 |
|
| URL | 公式サイト |
HTMLメールを配信する場合の注意点
最後に、HTMLメールを配信する際の、以下の4つの注意点をご説明します。
- マルチパート設定をする
- テスト送信を行う
- CSSの利用に制限がある
- テキストメールを好むユーザーもいる
これらの注意点については、必ずHTMLメールの運用を開始する前に確認しておきましょう。
(1)マルチパート設定をする
マルチパートの設定とは「受信者の環境に合わせて表示形式を自動で切り替える」機能です。
メルマガは、多くの場合「不特定多数」の対象者に向けてメールを送信するマーケティングの手法です。ただし、全てのユーザーがHTMLメールに対応できるデバイスを持っているとは限りません。
そのため、マルチパートの設定により、HTMLメール非対応のデバイスに対しては、自動的に「テキストメール」にて情報を表示させ、表示の不具合を防ぐことが可能となるのです。
(2)テスト送信を行う
HTMLメールを配信する前の「テスト送信」は必ず実施しましょう。テスト配信では、具体的にレイアウトデザインの崩れはないか、リンクやクリックボタンは正常か、クリックしてほしい箇所が埋もれてしまうデザインになっていないか、などの確認をおこないます。
面倒な作業として削減されがちですが、動作の不具合やレイアウトの崩れは、成果に直結するミスのため必ず丁寧に確認しなければなりません。
(3)CSSの利用に制限がある
HTMLメールを作成する際に、CSSは利用制限があることも把握しておきましょう。CSSは、対応しているメーラーもあれば、対応していないメーラーもあります。
例えば、Gmailには対応しているCSSが、Outlookでは、対応していないケースもあり得ます。その場合、Gmailでは問題なく表示されたレイアウトであっても、Outlookでは崩れてしまうことがあるでしょう。
全てのメーラーでテスト送信をおこなうことは現実的ではありませんが、「このような現象が起きる」ことを認識しておくことは大切です。
(4)テキストメールを好むユーザーもいる
HTMLメールは、ビジュアル的な訴求が可能なことから、一般的にはテキストメールよりもクリック率が高い傾向にあることは事実です。
ただし、容量の軽さやデバイスの影響を受けにくいなどの特性からテキストメールを好むユーザーが一定数いることも忘れてはいけません。そのため、マルチパート設定は、必ず実施する必要があるといえるでしょう。
HTMLメールで成果の高いメルマガ配信へ
本来は専門知識がなければ困難なHTMLメールの作成ですが、メール配信システムを利用することで、業務の属人化を防ぐだけでなく、さまざまな分析機能により、ユーザー動向を的確に捉えた改善策を講じることができるようになります。
これらのツールを活用し、作成の手間を効率化するだけでなく、視覚的な情報を伝えやすいHTMLメールの効果を存分に利用し、高い成果を得られるメルマガ配信など、メールマーケティングの最適化を目指してみてはいかがでしょうか。
おすすめのセミナー視聴
メール配信システムの記事をもっと読む
-
ご相談・ご質問は下記ボタンのフォームからお問い合わせください。
お問い合わせはこちら