デザイン性の高いHTMLメール。テキストメールと違い、画像や動きを入れることで、マーケティング効果を高めることができます。昔よりもツールが増えたことで、専門知識がなくても作りやすくなっているようです。ただし、スマホでストレスなく情報を見るためには、注意するべきデザインやサイズ、フォントもあることを覚えておきましょう。

デザインでイメージを伝えられるHTMLメール

スマホの普及により、htmlメールは今や一般的となりました。HTMLメールは画像などを使い、ユーザーの視覚にうったえることで興味を引くことができます。テキストメールと違うメリットとデメリットについて、確認してみましょう。

HTMLメールのメリット

・画像を使って視覚的に商品、サービスをアピールできる
・開封率、クリック率といった効果測定ができる
・マーケティングの改善ができる
・ブランドイメージを植え付けやすい

HTMLメールの注意点

・作るのに専門的な知識が必要になる場合がある
・表示が受信者の端末環境に左右される
・メール容量が大きくなる
・自動的に迷惑メールに振り分けられる可能性がある

HTMLメールの利用で注意したいのが、レイアウトが崩れる可能性があることです。受信者の端末環境によって、表示されない、デザインが崩れるなど予想外の見栄えになってしまいます。できるのであれば、送信前にいくつかの端末で表示を確認すると良いでしょう。

最大のメリットは画像表示

HTMLメールを利用するメリットの中でも着目したいのが、「表現力の高さ」です。テキストメールと違い、画像を利用したメールによって視覚的なインパクトを与えることができます。マーケティング効果の向上を期待することができます。

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

HTMLメールで画像が表示される仕組み

画像表示の仕組みを知るためには、HTMLメールの仕組みを知る必要があります。まず、HTMLメールは「メール」という配信原稿と「ミラーページ」や「ランディングページ」、「画像フォルダ」から構成されます。ミラーページは、メールと基本内容は同じでありながら、ユーザーの環境設定によりメールが正しく表示されない場合に使用されるページです。ランディングページはメールおよびミラーページ内のURLをクリックした先に表示されるページのことを指します。メール、ミラーページ、ランディングページの3つのページ内で使用される画像が画像フォルダ内に収められています。

ミラーページやランディングページ、画像フォルダのデータはサーバー上に置かれ、一般的に同じフォルダ内に収められます。この場合、画像は「相対パス」という「基準とされたページからその画像までの経路」を示すアドレスが利用されます。一方、メールのデータはシステムを通して配信されるため「絶対パス」という「基準のページに関わらず、画像にたどり着くためのアドレス」が利用されます。「http://~」などから始まるURLがこれに当たります。

HTMLメールでの画像表示では、絶対パスが利用されている必要があります。誤って相対パスが使われていたり、画像がサーバーにあげられていなかったりする場合には画像が表示されなくなります。HTMLメールでの画像は、「絶対パスによって指定のサーバー内へとたどり着くことで表示される」という仕組みで成り立っています。

関連記事はこちらテキストメールとHTMLメールの違いとは？目的に応じて使いわけるコツ

数字で見るHTMLメール

HTMLメールのメリットは、視覚的にアピールできる点。そして、最近ではスマホでHTMLメールを見るのが主流となっています。そのことから、スマホでどう見えるかは重要なポイントとなるでしょう。 HTMLは設定するサイズによって「見やすさ」が変わってきます。HTMLメルマガを作る時にどのように設定するのが良いのか確認してみましょう。

横幅の設定

受信者がメールを読むかの判断は、第一印象が大切です。HTMLメールは、その点で大きなメリットを持ちます。しかし、横にスクロールしなければ全文が読めないメールは、受信者の関心を削ぐ要因となるのです。
現在HTMLメールの横幅は600pxか850pxで設定ができます。それぞれのメリットは、受信する端末によって違います。

【600px】

・メリット→スマホで見やすい
・デメリット→PCで見た時印象が弱い

【850px】

・メリット→PCで見た時インパクトがある
・デメリット→スマホで見た時小さくなるので、文字が読みづらい

ただ、受信者にあわせメールを作り直すのは手間も時間もかかってしまいます。その補助策として考えられているのが、背景色をつける方法です。600pxで作成したメールに背景色をつけることで、PCではデザインとしてみることができます。一方スマホでは、背景色は表示されないため見やすいメールになるのです。

フォントの設定

横幅をスマホで見やすい600pxにした時、拡大せずに読めるフォントサイズは「15pt以上」です。基本的に拡大して読むユーザーはいないものとして考え、15pt以上でメールを作成します。また、より伝えたい情報は24pt以上にするなど、工夫することでメリハリのある内容にすることもできるでしょう。
そして、文字数も重要なポイントとなります。横幅600px、フォントサイズ15ptの場合、だいたい45文字が1行あたりの表示文字数になります。横幅の設定でも伝えた通り、横にスクロールして読むメールは、読まれない可能性が高くなるので注意してください。
「横幅600px」「フォントサイズ15pt以上」「1行あたり45文字以内」を意識するとスマホで読みやすいメールが作れるでしょう。

リンク設置ボタンのサイズ

ユーザーを自社サイトや商品・サービスの詳細ページに誘導するためにリンクが設置されます。URLを貼るだけでもリンクは設置できますが、せっかくHTMLでデザインするのであればリンク設置ボタンを入れましょう。画面上でも目立たせることで、ユーザーを目的地に誘導しやすくなります。

スマホの画面でタップできるようにするには、ボタンを作る際、縦横50px以上が必要になります。また、いくつかリンクを設置するのであれば、各リンクエリア間に20pxの隙間を入れるといいでしょう。
ボタンサイズを大きくすることで目立たせることはできますが、間隔が近いと押し間違える可能性もあります。それでは、ユーザーのストレスになるので「見やすさ」「使いやすさ」を意識してメールを作るようにします。

受信環境を考えた4つの対策>

ユーザーが受信する環境はそれぞれ違います。せっかく作り上げたメールでも閲覧されなければ意味がありません。多くのユーザーが利用するのはスマホになりますが、他の端末でも利用できる方法があるなら知っておくべきでしょう。
次は、PC、スマホ、タブレットなど機器の違いがあっても対応できる方法を4つ紹介していきます。

1.マルチパート配信

スマホの普及で一般化したといっても、すべてのユーザーがHTMLメールを見ているわけではありません。メールソフトが対応していないと、表示崩れや表示されないといった事態になります。そのため、マルチパート配信の設定は必須となるでしょう。
マルチパート配信は、受信者の環境に合わせてメールの表示を切り替えるといった機能です。HTMLデータとテキストデータの両方をもったメールを送ることで、受信者の環境にあったデータが表示されます。

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

2.レスポンシブデザイン

レスポンシブデザインは、画面サイズに合わせデザインを変更することができます。端末の画面サイズに合わせ表示を変えるので、PC、スマホのどちらでも読みやすいメールを送ることができるのです。
とても便利な機能ですが、PCをベースに作っていると、画面サイズの小さいスマホで見えづらくなります。端末にあわせて設定を精査するので、作るのに時間がかかる点と、データが重くなる点には注意が必要です。

3.リキッドレイアウト

リキッドレイアウトは、要素を割合で指定することで、画面サイズに合わせ表示させます。文章や画像などコンテンツをそれぞれ1つの枠に入れるようにして、枠ごとに表示サイズを調整します。大きなレイアウトズレをおこすリスクを軽減できますが、画面サイズの大きな端末だと幅広い印象になります。

4.フレキシブルレイアウト

リキッドレイアウトをベースとして、「表示サイズの最大値・最小値を固定」する方法。現在多くのメルマガで　利用されています。画面サイズに合わせ枠を調整する点は同じですが、最大値・最小値を指定するので、大きな画面では余白が生まれます。PCなどの大きな画面で見た時の幅を固定したい、といった場合によく利用されるレイアウトです。

紹介したような機能を使えば、いろいろな端末に向け情報を発信することができます。しかし、一から知識や技術を学ぶのは、時間も労力もかかるでしょう。そういった面倒事を解決するには、メール配信サービスを利用するのも一つの手段となります。
テンプレート等で簡単にHTMLメールを作成できるだけでなく、ほとんどの場合マルチパート配信にも対応しています。そのため、あまり知識がなくてもユーザーに確実にメールを届けることができます。

ユーザーの読みやすさを考えたHTMLメール作り

スマホで見やすいHTMLメールは「横幅600px」、「フォントサイズ15pt以上」が基本となります。そして、ユーザーにとって読みやすいメールは、拡大やスクロールといった操作をせずに読めることがポイントです。横にスクロールさせないと、全文が読めないメールはストレスになります。15pt以上であれば45文字以内で文章を区切るようにしてください。
PCやタブレットにも対応できる設定はありますが、多くのユーザーが利用しているのはスマホになります。今回紹介した数字を意識して、スマホでも読みやすいHTMLメール作りを心がけましょう。