HTMLメールの作成の仕方と注意点 【2019年度版】

  • 2019年10月13日
  • 2019年10月13日
  • entry

HTMLメールの場合、開封率がわかり、またテキストメールに比べてクリック率(CTR)や購買率が高いと言われている。

ただ、ユーザがHTMLメールを見る環境を考えると100パターン以上存在し、書く環境に対応するのは難しい。

そのため、現在では使われることのなくなったテーブルレイアウトが必須となる。

このテーブルレイアウトの作り方についてまとめてみました。

ベースのHTMLはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  <title></title>  <style type="text/css"> <!-- ここに埋め込み形式のCSSタグを記述して行きます --> @media only screen and (max-width: 480px) {<!-- スマホ用はこちら --> }  </style></head><body>  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0" class="base"> <tr><td>  <!-- ここにコンテンツをHTMLタグで記述して行きます --></td> </tr>  </table></body></html></html>

メリット

ユーザに好まれる

やはり、テキストだけのものよりも、画像や、レイアウトを駆使したわかりやすいメールの方が好まれる傾向にあるため、最後まで読んでくれやすい。

開封率の測定ができる

冒頭にも記載しましたが、画像のURLでログ送信すれば開封率の測定が可能です。

デメリット

通常のHTML作成とは違う知識が必要

後に記載するデメリットに関連しますが、テーブルレイアウトを組むための知識が必要です

ユーザの閲覧環境によっては正しく表示されない

メールクライアントによって、対応度合いが違く、崩れる可能性があります。

作成する上での注意点

基本的にテーブルレイアウトで構成する

あらゆる環境で閲覧できるようにするには、テーブルレイアウトが良い。
cssやsectionなどを使っていると、崩れる可能性が高くなる。
また、colspanやrowspanもサポートされていないため、使わずに組み立てる必要がある。

一般的なタグは使用しない

h1, h2, h3などのタグも使ってはいけない。

CSSはstyleタグで埋め込むことを推奨

styleタグ埋め込み形式

以前は、タグにstyle属性で指定するインライン形式が多かったが、現在これは主流では無い。
特にGmailがやっと2016年にサポートしたため、styleタグによる指定で問題なくなっている。
と言っても、CSSクラスを利用できるわけでは無いので注意。
※ちょっとここの情報は怪しいです ><

インライン形式

ただ、インライン形式は一番安全が保障されている書き方ではある。
しかし、コードが読みづらくなり、管理も複雑になってしまう。
基本はstyleタグに記載し、個別のスタイルが必要な場合はインライン形式で指定する。

外部ファイル形式

多くのメールクライアントがブロックしてしまうので、非推奨。

装飾用HTMLタグは使える

通常では非推奨となっていたタグは、HTMLメールでは推奨されている
bタグで太字、fontタグでカラー指定、hrで線引きなど。

スマホ用のスタイルにはCSSを使える

スマホ用にはCSSクラスを指定して作成することが可能。
ベースのHTMLにあるスマホ用の箇所に加えましょう。

マージンに注意する

一部メールクライアント(OutlookやHotmail)ではマージンのサポートを打ち切っている。
ただ、利用数が少なければ、一部クライアントは諦めるという選択肢もあり。

一括指定プロパティは使えない

フォントの一括指定するCSSなどは使えないので、別々に指定しましょう。

容量に注意する

Gmailの場合、102KBを超えると勝手にクリッピングして隠してしまう。
なので、100KB以下になるようにすべき

使えるタグ一覧はこちら

table, tr, td, p, img, a, br, font,