HTMLメールとは
HTMLメールとは
HTMLタグで作られたメール。表組でレイアウトを変更したり、画像を使ったアピールをしたりできるメールです。
また、HTMLメールの場合、開封率がわかり、またテキストメールに比べてクリック率（CTR）や購買率が高いと言われている。
逆にテキストメールとは
装飾が何もなく、ただ文章だけが送れるメールです。
これだけ見ると、HTMLメールの方が良いという結論になりますが、ユーザがHTMLメールを見る環境を考えると100パターン以上存在し、書く環境に対応するのは難しい。
今や環境は、outlook（アウトルック）、thunderbird（サンダーバード）、Gmail、becky、sylpheed、iOSメール、Androidメール、に加えてOSと、多種多様となっています。
そのため、安全性を高めるために、現在では使われることのなくなったテーブルレイアウトが必須となります。
このテーブルレイアウトの作り方についてまとめてみました。
基本、ここに書いてあるもの以外は使わない方が良いと感じます。
ベースのHTMLはこちら
See the Pen
HTMLメールテンプレート by jszk (@jszk)
on CodePen.
メリット・デメリット
メリット
ユーザに好まれる
やはり、テキストだけのものよりも、画像や、レイアウトを駆使したわかりやすいメールの方が好まれる傾向にあるため、最後まで読んでくれやすい。
開封率の測定ができる
冒頭にも記載しましたが、画像のURLでログ送信すれば開封率の測定が可能です。
デメリット・危険性
通常のHTML作成とは違う知識が必要
後に記載するデメリットに関連しますが、テーブルレイアウトを組むための知識が必要です
ユーザの閲覧環境によっては正しく表示されない
メールクライアントによって、対応度合いが違く、崩れる可能性があります。
HTMLメールの作り方マニュアル
DOCTYPEはHTML 4.01 Transitionalを使う
理由としては、テーブルレイアウトが許容されているものを扱うため。
HTML5などではテーブルは表を作るためで、レイアウトに使うものでは無い仕様なので、NGとなっている。
とはいえ、HTML5にしたとしても不具合は今のところ聞いていない。
基本的にテーブルレイアウトで構成する
あらゆる環境で閲覧できるようにするには、テーブルレイアウトが良い。
cssやsectionなどを使っていると、崩れる可能性が高くなる。
一般的なタグは使用しない
h1, h2, h3などのタグも使ってはいけない。
CSSはstyleタグで埋め込むことを推奨
styleタグ埋め込み形式 <style></style/>
最近は対応しているメーラーも増えてきたので、サポートメーラーによって対応は異なる。
インライン形式 <td style=””>
インライン形式は一番安全が保障されている書き方ではある。
一番安全。しかし、コードが読みづらくなり、管理も複雑になってしまう。
外部ファイル形式
多くのメールクライアントがブロックしてしまうので、非推奨。やってはダメ。
装飾用HTMLタグは使える
通常では非推奨となっていたタグは、HTMLメールでは推奨されている
bタグで太字、fontタグでカラー指定、hrで線引きなど。
TODO: より多くの環境に対応するために、同じ挙動のCSSスタイルも重複して指定する方がいいらしいけど。なぜだろう。どちらかにしか対応していないメーラーがあるのかな。
スマホ用のスタイルにはCSSを使える
スマホ用にはCSSクラスを指定して作成することが可能。
ベースのHTMLにあるスマホ用の箇所に加えましょう。
マージンに注意する
一部メールクライアント（OutlookやHotmail）ではマージンのサポートを打ち切っている。
ただ、利用数が少なければ、一部クライアントは諦めるという選択肢もあり。
一括指定プロパティは使えない
フォントの一括指定するCSSなどは使えないので、別々に指定しましょう。
容量に注意する
Gmailの場合、102KBを超えると勝手にクリッピングして隠してしまう。
なので、100KB以下になるようにすべき
横幅指定はPCは600px、スマホは100%
特に理由がなければ600pxくらいがちょうどいい。レスポンシブに対応する。
画像はALTの指定はすること
メールは画像非表示にしている事が多く、ALTの内容が表示されるケースが多い。
なので、ALTはちゃんと指定しましょう！
使えるタグ一覧はこちら
table
cellspacing、cellpadding、borderは指定がない場合は0を指定する？
主な使う属性： width / height / border / cellpadding / cellspacing / bgcolor / align
tr
主な使う属性：
td / th
主な使う属性：width / height / valign / align
rowspanが使えないケースがあるので、使わない事。
font
主な使う属性：
img
主な使う属性：src / alt / width
style="vertical-align: XXX;" をつけた方がいい
親にtdに style="font-size:0;"
br
a
主な使う属性：href
2px以上のborderは、td要素にbackground-colorをもたせる。
メールソフトによっては幅が異なるケースがあるらしい。
br、hrタグは使わない
TODO: 真意は確認中・・・。
titleタグは空で用意する
TODO： 理由忘れました。。。
メーラー別の対策まとめ
outlook
background-image、グラデーションが使えない
td要素でrowspanが使えないケースがあるので、table要素を組み合わせて対応する
画像の周囲に余白が追加されるケースがある
TODO: どのケース？
Gmail（web・アプリ）
同じ画像を繰り返し使うと2回目以降が表示されないケースあり。
他はあまり無い。優秀。
iOSメール
内容に電話番号を入れると自動リンクがつく。content=”telephone=no”が効かない。
`090​-1234-5678` のような形で書くと良い
Androidメーラー
テキストを折り返さないので、word-break: break-all;は必須
メディアクエリの対応がデバイス・OSによって異なる
これは困る。
Becky
imageタグにborder=”0″を指定しないとボーダーがつく
左右のpaddingが効かないので、tdのwidthで頑張る
text-alignを指定しないとcenterになるので、必ず指定する事
メーラーのシェア率は？
アメリカ国内編
2017年時点では、
1位の「Gmail」が59%
2位の「Outlook（Hotmailを含む）」が18%
3位の「その他」が17%
4位の「Yahoo！メール」が5%となりました。
本調査はアメリカ国内で実施されたものです。
（引用）
ビジネスメール編
1位「Gmail（G Suiteを含む）」（38.36%）
2位「Outlook」（35.07%）
3位「iPhone（iPad）のメールソフト」（10.56%）
4位「Yahoo!メール」（10.11%）
5位「Office 365」（7.64%）
6位「Thunderbird」（7.61%）
7位「Windows Live メール」（7.34%）
8位「Outlook Express」（5.21%）
9位「Outlook.com」（2.96%）
10位「独自」（2.95%）
各社のメールのソースコードを調べてみた
まとめると違いは
・div、cenrterのタグも使っている
・DOCTYPEは結構それぞれ違う
・レセットCSSは使っている企業が多い
・テーブルレイアウトしていない企業は存在しない
ウェルスナビ（wealthnavi）
styleタグはあまり書かれていない。
驚くことは、divタグが多様されている。ウェルスナビはサポートメーラーを減らして対応しているのかもしれません。
ただ、テーブルレイアウトももちろん使っておりますので、理由はわかっていないところ。
divを組み合わせるやり方も最近では主流なのかもしれません。
ebookjapan、みずほ銀行、Newspicks、PayPayフリマ、twitter
典型的なHTMLメールの対応をされています。一部divも使われていますね。divの使い方は調べておきます。
hotpepper beaty
DOCTYPEがHTML5になっています。また、styleタグは利用されていませんでした。
divタグの利用はあります。
メルカリ
HTML5のDOCTYPEを利用。divタグも利用あり。
同じくガッツリテーブルレイアウトです。
ZOZOTOWN
他と同じですが、centerタグ、divタグを使っていますね。
調べたい事
TODO: メーラーのシェア率を知りたい
TODO: タグに埋め込むstyleと、styleタグに含めるclassとの分け方は
TODO: divタグを利用しているメールがかなりあるので、使い方を調べる。
便利ツール
CSSをインラインに変換してくれる（https://www.npmjs.com/package/inline-css）
対象のメーラーを調べるツール（https://www.campaignmonitor.com/css/selectors/universal/）
リセットCSS
normalize(https://github.com/dudeonthehorse/normalize.email.css)
