[ベータ版]{class="badge informative"}

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

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

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

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

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

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

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

ガードレール guardrails

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

Journey Optimizer Email Designerでダークモードを使用する前に、メインのメールクライアントでの処理方法を理解することが重要です。 区別すべきケースは次の 3 つです。

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

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

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

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

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

次に例を示します。

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

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

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

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

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

この場合、メールDesignerで定義した具体的な設定が表示されます。

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

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

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

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

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

画像とロゴの最適化

背景に対する注意

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

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