HTMLメール作成のコツ・注意点

#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/