HTMLメール作成で押さえておきたいポイント

  • 公開日:
  • 更新日:

この記事の目次

最近のメール事情

メール閲覧環境の多様化

2015年にエクスペリアンジャパンが出した『BtoC市場におけるメールマガジン受信デバイスの利用実態レポート』には、以下のように記されています。

スマートフォンやタブレットなどのモバイル端末の加速度的な普及や高速データ通信LTEの普及は、メールマガジンの受信環境にも劇的な変化をもたらしました。今やモバイル端末でのHTMLメールの受信・閲覧は当たり前になったと言えるでしょう。

このように、HTMLメールはPCだけでなくモバイル端末でも閲覧されるように変化してきています。

メールの閲覧環境は、以下の3つのタイプに分類することができます。

  • デスクトップ(Outlook, etc.)
  • モバイル(iPhoneのネイティブアプリ, etc.)
  • Webメール(Yahoo!メール, Gmail, etc.)

さらに、Yahoo!メールやGmailに関しては、スマートフォン・タブレットから専用アプリまたはブラウザを利用する場合や、PCからブラウザを利用する場合など、様々な閲覧方法があります。

HTMLメールのメリット・デメリット

メリット

  • 商品やサービスを視覚的に訴求できる
  • 「メール開封率」や「クリック数」などの数値を取得することができ、効果測定が可能になる

デメリット

  • テキストメールに比べて容量が重くなる
  • HTMLメールには制約が多く、手間がかかる

作成時に気をつけるポイント

HTMLはテーブルレイアウトで組む

メールクライアントによってHTMLやCSSのサポート状況は異なります。EmailologyStandards guideに記載されているように、様々なメールクライアントで利用可能なHTMLの要素やCSSのプロパティは限られています。

より多くのメールクライアントで閲覧可能なHTMLメールを作成するには、テーブルレイアウトで組むのが安全です。

インラインスタイルで記述する

HTMLにスタイルを適用させる方法には3つあります。

  1. 外部スタイルシート:link要素を使って外部のスタイルシートを読み込む方法
  2. 埋め込みスタイル:HTMLのstyle要素にスタイルを記述する方法
  3. インラインスタイル:HTMLの各要素にstyle属性を追加してスタイルを適用させる方法

The Ultimate Guide to CSSによると、Gmailはlink要素やstyle要素をサポートしていません。そのため、スタイルを適用させるには「インラインスタイル」で記述する必要があります。

ただし、スタイルをインライン化してくれるツール(下記参照)があるので、自らインラインスタイルを書く必要はありません。

さらに、gulpを使えるのであれば、gulp-inline-cssプラグインを利用するという選択肢もあります。

2016年9月21日追記:Gmailの仕様変更

2016年9月から、Gmailでもstyle要素をサポートするようになります。そのため、スタイルをインライン化しなくても大丈夫になります。

Gmail to Support Responsive Email Design

画像関連で気をつけたいこと

画像のパスは絶対パスで記述する

HTMLメールを送信する時には、画像のパスは絶対パスでなければ表示されません。個人的には、先に画像を本番サーバにアップして、制作の段階から絶対パスで記述することをお勧めします。

imgタグのスタイルにdisplay: block;を入れる

Gmailの場合、画像の上下に隙間ができることがあります。それを防ぐためには、imgタグのスタイルにdisplay: block;を入れれば大丈夫です。

背景画像は使わない

Outlook 2007/2010/2013では、background-imageをサポートしていません。

2016年8月4日追記:画像を圧縮する

Webサイトと同様、モバイル端末での表示も考慮すると、HTMLメールでも表示速度は大事になってきます。そのためには、画像を圧縮して軽量化しておく必要があります。

表示確認の検証は必須!

HTMLメールをコーディングしている間はWebブラウザで確認をおこないます。ただし、Webブラウザで表示に問題が無くても、メールクライアントでレイアウト崩れが起こる可能性は大いにありえます。

また、メールクライアントによってHTML・CSSのサポート状況は異なるので、あるメールクライアントで表示に問題が無くても、他のメールクライアントで表示が崩れていることもありえます。

メルマガでHTMLメールを配信する前に、十分に検証することは欠かせません。

Email on Acid

EmailOnAcid

Email On Acidは、49種類のメールクライアントとデバイスでの表示確認ができます。3つの料金プランがあり、最も安いプランで月額45ドルです。

Litmus

Litmusは、50種類以上の環境での表示確認ができます。料金プランは3つあり、最も安いプランで月額79ドルです。

PutsMail

PutsMail1

上記の2つのサービスは有料で、頻繁にHTMLメールを配信するのでなければ、なかなか手が出せないです。一方でPutsMailは、無料でHTMLメールのテスト送信ができるサービスです。

使い方も難しくないので、個人的にはオススメです。

  1. [Recipients]に、テスト送信するメールアドレスを入力します。
  2. [Subject Line]に、メールの件名を入力します。
  3. [Body(HTML)]に、HTMLメールのソースコードを貼り付けます。
  4. 上記の作業が終わったら[Send Email]をクリックします。