環境に依存しないHTMLメールを作成するためのベストプラクティス

この記事は How to Keep Your Email Looking Great in Any Inboxの抄訳です。

一通のメールレイアウトを綺麗にするために何時間もかかってしまい、イライラしたことはありませんか？

この作業はとてもストレスの溜まるものですが、あなたのせいではありません。各メールクライアント（Gmail、Outlook、Yahoo!など）で表示できるHTML・CSSは違います。例えば、Gmailでは綺麗に表示できたとしても、Yahoo!では異なるレイアウトで表示されるといったことが起こり得ます。

メールクライアントに加えて、ブラウザやレンダリングエンジン、メール転送サーバなどもレイアウトの表示に影響します。SendGridのメールサポートのエキスパート達は、メールクライアントやブラウザによらず意図した通りに表示するためのベストプラクティスを、下記の通り定めています。

レイアウト

使うべきタグと避けるべきタグを意識することで、メールクライアントによらず意図した通りのレイアウトが表示できます。

• paddingやmarginは使わない。
• インラインCSSを使う。
• br、hr、heightタグは使わない。
• 全体のレイアウトを作成するときはtableを使う。
• doctypeを指定する。
• ”wrapper div”でリセットCSSを指定する。
• フォントはデバイスによって変化することがあるので注意する。

背景

多くのブラウザやメールクライアントでは、複雑なCSSのサポートが困難です。

• 基本的なタグや昔から使われているタグを使用する。
• 背景の色は常にリセットする。

画像

使う画像によって、表示のされ方は異なります。

• pngファイルは使わない。
• 画像のサイズを指定する。
• alt属性を全ての画像につける。
• Outlookでは画像の周囲に余白が追加されてしまうことに注意する。
• floatプロパティは使わない。

ビデオ

ほとんどのメールクライアントはビデオレンダリングをサポートしていません。

• ビデオは使わない。

SendGridでは、HTMLメールを簡単に作成・編集できるツールをご用意しています。ぜひ、ご利用ください。ご利用には会員登録が必要ですが、無期限・無料のプランもございます。会員登録はこちらから。

参考

下記のブログ記事では、SendGridのWeb画面上でHTMLメールの作成・編集ができる機能を紹介しています。せひ、ご覧ください。

• はじめてのSendGrid 〜メール送信編〜：マーケティングメール用
• Template Engine チュートリアル：トランザクションメール用