HTMLメルマガでは画像を貼り付けられるため、テキストだけのメルマガよりも顧客への訴求力が優れていると考えられます。今回はHTMLメルマガの基本的な作成方法と注意点、そしてスマホに対応させるための方法についてご紹介します。

メルマガはHTMLが中心になっている

従来のメルマガは、文字だけのテキストメールが中心でした。しかしパソコンやスマートフォン、タブレット端末などのHTMLに対応した機器を所有する人が増えたことから、比較的誰でもHTMLメールを閲覧できるようになっています。
そのため、現在ではテキストメールよりもHTMLメールがメルマガの中心になっているといえるでしょう。

HTMLとCSSの関係性

HTMLが文章の骨組みだとすると、CSSは装飾にあたります。
メールの基本的な構造や本文、画像、URLのリンクなどをHTMLで作成した後、フォントの種類やサイズ、画面全体の余白や背景画像など、さまざまな装飾を施すのがCSSの役割です。
CSSを使うことで本文を読みやすく整え、重要な部分が目立つようなメールに仕上げられます。

HTMLメルマガの作り方

マーケティング効果の高いHTMLメルマガを作成するためには、HTMLの技術だけでなく、メール本文の工夫やメール配信サービスの選び方なども意識する必要があります。現在ではスマホが急速に普及したため、スマホからでも正しく表示されるようにメールを作成することも大切です。そこで、HTMLメルマガを作るために、HTMLメールの基本的な特徴と、主な2つの作業、そして初心者におすすめの作り方を紹介します。

関連記事はこちら無料でHTMLメールを作れる？メルマガ配信に使える無料ツールとテンプレートをご紹介

HTMLメールの特徴とメリット

HTMLは、Webサイトの作成にも使用されている言語です。HTMLを使用したメールは、Webサイトと同様に、画像の挿入や文字の装飾などを行えるため、見栄えの良いデザインにできます。また、視覚的にインパクトがあることから、わかりやすい画像を入れると、文字数を減らして読みやすくできる点もメリットです。さらにHTMLメールでは、メルマガの開封率も測定できます。開封率の測定は、HTMLメール内の画像が読み込まれた回数などを使用するため、テキストメールでは測定ができません。メルマガのより正確な効果測定を行うためにも、HTMLメールを使いこなしてみましょう。

HTMLメールには2つの作り方がある

HTMLメルマガは、マークアップとスタイリングと呼ばれる2つの作業で作成します。マークアップは、HTMLタグに文章や画像を入れていき、メールの構造を作成していく作業です。主に、テーブルレイアウトという手法が使われます。
スタイリングは、色やサイズなどを装飾していく作業であり、マークアップの後にCSSを用いて行われます。主なスタイリングの作成手法には、インラインスタイル、埋め込みスタイルシート、外部スタイルシートの3つがあります。

インラインスタイル：スタイリングをHTMLタグに直接に入力する方法です。
埋め込みスタイルシート：スタイリングをHTMLのhead部分に入力する方法です。
外部スタイルシート：スタイリングを入力した別のファイルをHTML内で読み込ませる方法です。

埋め込みスタイルシートや外部スタイルシートでHTMLメルマガを作成すると、メールサーバーによっては読み込まれない場合もあります。そのため、インラインスタイルを用いるのがおすすめです。

関連記事はこちらメルマガのデザインを極める！HTMLメールの見やすい設定とデザインのコツ

HTMLメール初心者でもメルマガを作れる方法

HTMLコーディングの経験がない方は、HTMLメールエディタ機能や既存のテンプレートを利用しましょう。HTMLメールエディタには、コーディングを補助するものから、コーディングをしなくても直感的に作成できるものまでさまざまな種類があります。コーディングが必要ないものでは、画像やテキスト、リンクボタンなどのコンテンツを、ドラッグ＆ドロップで配置するだけで済むため簡単です。また、テンプレートだけに限れば、エディタ機能に付属しているものだけではなく、インターネット上で配布されていて無料で利用できるものもあります。まずはこれらの機能・テンプレートに慣れ、完成形をイメージできるようになってから、HTMLコーディングでの作り方に取り組むことをおすすめします。

関連記事はこちらメルマガはテンプレート化すべき？テンプレート化のメリットや注意点

関連記事はこちらメルマガ効果UP！初心者でもできるHTMLメール活用法

HTMLメルマガ作成時に注意する5つのポイント

HTMLメルマガのマーケティング効果を高めるためには、メール配信サービスの選択も大切です。特に、以下の5点はとても大切なポイントです。

1.読みたくなる工夫がされているかどうか

HTMLメルマガは、テキストメルマガよりも顧客に訴えかける効果が高くなります。ただし、顧客が思わず読みたくなるような工夫を施さなければ開封率の上昇は見込めません。インパクトのある画像を用いるなど、顧客の興味を惹きつけるようなメールを作成しましょう。Webサイトへのリンクを設置する場合は、本文の上部など目立つ部分に貼り付けることでクリック率の向上が見込めます。

2.開封した顧客の情報を測定できる機能が備わっているかどうか

HTMLメルマガは開封率を調べられますが、開封した顧客一人ひとりの情報までは調べられません。
メール配信サービスには、年齢や性別といった顧客情報や開封に利用した端末などの情報を取得できる機能が備わっているものもあります。情報は多ければ多いほど次回の配信に生かせるため、機能の充実したシステムを選ぶことが大切です。

3.マルチパートメールを送信できるシステムかどうか

マルチパートメールは、受信した端末でHTMLメールの表示がうまくいかない場合に、テキストメールを代わりに表示するメールです。メールを確認できる端末は増え続けており、すべての端末で受信確認を行うことは困難であるため、ぜひとも備えておきたい機能です。

関連記事はこちらマルチパートメールはメルマガに向いている！基礎知識と導入方法

4.環境ごとにテスト配信を済ませておく

HTMLメールの表示は、受信者の使っているメーラーによって、表示の仕方が異なっているため注意が必要です。作成中は問題なく表示されていた場合でも、実際に配信してみると画像や文字の配置が崩れてしまう可能性があります。そのため、HTMLメールは作り方だけではなく、配信前にメール配信サービスのテスト機能などを使い、主要なメーラーで表示できるかどうかのテストをしておく必要があるでしょう。

5.システムの提供会社がしっかりしているかどうか

会社を選ぶ際には、通信環境に着目してみましょう。サーバーを1台しか所持していない会社では、そのサーバーがダウンしてしまうとメルマガを配信できません。もしもメルマガ配信中にサーバーがダウンしてしまうと、同じ顧客に同じメールを再送信することも起こり得ます。そのため、サーバーを複数台所持している会社を選択することが大切です。
徹底されたセキュリティ対策の有無もまた、会社を選ぶ際の基準になります。顧客の個人情報を取り扱う以上、その漏洩には一層の注意が必要です。もしも個人情報を流出させてしまうと、顧客からの信用を失ってしまいます。そのため、セキュリティ対策を徹底している会社のシステムを選ぶことが大切です。

関連記事はこちらメールサーバーの仕組みと役割｜エラーメッセージごとの対処法もご紹介

HTMLメルマガをスマホ向けに送信するために

スマホが普及したことで、スマホからメルマガの確認を行う方は少なくありません。しかし、パソコン用のHTMLメルマガをスマホで表示させるとレイアウトズレが起こってしまうことがあるので注意が必要です。そうした状況を防ぐためには、以下の方法が効果的です。

レスポンシブメール

レスポンシブメールは、受信した端末の画面サイズに合わせてメールのレイアウトを変化させて表示するメールです。受信者は、パソコンからでもスマホからでも常に読みやすいメールを受け取れます。ただし、レスポンシブメールの表示にはmedia queryが必要であるため、media query非対応のメールサーバーで受信した場合には非常に見づらくなります。GmailやOutlook、Yahooメールといった主要なメールサーバーのスマホアプリ版には、media queryが対応されていないため注意が必要です。

リキッドデザイン

リキッドデザインは大幅なレイアウトズレを起こすことなく、画面サイズに合わせて表示する方法です。media queryを必要としない点が大きな特徴です。ただし、リキッドデザインに対応していない端末で表示するとレイアウトが崩れてしまいます。特に、Yahoo!メールは非対応であるため注意が必要です。

おすすめのメルマガサービス3選

HTMLメールを作成する際には、メルマガサービスを導入することをおすすめします。ここでは、使い勝手の良いメルマガサービスを3つご紹介します。

WiLLMail

WiLLMail（ウィルメール）は、誰でも手軽にHTMLメールを作成できるメルマガサービスです。今では多くのサービスで採用されているドラッグ＆ドロップによるメール作成機能を、初めて搭載したサービスとしても知られています。

初期費用が0円で導入できるうえに、月額プランにはシンプルプランとプレミアムプランの2種類が用意されており、料金体系がわかりやすいのも嬉しいポイントです。

配配メール

配配メールは、集客や販促に活躍するメルマガサービスです。メールマーケティングには欠かせない基本機能を網羅しており、シンプルなつくりで直感的な操作が行える点が魅力です。

加えて、高い確率で受信者にメールを開封してもらえるように、配信したメールが迷惑メール（スパム）に判定されないための対策を施しています。さらに自社スタッフによる手厚いアフターフォロー体制を整備しているため、初めての方でも安心してお使いいただけます。

オレンジメール

オレンジメールは月額2,480円～と、安価に利用できるメルマガサービスです。半年間は無料版を使えるため、十分に検証してから有料版に移行するかどうかを決められる点がメリットといえます。

シンプルながらメールの作成に必要な機能はひと通り揃っており、初心者でも手軽にメルマガの運用が可能です。さらに有料プランへの移行後も、30日間は無料期間が設けられています。

HTMLメールの作り方のまとめ

HTMLメルマガは画像を貼り付けられるため、テキストメルマガよりも顧客への訴求力が強い点が特徴です。主にメールの構造を作るマークアップと、色やサイズを整えるスタイリングの2つの作業から作成されます。
マーケティング効果の高いHTMLメルマガを作るためには、インパクトのある画像を使用するなど顧客に開封させる工夫を凝らす必要があります。メール配信サービスの選択も大切で、「具体的な顧客情報まで調べられるかどうか」「マルチパートメールを送信できるかどうか」「システムを提供している会社が信頼できるかどうか」の3点を重視して検討するようにしましょう。
スマホの普及により、HTMLメルマガをスマホから確認する方も増えています。スマホからでも見やすいように、レスポンシブメールやリキッドデザインを上手に使い分けましょう。
今回ご紹介した内容を踏まえて、マーケティング効果を上げるHTMLメルマガを作ってみませんか。