HTMLメールを作って送ってみよう
TAG : HTMLメール
AD
お取引先の方や、以前お問い合わせ頂いた方などに、不定期ですがHTMLメール形式でのメールマガジンをお送りさせて頂いております。
あまり頻繁でも、、と思いまして、1年に2〜3通ですが、季節の変わり目などにご挨拶代わりにお送りしております。
そこで、普段どのようにHTMLメールを作ってお送りしているか、まとめてみました。
HTMLメールの作成方法
HTMLメールの作り方、制作会社さんによって色々とノウハウがあるかと思いますので、下記が参考になるかわかりませんが。。
普段気をつけていることを、箇条書きで挙げてみました。
とにかく崩れないHTMLメールを作るには、CSSでレイアウトをするのではなく、tableでガッチガチに作ってしまうのが一番問題が少ないと思います。
こうじゃないとダメ！というわけではございませんので、あしからず。。
- 横幅は700px程度。メーラーやWebメールだと2カラムで表示されることが多いので、あまり広くしない。
- metaタグのcharsetはISO-2022-JPと記述する。
[html]<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">[/html] - CSSはリンクせずHTMLに直接記述。
- header内に最低限のCSSを設定する。
よく記述するのは、td {vertical-align:top;}、テキストに付随するclassのline-heightなど。 - bodyタグにはmargin指定。リンク色もここに書いてしまう。
[html]<body bgcolor="#FFFFFF" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" link="#999">[/html] - レイアウトは全てtableタグの中に入れて組む。
[html]<table cellspacing="0" cellpadding="0" border="0" align="center" width="700">[/html] - 画像のパスはフルパスで。
- 余白はmarginやpaddingではなく、透明な1px四方の透過gifを用意し、余白の大きさに伸ばして設置する。横幅100px、縦幅40pxの余白が欲しい場合は下記のように。
[html]<img src="https://blog.kunugi-design.jp/image/spacer.gif" alt="" width="100" height="40" />[/html] - テキストにすることでレイアウトが崩れそうな場合は、思い切って画像にテキストを入れ込む。
- オプトアウトの方法など、重要事項はテキストにする。（メーラー側で画像の非表示を選択している際にも表示されるように）
- メーラーによって画像の上下に隙間が空きやすい場合は、全てのimgタグに style=”vertical-align:top”を指定。
- ソースの軽減の為に、やたら長い画像名は極力避ける。
もっとこうした方がいいよ！最近はこういうのが主流だよ！なんてご意見ございましたらコメント頂ければ幸いです。
参考：誰でも作れる！ “崩れない”HTMLメルマガ作成術 (1/4)
http://www.atmarkit.co.jp/ait/articles/1007/14/news103.html
HTMLメールの送信方法
本来はメール配信システムを使って送信したいところですが、月次費用もかかりますので(^_^;)私は契約していません。。
フリーのASPサービスがあれば超便利なんですけど、国産のはあるようでない（多分・・・）！
以下は無料で簡易的に送信できる方法です。
でもこれは1通1通手作業の送信になるので、誤送信のリスクもあるし、なんといっても開封率などのデータが取れません〜。
私は送信件数が少ないのでできますけど、普通の一般企業の方はマネされない方が良いかもしれません。（面倒でしませんよね。。）
- htmlと画像を一式サーバーにアップします。
- safariでアップしたurlを表示。
- ツールバー「ファイル」＞「このページの内容をメールで送信」
- メーラーの送信画面が立ち上がり、htmlが本文内に挿入された新規メールが開く。
- 相手先のアドレスを入力して、送信！
HTMLメールは、がっちがちのtableレイアウトで組んでブラウザでは崩れていなくても、メーラーで受け取って表示すると意外と崩れてたりするので（特にフリーメール！）、納品前のテストは必須なんですけど、私のような下請けフリーランスの場合は、テストの方法が難点かな〜と思っています。
お仕事で作成したHTMLメールも上記方法で配信テストができますが、ベーシック認証をかけたテストサーバーにアップした状態では、画像を読み込む度にエラーのダイヤログが表示されてしまうので。。
どこかの素敵な企業さんが、セキュアで高速配信で無料のメール配信システムを作ってもらえないですかねえ〜。<(_ _)>。。
kunugi design
大阪府在住、フリーランスのWebデザイナー kunugi designと申します。
Webデザイン歴20数年。読書・映画・音楽・お笑い好き。趣味はミシンで服作り。2人の女児を育てる母親です。
AD
