ネットサービスとかGoogleとか豆知識とか。

Index > ユーザビリティ > HTMLメールのベストプラクティス的なものを調べてみた
ユーザビリティ
2013年05月09日 12:34

HTMLメールのベストプラクティス的なものを調べてみた

  • このエントリーをはてなブックマークに追加
  • ... PV
スポンサード リンク

最近HTMLメールでメールを送ってくるサイトが増えていますが、読みやすく仕上がっているものと、読みづらく感じるものとがあります。

その原因のひとつは「横幅」でしょうか。コンテンツの横幅が固定されていない場合、ブラウザを最大化して表示するとメールの1行も横に長くなってしまい、流し読みしづらくなりますよね。

ではHTMLメールの横幅はどうするのが適切なのでしょう。そのあたりを調べていたら「HTMLメールのベストプラクティス」をまとめた海外の記事をいくつか見つけたので、ちょいとまとめておこうと思います。

なお、今回参考にした記事は以下の4つです。

» 20 Email Design Best Practices and Resources for Beginners | Nettuts+
» Best practices for coding HTML emails | CatsWhoCode.com
» How To Code HTML Emails | MailChimp.com
» Guideline to HTML Email best practices

1. 幅は600px以内で固定する

まず気になっていたメールコンテンツの横幅ですが、600px以内がいいらしいです。これはメールクライアントの中にはプレビュー画面でメールを表示するものもあり、それらの横幅は大体狭いからだと。

個人的にもそのくらいまでの幅にとどめるほうが読みやすさの点からでも良いと思います。

2. tableタグを使う

どの記事にも書かれていましたが、HTMLメールではtableタグを使ってレイアウトすることが推奨されていました。まじで?

Gmailオンリーだったらtableじゃなくても…と思いますが、色々なメーラーを前提にするとそうならざるを得ないのでしょう。。

なお、記事の中には幅100%のtableの中に幅600pxのtableを入れるという方法を紹介しているものもありました。

3. CSSはインラインで

インラインというのはつまりHTMLタグにstyle属性で記述するということ。HTMLメールでは外部CSSは扱えないと考えてよさそうです。

4. 画像は絶対パスで

Webメールでもメールクライアントでも、当然画像のURLは絶対パスで書かないと表示されません。

それからもちろん、どこからでもアクセス可能なサーバーに置くようにしましょう。

5. 画像にはaltを指定

HTMLメールでは画像を読み込まないことも多いので、alt属性に代替テキストを設定しておきましょうと。ただ、あまりにaltのテキストが長いと表示が崩れる場合もあるかも。

画像をどの程度使用するかというのは、HTMLメールにとっては結構重要な問題ですね。

6. spacer.gifを使う

tableを使用するとうまく余白が取れないこともあるらしく、その際には spacer.gif を使うといいよとのこと。

7. 色々なメーラーでテストする

主流なWebメールやメールソフトでの表示を確認しておきましょうと。最近はGmailが主流になってきたというのもありますが、少なからず他のメールを使っている人もいますし。

8. HTMLメールが読めない場合のリンク

「HTMLメールが上手く表示されない場合はこちら」っていうリンクのことですね。ついでにプレーンテキスト版も用意しておくといいと思います。

9. Analytics等でトラッキング

ビーコン画像を埋め込んでおけばメールがどのくらい開封されたかある程度知ることができますし、リンクにはトラッキング用のパラメータを仕込んでおくこともできます。

10. シンプルかつ軽量に

HTMLメールだからといって無駄にリッチにするより、大体のメールクライアントで素早く綺麗に表示されるように、なるべくシンプルにしようということですね。

WebメールではHTMLタグや属性を上書きしたり無効にしたりするものもあるので、その点も注意しましょう。

というわけで今回は10個ほどにまとめてみましたが、参照元の記事にはより細かいTipsなども書かれています。気になる方はそちらも読んでおくといいでしょう。

(追記) スマートフォン重視だとまた少し話は変わるかなと思います。