超久々にHTMLメールについて調べたところ、HTMLメールの作り方に変化は（残念ながら）ほぼないのですが、スマホユーザーはむしろHTMLメールで受け取ることが当たり前で、レスポンシブを前提とした作りがトレンドのようでした。
基本はテーブルレイアウト
Outlookほか古いメーラーも未だに幅をきかせ、そのシェアも一切掴めないのでテーブルレイアウトが無難です。
下記を基本形と見てもらえればと思います。
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#fff;">
<tr>
<td style="padding:0; margin:0; border:0; vertical-align:top;">
</td>
</tr>
</table>
そのほかお約束として…
- CSSは全てインライン記述
- 画像の参照は当然絶対パス
- imgタグには必ず「display:block」
主なメーラーで使えるHTMLとCSSプロパティは下記に詳しくあります。
https://www.campaignmonitor.com/css/
レスポンシブを意識
抑えるポイントは下記になると思います。
- widthで固定せずmax-widthを使う
- フォントサイズは大きめ
- 左右分けレイアウトはなるべく行わない
- リンクテキストよりボタン
レスポンシブを意識していない作りでも、スマホ側ではPCサイトと同様の形で表示されるので、全く読めないということもありません。ですが最適化しておくことでスムーズ読んでもらうことができ、HTMLメールからの集客にも効果があると考えられます。
