2013/10/31

Web制作

HTMLメールを作って送ってみよう

お取引先の方や、以前お問い合わせ頂いた方などに、不定期ですがHTMLメール形式でのメールマガジンをお送りさせて頂いております。
あまり頻繁でも、、と思いまして、1年に2〜3通ですが、季節の変わり目などにご挨拶代わりにお送りしております。
そこで、普段どのようにHTMLメールを作ってお送りしているか、まとめてみました。

HTMLメールの作成方法

HTMLメールの作り方、制作会社さんによって色々とノウハウがあるかと思いますので、下記が参考になるかわかりませんが。。
普段気をつけていることを、箇条書きで挙げてみました。
とにかく崩れないHTMLメールを作るには、CSSでレイアウトをするのではなく、tableでガッチガチに作ってしまうのが一番問題が少ないと思います。
こうじゃないとダメ!というわけではございませんので、あしからず。。

  • 横幅は700px程度。メーラーやWebメールだと2カラムで表示されることが多いので、あまり広くしない。
  • metaタグのcharsetはISO-2022-JPと記述する。
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
  • CSSはリンクせずHTMLに直接記述。
  • header内に最低限のCSSを設定する。
    よく記述するのは、td {vertical-align:top;}、テキストに付随するclassのline-heightなど。
  • bodyタグにはmargin指定。リンク色もここに書いてしまう。
    <body bgcolor="#FFFFFF" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" link="#999">
  • レイアウトは全てtableタグの中に入れて組む。
    <table cellspacing="0" cellpadding="0" border="0" align="center" width="700">
  • 画像のパスはフルパスで。
  • 余白はmarginやpaddingではなく、透明な1px四方の透過gifを用意し、余白の大きさに伸ばして設置する。横幅100px、縦幅40pxの余白が欲しい場合は下記のように。
    <img src="http://blog.kunugi-design.jp/image/spacer.gif" alt="" width="100" height="40" />
  • テキストにすることでレイアウトが崩れそうな場合は、思い切って画像にテキストを入れ込む。
  • オプトアウトの方法など、重要事項はテキストにする。(メーラー側で画像の非表示を選択している際にも表示されるように)
  • メーラーによって画像の上下に隙間が空きやすい場合は、全てのimgタグに style=”vertical-align:top”を指定。
  • ソースの軽減の為に、やたら長い画像名は極力避ける。

もっとこうした方がいいよ!最近はこういうのが主流だよ!なんてご意見ございましたらコメント頂ければ幸いです。

参考:誰でも作れる! “崩れない”HTMLメルマガ作成術 (1/4)
http://www.atmarkit.co.jp/ait/articles/1007/14/news103.html

HTMLメールの送信方法

本来はメール配信システムを使って送信したいところですが、月次費用もかかりますので(^_^;)私は契約していません。。
フリーのASPサービスがあれば超便利なんですけど、国産のはあるようでない(多分・・・)!
以下は無料で簡易的に送信できる方法です。
でもこれは1通1通手作業の送信になるので、誤送信のリスクもあるし、なんといっても開封率などのデータが取れません〜。
私は送信件数が少ないのでできますけど、普通の一般企業の方はマネされない方が良いかもしれません。(面倒でしませんよね。。)

  1. htmlと画像を一式サーバーにアップします。
  2. safariでアップしたurlを表示。
  3. ツールバー「ファイル」>「このページの内容をメールで送信」
  4. メーラーの送信画面が立ち上がり、htmlが本文内に挿入された新規メールが開く。
  5. 相手先のアドレスを入力して、送信!

HTMLメールは、がっちがちのtableレイアウトで組んでブラウザでは崩れていなくても、メーラーで受け取って表示すると意外と崩れてたりするので(特にフリーメール!)、納品前のテストは必須なんですけど、私のような下請けフリーランスの場合は、テストの方法が難点かな〜と思っています。
お仕事で作成したHTMLメールも上記方法で配信テストができますが、ベーシック認証をかけたテストサーバーにアップした状態では、画像を読み込む度にエラーのダイヤログが表示されてしまうので。。

どこかの素敵な企業さんが、セキュアで高速配信で無料のメール配信システムを作ってもらえないですかねえ〜。<(_ _)>。。

Share on Facebook11Tweet about this on Twitter

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

こちらもあわせてどうぞ

    関連する記事は見当たりません…