ダークモードコンテンツの管理 dark-mode

メールをデザインする際に、Journey Optimizer E メールデザイナーを使用すると、ダークモード​ビューに切り替えることができます。

このダークモードビューでは、ダークモードがオンの場合にサポートしているメールクライアントに表示される特定のカスタム設定を定義することもできます。

ダークモードとは what-is-dark-mode

様々なメールクライアントでダークモードがレンダリングされる方法は複雑です。まず、ダークモードを定義します。

ダークモードを使用すると、サポートしているメールクライアントとアプリで、メールの背景を暗くし、テキスト、ボタン、他の UI 要素を明るい色で表示できます。目への負担を軽減し、バッテリー寿命を短縮し、低照度環境での読みやすさを向上させて、より快適な視聴エクスペリエンスを実現します。

これは、主要なオペレーティングシステムとアプリ全体で高まるトレンドとして、すべてのユーザーにとってコンテンツが読みやすく視覚的に魅力的であることを確保するために、最新のメールデザインでは重要な考慮事項になっています。

ガードレール guardrails

ダークモードのレンダリングに関する期待は、様々なメールクライアントによって適用方法が大きく異なる可能性があるので、慎重に考慮する必要があります。

Journey Optimizer E メールデザイナーでダークモードを使用する前に、メインのメールクライアントでの処理方法を理解することが重要です。区別するケースには、次の 3 つがあります。

ダークモードをサポートしていないクライアント not-supporting

次のような一部のメールクライアントでは、この機能をまったくサポートしていません。

E メールデザイナーでダークモードのカスタム設定を定義したかどうかに関係なく、これらのメールクライアントではダークモードのレンダリングを表示しません。

独自のダークモードを適用しているクライアント default-support

一部のメールクライアントでは、受信したすべてのメールに対して、独自のデフォルトのダークモードが体系的に適用されます。色、背景、画像などはメールクライアント固有のダークモード設定で自動的に調整されるので、外部からの変更はできません。

これらのクライアントの例：

この場合、E メールデザイナーでカスタムダークモード設定を定義すると、これらの設定はメールクライアントの設定で上書きされます。

これらのメールクライアントはダークモードを処理しますが、特定のダークモードデザインはレンダリングされないことを理解することが重要です。

カスタムダークモードをサポートしているクライアント custom-support

他のメールクライアントには、@media (prefers-color-scheme: dark) クエリを使用してカスタムダークモードをレンダリングするオプションが用意されています。これは、Journey Optimizer E メールデザイナーで使用される方法です。

このオプションを処理する主なクライアントのリストを以下に示します。

この場合、E メールデザイナーで定義した特定の設定が表示されます。

ただし、メールクライアントごとに制限が一部適用される場合があります。例えば、Apple メール 16（macOS 13）などの一部のクライアントでは、メールのコンテンツに画像が存在している場合、ダークモードは生成されません。

最適な結果を得るには、ターゲットにしているメールクライアントでコンテンツをテストします。各クライアントの最終結果にできるだけ近いシミュレーションを表示するには、E メールデザイナーで「メールレンダリング」オプションを使用します。

E メールデザイナーでのダークモード dark-mode-email-designer

E メールデザイナーでのダークモードに関しては、考慮すべき 2 つの側面があります。

デフォルトのダークモードのプレビュー preview-dark-mode

E メールデザイナーでダークモードにアクセスし、デフォルトのダークモード設定のプレビューを取得するには、次の手順に従います。

デフォルトでは、E メールデザイナーのダークモードのプレビューには、画像とアイコンを除くすべての要素に「フルカラー反転」カラースキームが適用されます。

つまり、明るい要素と暗い要素の領域を検出して反転させることで、明るい背景は暗く、暗いテキストは明るくなり、暗い背景は明るく、明るいテキストは暗くなります。

カスタムダークモードの定義 define-custom-dark-mode

ダークモード​に切り替えたら、受信者のメールクライアントでダークモードが有効になっている場合にのみ表示されるコンテンツの特定のスタイル要素の編集を選択できます（その機能がサポートされている場合）。

E メールデザイナーのカスタムダークモードのスタイル設定を活用するには、Journey Optimizer では @media (prefers-color-scheme: dark) CSS クエリを使用します。このクエリでは、ユーザーのメールクライアントがダークモードに設定されているかどうかを検出し、メールで定義したダークテーマのデザインが適用されます。

カスタムダークモードの設定を定義するには、次の手順に従います。

ベストプラクティス best-practices

主要なメールクライアント間でダークモードの採用が増加するにつれて、カスタムダークモードを使用しているかどうかに関係なく、明るい環境と暗い環境の両方でメールがどのようにレンダリングされるかを考慮することが重要になります。

ダークモードでは、色、背景、画像が変更される可能性があり、場合によってはデザインの選択が上書きされることもあります。 視覚的な一貫性、アクセシビリティ、ブランドの整合性を確保するには、次に示すベストプラクティスに従ってください。

画像とロゴの最適化

背景に対する注意

ダークモードでのアクセス可能なコンテンツのデザイン

ダークモード環境でのメールのテスト