マーケティングに活用できるhtmlメールの作り方&テンプレート

マーケティングに活用できるhtmlメールの作り方&テンプレート

はじめに

あなたは、メルマガを送るにあたり、htmlメールについてどう思われていますか?あれはセキュリティリスクとなるのでプレーンテキストメール(文字だけのメール)しか受信しないとか、そもそも機能が限られているとか、避けられている方もいらっしゃるのではないでしょうか?

しかし、htmlメールでのメルマガはプレーンテキストメールに比べ、お客様への訴求効果は全く違います。豊かな画像や色合いがメールで表現できると考えただけで、効果は天と地ほどの違いがあります。

そもそもhtmlメールとはなんでしょうか?

htmlとは、ホームページを表示させるための言語のことです。Hyper Text Markup Languageの略です。このhtmlの構文は規格化されています。そして、その構文に沿って書くことで、ブラウザがそれを解析しホームページとして表現するわけです。htmlメールも同じです。html構文で書かれたメールのことです。つまりメールソフトがhtmlメールのhtml文法を解析し表示させることで、色彩と動きのあるメールの発信が実現できるのです。

メルマガをhtmlにしたときの効果

ここで一つ例を挙げてみたいと思います。ご自宅の郵便ポストにあなた宛の手紙が2通届いたとします。1通は、ワープロで打たれた事務的な手紙。もう1通は、手書きでふんだんにイラストや写真が付された手紙。どちらに好印象を持ちますか。一般的には後者ですよね。文字の手紙からは素っ気ない印象を受け、心に響きません。一方、カラフルで手作り感あふれる手紙を受け取ると、送り手への親近感もいっそう増すのではないでしょうか。

同じことがメールでもいえます。テキストの文字の羅列だけのメールを受け取った場合と、カラフルでメリハリのあるメールを受け取った場合、どちらが印象に残るでしょうか?メリハリをつけることは、本当に受け手に伝えたい情報を強調する効果もあるのです。

ここで、実例としてメールを二種類掲示してみます。どちらもポラリスインフォテック株式会社からのメールを許可を得て掲載させて頂いております。
まずは、プレーンテキストメール。

画像

そして、htmlメール。

画像

明らかに後者のメールのほうが与える印象は鮮やかではありませんか?ポラリスインフォテック社が定期的に発行するhtmlメールは実に効果的に装飾が施されており、参考になります。お手本になりますので、是非登録してみてください。 htmlメールの効果をまとめておきましょう。

  • 本当に伝えたい情報をしっかり受け手に伝えられる。
  • 他のテキストメールと違って受け手に見てもらえる率が上がる。
  • 端末ごとにレイアウトが変更できる。
  • 工夫すればそのメールが見られたかどうかが把握できる。

つまり、htmlメールはマーケティングにおいて有効なのです。では、そのhtmlを運用する上での注意点とは何でしょうか?

htmlメールをマーケティングに活用する際の最大の注意点

htmlメールをマーケティングに活用する際の最大の注意点は、メールソフトがhtmlの文法をきちんと読めるかどうかにつきます。ここでhtmlメールについて誤解のないように補足します。 一般のホームページはhtmlのみで作られているわけではありません。見栄えやデザインを制御するCSS(Cascade Style Sheet)という言語と、動きを与えるJavaScriptという言語も使われます。つまり、htmlで骨組みを設定し、そこにCSSという装飾を加え、最後にJavaScriptで動きを加えることでホームページの一般的な構造は成り立っています。

一方、メールソフトの大半は、CSSの一部とJavaScriptが読めません。ホームページを作るのと同じ感覚でHtmlメールを作ろうとすると失敗することになります。とくに、動きをつけるためのJavaScriptの対応については、メールソフトではほぼ非対応と考えておいたほうがよさそうです。また、装飾をつけるためのCSSの対応についても、メールソフトによって実装されている機能がまちまちです。

従って、現状においては、主要メールソフトで概ね実装されているCSS機能のみに絞ったhtmlメールを作成することになります。

以下のCSSの機能については、全てのメールソフトではまだ対応されていないと考えておいたほうがよさそうです。

  • 端末の画面サイズに合わせて表示を変更するレスポンシブ対応
  • floatを使ってブロック要素をテーブル的に表示させる段組
  • 背景イメージの設定
  • 枠の色設定や角を丸くする設定
  • 動画やインタラクティブな描画対応

上記のような制限を考慮すると、htmlメールを作成する際の方向性が明らかになります。それは、テーブルタグによる段組と、テキストの装飾による色設定、さらに画像の配置ぐらいに止めておくのがよいということです。

なお、詳細な対応状況については、英語サイトですがアメリカのCampaign Monitor 社が詳細な対応表を提供してくれています。

もちろん、今後のhtmlメール環境が進歩しないことは考えられません。ただ、それまでの間は限られた機能でhtmlメールを作成し、なおかつマーケティング的な観点で本質を伝えるメール表現を磨くのが肝要です。

htmlメールはこの手順で作る

それでは、htmlメールを作成する例を簡単にご紹介します。ここではThunderbirdを使用しています。

まずは、htmlメールを編集できるようにしなければなりません。ツール→アカウント設定→編集とアドレス入力で下図のように「html形式でメッセージを編集する」にチェックを入れます。

画像

ここにチェックを入れない場合、プレーンテキストメールしか作成できません。編集画面に書式設定のメニューは表示されません。

画像

チェックを入れると、下図のように書式を設定するメニューが表示されます。

画像

入力したテキストに対して、書式を設定するメニューでフォントサイズや種類、色や書体を指定可能です。インデントも設定できるし、表や画像も挿入できます。

画像

メールソフトのhtmlメールの書式編集画面では簡単な装飾しかできません。ですが、ここにあるような装飾程度であれば、大抵のメールソフトで正常に表示されるのです。なのでメールソフトの書式編集メニューは活用してよいでしょう。

ただし、メールソフト独自の装飾使用は避けたほうがよいです。今回はThunderbirdを利用しましたが、書式編集メニューの右端には顔文字があります。これを挿入することで顔文字が表現できますが、使わないほうが無難です。

画像

テンプレートを使えばさらに便利に

一からhtmlの構文に沿ったメールを作る知識や時間がない方のため、htmlメールのテンプレートが各社から提供されています。テンプレートを使用する利点としては、以下のように考えられます。

  • 一から作る手間を省ける
  • 各メールソフトのCSS対応状況が考慮されているため、メールソフトの差異を気にする必要がない。
  • CSSのレスポンシブ対応が考慮されているため、受け手の端末サイズを気にしなくてよい。

なお、テンプレートの配布サイトは英語サイトがほとんどのようですが、以下に紹介するサイトでは、テンプレートサイトの使用方法を日本語で分かりやすく説明しています。

Coliss-これは使える!レスポンシブ対応のさまざまなhtmlメールが簡単に作成できる無料のオンラインサービス -BeeFree

メールマーケティングラボ-【非デザイナー向け】無料ツールを利用したhtmlメールの作り方~前編~

まとめ

今回はhtmlメールについて紹介してきました。ここでおさらいとして利点と注意点を掲げます。

  • 画像や色彩が使われているため、テキストメールに比べて読み手への訴求効果が高い。
  • メールソフトによっては表現できない装飾効果もあるため注意する。
  • 動きを表現するためのJavaScriptは使用できない。
  • メールソフトの書式設定メニューから簡単に装飾が加えられる。
  • テンプレートを活用することで、様々なhtmlメールを作成することができる。

これらの点を踏まえ、htmlメールを上手に活用して皆様のマーケティングにお役立て下さい。

関連記事

今すぐ誰にでもできる!メルマガ開封率の改善の3つの方法
メールマーケティングとは?成功事例と効果的な3つの使い方
メルマガの命はコピーに宿る!ユーザを動かすコピーの作り方!
HTMLメルマガを配信したい!HTMLメルマガをはじめるなら知っておきたい、気を付けるべき3つのポイント!
レスポンシブなHTMLメールを作成できる「BeeFree」を試してみた

PR_infeed

PR_Relative

オウンドメディア運営会社の皆様へ

s

ページトップ