ダークモードで表示されるEメールのデザインをプレビューして最適化する

多くのEメールクライアントにはダークモード設定があり、これは明るめリードをオンにしたクライアントでマーケティングEメールがどのように表示されるかと一致しない可能性があります。

Eメールエディターでダークモードのプレビューを切り替える

デザイン中にEメールのプレビューをダークモードに切り替えるには:

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きしたEメールの名前をクリックします。
3. Eメールエディターの上部にある[ 表示オプション]をクリックし、[ダークモードプレビュー]スイッチをオンに切り替えます。

特定のクライアントのダークモードでのEメールの外観をプレビューする

ダークモードが有効になっているブラウザーまたはクライアントでコンタクトがEメールを開封すると、Eメールがどのように表示されるかを確認するには：

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きした既存のEメールの名前をクリックします。
3. Eメールエディターの右上にある [プレビューおよびテスト]をクリックし、[ 受信トレイプレビュー]を選択します。
4. プレビュー画面の上部にある［クライアント］をクリックします。
5. ［ダークモード］セクションで、プレビューする対象のクライアントの横にあるチェックボックスをオンにします。

6. 右上の［今すぐEメールをテスト］をクリックします。

ダークモードを対象にEメールを設計する際のベストプラクティス

ダークモード対応の各種クライアントを使用してEメールをプレビューするときは、クライアントによってEメールが異なる外観でレンダリングされる場合があることを念頭に置いてください。例えば、コンタクトがApple Mailを使用してEメールを開封すると、ダークモードが有効にされているかどうかを問わず、まったく同じようにEメールが表示されます。一方、コンタクトがWindows上のGmailやOutlookのようなアプリでダークモードを有効にしている場合、背景色が逆になるなど、Eメールのスタイル設定に大きな違いが出てくることがあります。

異なるクライアントの間でEメールのスタイル設定の一貫性を確保するには、以下のヒントをご確認ください。

明るい背景でも暗い背景でも、はっきりと表示される画像を使用する

画像をアップロードしてEメールに追加する前に、画像をPNGファイルに変換します。こうすると、ダークモードでは自動的にEメールの背景色を反転するEメールクライアントでも、画像が確実にレンダリングされるようになります。画像にロゴなどのテキストが含まれている場合は、テキストを半透明の枠線で囲んで目立たせることもできます。

ウェブでのアクセシビリティーを考慮して色を選ぶ

受信者が使用しているEメールクライアントに関係なく、ウェブで見やすいEメールコンテンツを設計することが重要です。テキストの色のコントラストを確認するなど、アクセシビリティーの基準に従うことが、ダークモードでもEメールが正しくレンダリングされるようにするうえで役立ちます。ウェブでアクセス可能な色の詳細については、HubSpotブログをご覧ください。

iOSでダークモードのスタイル設定のメディアクエリを指定する

Apple MailやOutlook.comを含め、一部のEメールクライアントでは、メディアクエリによるカスタムスタイル設定の検出、追加に対するサポートが限定されています。更新されたクラシックメールエディターを使用していて、メールにCSSの変更を加えるデベロッパーリソースがある場合は、prefers-color-schemeメディア機能でメディアクエリを追加し、画像やテキストがダークモードやライトモードでどのように見えるかを設定することができます。