メールの表示テスト、どこまでやる？テンプレート刷新時の実例をご紹介

せっかく時間をかけて見栄えの良いHTMLメールを作っても、メールの受信環境によっては、レイアウトや色の見え方などが変わってしまうことがあります。PCとスマートフォンのようなデバイスの違いの他、GmailやOutlookといったメールクライアントの違いによっても、同じメールが全く別の印象になることは珍しくありません。
強調したかった文字が思ったほど目立たなかったり、クリックしてほしいボタンが他の要素に埋もれてしまったりすると、受信者の体験やメールの成果に影響が出てしまいます。

そこでメール作成の最後に実施しておきたいのが、送信前の「メールの表示テスト」です。

表示テストで確認したいポイント

表示テストでは、さまざまなデバイスやメールクライアントでの見え方を確認します。ライトモードとダークモードの両方をチェックすることも忘れてはいけません。
普段自分が使っていない環境だからこそ、想定外の見え方に気づけることもあります。

ここで大切なのは、単に「表示が崩れていないか」を確認するだけではない、という点です。文字が詰まりすぎていないか、ボタンやリンクが直感的に認識できるかなど、「伝えたい内容がきちんと伝わるか」「受信者の操作性が損なわれていないか」という観点で表示を確認しましょう。

受信者が実際にこのメールを開いたとき、どんな印象を受けるのかという視点で表示テストを行うことで、想定外の表示を見つけた時に許容するか修正するかを判断できます。

弊社で実施した表示テスト

弊社では、Twilio SendGridのマーケティングキャンペーン機能を使って、お客様向けにイベント案内などのメールを配信しています。
昨年、このメールのテンプレートを見直し、デザインを刷新しました。

刷新にあたって意識したのは、Webサイトと色使いや雰囲気を揃えることに加え、読みやすいメールになっているかどうかです。具体的には、以下のような点を重視しました。

• メールの概要がひと目で把握できる構成
• CTAが自然と目に入るデザイン
• スマートフォンでも読みやすいレイアウト

テンプレートを作成したあとは、テストメールを送って表示テストをしました。
SendGridのDynamic Templateでテンプレートを作成する場合は、Email Testingを使うことでさまざまな受信環境での表示をシミュレーションできます。一方で、マーケティングキャンペーン機能では同様の機能が提供されていないため、今回は実際にテストメールを送信して確認しています。

今後様々な場面で利用することを前提としたテンプレートであるため、確認する受信環境は幅広く想定し、約50通りの環境で表示をチェックしました。
50通りと聞くと多くて大変そうですが、この段階ではテンプレートの見え方を確認したいので、誤字脱字の細かいチェックなどは行いません。元のデザインと比べてレイアウトや色、余白などが想定外の見え方をしていないかといった「見た目」に関する確認に絞りました。

誤字脱字やメール本文の最終チェックは、実際にメールを配信する前に、特によく使われている受信環境に絞って毎回実施しています。テンプレート確認と配信前チェックで役割を分けることで、確認作業の負荷を抑えつつ、品質を保つようにしています。

今回の表示テストにはこのようなチェックリストを使用しました。

表示確認では、単にPCやスマートフォン、各種メールクライアントによる違いを見るだけでなく、AndroidとiOS、複数のブラウザでの違いなども含めて確認しました。同じメールクライアントでも、使用する環境が変わることで細かな見え方が変わるケースがあるためです。

また、ダークモードも必ずチェックしました。ダークモードでは背景色や文字色が変わるため、可読性が下がってしまうことがあります。普段ライトモードしか使っていないと見落としがちですが、ダークモードの利用者は非常に多いため欠かせない確認項目です。

もっとも、すべての受信環境で完全に同じ見た目を再現することを目指しているわけではありません。
メールクライアントごとに表示のクセがある以上、差異をゼロにするのは現実的ではないからです。
今回のテストでも小さな違いはいくつか見つかりましたが、内容の理解や操作性に影響しないものについては許容し、修正は行いませんでした。

表示テストはどこまでやるべき？

メールテンプレートの刷新に際して、50通りの受信環境で表示テストをしたことをご紹介しました。表示テストでどこまで細かく確認するかは、次のような観点で整理すると判断しやすくなります。

• 一度きりのメールか、今後も繰り返し使うテンプレートか
• 表示が崩れた場合にどの程度の影響があるか
• どんな受信環境でメールが読まれているか

長く使い続ける予定のメールテンプレートほど、最初にしっかり確認しておきましょう。サインアップメールや重要な通知メールなど、サービスの利用に直結するメールの場合も慎重に確認しておくべきです。

また、多くの受信者が利用している環境で表示テストをするという観点も重要です。例えば、宛先に携帯キャリアのメールアドレスが多い場合は、キャリアメールでの表示テストを手厚く実施すると安心です。一方、BtoB向けでPCからの閲覧が中心であれば、PC環境を優先して確認すると良いでしょう。

こうした判断の参考として、SendGridのDeliverability Insightsの活用をお勧めします。実際に配信したメールがどのメールプロバイダで受信されているかを確認できるため、「どの受信環境を重点的に確認すべきか」を考える材料になります。

これからメールを作成する方へ

表示テストは、顧客体験やマーケティング効果を高めるための大切な工程です。
すべての受信環境で想定通りの表示を実現するのは難しいので、よく使われている受信環境や重要度の高いメールから優先的にチェックしていくと良いでしょう。また、SendGridのEmail Testingのような機能を活用すると、表示テスト実施のハードルを下げることができます。
受信者目線でメールを確認し、伝わるメールを目指しましょう！