ウェブデザイナー、
子育てとフリーランス

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通手作業の送信になるので、誤送信のリスクもあるし、なんといっても開封率などのデータが取れません〜。
私は送信件数が少ないのでできますけど、普通の一般企業の方はマネされない方が良いかもしれません。(面倒でしませんよね。。)

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

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

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

フリーランス Webデザイナー 大阪 kunugi design

kunugi design

大阪府在住、フリーランスのWebデザイナー kunugi designと申します。
Webデザイン歴20数年。読書・映画・音楽・お笑い好き。趣味はミシンで服作り。2人の女児を育てる母親です。

https://kunugi-design.jp

AD

コメントを残す

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

同じカテゴリーの記事

美容院・美容室のWebデザイン まとめ

フリーランスのWebデザイナーとして10年、業界と私の変化

Blog Design Archiveに掲載して頂きました

Webデザイン

未経験でWebデザイナーになること

pick up

自分で作った服を着る

Webデザイン

未経験でWebデザイナーになること

フリーランス 二人目の保活

保育園の保護者会会長になった話

tag

archive