メールのデザインを考えるときのポイント

この記事は 10 Tips for Designing and Developing Emails の抄訳です。

綺麗なデザインのメールからは、「ブランド」と「顧客とのコミュニケーション」へのメール制作者の思いが伝わってきます。それらは顧客との信頼関係の構築に寄与し、コンテンツへのエンゲージメントを高め、継続的なメールの開封にも繋がります。メール作成に携わる方であれば誰しも、そのような素晴らしいデザインのメールを作成したいと願うでしょう。しかし、HTMLメールは受信環境によってレイアウトが崩れることがあり、コーディングは一筋縄ではいきません。これは、メールサービスプロバイダ（ESP）がWebブラウザの開発スピードについていけておらず、新しいHTMLと一部のESPの互換性がなくなっているためです。

HTMLのサポート内容はESPによって異なるので、全てのプロバイダで綺麗に表示されるメールを作成するのは困難です。

HTMLメールのコーディングには試行錯誤がつきものですが、どこから手を付けるべきか、押さえるべきポイントはどこか、などを知っておくとスムーズに進めることができます。

1. 顧客の受信環境を把握しましょう。HTMLのサポート範囲はESPによって異なるので、顧客の受信環境でメールがどのように表示されているかを理解することが大切です。SendGrid社の2018 Global Email Benchmark Reportでは、業界ごとに、その顧客がよく利用するESPを紹介しているのでメール作成前にぜひご確認ください。もし、メール配信にSendGridを利用されているのであれば、Statsという機能で受信者のメールクライアントやデバイス、ESPまで確認することができます。顧客の受信環境で綺麗に表示されるよう、HTMLをコーディングしましょう。

2. 1カラムのレイアウトを利用しましょう。 1カラムがおすすめな理由は、メンテナンスが簡単で、複数のESPで崩れずに表示できる可能性が高いからです。 下記の画像をご覧ください。 右側の2カラムの画像は複数の製品を表示しやすいレイアウトですが、左側の1カラムの方が読みやすいでしょう。どちらが絶対的に優れているというわけではありませんが、1カラムの方が簡単に作成できます。

3. <div>ではなく、<table>でレイアウトを組みましょう。残念ながら、メールクライアントの中にはdivをサポートしていないものがあります。そのため、多くのメールクライアントで崩れずに表示させるためには<table>でレイアウトを組むのが一番良い方法です。

4. widthは600pxにしましょう。600pxであれば、全てのESPで表示可能です。Outlookなどは、受信トレイ右側のサイドスクリーンにメール本文が表示されるため、表示される幅が狭くなっています。この幅が600pxなので、メールの幅もそれに合わせるのが安全です。

5. ロゴの画像サイズは2倍で保存しましょう。 Retinaや4kのディスプレイでもロゴを綺麗に見せるために、画像サイズは実際表示するサイズの2倍にしましょう。他にも画像を入れる場合はそれらも2倍にすると良いでしょう。しかしながら、全ての画像サイズを2倍にするのはおすすめできません。メールの容量が大きくなりすぎると表示するのに時間がかかり、その間に受信者が興味を失ってしまう可能性があるからです。

6. インラインCSSを使いましょう。GmailやYahooでは、セキュリティリスクの観点から外部CSSの読み込みをブロックします。外部CSSの利用は控え、全てのスタイルをインラインで記述しましょう。例えば下記のように、background colorをbody内の属性として記入します。

7. altテキストを利用しましょう。altテキストで画像のキャプションをつけておけば、画像が読み込めなかった場合に、受信者にどんな画像が表示される予定だったのかを伝えることが可能です。ただaltテキストをつけるだけでなく、その書式をわかりやいものにする（例えば、フォントサイズや色を指定し中央に表示されるよう調整するなど）と、受信者の理解の助けとなり一歩進んだ対応になります。

8. 一般的なフォントを利用しましょう。GmailやYahooなどのESPは様々な種類のフォントを表示できますが、OutlookやAOLはそうではありません。全てのコンピュータやOSで利用可能な共通のフォント（Arialなど）があるので、その中から自身のブランドのフォントと似ているものを選んでください。スタイルだけでなく、幅や高さまで似たものを探しましょう。ESPによってはデフォルトフォントが表示されることがあり、ブランドのフォントの幅がデフォルトフォントより狭い場合はレイアウトが崩れてしまう可能性があります。

9. メディアクエリを追加しましょう。メディアクエリを使用すると、メールが表示される画面の大きさに応じてスタイルを指定でき、モバイルデバイス用のレスポンシブメールを作成できます。 次の例では、メディアクエリが480px（モバイルの推奨ピクセル幅）に設定されているため、モバイルでメールを開くと480pxに合わせて調整されたメールが表示されます。

10. 受信環境ごとのメール表示を事前にテストしましょう。実際にメールを送信する前に、複数の受信環境でメールがどのように表示されるのか確認することが大切です。Email on AcidやLitmusなどのツールを利用して、事前に確認しておきましょう。 Email on Acidは、70を超えるESPおよびデバイスで表示確認が可能です。 Litmusでも、様々な受信環境で表示確認ができます。これらのツールを利用して、様々な受信環境で綺麗に表示されるメールを送信しましょう。

さいごに：シンプルなデザインを心がけましょう

メールのデザインは、可能な限りシンプルにすることが大切です。複雑な形やパターンにこだわらず、上述の項目を心に留めてシンプルで読みやすいメールを作成しましょう。

さあ、メールを作成してみよう！

SendGridのマーケティングキャンペーン機能では、テキストや画像などのモジュールを Drag & Drop で簡単に配置してメールを作成することも、HTMLを最初からコーディングすることもできます。15種類の綺麗なテンプレート（無料でご利用いただけます）は、HTMLのコーディングなしにカスタマイズも可能です。トランザクションメールを作成する場合は、オープンソースのメールテンプレート「Paste」をご利用ください。