HTMLメールの作り方(一部Mac)
December 30, 2008
年末の案件で、某企業様の年賀状HTMLメールを作る機会があったので、注意点や作り方をまとめておきたいと思います。
HTMLメール自体、賛否両論(【結果発表】HTMLメールをどう思いますか？：ITpro・HTMLメールはやめよう：ITpro )だったりしますが、私個人的にはHTMLメールは、読み易いしありだと思います。セキュリティー的な事と良く言われていますが、こちら側の受け取り方でなんとでも成る気がします。(私は基本的にHTMLメールが来そうなメールはGmailで受け取っています)
制作及び、エントリーを書くに至って、以下の参考にさせていただきました。ありがとうございます。
HTMLメールの制作時に気をつけたい9つのポイント | コリス
HTML 4.01 Transitionalで書く
xhtmlではありません。昔ながらの感じです。
文字コードはiso-2022-jpで制作する
メールの文字コードはiso-2022-jpなのでこれに合わせます。
テーブルレイアウトで行う
色々調べたのですが、テーブルレイアウトで行うのが正解のようです。
800px以下
傾向を見ると700px以下である事が多いです。
これは、メーラーがサイドバーが広い場合が多いので、ビュー部分が狭いからだと思います。
cssはインラインで書く
外部指定はほぼ表示されません。 header内の指定では、メーラーによっては上手く表示されません。
センター寄せは、tableの入れ子で寄せる。
<table align="center">で寄せる。
イメージはすべて絶対アドレス(http://~)で指定する。
イメージファイルはまとめて公開サーバーに配置してうで、絶対アドレスで指定します。
<base>の指定を行う
<base href="http://www.bulanco.net/mail.html" target="_self">のようにベースURLを指定指定すると良い様です。
baseを指定すると、上記のイメージファイルは絶対アドレスをしていなくても、読みに行ってくれる様です。私は一応両方行うようにしました。
javascriptは使わない方向で
ブラウザベースのメーラーであれば(Gmail)は使えるかもしれません(試していません)が、一般のメーラーはjavascriptは使えないと思われます。そのため、マウスオーバーは諦めるのが一般的かも。
アニメーションgifは使いどこを考えれば良い感じ
Appleから届いた正月セールメールのアニメーションgifは良い感じでした。
ただ、あまり使いすぎるのは下品に成りがちなので、使い場所は考えた方がよいと思います。
送信はsafariから送信出来る。(Mac)
Macで作ったHTMLメールを送るには、safariからmail.appを使って送る事が出来ます。
作ったhtmlファイルを一旦サーバーに上げた後、safariで閲覧後、[ファイル]>[このページの内容をメールで送信]で送信することが出来る。
ただ、標準のメーラーをMail.app以外にしていると送れないので、標準のメーラーを一時的にMail.appを指定する。
Windowsでの送信方法は、こちらで。
HTMLメールの送信方法：その１ | コリス
BULANCOでは、HMTLメール制作も承っております。是非メールフォームから!
- 素晴らしいプロダクトプロジェクト『60 VISION』
-
- 先日BiVi福岡2Fで発見したしたショップで、気になったので調べました。 60VISIONは日本の製造メーカーの原点商品を復刻し、丁寧に販売するショップを通して長く使い続けることのできるロング... MORE »
Category
このブログ記事に対するトラックバックURL
-
福岡県 福岡市在住 Webデザイナー。
1973年福岡生まれ。射手座、B型。HNは、やいぶ・Yaive など。幼少期から、モノを作ることが大好き。しかし、小学生の頃の夢は弁護士。 中学生で、漫画家を志すも、高校生時に建築に強く興味を持ちあっさり方向転換。 某デザイン系大学を経て、インテリアデザイナーになる。その後建築士の免許を取得。 建設会社で現場監督を経験、建築塗装会社で営業を経てWebマスターになる。 2006年に独立開業、BULANCOとしてWeb制作に携わる。現在に至る。
只今、コメント機能が正常に機能していません。ご意見ご要望はこちらからどうぞ。
コメントする