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

  • 2019年10月13日
  • 2020年3月12日
  • HTML/CSS

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

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

今や環境は、outlook(アウトルック)、thunderbird(サンダーバード)、gmail、nbecky、sylpheed、多種多様となっています。

そのため、安全性を高めるために、現在では使われることのなくなったテーブルレイアウトが必須となります。

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

ベースの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,


Fatal error: Uncaught Error: Call to undefined function set_post_views() in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php:658 Stack trace: #0 /home/jszk/desnote.com/public_html/wpjs/wp-includes/template-loader.php(78): include() #1 /home/jszk/desnote.com/public_html/wpjs/wp-blog-header.php(19): require_once('/home/jszk/desn...') #2 /home/jszk/desnote.com/public_html/index.php(17): require('/home/jszk/desn...') #3 {main} thrown in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php on line 658