メールコンテンツのダークモード dark-mode
ダークモードを使用すると、サポートメールクライアントまたはアプリで、テキスト、ボタン、その他のビジュアル要素の背景が暗く、色が明るいメールを表示できます。 このタイプのディスプレイは、目の疲れを軽減し、バッテリー寿命を節約し、低光量環境での読みやすさを向上させ、より快適な視聴体験を実現します。 主要なオペレーティングシステムやアプリでトレンドが高まる中、あらゆるユーザーに読みやすく視覚的に魅力的なコンテンツを提供することが、今日のメール設計における重要な検討事項となっています。
Journey Optimizer B2B Edition ビジュアルデザイン空間で電子メールコンテンツ を作成すると、 ダークモード 表示に切り替えることができます。 このビューでは、ダークモードが有効になっているメールクライアントをサポートするための特定のカスタム設定を定義することもできます。
メールクライアントの考慮事項 email-client-considerations
メールクライアントやアプリによって、ダークモードの適用方法には大きな違いがあります。 このため、ダークモードのレンダリングに対する期待は、慎重に考慮する必要があります。 メールデザイン分野でダークモードを使用する前に、次のメールクライアントのユースケースを検討してください。
次のような一部のメールクライアントでは、この機能をまったくサポートしていません。
- Yahoo! Mail
- AOL
電子メールデザインでダークモードのカスタム設定を定義した場合、これらの電子メールクライアントはダークモードのレンダリングを表示できません。
一部のメールクライアントでは、受信したすべてのメールに対して、独自のデフォルトのダークモードを体系的に適用しています。 ダークモードの設定や外部設定に応じて、色、背景、画像などの要素を自動的に調整します。 顧客は次の通りです。
- Gmail （デスクトップ web メール、iOS、Android™、モバイルウェブメール）
- 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
-
電子メールデザイン画面で電子メールコンテンツを開きます。
キャンバスの右上には、明るい（デフォルト）と暗いモードの間でコンテンツ表示を切り替える明るい暗いセレクターがあります。
-
セレクターを ダークモード に変更します（
キャンバスには、デフォルトのダークモードのプレビューを使用してコンテンツが表示されます。
デフォルトでは、ダークモードのプレビューでは、画像とアイコンを除くすべての要素に
full color invertの配色が適用されます。 この配色は、明るい要素と暗い要素を持つ領域を検出し、それらを反転させます。 明るい背景が暗くなり、暗いテキストが明るくなり、暗い背景が明るくなり、明るいテキストが暗くなります。
カスタムダークモード設定の定義 custom-dark-mode
ダークモードに切り替えた後、受信者のメールクライアントでダークモードが有効になっている場合にのみ表示されるコンテンツの特定のスタイル要素を編集できます（この機能をサポートしている場合）。
メール デザイン スペースのカスタム ダークモードのスタイル設定では、を使用します @media (prefers-color-scheme: dark) CSS クエリ。メールクライアントがダークモードに設定されているかどうかを検出し、メールで定義されているダークテーマのデザインを適用します。
ダークモードのカスタム設定を定義するには:
-
必要に応じて、デザインキャンバスの右上にあるダークモード （
-
テキスト、背景、ボタンなど、スタイル設定カラー属性を編集できます。
色とフォントのオプションを表示する
-
画像とアイコンの場合は、ダークモード専用の特定のアセットを定義します。
画像やアイコンの色は変更できませんが、ダークモードで使用する代替アセットを定義できます。 アイコンの様々な色の組み合わせを試したり、写真画像の色と彩度を調整したりできます。
異なる色の組み合わせを持つ
任意の画像を選択し、設定 ペインの専用トグルを使用して ダークモード に切り替えます。 次に、別の画像アセットを選択します。
画像アセットの選択について詳しくは、画像アセットの追加を参照してください。
-
デザインの変更中の任意の時点で、ライブビューに切り替えを選択して、様々なデバイスサイズでコンテンツがどのようにレンダリングされるかを確認します。
このビューから、セレクターをダークモード （
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など）でデザインをシミュレートし、ダークモードでカラーと画像がどのように動作するかを確認します。