

HTMLメールを作成する際の注意点を少しだけ集めてまとめてみました。ちょっとだけ内容が古いかもしれないので、現状は違うのかもしれませんが、後方互換はなされていると信じて…。


## デザイン上の注意点

デザイン上の注意点は主にサイズ。テーブルレイアウトでも表現できなくは無いので、ファーストビューなどの大きさに気をつけるだけで大丈夫そうです。

- 横幅550～600px、少なくとも800px、できれば750px以内という説も
- ファーストビューに入る縦幅は300～500px以内

ただし、殆どのクライアントで初期表示は画像を読み込んでいない状態になるので、画像が読み込まれていないことを考えて作る必要があるみたいです。


## コーディングの注意点

懐かしのHTML4＋テーブルレイアウトで組む必要があります。今更テーブルレイアウトを組もうと考えると中々大変そう…。昔は良く組めたなぁと思います。

さらに、headタグ内を読み取ってくれないクライアントがあるそうなので、CSSは埋め込む必要があります。これでまたソースコードが大変な状態になりそう…。

- HTML 4.01 Transitional
- 文字コードはiso-2022-jp
- テーブルレイアウト
- インラインCSS
- 画像などは絶対パス

また、上述したように、画像が読み込まれない可能性が高いので、画像のサイズ指定をしっかりしておかないとレイアウトの崩れが起きてしまいます。  
 画像のサイズだけでなくtableタグなどのサイズ指定をしておくとより安心とのこと。


## 参考サイト

- [誰でも作れる！ “崩れない”HTMLメルマガ作成術（1/4）- ＠IT](http://www.atmarkit.co.jp/fwcr/design/tool/ichigeki12/01.html)
- [横幅550~600px](http://webdevtoolsoboegaki.wordpress.com/2010/07/06/html%E3%83%A1%E3%83%BC%E3%83%AB%E4%BD%9C%E6%88%90%E8%A6%9A%E3%81%88%E6%9B%B8%E3%81%8D/)
- [HTMLメールの制作時に気をつけたい9つのポイント | コリス](http://coliss.com/articles/build-websites/operation/work/879.html)
- [HTMLメールの作成方法 | コリス](http://coliss.com/articles/build-websites/operation/work/104.html)




HTMLメール

HTMLメール作成時の注意点ちょっとだけまとめ