HTMLメールの作り方とは?基本の作成方法や配信効果・注意点を解説!

最終更新日時:2022/11/16

メール配信システム

None

Webページと同様のデザインが可能なHTMLメールは、テキストメールよりも情報が伝えやすく、高い訴求力が期待できるメリットがあります。そこでここでは、成果の上がるメールマーケティング手法として活用したいHTMLメールについて、その概要や作り方、メリットとデメリットのほか、注意点などを詳しく解説します。HTMLメールが作れるシステムも紹介しますので、ぜひお役立てください。

HTMLメールとは?

HTMLは、Webページを作成するために開発された言語です。そして、HTMLメールはこの言語を使用して作成された、まるでWebページのような「デザイン性が高く、カラフルで表現力の高いメール」のことを意味しています。

レイアウトの自由度の高さはもちろん、文字情報のみのテキストメールとは違い、画像や動画なども配置できるため、より多くの情報を伝えられるだけでなく、わかりやすく・見やすい内容で伝えられる点がHTMLメールの最大の特徴といえるでしょう。

そのため、このようなHTMLメールは、顧客への商品・サービスの効果的な訴求手段として主に活用されています。

メルマガをHTMLで配信するメリット

見込み顧客や既存顧客との「定期的な接点」や「プロモーションツール」として、メルマガを活用している企業も多いでしょう。

このメルマガをHTMLメールで配信すると、下記の3つのメリットが得られます。

  1. 開封率・CTR・CVR等の効果測定が容易になる
  2. 時代遅れと感じさせないブランディングが可能
  3. 画像・動画で装飾でき視覚的に情報を伝えられる

それぞれのメリットを詳しく解説していきましょう。

(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円(税込)※7日間の無料トライアルあり

料金プラン【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社
機能・特徴

  • HTMLメール作成
  • 画像トリミング機能
  • 効果測定ツール
  • API連携
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 通):0円/月有料プラン(登録アドレス数500件~)

月額:1,800円~/月

年額:1,260円~/月大規模プラン:要問い合わせ

配信数プラン(1万通~1500万通):5,000円~1,200,000円/月

導入実績株式会社LOUPE、株式会社SPICE LIFE、世界50万社以上
機能・特徴

  • ABテスト配信
  • クリック・エラー・開封率のリアルタイムレポート
  • レスポンシブデザイン対応
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円/月

導入実績ランサーズ株式会社、株式会社オミカレ、株式会社クラウドワークス、Chatwork株式会社など
機能・特徴

  • 詳細なログをリアルタイムで確認
  • さまざまなデバイスに対応
  • 確認しやすい1画面デザイン
  • 豊富なデータ分析
URL公式サイト

HTMLメールを配信する場合の注意点

最後に、HTMLメールを配信する際の、以下の4つの注意点をご説明します。

  1. マルチパート設定をする
  2. テスト送信を行う
  3. CSSの利用に制限がある
  4. テキストメールを好むユーザーもいる

これらの注意点については、必ずHTMLメールの運用を開始する前に確認しておきましょう。

(1)マルチパート設定をする

マルチパートの設定とは「受信者の環境に合わせて表示形式を自動で切り替える」機能です。

メルマガは、多くの場合「不特定多数」の対象者に向けてメールを送信するマーケティングの手法です。ただし、全てのユーザーがHTMLメールに対応できるデバイスを持っているとは限りません。

そのため、マルチパートの設定により、HTMLメール非対応のデバイスに対しては、自動的に「テキストメール」にて情報を表示させ、表示の不具合を防ぐことが可能となるのです。

(2)テスト送信を行う

HTMLメールを配信する前の「テスト送信」は必ず実施しましょう。テスト配信では、具体的にレイアウトデザインの崩れはないか、リンクやクリックボタンは正常か、クリックしてほしい箇所が埋もれてしまうデザインになっていないか、などの確認をおこないます。

面倒な作業として削減されがちですが、動作の不具合やレイアウトの崩れは、成果に直結するミスのため必ず丁寧に確認しなければなりません。

(3)CSSの利用に制限がある

HTMLメールを作成する際に、CSSは利用制限があることも把握しておきましょう。CSSは、対応しているメーラーもあれば、対応していないメーラーもあります。

例えば、Gmailには対応しているCSSが、Outlookでは、対応していないケースもあり得ます。その場合、Gmailでは問題なく表示されたレイアウトであっても、Outlookでは崩れてしまうことがあるでしょう。

全てのメーラーでテスト送信をおこなうことは現実的ではありませんが、「このような現象が起きる」ことを認識しておくことは大切です。

(4)テキストメールを好むユーザーもいる

HTMLメールは、ビジュアル的な訴求が可能なことから、一般的にはテキストメールよりもクリック率が高い傾向にあることは事実です。

ただし、容量の軽さやデバイスの影響を受けにくいなどの特性からテキストメールを好むユーザーが一定数いることも忘れてはいけません。そのため、マルチパート設定は、必ず実施する必要があるといえるでしょう。

HTMLメールで成果の高いメルマガ配信へ

本来は専門知識がなければ困難なHTMLメールの作成ですが、メール配信システムを利用することで、業務の属人化を防ぐだけでなく、さまざまな分析機能により、ユーザー動向を的確に捉えた改善策を講じることができるようになります。

これらのツールを活用し、作成の手間を効率化するだけでなく、視覚的な情報を伝えやすいHTMLメールの効果を存分に利用し、高い成果を得られるメルマガ配信など、メールマーケティングの最適化を目指してみてはいかがでしょうか。

おすすめのセミナー視聴

メール配信システムの記事をもっと読む

メール配信システムの記事一覧

ビズクロ編集部
「ビズクロ」は、経営改善を実現する総合支援メディアです。ユーザーの皆さまにとって有意義なビジネスの情報やコンテンツの発信を継続的におこなっていきます。

おすすめ関連記事

無料の人事管理システムおすすめ8選比較!選ぶ際のポイントやメリット・有料製品との違い

最終更新日時:2024/03/27

人事評価システム

最終更新日時:2024/03/27

人事評価システム

福利厚生は節税効果を得られる?仕組みや要件・種類について解説

最終更新日時:2024/03/26

福利厚生サービス

最終更新日時:2024/03/26

福利厚生サービス

一人当たりの採用コストの平均とは?内訳や計算方法・削減するポイント

最終更新日時:2024/03/26

採用管理システム

最終更新日時:2024/03/26

採用管理システム

人事・採用担当者におすすめの資格10選|難易度や取得するメリットを解説

最終更新日時:2024/03/27

採用管理システム

最終更新日時:2024/03/27

採用管理システム

ホームページ作成にかかる費用相場とは?費用の早見表や安く抑えるポイント

最終更新日時:2024/03/26

ホームページ制作

最終更新日時:2024/03/26

ホームページ制作

Web会議を録音する方法|メリットや録音する際の注意点を解説

最終更新日時:2024/03/26

Web会議システム

最終更新日時:2024/03/26

Web会議システム

ウェビナーの開催方法まとめ|やり方や手順・成功のポイント、必要なアイテムを紹介

最終更新日時:2024/03/25

ウェビナーツール

最終更新日時:2024/03/25

ウェビナーツール

新卒採用の目的とは?メリット・デメリットやフロー、中途採用との違いを解説

最終更新日時:2024/03/25

採用管理システム

最終更新日時:2024/03/25

採用管理システム

360度評価(多面評価)とは?目的やメリット・デメリット、導入ステップを解説

最終更新日時:2024/03/25

人事評価システム

最終更新日時:2024/03/25

人事評価システム

人事評価制度の種類まとめ|役割や特徴・制度を運用する際の注意点を解説

最終更新日時:2024/03/25

人事評価システム

最終更新日時:2024/03/25

人事評価システム