※記事には古い情報も含まれますので、ご注意下さい。当サイトに掲載された内容や、リンク先のサービス等によって生じた損害等の一切の責任を負いかねますのでご了承ください。

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

2013/10/31

  • Web制作

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

HTMLメールの作成方法

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

  • 横幅は700px程度。メーラーやWebメールだと2カラムで表示されることが多いので、あまり広くしない。

  • metaタグのcharsetはISO-2022-JPと記述する。

  • CSSはリンクせずHTMLに直接記述。

  • header内に最低限のCSSを設定する。 よく記述するのは、td {vertical-align:top;}、テキストに付随するclassのline-heightなど。

  • bodyタグにはmargin指定。リンク色もここに書いてしまう。

  • レイアウトは全てtableタグの中に入れて組む。

  • 画像のパスはフルパスで。

  • 余白はmarginやpaddingではなく、透明な1px四方の透過gifを用意し、余白の大きさに伸ばして設置する。横幅100px、縦幅40pxの余白が欲しい場合は下記のように。

  • テキストにすることでレイアウトが崩れそうな場合は、思い切って画像にテキストを入れ込む。

  • オプトアウトの方法など、重要事項はテキストにする。（メーラー側で画像の非表示を選択している際にも表示されるように）

  • メーラーによって画像の上下に隙間が空きやすい場合は、全ての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メールも上記方法で配信テストができますが、ベーシック認証をかけたテストサーバーにアップした状態では、画像を読み込む度にエラーのダイヤログが表示されてしまうので。。 どこかの素敵な企業さんが、セキュアで高速配信で無料のメール配信システムを作ってもらえないですかねえ〜。<(_ _)>。。

    シェアする

    arrow_back