今どきのHTMLメール事情

goto_jp 501views 更新:2014年10月10日

超久々に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メールからの集客にも効果があると考えられます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません