サッと確認する！HTMLメール作成のまとめ
どうも、業務を効率的に進めるためにメモを取ることを覚えたメモザワです。
業務でHTMLメール制作をたまにやったりするのですがいつもメモをとらず、一から調べてやってます。そんな自分のためにメモしたので公開します。
HTMLメール制作のワナ
この前、業務でHTMLメールの制作をした時に、ネットで調べたりとかしたが、ど真ん中なノウハウの記事が見当たらなかった。
HTMLメール制作は確立された制作ルールがないなぁと感じている。
なぜならば、メールソフトによって仕様が違うから。
HTMLメール制作について書いていただいた記事を参考にしつつ、自分が制作、検証したことをまとめてみます。
デザイン制作について
HTMLメールのデザインはテーブルコーディングで行うので、極力グリッドデザインにした方がコーディングに適している。
グリッドデザインでなくても、もちろん構わないが崩れた場合のことを考えるとグリッドデザインがベター。データの容量制限がある場合は、グラデーションのある画像は色数が多くなるので控えましょう。
- 横幅700px程度。
- ファーストビューに入る領域は400px程度。
- 全体デザインは要素を少なく、多く置かない。
- グラデーション画像は控える。
コーディング制作について
確実にデザインを表現させるためにテーブルコーディングが必須です。
各タグにインラインCSSを使い、画像は絶対パスで組みます。
以下各タグのソースコードをまとめてみました。
メタタグ
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
tableタグ
<table width="任意" border="0" cellspacing="0" cellpadding="0" align="center">
tdタグ
<td align="任意" style="font-size:0; line-height:0; padding:0; margin:0; border:0; vertical-align:top;">
Pタグ
<p style="font-size:任意; color:#000; line-height:1.6; padding:0; margin:0; border:0; vertical-align:top; ">こんにちは、おはようございます。</p>
透過GIFでマージンを取る。
<tr><td style="font-size:0; line-height:0; padding:0; margin:0; border:0; vertical-align:top;"><img src="spacer.gif" width="1" height="20" alt=""></td></tr>
CSS対応表で確認する
メールソフト別CSS対応表「The Ultimate Guide to CSS」
http://www.campaignmonitor.com/css/
基本的なコーディングを抑えておいてメールソフト別CSS対応表を参考にして細かい部分を確認していくと良いでしょう。
まとめ
今のところこんな感じでHTMLメールを制作しております。
各企業によって作り方が違うと思いますが、大きな違いはないと思いますので、参考にしてみてはいかがでしょう。
今回、HTMLメールに制作にあたり、下記サイトでお知恵を拝借させていただきました。
ありがとうございます。