効果的メルマガ作成はHTMLメールで！作り方の基本とメリットとは

いま多くの企業が取り入れている「HTMLメール」。

あなたは、その特徴やメリットをきちんと理解していますか？

今回は、「何となくはわかっているけど、使いこなせていないかも…？」という方に向けて、HTMLメールのメリットや注意点など、基本事項をまとめて解説します。

これからHTMLメールの導入を検討しているメルマガ担当やコンテンツマーケティング担当の方は特に必見です！

この記事の内容

1.HTMLメールを配信する4つのメリット
2.これだけは覚えておこう！HTMLメールの注意点
3.HTMLメールの配信までの流れ
4.HTMLメールを作ってみよう！参考になる【おすすめ3選】
5.まとめ

HTMLメールを配信する4つのメリット

HTMLメールについての説明に入る前に、そもそもHTMLとは何なのか、簡単に解説しておきましょう。

HTMLとはウェブサイトを作成するための最も基本的なマークアップ言語のことです。正式名称は「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」。
現在あるウェブサイトのほとんどが、HTMLによって正しく表示されるように設計されています。

HTMLメールはテキストパート・HTMLパート・画像添付パートなどを組み合わせたマルチパートで構成され、ウェブサイトと同じくHTML形式でページのレイアウトを行うことが可能です。本文テキスト形式のみのテキストメールでは行えないような画像の挿入、スタイルシート（CSS）の埋め込みによる文字フォントの指定などが行えます。

以下では、最近特にHTMLメールが取り入れられている理由でもある、4つのメリットをご紹介しましょう。

1.メールの開封率や開封時間の効果測定ができる

HTMLメールは、リンクテキストをクリックした回数の計測はもちろんのこと、テキストメールでは計測することが難しいメールの開封数や開封率、開封された時間、クリックスルー率などのデータを計測することができます。
これを活用することで、メールの件名を変更したABテストなど、効果を確かめるための調査が可能になるのです。

例えば、どのタイトル（件名）にすれば開封率が高くなるのか、どのワードが開封率を高めているのかが判断できるようになると、効果の高いメールマガジンやメルマガ配信サービスの制作に役立てることができます。

さらに、どの時間帯に開封されたのかがわかるので、ユーザーに読まれやすい時間帯にあわせて配信することが可能です。

2.商品やサービス、キャンペーン情報を視覚的に訴求でき見栄えが良くなる

HTMLメールはページのレイアウトが行えるため、テキストだけでなく画像や動画なども埋め込めます。
特に最近は動画に対応したメール配信ツールも増えており、文字情報だけでなく視覚的に訴求できるコンテンツ作りが可能です。

また、HTML言語の中にスタイルシート（CSS）を埋め込むことによって、文字のフォントやサイズ、色の変更などが可能になるので、文字情報をより効果的に使うことができ、広告チラシのように視覚に訴えかけるわかりやすいメールを作成することができます。

さらに、掲載できる画像の画素数が高いため、商品の詳細が読者に伝わりやすく、購買につながりやすくなるでしょう。

3.ホームページやブログに近い感覚で読みやすい

HTML言語やその中にスタイルシート（CSS）を埋め込むことで、ページのデザインが自在に行えるため、要点を整理してレイアウトすることが可能です。文字の強調を効果的に使うことで、読者は自分に必要な情報だけを選択することができるようになり、ストレスなくメルマガを読むことができます。

4.ブランドイメージを植えつけやすい

企業のロゴを埋め込んだりフォントを統一したりすれば、企業のポータルサイトと一貫性を持たせることができるので、ブランドイメージを植えつけやすくなります。

直感的に認識できるようなブランドイメージがあれば、読者が文字情報を理解する前にどんな企業からのメルマガなのかを一瞬で判断できるのでクリック率や問合せアップにも繋がるでしょう。

これだけは覚えておこう！HTMLメールの注意点

HTMLメールにはメリットがたくさんある一方で、いくつかの注意点もあります。

注意点を理解しておかないと、せっかくのHTMLメールなのに十分に効果が発揮できないということになりかねません。

HTMLメールとテキストメールの両方を配信する「マルチパート」の配信設定が必須

「マルチパート」とは、受信者の環境に応じて、配信形式をHTMLメールとテキストメールに自動で切り替えて表示させる機能です。近年はスマートフォンのユーザーが増加してきていますが、すべてのユーザーがHTMLメールを受信できるわけではありません。

ユーザーが使用しているメーラーがHTMLメールに対応していない場合や、HTMLメールを受信しないように設定されている場合、「本文が表示されない」「画像部分が表示されない」「表示やレイアウトが崩れてしまう」といった弊害が発生する恐れがあります。

そんな弊害への対策として有効なのが、マルチパートメールの配信設定です。HTMLメールを多くのユーザーに一斉配信する場合は必ず設定する必要があります。

マルチパートメールの設定を行っていれば、HTMLメールに対応しているデバイスにはそのままで、対応していないデバイスにはテキストメール、というように送信方法を自動で選択させることが可能です。

デザインやプログラミングなどの専門的な知識が必要な場合がある

メール配信システムを利用しない場合には、HTMLやCSS言語の知識を要します。このHTMLやCSSは、ホームページを作成するときに必要な言語です。

また、画像を使いたいときは画像をアップロードするサーバーが必要になるので、サーバー設定の知識などもあったほうがいいでしょう。

しかしながら、メール配信システムを利用してHTMLメールを配信する場合は、専用の編集画面（HTMLエディタ）を使用するので、高度なHTMLやCSSの知識は必要ありません。

ブログを書くような感覚で簡単にHTMLメールを作ることができます。

レイアウト崩れがおきる

受信者側の環境設定によっては、レイアウトが崩れてしまう可能性があります。レイアウトが崩れる原因としては、作成者が記述したCSSに受信者側の環境が対応していないことなど、さまざまな要因が考えられます。

CSSのプロパティで指定できる内容はメーラーによって異なっており、プロパティに対応していないメーラーには正しくページが表示されません。また、HTMLにリンクを貼って外部に置いたCSSによってページのレイアウトを整えているケースでも、正しく表示されないことがあります。

この場合は、HTMLのヘッダー部分にCSSを記述する、またはCSSではなくテーブルでページのレイアウトを行うといった対策が必要です。

ほかにもさまざまな原因で正しくページが表示されないことがあるので、不具合を想定して「マルチパートメール」の設定を必ず行うようにしましょう。

HTMLメールの配信までの流れ

HTMLメールはどのような流れで作られているのでしょうか。ここでは、HTMLメールを配信するまでの流れについて大まかに解説します。

大まかな配信までの流れ

HTMLメールは、以下のような流れで作成します。

イメージ案と文面作成
HTMLメールのコーディング
HTMLメールの表示確認
本登録（本番送信登録)

以下で詳しく解説していきましょう。

1.イメージ案と文面作成

どのようなデザインにして、どのようなメッセージを発信するのか。

まずはHTMLメールの設計図といえるイメージ案と文面を作成します。
ページのレイアウトを考えながら、ヘッダー部分やページの各部に挿入する画像など、デザインに必要なパーツの作成なども行います。

2.HTMLメールのコーディング

HTMLメールのコーディングには大きく分けて2つの方法があります。

■HTMLとCSSを駆使して作る

イメージ通りに文字や画像、ページが表示されるように、HTMLやCSSといったマークアップ言語を編集して行う作業です。マークアップ言語を自分で編集して文字のフォントを指定したり、画像からリンクに飛ぶようにするリンク画像設定を行ったり、ページ内で文字や画像の配置を固定する作業を行います。この作業にはある程度高度な専門知識が必要です。

基本的にHTMLメールを作成する場合は、HTMLとCSSを記述して、文字フォントや色を指定、画像の埋め込み、テキストの入力などを行います。HTMLタグと呼ばれるテンプレートを利用すれば、作業の負担を軽減することができます。

編集作業は主にドリームウィーバーやページビルダーなどの編集ソフトを使用しますが、簡単なHTMLやCSSの記述は手作業でも可能です。

■メール配信サービスを利用する

メール配信サービスを利用すれば、自身でHTMLとCSSを駆使して作成しなくても、手軽にHTMLメールの作成・配信が行えます。メール配信サービスの場合は、地域や性別、年齢などの属性を絞ってメール配信が行えるので、ユーザー層にマッチした効果の高いメール配信が可能です。

どのような方法でHTMLメールを作れば良いのかわからないという方や、初めてHTMLメールを作る方は「メール配信サービス」の利用をおすすめします。

例えば、メール配信サービスの「お名前.com メールマーケティング」を利用すれば、手軽にビジュアル的にも美しいHTMLメールの配信が可能です。

配信の効果がよくわかる効果測定機能があり、配信したメールがどの程度読者に届いているのかを計測する「到達率測定機能」や「開封率測定」、アンケート機能、A/Bテスト機能など、効果的にメルマガ配信を行うための機能が充実しています。

3.HTMLメールの表示確認

HTMLメールのコーディングが完了したら、HTMLメールが受信者側で正しく表示されているかどうかの確認を行います。

Gmail、Apple Mail、Yahoo、Outlook、Hotmail、Thunderbirdなど、あらゆる種類のメーラーで正しく表示されているのかを検証しましょう。

ユーザーの少ないメーラーなどもあるので、すべてのメーラーで検証するのは不可能ですが、できるだけ多くのメーラーで検証することが大切です。

4.本登録（本番送信登録)

HTMLメールのテキストに間違い（誤字脱字など）はないか、さまざまなメーラーでフォントやレイアウトが正しく表示されているのかを確認して、HTMLメールの本登録（本番送信登録)を行います。

HTMLメールを作ってみよう！参考になる【おすすめ3選】

実際にHTMLメールを作るとき、参考にしたい企業メルマガのおすすめをご紹介します。

ZOZOTOWNなどの洋服販売系の会社

タイトル文字が大きく、バーゲンセールの日時や期間がわかりやすく表示されたメルマガです。おすすめの新着アイテムがわかりやすいように大きな写真と値段で表示され、一目でほしい商品が選べるように工夫されています。

Hotpepper Beautyなどの美容系の会社

Hotpepper Beautyのメルマガは、お得なヘアサロンやリラク・ビューティーサロンの情報などがふんだんに盛り込まれています。「モテ髪ヘアカタログ」や「前髪カタログ」など、大きな画像を使って流行りのトレンドを紹介している点も特徴です。

流行に敏感なユーザー層が毎回チェックしたくなるようなコンテンツが充実。読者数を維持しながら増やしていく工夫が随所に見受けられます。

日産などの車販売系の会社

企業のロゴやフォントを使用するなどしてブランドイメージの表現に力を入れています。また、新車情報や試乗車体験イベントといったお知らせをこまめに配信しているようです。大きな画像とキャッチコピーを掲載することで、ユーザー層の購買意欲に直接働きかけるデザイン。

電気自動車やコンパクトカー、軽自動車、ミニバン、スポーツタイプ、セダン、商用車などの項目が用意されていて、知りたい自動車の情報がすぐに見られるような設計です。

ここに挙げたメルマガ以外にも、自分のメーラーに届いているHTMLメールをいろいろと観察して、制作者の視点で分析してみると参考になりますよ。

まとめ

HTMLメールの配信方法やメリット、注意点などを解説してきました。

何のためにどのような内容のHTMLメールを配信するのか、しっかりイメージをかためてからメルマガの作成に取り掛かることが大切です。

HTMLメールのコーディングにはHTMLやCSSなどのマークアップ言語の知識が必要ですが、難しい知識がなくてもHTMLメールの配信が行える「メール配信サービス」があるので、ぜひ利用してみてください。