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

2013/5/9 12:34

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

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

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

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

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なども書かれています。気になる方はそちらも読んでおくといいでしょう。

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

Webエンジニアやってます。最近はドットインストールの開発がお仕事です。その傍ら、個人で Meity や電車遅延なう、梅酒.in、 #グラドル自画撮り部の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。