n2p blog
キャンペーンやSNSの
"ためになる"情報を
執筆しています。
HTMLメールのメールマガジンのコーディング【下調べ篇】
更新日:2022.10.18 (公開日:2013/07/22)
HTMLメールで送信するメールマガジンをコーディングする方法を調べるように！
とシャチョーから命令されたので、
不肖さいとうが調べてみました！
制約いろいろ
画像は絶対パス指定で！
画像は必ずサーバ内に保存し、絶対パスで指定します。
テーブルコーディングで
テーブルコーディングでないと崩れる可能性が高いです。
CSSの指定はシンプルに
CSS3なんて近未来的なものは使えません。
CSSはインラインで
面倒！
なので、タグの中からスタイルを拾いだしてインラインで書きなおしてくれるサービスを積極的に利用するといいかもしれません。
http://premailer.dialect.ca/
背景色やイメージの扱いにひとクセ
背景に関して、background-color以外は使えないメーラーが多いようです。
どうしてもOutlook2007で背景色を利用せねばならない場合、VMLを使わねばならないようです。
http://www.s-arcana.co.jp/tech/2012/03/htmloutlook2007.html
が、テンプレートなどで採用されてなかったりするとこを見ると、推奨されてはいないようですね。
Outlook 2007 のレンダリングエンジンはWord 2007です。
だから下記のものは使えません。
- 背景イメージは（vmlでないと）使えない。
- フォーム全般使えない。
- フラッシュ、その他プラグインも使えない。
- CSS フローとポジショニングも使えない
- アニメーション GIFも使えない。
こんなコードはGmailで無効です
- position:absoluteは使えない
- ネガティブマージンは使えない
- head内のcssは認識されない。
フィーチャーフォン（ガラケー）コーディングを彷彿とさせる制限の多さですね……。
具体的な組み方
下記のページがわかりやすいし詳しいです。
「誰でも作れる！ “崩れない”HTMLメルマガ作成術」
http://www.atmarkit.co.jp/fwcr/design/tool/ichigeki12/02.html
「outlookでも崩れないHTMLメルマガを作る」
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/css/html%E3%83%A1%E3%83%AB%E3%83%9E%E3%82%AC%E4%BD%9C%E6%88%90%E6%96%B9%E6%B3%95/
テンプレート配布サイト
テンプレートを参考に組んでみてもいいかもしれません。
「Template Builder」
http://www.campaignmonitor.com/templates/
「HTML EMAIL BOILERPLATE v 0.5」
http://htmlemailboilerplate.com/
テスト環境
メーラーのシェアなどを鑑みて、
このメーラーではテストした方がいいんじゃないかな？
というものをリストアップしてみました。（にしても多いな……！）
メーラー
ウェブメール
参考ページ
「outlookでも崩れないHTMLメルマガを作る」
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/css/html%E3%83%A1%E3%83%AB%E3%83%9E%E3%82%AC%E4%BD%9C%E6%88%90%E6%96%B9%E6%B3%95/
「誰でも作れる！ “崩れない”HTMLメルマガ作成術」
http://www.atmarkit.co.jp/fwcr/design/tool/ichigeki12/01.html
「HTMLメール作成方法 2013年度版」
http://workabroad.jp/tech/513
HTMLメールを作成する際、どのようなコードがよいかのスライドショー
http://www.slideshare.net/fullscreen/theengagegroup/email-workshop-powell/1
「電子メールソフトに関する意識調査」
http://release.center.jp/2009/02/1902.html
「Most Popular Email Clients – Email Softwares」
http://visibleranking.com/most-popular-email-clients.php
続きます
実際に組んでみると思わぬ落とし穴があるかもしれないので、
この記事は多分続きます。
【組んでみた篇】をお楽しみに！
