ダークモード向けにマーケティングEメールを最適化する

Eメールエディターでは、編集中にマーケティングEメールがダークモードでどのように表示されるかをプレビューしたり、特定のEメールクライアント用のプレビューを生成したりできます。これにより、ダークモードでマーケティングEメールを表示した受信者が意図したとおりに表示できるようになります。

Eメールエディターでダークモードをプレビューする

編集中にEメールをダークモードに切り替えてプレビューするには、次の手順に従います。

1. HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［Eメール］に移動します。アカウントに［その他］が表示されない場合は、［マーケティング］＞［Eメール］に直接移動します。
2. 下書きを作成したEメールの名前をクリックします。
3. メールエディタの右下にある「表示」をクリックし、「ダークモードのプレビュー」スイッチをオンにしてください。

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

ダークモードがオンになっている特定のブラウザーまたはEメールクライアントでEメールがどのように表示されるかを確認するには、次のようにします。

1. HubSpotアカウントで、［その他］をクリックし、［マーケティング］＞［Eメール］に移動します。アカウントに［その他］が表示されない場合は、［マーケティング］＞［Eメール］に直接移動します。
2. 下書きEメールの名前 をクリックします。
3. メールエディタで、右上の「 & テストをプレビュー」をクリックし、「メールクライアントでプレビュー」を選択します。
4. プレビュー画面で、左上の[プレビュータイプを選択 ]ドロップダウンメニューをクリックし、各プレビュータイプの横にあるチェックボックスをオンにします。ダークモードで利用可能なプレビュータイプを表示するには、検索バーに「ダーク」と入力します。 

5. 右上にある [プレビュー]をクリックします。

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

Eメールクライアントやブラウザーによってダークモードの表示方法は異なります。ダークモードで表示されるEメールを設計する際には、次の提案に留意してください。 

• 明るい背景と暗い背景の両方ではっきりと表示される画像を使用する:画像を.png形式の透明な画像に変換して、ダークモードで期待どおりに表示されるようにします。
• テキストに十分な色のコントラストがあることを確認する:ウェブコンテンツのアクセシビリティーガイドラインに従い、テキストと背景色の間に十分なコントラストがあることを確認してください。
• ダークモードのメディアクエリを追加: Apple Mailなどの一部のEメールクライアントでは、メディアクエリを使用したカスタムスタイル設定が限定的にサポートされます。prefers-color-scheme メディア機能を使用して 、ダークモードでの画像やテキストの表示方法を設定できます。このオプションは、デザインマネージャーで作成されたEメールテンプレートでのみ使用できます。