リッチな表現ができるHTMLメールは、現在では多くの企業が利用しています。今回は、HTMLメールの作り方と簡単にHTMLメールを作ることが可能なツールを紹介します。

HTMLメールとは

HTMLメールとは、メールの本文をWebページの作成に使うHTMLを用いて、文字の色やフォントサイズを変更したり、画像を埋め込んだりすることで、リッチな表現が可能なものです。

例えば、Amazonの会員登録をしていると、次のようなHTMLメールが送られてきます。

文字のみのテキストメールよりも、視覚的に分かりやすいメールを作成することができ、先ほど紹介したAmazonなどの大企業から中小企業まで、多くの企業が利用しています。

メールでのコミュニケーションは古い?

FacebookやTwitter、LINEなどのソーシャルメディアの普及により、メールでのコミュニケーションは古いのではと思う人も多いかもしれません。

しかし、2014年の調査では、ユーザが企業から情報を受け取る手段として9割以上がメールを利用しています。さらに、メールマガジンがきっかけで商品を購入したことがある人は50%となっています。

企業がユーザへのコミュニケーションを取る手段として、メールはとても有効であり、HTMLメールの利用は、より積極的なコミュニケーションを可能にします。

ブラウザ対応より難しい、メーラー対応

HTMLメールを作成するには、Webページを作成するとき用いる言語HTMLとCSSを使用します。

Webページでは、IE(インターネットエクスプローラー)、Firefox、Google Chrome、Operaなどブラウザの種類やバージョンによって挙動が異なり、表示崩れが発生します。Webページを作成するときには、各ブラウザで正しく表示されるように対応を行ないます。

HTMLメールでは、OutlookやThunderbirdなどのメーラー(メールの作成や送受信を行なうソフト)毎に、ブラウザの違いよりも大きな表示崩れが発生するため、対応の必要があります。

メーラーごとに異なるCSSの対応を確認して、多くのメーラーがサポートしているCSSのみ確認するというのが、HTMLメールにおけるCSSの使い方の基本です。

HTMLメールの作り方

現在、Webページを作る場合には、文書構造をHTMLでマークアップし、CSSでレイアウトを指示するというのが基本です。

かつてWebページを作る場合には、テーブルタグを用いて、レイアウトを決めて、色などをスタイル属性で指定するという形が主流でした。

HTMLメールでは、メーラーによって挙動が異なり、それらの解決策としてテーブルレイアウトを用いる方法が主流となっています。

基本はテーブルレイアウト

テーブルレイアウトでは、タグを使って、サイズを指定して配置を決めて行きます。

最初に紹介した、AmazonのHTMLメールも基本的な構造としては、テーブルレイアウトを用いています。

Amazonの場合は、<td>タグの中にさらに<table>タグを入れることで、レイアウトを制御しています。

HTMLを触ったこと無い人がソースを見て分からないと思うのはもちろん、HTMLを書いたことがある人は、このような複雑な入れ子になってしまうHTMLは書きたくないと思うのではないでしょうか。

現在、ツールを使わずに、多くのメーラーに対応したHTMLメールを書こうと思った場合には、この手法が主流という状況です。

CSSはインラインで

外部CSSや<head>を読まないメーラーに対応するために、CSSはインラインで指定する必要があります。

今ではHTMLソースにインラインで指定する機会は減っていますが、HTMLメールでは各要素にstyle属性を用いてスタイルを指定します。

Amazonのメールの場合は、次のようにスタイルを書き、背景のグレーを指定しています。

各要素に指定するため、色の変更があった場合には、それぞれの要素に対して指定する必要があります。

ドラッグ&ドロップでデザインを変更できるツールがおすすめ!

ここまで、HTMLメールの作り方について説明してきましたが、HTMLメールの作成に大きな工数を使うのであれば、HTMLメールのレイアウトをドラッグ&ドロップで指定でき、色や文字の大きさも簡単に変更できる、メール配信ツールやメールマーケティングツールを用いることをおすすめします。

Marketing Bankでも、次のようなHTMLメールを配信していますが、HTMLメールが簡単に作成できるメールマーケティングツールを使って配信しています。

HTMLの知識が無くても、テンプレートを選択して、色や配置を変更して、写真や文字を入力するのみで、簡単にHTMLメールを作成できます。

HTMLメールを作成するときに、広報の担当者が内容を考えて、HTMLメールをコーディングする制作の担当者に依頼をしてといったフローが不要で、効率良くメールの配信を行なうことが可能になります。

おすすめのHTMLメール作成、メール配信ツール

月額900円から利用できる「さぶみっと!メール配信」

さぶみっと!メール配信はHTMLメールを簡単に作れるだけでなく、月額900円~と非常に低価格から利用できます。

豊富な機能があり、月額1,500円から利用できる「Benchmark Email」

Benchmark Emailは、A/Bテスト機能や操作性の高いHTMLメールの編集機能があり、月額1,500円から利用できます。

まとめ

HTMLメールは様々な表現ができ、マーケティングにおいて有効な施策の1つです。しかし、作るのは、HTMLの知識があっても取り組みにくい部分が多いというのが現状です。

HTMLメールの作成を検討している場合には、メール配信、メールマーケティングツールを使うことをおすすめします。