目次
メール受信環境は無限
メールを見る環境は、デバイス、ブラウザ、アプリ、それらに加えバージョンの違いなど多岐にわたります。
そのため全ての環境に等しく対応することは不可能です。
また、いまどきの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つあります。
- Thunderbirdを使用
新規メール作成＞メニューバー内「挿入」＞「HTML」＞HTML貼り付け＞送信
参考サイト：http://www.yoshikiminatoya.com/lab/others/4727.html - 有料サービス
一括で様々なデバイス毎の表示プレビューができます。
■Litmus：https://litmus.com/
■Benchmark Email：https://www.benchmarkemail.com/jp/email-marketing/inbox-checker
参考サイト：https://blog.benchmarkemail.com/jp/check_your_html_email_with_litmus/
以上、メルマガデザイン前に知っておきたい「できないことリスト」でした。
