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

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

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

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

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

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

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

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. 下書きEメールの名前 をクリックします。
3. Eメールエディターで、右上の[プレビューしてテスト ]をクリックしてから、[ Eメールクライアントでプレビュー]を選択します。
4. プレビュー画面で、左上の[プレビュータイプを選択 ]ドロップダウンメニューをクリックし、各プレビュータイプの横にあるチェックボックスをオンにします。ダークモードで利用可能なプレビュータイプを確認するには、検索バーに「ダーク」と入力します。 

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

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

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

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