メルマガデザイン前に知っておきたい「できないことリスト」

メルマガデザイン前に知っておきたい「できないことリスト」

メール受信環境は無限

メールを見る環境は、デバイス、ブラウザ、アプリ、それらに加えバージョンの違いなど多岐にわたります。
そのため全ての環境に等しく対応することは不可能です。
また、いまどきのHTML・CSSとはコーディングも大きく異なっています。

メルマガデザインを制作する前に、コーディングで「できないこと」を知っておきましょう。

コーディング:前提

  • cssはインラインスタイルで各要素に指定
    (最後に自動インライン化するツールを使う方法もある)
  • テーブルレイアウトする
    幅可変の基本tableセット:
    <table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″><tr><td></td></tr></table>
  • tdにはalign、valignを指定(valign初期値はmiddle)
  • 画像は絶対パスにする(width=”100%”で幅可変)

コーディング:できない事リスト

WEBでは当たり前のCSSもHTMLメールでは対応していないものが多くあります。
以下はその中でも、デザイン制作時に把握しておきたい「できないことリスト」です。

  • HTML5、CSS3
  • HTML – div、p、見出しタグ(表示崩れの原因に)
  • CSS – position
  • CSS – background-image
  • CSS – margin、padding
  • Gmailがレスポンシブ未対応(2016年に対応の発表があったがその後音沙汰なし)
  • 横幅600pxまでにしないと表示崩れ

特に背景画像が設定できないとなると、出来ることがかなり制限されてきます。
凝ったデザインでメルマガ配信したい場合、全面画像の貼り付けで作成するのが無難ですね。

テスト配信について

コーディングを終えたら納品・配信前に実際の環境で確認したいものです。
確認方法は大きく2つあります。

 

以上、メルマガデザイン前に知っておきたい「できないことリスト」でした。

参考

HTMLメールはどうやって作成するの?基本と特徴を徹底解説!【保存版】