このページでは、電子メールクライアントがダークモードを処理する方法と、電子メール Designerでカスタムダークモードの設定をプレビューおよび定義する方法、および一貫したレンダリングのベストプラクティスについて説明します。
メールをデザインする際に、Journey Optimizer E メールデザイナーを使用すると、ダークモードビューに切り替えることができます。
このダークモードビューでは、ダークモードがオンの場合にサポートしているメールクライアントに表示される特定のカスタム設定を定義することもできます。
ダークモードとは what-is-dark-mode
様々なメールクライアントでダークモードがレンダリングされる方法は複雑です。 まず、ダークモードを定義します。
ダークモードを使用すると、サポートしているメールクライアントとアプリで、メールの背景を暗くし、テキスト、ボタン、他の UI 要素を明るい色で表示できます。 目への負担を軽減し、バッテリー寿命を短縮し、低照度環境での読みやすさを向上させて、より快適な視聴エクスペリエンスを実現します。
これは、主要なオペレーティングシステムとアプリ全体で高まるトレンドとして、すべてのユーザーにとってコンテンツが読みやすく視覚的に魅力的であることを確保するために、最新のメールデザインでは重要な考慮事項になっています。
ガードレール guardrails
ダークモードのレンダリングに関する期待は、様々なメールクライアントによって適用方法が大きく異なる可能性があるので、慎重に考慮する必要があります。
Journey Optimizer E メールデザイナーでダークモードを使用する前に、メインのメールクライアントでの処理方法を理解することが重要です。 区別するケースには、次の 3 つがあります。
ダークモードをサポートしていないクライアント not-supporting
次のような一部のメールクライアントでは、この機能をまったくサポートしていません。
- Yahoo! メール
- AOL
E メールデザイナーでダークモードのカスタム設定を定義したかどうかに関係なく、これらのメールクライアントではダークモードのレンダリングを表示しません。
独自のダークモードを適用しているクライアント default-support
一部のメールクライアントでは、受信したすべてのメールに対して、独自のデフォルトのダークモードが体系的に適用されます。 色、背景、画像などはメールクライアント固有のダークモード設定で自動的に調整されるので、外部からの変更はできません。
これらのクライアントの例：
- Gmail（デスクトップ web メール、iOS、Android、モバイル web メール）
- Outlook Windows
- Outlook Windows メール
この場合、E メールデザイナーでカスタムダークモード設定を定義すると、これらの設定はメールクライアントの設定で上書きされます。
これらのメールクライアントはダークモードを処理しますが、特定のダークモードデザインはレンダリングされないことを理解することが重要です。
カスタムダークモードをサポートしているクライアント custom-support
他のメールクライアントには、@media (prefers-color-scheme: dark) クエリを使用してカスタムダークモードをレンダリングするオプションが用意されています。これは、Journey Optimizer E メールデザイナーで使用される方法です。
このオプションを処理する主なクライアントのリストを以下に示します。
- Apple メール macOS
- Apple メール iOS
- Outloook macOS
- Outlook.com
- Outlook iOS
- Outlook Android
この場合、E メールデザイナーで定義した特定の設定が表示されます。
ただし、メールクライアントごとに制限が一部適用される場合があります。 例えば、Apple メール 16（macOS 13）などの一部のクライアントでは、メールのコンテンツに画像が存在している場合、ダークモードは生成されません。
最適な結果を得るには、ターゲットにしているメールクライアントでコンテンツをテストします。 各クライアントの最終結果にできるだけ近いシミュレーションを表示するには、E メールデザイナーで「メールレンダリング」オプションを使用します。
E メールデザイナーでのダークモード dark-mode-email-designer
E メールデザイナーでのダークモードに関しては、考慮すべき 2 つの側面があります。
- サポートされているほとんどのメールクライアントで、デフォルトのダークモードがどのようにレンダリングされるかをプレビューできます。 詳細情報
- サポートされているメールクライアントのデフォルト設定を上書きする場合は、編集中のメールに適用するカスタムダークモード設定を定義できます。 詳細情報
デフォルトのダークモードのプレビュー preview-dark-mode
E メールデザイナーでダークモードにアクセスし、デフォルトのダークモード設定のプレビューを取得するには、次の手順に従います。
- E メールデザイナーのホームページで、「ゼロからデザイン」オプションを選択します。 詳細情報
-
構造とコンテンツコンポーネントをコンテンツに追加します。
-
中央のキャンバスの右上で、切替スイッチを ダークモード に切り替えます。
-
デフォルトのダークモードのプレビューが表示されます。
デフォルトでは、E メールデザイナーのダークモードのプレビューには、画像とアイコンを除くすべての要素に「フルカラー反転」カラースキームが適用されます。
つまり、明るい要素と暗い要素の領域を検出して反転させることで、明るい背景は暗く、暗いテキストは明るくなり、暗い背景は明るく、明るいテキストは暗くなります。
カスタムダークモードの定義 define-custom-dark-mode
ダークモードに切り替えたら、受信者のメールクライアントでダークモードが有効になっている場合にのみ表示されるコンテンツの特定のスタイル要素の編集を選択できます（その機能がサポートされている場合）。
E メールデザイナーのカスタムダークモードのスタイル設定を活用するには、Journey Optimizer では @media (prefers-color-scheme: dark) CSS クエリを使用します。このクエリでは、ユーザーのメールクライアントがダークモードに設定されているかどうかを検出し、メールで定義したダークテーマのデザインが適用されます。
カスタムダークモードの設定を定義するには、次の手順に従います。
-
E メールデザイナーで ダークモード プレビューに切り替えます。 方法についてはこちらを参照
-
テキスト、背景、ボタンなどのスタイル設定の色属性を編集します。
-
画像やアイコンの色は変更できませんが、特定のアセットはダークモード用にのみ定義できます。 これを行うには、任意の画像を選択します。 設定パネルの専用切替スイッチを使用して ダークモード に切り替え、別のアセットを選択します。
-
いつでもライブビューに切り替えて、様々なデバイスサイズでコンテンツがどのようにレンダリングされる可能性があるかを確認できます。 このビューから、画面上部のダークモード切替スイッチを選択すると、様々なデバイスをまたいでコンテンツのダークモードバージョンをプレビューできます。
note caution CAUTION ライブビューは、様々なデバイスサイズをまたいでレンダリングがどのように表示される可能性があるかを比較するのにデザインされた汎用プレビューです。 最終的なレンダリングは、受信者のメールクライアントによって異なる場合があります。 -
ダークモードの変更に問題がなければ、「コンテンツをシミュレート」をクリックし、ドロップダウンから「コンテンツをシミュレート（AEP プロファイル）」を選択して、メールのレンダリングを確認します。
-
「メールをレンダリング」を選択し、Litmus アカウントに接続します。 様々なメールクライアントでの最終的なダークモードレンダリングを確認できます。 詳しくは、メールのレンダリングを参照してください。 代わりにサンプル入力データや AI 自動生成を使用してコンテンツバリエーションをテストするには、「コンテンツをシミュレート」を直接クリックします。 コンテンツバリエーションのシミュレート方法の詳細情報
note warning WARNING シミュレーションではダークモードでのメールの表示に非常に近いですが、メールサービスプロバイダーやデバイスレベルの設定の違いにより、実際のレンダリングは異なる場合があります。
ベストプラクティス best-practices
主要なメールクライアント間でダークモードの採用が増加するにつれて、カスタムダークモードを使用しているかどうかに関係なく、明るい環境と暗い環境の両方でメールがどのようにレンダリングされるかを考慮することが重要になります。
ダークモードでは、色、背景、画像が変更される可能性があり、場合によってはデザインの選択が上書きされることもあります。 視覚的な一貫性、アクセシビリティ、ブランドの整合性を確保するには、次に示すベストプラクティスに従ってください。
画像とロゴの最適化
-
ロゴやアイコンを透明な背景の PNG として保存し、ダークモードで白いボックスが表示されないようにします。
-
白色の背景または明るい背景がハードコードされた画像は回避します。
-
透明度がオプションでない場合は、不自然な色の反転を防ぐために、デザインでは単色の背景に画像を配置します。
背景に対する注意
-
ライトモードとダークモードの両方で読みやすくするには、テキストと背景色の間に十分なコントラストを確保します。
-
重要なコンテンツについては、背景色にのみ依存することは回避します。 一部のクライアントでは、ダークモードで背景色を上書きすることがあるので、重要な情報が表示されていることを確認します。
ダークモードでのアクセス可能なコンテンツのデザイン
-
色覚異常のある人物でも簡単に区別できる色の組み合わせを使用します。
-
明るい背景と暗い背景の両方に対してコントラストを確保するのに、ミッドトーンパレットを使用します。
-
読みやすさを向上させ、Web コンテンツアクセシビリティガイドライン（WCAG）標準を満たすには、コントラストの高いアクセシブルな色の組み合わせを使用します。 WebAIM のコントラストチェッカーなどのツールを使用して、色のコントラストを検証します。
-
読みやすさに影響する場合があるので、細いフォントは回避します。 ブランドに細いフォントが必要な場合は、ダークモードで太字にします。
-
純粋な白色に純粋な黒色を重ねると、目への負担の原因となる場合があり、一部のメールクライアントにより自動的に反転される可能性があるので、これを回避します。
-
ダークモードがサポートされていない場合は、アクセスできるフォールバックスタイル設定を指定します。
ダークモード環境でのメールのテスト
-
問題を早期に発見するには、反転したカラースキームを使用する E メールデザイナーのダークモードのプレビューを使用します。
-
Litmus を活用した「メールのレンダリング」オプションを使用して、主要なメールクライアント（Apple メール、Gmail、Outlook）でデザインをシミュレートし、ダークモードでの色と画像の動作を確認します。
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how email clients handle dark mode and how to preview the default dark mode and define custom dark mode settings in the Email Designer, along with best practices for consistent rendering.
Intents:
- Understand how the main email clients handle dark mode
- Preview the default dark mode in the Email Designer
- Define custom dark mode settings, including specific images for dark mode
- Check rendering with Switch to live view and Simulate content
- Apply best practices for images, backgrounds, and accessible dark mode content
Glossary:
- Dark mode: A view letting supporting email clients display emails with darker backgrounds and lighter text, buttons, and UI elements (product-specific)
- Full color invert: The color scheme the default dark mode preview applies to all elements except images and icons, inverting light and dark areas (product-specific)
- Custom dark mode: Specific styling settings you define that display only when dark mode is enabled in a supporting recipient’s email client (product-specific)
- Switch to live view: A generic preview to compare how content renders across various device sizes, with a Dark mode toggle (product-specific)
- Simulate content: The option used (via Simulate content (AEP profiles), then Render email with Litmus) to check email rendering (product-specific)
Guardrails:
- The final dark mode rendering depends on the recipient’s email client and can vary a lot from one to another.
- Clients that do not support dark mode (for example Yahoo!Mail, AOL) never display any dark mode rendering, whether or not custom settings are defined.
- Clients that apply their own default dark mode (for example Gmail, Outlook Windows, Outlook Windows Mail) override any custom dark mode settings defined in the Email Designer.
- Custom dark mode renders only on clients supporting the
@media (prefers-color-scheme: dark)query (for example Apple Mail macOS, Apple Mail iOS, Outlook macOS, Outlook.com, Outlook iOS, Outlook Android). - The default dark mode preview applies the full color invert color scheme to all elements except images and icons.
- You cannot change the colors of images and icons, but you can define specific assets for dark mode only.
- Some clients such as Apple Mail 16 (macOS 13) will not generate dark mode if images are present in the email content.
Terminology:
- Canonical name: Dark mode — Acronym: n/a — variants: Dark mode view, custom dark mode
- Method: Journey Optimizer uses the
@media (prefers-color-scheme: dark)CSS query for custom dark mode - Do not confuse: “default dark mode preview” (full color invert applied by the Email Designer) ≠ “custom dark mode” (specific settings you define)
- Do not confuse: “Switch to live view” (generic multi-device preview) ≠ “Simulate content” / “Email rendering” (Litmus-based simulation across email clients)
FAQ:
- Q: Will my dark mode design look the same everywhere? — No; the final rendering depends on each recipient’s email client and can vary; it cannot be guaranteed identical across clients.
- Q: Why don’t my custom dark mode settings appear in Gmail? — Clients such as Gmail apply their own default dark mode, which overrides the custom settings defined in the Email Designer.
- Q: Can I change image colors for dark mode? — No; you cannot change the colors of images and icons, but you can define specific assets to display in dark mode.
- Q: How do I check the closest rendering to the final result? — Use Simulate content, then Simulate content (AEP profiles) and Render email with a Litmus account, or the Email rendering option.
- Q: What color scheme does the default preview use? — Full color invert, applied to all elements except images and icons.