2020年7月時点
HTMLメール作成時のコツや注意点をまとめました。
デザイン
- 全てのメーラーがメディアクエリに対応しているわけではないので、メディアクエリありきのデザインにしない。
- メインエリアの横幅の最大値は600pxくらいにする。
CSS
- インライン形式で記述するのが、もっとも保証される。
- ただかなり面倒なので、細かいところはhead内に埋め込み形式で記述し、最後にツールでインライン化すると楽チン。
- 外部スタイルシートを読み込む方法はナシ。
- インライン化できるオンラインツール「Inline styler」を利用。
- Gulpのプラグインでインライン化する方法もあるらしい。
フォント
- 基本的にbodyにfont-familyで記載（フォントにこだわる案件の場合は、フォールバック必須）
- ただbodyに記載だけだと、windowsのデスクトップアプリ 「outllok」と「メール」に指定フォントが当たらず、メーラーのデフォルトフォントになってしまう。（オリジナルのコードが、メーラによって書き換えられてしまい、メーラーのスタイルが当てられてしまうのが原因）
- フォントを当てたい要素にインラインで記述するとメーラーによってスタイルが書き換えられずに意図したフォントになる。（※このとき @importantは使わない。）
メディアクエリ
- メディアクエリに期待しない。メディアクエリを使用しなくても問題ない作りにする。
- より良く見せるためのメディアクエリは推奨。例：メインエリアの横幅にwidth=600px指定し、メディアクエリ600px以下でwidth:100%にすると、メディアクエリに対応しているメールだけレスポンシブになる。
- 以下メディアクエリに対応しているメーラー
- macOS 10.15 標準メーラー
- iphone ios13 標準メーラー
- iphone ios13 outlookアプリ
- iphone ios13 gmailアプリ
- windows10 IEブラウザ outllok
- windows10 Edgeブラウザ outllok
- windows10 デスクトップアプリ outllok
- windows10 デスクトップアプリ メール
全体構成
- HTML4.01を使用し、文字コードを「iso-2022-jp」に設定。（編集中は UTF-8にするとかでも）
- テーブルレイアウトで組む。
- rowspan、colspanは使わない。
- 細かいレイアウト部分はdivとかも使ってOK。
- メインエリアの横幅にmax-widthは基本的に使用しない。メーラによって崩れることがある（windowsのoutlookアプリなど）
画像
- 絶対パスで書く。
- width="size" height="size"を指定する。指定しないとメーラーによって画像100%で表示されてしまう。
- autoを意味する
height="*"は使用しない。IE/Edgeのoutlookで高さを認識されず画像が表示されない。
余白
- 水平方向：余白用の
tdを用意しwidth指定する。 - 垂直方向：paddingかmarginの上下を使用する。余白用の
tdを用意しheight指定しても尚良し。 - outlook対応が必要な場合は、paddingではなくmarginを使用する方が微妙なレイアウトのズレを防げる。
- 余白が不要な部分も0pxとすることで、レイアウトの微妙なズレを防げる。（例：padding 0 0 10px 0:）
- tdにmarginは効かない。
border
- tableに指定するのが無難。
text-decoration:none
- outlookでtext-decoration:noneが無視される。a要素の中にstrongを入れ、strongに対し
text-decoration:noneする。font-weightを通常に戻すのもお忘れなく。
<div><a href="#" style="text-decoration:none;"><strong style="text-decoration:none;font-weight:500;">テキストです</strong></a></div>
outlookの「ブラウザで表示」
受信したメールをwebで表示する機能。たまに「ブラウザで表示」限定でレイアウト崩れが発生していることがある。
- 画像の周囲に青線が入ってしまうので画像の各要素に対し img {border:none;}
- テキストが中央寄せになるのでテキストの各要素に対し、.text {text-align: left}する。
配信テスト
- 配信テストは必須。同じoutlookでもブラウザやアプリで全然違う。
- 無料で配信テストできるサイト「PutsMail」の利用がおすすめ。
- 有料版ならいちいちメール開かずともウェブで表示チェックできるツール多数あり。
参考になるサイト
- デザイン/コーディング前に押さえておきたい、HTMLメール作成の基礎知識https://www.granfairs.com/blog/staff/htmlmail-prior-information
- Outlook、Gmail、スマホでも崩れない必勝HTMLメールコーディング https://blog.kannart.co.jp/coding/1093/
- HTMLメール作成で押さえておきたいポイント https://satoyan419.com/creating-html-email/
- HTMLメール制作編：コーディングサンプルや、役立つWebサービスのご紹介https://www.granfairs.com/blog/staff/htmlmail-actual-production
- 【2020年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例 https://willcloud.jp/knowhow/font-family/#HTML
- How to Code Emails for Outlook 2016 https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook-2016/