メールコンテンツのダークモード dark-mode
ダークモード を使用すると、サポートされるメールクライアントまたはアプリで、テキスト、ボタン、その他の視覚的要素に対して、暗い背景と明るい色のメールを表示できます。 このタイプのディスプレイは、目の疲れを軽減し、バッテリー寿命を節約し、低輝度環境での読みやすさを向上させて、より快適な視聴体験を提供します。 主要なオペレーティングシステムやアプリ全体で高まる傾向として、コンテンツをすべてのユーザーにとって読みやすく、視覚的に魅力あるものにするために、最新のメールデザインでは重要な検討事項になりました。
のビジュアルデザインスペースで メールコンテンツを作成 Journey Optimizer B2B Edition すると、 ダークモード 表示に切り替えることができます。 この表示では、ダークモードが有効な場合にメールクライアントをサポートするための特定のカスタム設定を定義することもできます。
メールクライアントに関する考慮事項
ダークモードを適用する方法は、メールクライアントやアプリによって大きく異なります。 このため、ダークモードでのレンダリングに期待される結果を慎重に検討する必要があります。 メールデザイン領域でダークモードを使用する前に、次のようなメールクライアントの使用例を考慮してください。
次のような一部のメールクライアントでは、この機能をまったくサポートしていません。
- Yahoo! Mail
- AOL
メールデザインでダークモードのカスタム設定を定義すると、これらのメールクライアントはダークモードのレンダリングを表示できません。
一部のメールクライアントは、受信したすべてのメールに独自のデフォルトのダークモードを体系的に適用しています。 ダークモードの設定と外部設定に応じて、色、背景、画像、その他の要素を自動的に調整します。 次のクライアントが含まれます。
- Gmail （デスクトップ Web メール、iOS、Android™、モバイル Web メール）
- Windows 版 Outlook
- Outlook Windows メール
この場合、クライアントのダークモード設定は、Journey Optimizer B2B Edition で定義したカスタムのダークモード設定よりも優先されます
最も人気のあるメールクライアントの多くは、カスタムダークモードを @media (prefers-color-scheme: dark) クエリでレンダリングするオプションを提供しています。これは、Journey Optimizer B2B Edition メールスタイルで使用される方法です。 このクライアントのリストには、次のものが含まれます。
- Apple メール macOS
- Apple メール iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
この場合、Journey Optimizer B2B Edition で定義した特定の設定がレンダリングされます。 ただし、電子メールクライアントごとに適用される制限もあります。 例えば、一部のクライアント（Apple Mail 16 （macOS 13）など）では、メールのコンテンツに画像が存在してもダークモードが生成されません。
最適な結果を得るには、ターゲット設定しているメールクライアントでコンテンツをテストします。 各クライアントの最終結果にできるだけ近いシミュレーションを確認するには、メールデザイン領域で Litmus メールテストレンダリング 統合を使用します。
ダークモードに対応したデザイン
Journey Optimizer B2B Edition でダークモード用にメールコンテンツのスタイルを設定する場合、ビジュアルデザインスペースには、次の 2 種類のツールが用意されています。
-
プレビュー関数 を使用して、ほとんどのサポートメールクライアントに対するデフォルトのダークモードレンダリングを確認します。
-
サポートされるメールクライアントのデフォルト設定を上書きする場合は、カスタムのダークモード設定を定義し、メールコンテンツに適用します。 詳細情報
デフォルトのダークモードのプレビュー preview-dark-mode
-
メールデザイン スペースでメールコンテンツを開きます。
キャンバスの右上には、コンテンツの表示をライト（デフォルト）とダークモードの間で切り替えるライトダークセレクターがあります。
-
セレクターを ダークモード （
キャンバスには、デフォルトのダークモードプレビューを使用してコンテンツが表示されます。x
デフォルトでは、ダークモードプレビューは、画像とアイコンを除くすべての要素に
full color invertのカラースキームを適用します。 このカラースキームは、明るい要素と暗い要素を持つ領域を検出し、それらを反転します。 明るい背景は暗くなり、暗いテキストは明るくなり、暗い背景は明るくなり、明るいテキストは暗くなります。
ダークモードのカスタム設定の定義 custom-dark-mode
ダークモードに切り替えた後、受信者のメールクライアントでダークモードが有効な場合にのみ表示される、コンテンツの特定のスタイル要素を編集するように選択できます（その機能をサポートしている場合）。
メールデザインスペースのカスタムダークモードのスタイル設定には、 の要素が使用されます。 CSS クエリ @media (prefers-color-scheme: dark) メールクライアントがダークモードに設定されているかどうかを検出し、メールで定義されているダークテーマのデザインを適用します。
カスタムのダークモード設定を定義するには（T） :
-
必要に応じて、デザインキャンバスの右上にあるセレクターを ダークモード （
-
テキスト、背景、ボタンなどのスタイル設定色属性を編集します。
-
画像とアイコンには、ダークモード専用のアセットを定義します。
画像やアイコンの色は変更できませんが、ダークモードで使用する代替アセットを定義できます。 アイコンに対して様々な色の組み合わせを試したり、写真画像の色と彩度を調整したりできます。
任意の画像を選択し、設定 パネルの専用トグルを使用して ダークモード に切り替えます。 次に、別の画像アセットを選択します。
画像アセットの選択について詳しくは、 画像アセットの追加 を参照してください。
-
デザインの変更中はいつでも、「ライブビューに切り替える を選択して、様々なデバイスサイズでのコンテンツのレンダリング方法を確認できます。
この表示で、セレクターを ダークモード （
note caution CAUTION ライブビューは、様々なデバイスサイズをまたいでレンダリングがどのように表示される可能性があるかを比較するのにデザインされた汎用プレビューです。最終的なレンダリングは、受信者のメールクライアントによって異なる場合があります。 -
ダークモードの変更が完了したら、「コンテンツをシミュレート」をクリックします。
プレビューツールとプルーフツールを使用して、メールデザインをテストします。 詳しくは メールコンテンツのプレビューとテスト を参照してください。
-
Litmus Enterprise アカウントをお持ちの場合、「メールをレンダリング」を選択して、Litmus の様々なメールクライアント向けの最終的なダークモードのレンダリングを確認します。
詳しくは、「Litmus でのメールのレンダリングのテスト 」を参照してください。
note caution CAUTION シミュレーションはダークモードでのメールの表示に非常に近いのですが、メールサービスプロバイダーやデバイスレベルの設定の違いにより、実際のレンダリングは異なる場合があります。
ベストプラクティス best-practices
主要なメールクライアント間でダークモードの採用が増加するにつれて、カスタムダークモードを使用しているかどうかに関係なく、明るい環境と暗い環境の両方でメールがどのようにレンダリングされるかを考慮することが重要になります。
ダークモードでは、色、背景、画像が変更される可能性があり、場合によってはデザインの選択が上書きされることもあります。 ビジュアルの一貫性、アクセシビリティ、ブランドの整合性を確保するには、次のベストプラクティスに従います。
チェックリスト：
- ロゴとアイコンを背景が透明な PNG ファイルとして保存して、ダークモードで白いボックスが表示されないようにします。
- 白色の背景または明るい背景がハードコードされた画像は回避します。
- 透明度がオプションでない場合は、不自然な色の反転を防ぐために、デザインでは単色の背景に画像を配置します。
チェックリスト：
- ライトモードとダークモードの両方で読みやすくするには、テキストと背景色の間に十分なコントラストを確保します。
- 重要なコンテンツについては、背景色にのみ依存することは回避します。一部のクライアントは、ダークモードでは背景色をオーバーライドするので、キー情報が表示されていることを確認します。
チェックリスト：
- 色覚異常のある人物でも簡単に区別できる色の組み合わせを使用します。
- 明るい背景と暗い背景の両方に対してコントラストを確保するのに、ミッドトーンパレットを使用します。
- アクセシブルな色の組み合わせを高コントラストで使用して、読みやすさを向上させ、Web Content Accessibility Guidelines (WCAG) の標準に準拠します。 WebAIM Contrast Checker などのツールを使用して、カラーコントラストを確認します。
- 読みやすさに影響する場合があるので、細いフォントは回避します。ブランドに細いフォントが必要な場合は、ダークモードで太字にします。
- 純粋な黒の上に純粋な白をスキップすると、目の緊張を引き起こす可能性があり、一部のメールクライアントでは自動的に反転する可能性があります。
- ダークモードがサポートされていない場合は、アクセスできるフォールバックスタイル設定を指定します。
チェックリスト：
- 電子メールデザインスペースでは、反転したカラースキームを使用して問題を早期に発見する ダークモードプレビュー を使用します。
- メールをレンダリング オプションを使用して Litmus Enterprise アカウントを使用し、主要なメールクライアント（Apple Mail、Gmail、Outlook など）をまたいでデザインをシミュレーションし、ダークモードでのカラーと画像の動作を確認します。