メルマガで効果的な集客を！HTMLメールの基礎知識と作り方まとめ

FacebookやInstagramなどSNSによる販促が急増し、もはやメールマガジンは過去のものと思っている方は多いのではないでしょうか？実はまだまだメールマガジン・ニュースレターの方が、SNSよりも格段に販促効果があるとの調査結果があるのです。

今回はそんなHTMLメールの基本から作り方、便利ツールをまとめました。

HTMLメール（HTML形式）とは

（通販サイトLocondoのメールマガジンより）

HTMLメールとは、電子メールの本文をHTMLで記述したもの。テキストメールでは不可能な文字の色付けやフォントサイズの変更、画像の埋め込み、表の使用ができ、見た目にもわかりやすいメールを作成することができます。

メルラボによる『「メールマガジン」に関する意識調査』（詳細はこちら）によると、メールマガジン経由で商品を購入した人は53%に上り、Facebook経由(3%)やLine経由(2%)を大きく上回っています。SNSが勢いを増してきている昨今ですが、これはメールマガジンが未だマーケティングツールとして高い影響力を維持し続けているということと言えます。

また、エクスペリアンジャパンの『第1回開封エンゲージメントサービス調査結果レポート』（詳細はこちら）によると、HTMLメールのデバイス別開封率はモバイルデバイスが65.5%でトップ、これまで主流の環境とされてきたデスクトップPCは25.2%となっており、半数以上のユーザーがモバイルでHTMLメールを見ているという結果になっています。

メルマガの活躍の舞台はPCからモバイルへ移行しつつあり、モバイルと相性の良いHTMLメールが選ばれているようです。

HTMLメールのメリット＆注意点

メリット

テキストのみのメールよりもわかりやすい

画像を添付できるのが最大のメリットです。テキストのみで商品やサービスの説明をされるよりも、写真がある方が一目瞭然。説明も短くすることができ、読者にとっては読みやすいと言えます。

メールの開封率がわかる

HTMLメールでは開封率を計測できます。メールの開封率やクリック数はマーケティングでは重要な指標となります。方法はメルマガ内に目安となる画像を埋め込み、その画像の表示数を計測するというもの。画像を表示できないテキストメールでは計測できません。

注意点

セキュリティ上の問題

HTMLメールにはスクリプトを組み込むことができ、HTMLメールを開いただけ、あるいはプレビューしただけで感染するウイルスが蔓延しているのは広く知られています。そのためHTMLメールを警戒する人が一定数いて、携帯電話事業者などはニーズに応じ（迷惑メールの一部として）HTMLメールに対するフィルタ機能を用意しています。

メルマガにHTMLメールを使用するなら、不信感を持たれないようにすることが不可欠。例えば自社サイトでメルマガにはHTML形式が使われている旨を明記するなど、事前に読者に了解を取ることが必要です。

レイアウト崩れが起きる

こちらのメーラーでは正常に表示されているのに別のメーラーではレイアウトが崩れる、という可能性があります。CSSで記述する場合、メーラーによっては対応していないプロパティがある為です。例えばbackground-sizeやborder-imageといったものはOutlookでは使えません。

レイアウト崩れを防ぐためには、幅広いメーラーで対応しているCSSのプロパティを使う、あるいはテーブルレイアウトを主にして作成し、必要な所だけCSSを使うといった対応が必要になってきます。各メーラーのCSS対応状況は、Campaign Monitor社提供のこちらのコンテンツをご参照ください。最近ではPCでもモバイルデバイスでも単一のファイルで同じように表示できるレスポンシブデザインという考え方が普及しており、PCかモバイルどちらを優先させたデザインにするかどうかがポイントになってきています。

HTMLメールを作成する方法

HTMLメールは、HTMLとCSSを使って作成します。他にも、メール作成支援サービスを利用するか、ツールを使って作成する方法があります。

HTMLとCSSを駆使して作成する

Webサイト制作と同じように、HTMLとCSSを使って作成します。詳しい作り方は省略しますが、Webサイト開発のノウハウを活かすことができ、普段使用しているツールで作成できます（一部ルールが異なる点があります）。非経験者にはハードルが高いかもしれません。

メール作成支援サービスを利用する

メール作成支援サービスを提供している会社はいくつか存在し、中にはHTMLメールを専門としている会社もあります。もちろん技術力に見合ったコストがかかります。

ツールを使って作成する

見やすくデザイン性のあるテンプレートを選び、テキストを追加するだけで作成できるツールが公開されています。完全に自作するよりは手間がかからずデザインが苦手な人でも気軽に使えます。有料ツールが多いですが、その分作成機能だけではなくプレビュー機能やレポート機能など充実しています。

作成からレポートまで！便利ツールの紹介

HTMLに慣れていない、メルマガを作るのが初めてという方は、まずはツールを使って作成してみてはいかがでしょうか？簡単にできるツールから、レポート機能などを備えたサービスをご紹介します。

直感的な操作「Campaign Monitor」

公式サイト

HTMLメールの作成や配信ができるサービス。豊富なテンプレートからデザインを選び、ドラッグ＆ドロップなど直感的な操作で作成可能。主要なメーラーの表示が確認できるプレビュー機能、開封率やクリック数をまとめるレポート機能などに定評があります。（月額$9～、一部無料機能あり）

作成時間60秒！？「Template Builder」

公式サイト

“60秒でHTMLメールが作れる”ツール。HTMLの知識やデザインの経験がない人でも簡単に素早くメールを作れます。上記のCampaignMonitor社が提供するツールで、全てのメールクライアントでテスト済みのテンプレートが使用できます。Template Builderを利用するだけなら無料です。

多機能なら「Mail Chimp」

公式サイト

HTMLメールの作成や配信ができるサービス。Campaign Monitorと同等の機能を備えています。モバイルアプリもあり、外出先でレポートを確認するときなどに使えます。（月額$10～、登録ユーザー数及びメールの送信数によっては無料）

ビルドツールに興味があるなら「GRUNT」

公式サイト

本来はWeb制作のビルドツール。ビルドツールとはプログラムのコンパイルやユニットテストなどのタスクを自動化するツールのこと。GRUNTには、CSSのインライン化を行うgrunt-premailer、Mailgunというサービスと連携しテストができるgrunt-mailgunなど、HTMLメールを作成するのに便利なプラグインが存在します。運営の手間を考えると、ビルドツールも選択肢の一つです。

表示確認には検証用ツール

HTMLメールで一番大変なのは、確認すべきメールクライアントやデバイスがとにかく多いこと。これら全てを実機で確認するのは困難なので、表示確認ができるツールを使う方法がベターです。

その数40種類以上！「Litmus」

公式サイト

40種類以上のメールクライアントでHTMLメールの表示確認ができるオンラインサービス。数種類の表示を一度に確認できる機能、テスト結果をシェアできる機能などが評価を得ています。有料（月額$79～）で、7日間の無料トライアルがあります。

人気の「Emailon Acid」

公式サイト

42種類のメールクライアントやデバイスで表示確認ができるサービス。有料（月額$45～）で、7日間の無料トライアルがあります。

まとめ

よく使われているツールをご紹介しました。HTMLメールを作成する上でもう一つチェックしておきたいのは、Web上に数多く公開されているデザインテンプレート。デザインテンプレートについて知りたい方は、こちらの記事をご参照ください。

初心者でもお洒落なhtmlメールが作れる高品質テンプレート20選