サイトアイコン Mailtrap

徹底解説：メールクライアントテスト

Beatriz Campos

この記事ではメールクライアントをテストするためのツールとプロセスについて詳しく解説していきます。まず背景とユースケースを少しご紹介した後、使う価値のあるツールをカテゴリ分けして分析していきます。以下が大体の流れです。

メールクライアントテストとは？

メールクライアントテストとは、さまざまなメールクライアント、デバイス、オペレーティングシステムでメールがどのように表示され、機能するかを評価するプロセスです。受信者が使っているプラットフォームに関係なく、メールが正しく、一貫した形で表示されるようにすることが主な目的です。

たとえば、あるメールはGmailのウェブブラウザでは完璧に表示されるかもしれませんが、デスクトップのAOLやOutlookやモバイルデバイス上のYahooメール（iPhoneやAndroid）ではレイアウトが崩れたり、画像が表示されなかったりすることがあります。

メールクライアントテストはメールを送信する前にこれらの問題を特定・修正し、すべてのユーザーにシームレスなエクスペリエンスを提供しするのに役立ちます。

以下はユースケースの例をご紹介します。

  1. クロスクライアントレンダリング: マーケティングキャンペーン用に設計されたメールをGmail、Outlook、Apple Mailなどのさまざまなプラットフォームでテストします。その結果、一部のCSSスタイルが古いバージョンのOutlookでサポートされていず、レイアウトが崩れてしまうことが分かります。この問題は、Outlook専用のフォールバックスタイルを実装することで解決できます。
  1. モバイル対応: プロモーションメールをAndroidのGmailアプリやiOSのApple Mailなど、さまざまなモバイルデバイスでテストします。その結果、小さめの画面では画像が適切にスケーリングされていないことが判明します。そのためデザインチームはメールのメディアクエリを調整し、すべてのデバイスで画像が適切にサイズ変更されるよう取り組みます。

メールクライアントテストツール

つまりこれらのテストツールを使うと、メールがさまざまなデバイスやメールクライアントでどのように見えるかを確認し、レンダリングの問題を特定し、適宜調整を行えます。

でも、どのプロ用のツールも同じというわけではありません。テストツールは一般的に、次の3つのカテゴリに分けられます。

  1. 独立型またはスタンドアロンのテストツール（利用方法を詳しく解説しましたので、ぜひリンクをクリックしてみてください。）
  2. HTMLプレビューツール（以下の概要をご参照ください。）
  3. プレビュー機能を備えた大規模なプラットフォーム（こちらも下記の概要をご参照ください。）

結論として、現在の技術スタックや個人の好みに応じて、ツールの種類を選択することをおすすめします。どのツールを選んだとしても、フォーマット、メールデザイン、背後にあるコードのチェックはメールの到達率の向上に役立つでしょう。

ただし問題のあるコード行を表示せず、それを修正するための提案も提供しないテスターも一部ありますのでご注意ください。

HTMLプレビューツール

HTMLプレビューツールを使うとHTMLとCSSの解析を行い、人気のあるメールクライアントごとにイシューリストを閲覧できます。

ここではプレビューを提供するツールについて簡単にご紹介していきます。さらに詳しくお知りになりたい場合は、こちらのリンクをクリックして詳細なガイドをご覧ください。

HTMLメール解析ツールは各メールクライアントのプレビューを生成してくれるだけでなく、コード内の正確な問題を指摘し、修正する方法も説明してくれます。

そのため複数のメールクライアントのプレビューウィンドウを1つずつ確認して問題を探す必要がなくなります（ツールによっては60以上のプレビューがある場合もあります）。HTML/CSSツールが問題を解析し、結果をレポートにまとめてくれます。

なおほとんどのメールプレビューツールはブラウザでHTMLがどのようにレンダリングされるか、デスクトップ、タブレット（iPadなど）、モバイルデバイスでどのように見えるかも表示してくれます。

メールプレビュー機能

前述の通り、メールクライアントテストはCRMやメール送信ツールの機能として提供されることがあります（例：MailtrapのEmail Delivery Platform）。すでにお使いの技術スタックにこのようなツールがある場合、プレビュー機能の利用をおすすめします。以下、いくつか例をご紹介します。

HubSpot

HubSpotはメールマーケティング、営業、ヘルプデスクサービスを提供するCRMプラットフォームで、メールエディタに組み込まれたメールプレビューツールを備えています。

出典

HubSpotを使うと約30種類のメールクライアント（複数バージョンがあるメールクライエントも含みます）から選択でき、各メールクライアントでテンプレートがどのように表示されるかを確認できます。Gmail、Outlook、Office 365、Apple Mailなど最も人気のメールサービスに対応しており、テンプレートのパフォーマンスを手動で比較することも可能です。なおHubSpotのメールプレビューツールは、Litmusによって提供されています。本サービスについてはこの記事の後半で説明いたします。

Campaign Monitor

Campaign Monitorは人気のメールマーケティングと自動化ツールのひとつです。無制限プランとプレミアプランでインボックスプレビューテストを利用でき、このテストでは約20の主要なウェブ、デスクトップ、モバイルのメールクライアントでレンダリングされたテンプレートのスクリーンショットを生成できます。

出典

Campaign Monitorのテストツールでは、プレビューをクリックして手動で比較することもできます。

ActiveCampaign、Brevo、Mailjet（エンタープライズバージョン）も人気のメール配信サービスで、メールクライアントプレビュー機能を備えています。さらにMailchimpにはメールビルダーツールの一部としてインボックスプレビュー機能があります。

他のメール配信システムをお使いの場合は、サードパーティのメールテストツールが適しているでしょう。

適切なメールクライアントテストツールを選ぶ方法

技術的なニーズ、目標、予算に基づいて、メールクライアントテストツールを選ぶためのガイドをご用意しましたので、ぜひご活用ください。

様々なメールクライアントでのメール送信テスト方法

ここではメールテストとプレビューの詳細なフローについて説明いたします。まずはプレビューとHTMLチェックを備えた完全なサンドボックスを提供するMailtrapのEmail Testingについて解説し、その後Litmusや他のプレビューツールをご紹介いたします。

免責事項：以下のセクションには機能リストや料金に関する言及があります。これらは執筆時点で有効なものですが、記事をお読みになる時点では変更されている可能性があります。

Mailtrap

MailtrapのEmail TestingはMailtrap Email Delivery Platformの一部で、メールを安全な環境で検証しデバッグするためのステージング環境を備えています。

料金：

Mailtrapを使ったメール送信テストのワークフロー

ステップ 1

Mailtrapのアカウントを作成します。次にメールを作成して、Mailtrapのサンドボックスに送信します。これはSMTP認証をサポートするアプリ、MTA、またはMailtrapのメールアドレスを使ってテストする任意のメール送信ツールを使って実行できます。

ステップ 2

MailtrapのダッシュボードでEmail Testing > Inboxes > My Inboxに移動し、送信したメールを確認します。

注：受信トレイの名前はご自由に変更できます。また上位プランでは追加の受信トレイを取得できます。

ステップ 3

HTMLコードに関連する3つのタブがあります。

  1. HTML（ウェブブラウザでレンダリングされたHTMLプレビュー）
  2. HTML Source（メールのHTMLコード）
  3. HTML Check

HTML Checkタブに移動します。重要なメールクライアントやデバイスタイプを選択するか、全体のレポートを確認して見つかったすべてのエラーを調べてください。

使われているHTML/CSSが主要なメールクライアントでどの程度サポートされているかが表示されます。全体のレポートスコアは「Market Support」のパーセンテージとして表示され、人気メールクライアント全体のHTML/CSSのサポートレベルを表しています。

全体スコアの下にはさらに詳細なセクションがあり、以下が含まれます。

[Show more]のリンクをクリックすると、問題の詳細やどのメールクライアントのバージョンがエラーを表示しているかを説明するセクションが表示されます。

これらのデータを基に、どの程度の受信者が期待通りの見た目のメールを受け取れるかを把握できます。さらに、どのコード行を修正すればメールのパフォーマンスが向上するかも明確になります。

HTMLチェックに加えて、MailtrapのEmail Testingは以下の機能も提供しています。

最後に、Email TestingはMailtrap Email Delivery Platformの一部であると上で説明いたしました。そのためMailtrapはメール配信API/SMTPツールも提供しており、メールの本番送信をサポートしています。つまり、たとえばAPIを選択した場合、テスト環境から本番環境に迅速に切り替えて、メールが適切に表示され、期待通りのパフォーマンスを発揮することを確認してから送信することができます。

Mailtrapでメールを無料でテスト

Litmus

Litmusはメールクライアントまたはデバイスからの個別のスクリーンショットを、メールプレビューとして提供しています。プレビューは90以上のメールクライアント（この数には異なるバージョンやデバイスも含まれます）に対応しており、Gmail、Outlook、Apple Mail、Yahooなどの人気クライアントや、Comcast、freenet.de、web.deなどのあまり使われないクライアントもサポートしています。

料金

Litmusのメール送信テストワークフロー

ステップ 1

Litmusにテンプレートを追加する方法は次の通りです。

  1. Litmusのテスト用メールアドレスを使って送信する。
  2. HTMLテンプレートをアップロードする。
  3. Litmusのビルダーで、テンプレートライブラリから選択するか、一から作成する。

ヒント：作業中にテンプレートのウェブプレビューを確認できます。

ステップ 2

メールクライアントのプレビューに切り替え、テストしたいメールクライアントを選択してプレビューを確認します。問題がないかどうか各プレビューをよくチェックしましょう。

このテストで使ったHTMLテンプレートは、Really Good Emailsで入手しました。

ヒント：たとえばApple Mail 13とApple Mail 13 Dark Modeは異なるメールクライアントとしてカウントされるので、テンプレートに変更を加えて適用するたびに、新しいプレビューが生成されます。あっという間に上限に到達してしまうのを避けるために、メールクライアントを選択する際はプレビューの上限数を意識することをおすすめします。

ステップ 3

問題がある場合はメールクライアントのスクリーンショットをクリックして、詳細を確認します。次に他のクライアントやデバイスで問題が再現されるかどうかを手動で確認します。

メールクライアントに関連する問題や修正方法を記載した記事のリンクが表示されることもあります。その後、Litmusのビルダー内でHTMLテンプレートを修正し、更新されたプレビューを確認します。

ステップ #4

作業が終わったら、テンプレートをチェックリストにプッシュします。新しく生成されたプレビューのリストが表示されるので、スクロールして各クライアントの詳細なチェックを行います。

重要な注意点：

プレビューに加えて、事前送信チェックリストには次のテストが含まれています。

  1. 主要なメールクライアントでの件名とプレビューテキストの確認。
  2. 6つのベストプラクティスに基づいたアクセシビリティテスト（配置、altテキスト、コンテンツタイプ、見出し構造など）。
  3. リンクの検証。リンクが機能しているか確認した上で、リンク先のURLをひとつの表にまとめてくれます。
  4. トラッキングのチェック。HTMLコード内でトラッキングピクセルをチェックし、見つからない場合は独自のメール分析を追加するよう提案してくれます。
  5. 画像を非表示にした状態でメールプレビューを表示する画像ブロックチェック。
  6. 画像の読み込み速度を示すロード速度テスト。
  7. スパムテスト。メールが受信トレイに届かない原因となる問題を探してくれます。このテストはPlusおよびEnterpriseプランでご利用いただけます。

Email on Acid

Email on Acid は多数のメールクライアントでのプレビューの提供、およびメールキャンペーンの事前チェックをしてくれる人気のサービスで、Litmusの代替ツールです。ChromeとFirefoxのブラウザを使って、90以上のメールクライアントのメールプレビューを確認できます。

料金

Email on Acidでのメール送信テストワークフロー

ステップ 1

メニューからメール送信テストツールを選択して開始します。HTMLテンプレートのメールプレビューとスパムテストを実行できます。HTMLコードはコピーして貼り付けるか、アップロードする、またはテスト用アドレス宛にメールで送信できます。

HTMLコードを貼り付けるとEmail Test Summary（メールテストの概要）が表示され、お選びになったモバイル、ウェブ、デスクトップクライアントでのプレビューが生成されます。

このテストで使ったHTMLテンプレートは、Really Good Emailsで入手しました。

ステップ 2

各クライアントでテンプレートが正しく表示されるかを手動で確認します。上記の例では、テンプレートにレンダリングの問題があることが一目でわかります。

各プレビューを開いて、上から下までスクロールし、テンプレート全体でどのような影響があるか確認することが重要です。プレビューを開くと、ビジュアルレンダリングとコード分析の概要の間を切り替えられます。なおコード分析には次の3つのタブがあります。

ヒント：追加で$75を支払うと、テンプレートのコード修正を依頼できます。

ステップ 3

テスト結果を確認した後、HTMLメールテンプレートを修正し、新しいテストを作成します。結果に完全に満足するまで、繰り返し作業を行います。

ヒント：メールプレビューの結果はリンクを介して共有することもできます。

Email on Acidはメールテスト機能に加えて、次の機能も提供しています。

Email Preview Services

Email Preview Servicesは60以上のメールクライアントを対象にリアルタイムでリアルデバイスのスクリーンショットを提供するサービスです。メールアナリティクス、受信トレイおよびスパムテスト、メールエディタも備えています。EnterpriseプランではホワイトラベルのAPIで利用できます。

料金：

Email Preview Servicesでのメール送信テストワークフロー

Email Preview Servicesの場合、特に作業工程はないので、ステップバイステップの解説はいたしません。以下でご紹介するように、基本的にすべてが1つの流れの中で行われます。

まずPreviewsに移動し、HTMLコードを追加します。HTMLコードがない場合は、ドラッグアンドドロップのメールエディタを使って新しいテンプレートを作成します。または、emailpreviewservices.comでテスト用メールアドレスを生成し、お使いのESPまたはメールクライアントからメッセージを送信することもできます。

テストを実行した後、選択したメールクライアントごとにメールテンプレートのスクリーンショットが一覧表示されます。コード分析や修正方法についてのヒントは提供されません。特定のメールクライアントで問題が発生した場合、テンプレートを編集し、別のテストを実行する必要があります（ただしEmail Preview Servicesにはバージョンテストも提供しています）。

このテストで使ったHTMLテンプレートは、Really Good Emailsで入手しました。

なおメールプレビューおよびエディタ機能に加えて、Analyticsを使い受信者の活動を追跡したり、スパムテストを実行したりもできます。スパムテストには送信者IPの評価、スパムフィルタ、メールプロバイダーの配信レポート、ヘッダープレビュー、コンテンツ分析が含まれます。

まとめ

これで一連のメールクライアントのテストに挑む準備ができたでしょう。覚えておくべき重要なポイントは、プレビューとコードインスペクション（検証）の両方を行うか、または多数のクライアントでのプレビューだけを行うかという点です。

繰り返しになりますが、常にコードインスペクションに重点を置き、さまざまなデバイスとクライアントでのサポートを確認することをおすすめします。早速ですが、MailtrapのEmail Testingをぜひお試しください🙂

モバイルバージョンを終了