この記事は、HTML のメールマガジン（海外だとニュースレター）を作成するときのノウハウをまとめた内容です。また、コーディングにおけるノウハウをまとめたものであって、マーケティングにおけるノウハウをまとめたものではないです。
コーディングする上で気にすることは
- テキスト原稿の文字コードの認識（UTF-8 の推奨）
- 使用する HTML タグ、CSS タグの限定
- 表示幅を固定するテーブルレイアウトと、レスポンシブ化対応
- 画像表示はユーザー環境（メーラー）によって無効化される（ことが多い）
- ユーザー環境（メーラー）によって、CSS のサポート状況が異なる
- HTML メールの構成例
メールマガジンのデザインする雛形は HTML メールのテンプレートサイトを参考にします。（よいデザインをまとめた Really Good Emails、同じく Campaign Monitor、業種にあわせた Email-Gallery など）画像は、メールマガジンに添付するのではなく、インターネット上のサーバーにデータを配置します。
テキスト原稿の文字コードの認識
原則としては、「メールマガジンを送信するサーバーが推奨する文字コードにあわせること」という回答がよいと思います。ほとんどの場合は、UTF-8 になると思います。
機種依存文字（JIS X0208 規格外の文字）も混乱をまねくので使わないほうがよいと思います。（メールマガジン編集チームの理解があればよいのですが）
使用する HTML タグ、CSS タグの限定
ユーザー環境（メーラー）の CSS のサポート状況は、デファクトスタンダードのような形で、Email Client CSS Support などのサイトを参考にします。1
推奨される例は、次などです。 2
| 推奨 HTML | |||
|---|---|---|---|
| a | b | br | div |
| font | h1-h6 | head | hr |
| img | label | li | ol |
| p | span | strong | table |
| td | th | tr | u |
| ul |
| 推奨 CSS | |||
|---|---|---|---|
| background | background-color | border | border-bottom |
| border-bottom-color | border-bottom-style | border-bottom-width | border-color |
| border-left | border-left-color | border-left-style | border-left-width |
| border-right | border-right-color | border-right-style | border-right-width |
| border-style | border-top | border-top-color | border-width |
| color | display | font | font-family |
| font-size | font-style | font-variant | font-weight |
| height | letter-spacing | line-height | list-style-type |
| padding | padding-bottom | padding-left | padding-right |
| padding-top | table-layout | text-align | text-decoration |
| text-indent | text-transform | vertical-align | widht |
表示幅を固定するテーブルレイアウトと、レスポンシブ化対応
PC での閲覧を基準にしたときの HTML メールの横幅は 600-700px の指定が一般的とされているようです。 3 メールデザインなどを参考にすると 500-600ox が一般的になるため、「600px」あたりが推奨です。
モバイルデバイスの都合などを考慮すると
- 基本の記事はシングルカラムの縦方向レイアウト
- 縦方向の長さはあまり長くしない
- 文字サイズは 14-20px とする（16px を使用しました）
- ボタンを設置するときは 44x 以上
テーブルレイアウトの例
<table class="wrapper" border="0" align="center" cellpadding="10" cellspacing="0" align="center"> <tr><td> <table width="100%" cellpadding="0" cellspacing="0"> <!-- コンテンツ１ --> <tr><td> コンテンツ１ </td></tr> <!-- コンテンツ２ --> <tr><td> コンテンツ２ </td></tr> <!-- コンテンツ３ --> <tr><td> コンテンツ３ </td></tr> </table> </td></tr> </table>
レイアウトを複雑にせず、縦方向にテーブルのブロックを伸ばしていくのがポイントになっています。
レスポンシブ化対応の例
@media only screen and (max-width:480px) { table.wrapper { width: 100% !important; min-width: 300px !important; table-layout: fixed; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } td.responsive { width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; display: block !important; } img { width: 100% !important; max-width: 480px !important; } }
レスポンシブ化対応は、スマートフォンの画面サイズにあわせるために、 CSS のメディアクエリーを設定することになります。
一般的には android 端末に多いとされる横幅 480px を意識して 480px or 479px などを指定します。 4
HTML メールの構成例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <title></title> <style type="text/css"> <!-- body { font-family: sans-serif; font-size: 16px; } img { outline: none; border: none; text-decoration: none; } @media only screen and (max-width:480px) { table.wrapper { width: 100% !important; min-width: 300px !important; table-layout: fixed; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } td.responsive { width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; display: block !important; } img { width: 100% !important; max-width: 480px !important; } } --> </style> </head> <body> <table class="wrapper" border="0" align="center" cellpadding="10" cellspacing="0" align="center"> <tr><td> <table width="100%" cellpadding="0" cellspacing="0"> <tr><td> コンテンツ１ </td></tr> </table> </td></tr> </table> </body> </html>
ポイントをまとめてみると次の４つくらい。
- HTML の冒頭に文章型宣言をする
- meta タグの最小限の設定
- CSS の最小限ほしい設定
- テーブルレイアウトの設定
outlook だけうまいデザインにならないことがあります。この時の対処に次のコードが利用されます。sendgrid などいくつかの配信テンプレートで利用を確認しています。
<!--[if gte mso 9]> <style type="text/css"> /* outlook 専用のCSS */ </style> <![endif]-->
落ち穂
開封率とクリック数の数え方
メールマガジンの開封率のチェック、リンクからホームページに飛んだときなどは、デファクトスタンダードとも言える Google Analytics を利用するケースが多いようです。
これについては「How To Track Email Opens With Google Analytics」が参考になります。リンクの基準になる URL にプラスして「?」に続く文字列を追加します。
SendGrid は、クリック数を数える URL の生成を補助するツールがありました。例はこんな感じになりました。
https://****?utm_source=sg&utm_medium=newsletter&utm_campaign=website
マルチパートメールの対応
HTML とテキストの内容の両方を（まとめて）送信する機能です。
受信側によってどちらを選択するのか決めてもらうことで、どちらかの形式でメールマガジンを表示することができます。
これについては、ガラケー時代は対応が推奨されるところですが、現在ではテキストメールで表示されるケースが減っているようです。（少なくとも、私が１０名弱の協力のもと、諸々の端末で確認した限りではガラケー以外無かったです）
メール作成の手間が単純に増えることや、テキストメールでは開封トラッキングができないため、メールマガジンの開封率をチェックしたときの値を見て、対応を検討したほうがよいように（個人的には）思います。
参考
レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方 (WEB PROFESSIONAL)
- 作者:こもりまさあき
- 発売日: 2015/01/15
- メディア: 単行本（ソフトカバー）
