メールコンテンツのダークモード dark-mode
ダークモードを使用すると、サポートメールクライアントまたはアプリで、テキスト、ボタン、その他のビジュアル要素の背景が暗く、色が明るいメールを表示できます。 このタイプのディスプレイは、目の疲れを軽減し、バッテリー寿命を節約し、低光量環境での読みやすさを向上させ、より快適な視聴体験を実現します。 主要なオペレーティングシステムやアプリでトレンドが高まる中、あらゆるユーザーに読みやすく視覚的に魅力的なコンテンツを提供することが、今日のメール設計における重要な検討事項となっています。
ビジュアルデザイン空間でJourney Optimizer B2B Edition電子メールコンテンツ 🔗を作成すると、 ダークモード 表示に切り替えることができます。 このビューでは、ダークモードが有効になっているメールクライアントをサポートするための特定のカスタム設定を定義することもできます。
メールクライアントの考慮事項
メールクライアントやアプリによって、ダークモードの適用方法には大きな違いがあります。 このため、ダークモードのレンダリングに対する期待は、慎重に考慮する必要があります。 メールデザイン分野でダークモードを使用する前に、次のメールクライアントのユースケースを検討してください。
次のような一部のメールクライアントでは、この機能をまったくサポートしていません。
- Yahoo! Mail
- AOL
電子メールデザインでダークモードのカスタム設定を定義した場合、これらの電子メールクライアントはダークモードのレンダリングを表示できません。
一部のメールクライアントでは、受信したすべてのメールに対して、独自のデフォルトのダークモードを体系的に適用しています。 ダークモードの設定や外部設定に応じて、色、背景、画像などの要素を自動的に調整します。 顧客は次の通りです。
- Gmail （デスクトップ web メール、iOS、Android™、モバイルウェブメール）
- Windows 版 Outlook
- Outlook Windows メール
In this case, the client dark mode settings override the custom dark mode settings that you define in Journey Optimizer B2B Edition
Many of the most popular email clients offer the option to render custom dark mode with the @media (prefers-color-scheme: dark) query, which is the method used by the Journey Optimizer B2B Edition email styles. This list of clients includes:
- Apple メール macOS
- Apple メール iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
In this case, the specific settings you define in the Journey Optimizer B2B Edition are rendered. However, some restrictions could apply according to each email client. For example, some clients (such as Apple Mail 16 (macOS 13)) do not generate dark mode if images are present in the email content.
For optimal results, test your content with the email clients that you are targeting. To see a simulation that comes as close as possible to the final result for each client, use the Litmus email test rendering integration in the email design space.
Design for dark mode
As you style your email content for dark mode in Journey Optimizer B2B Edition, the visual design space provides two types of tools:
-
Use the preview function to review the default dark mode rendering for most supporting email clients.
-
If you want to override the default settings of supporting email clients, define and apply custom dark mode settings to your email content. 詳細情報
デフォルトのダークモードのプレビュー preview-dark-mode
-
Open the email content in the email design space.
At the top right of the canvas, there is a light-dark selector that toggles the content display between light (default) and dark mode.
-
Change the selector to Dark mode (
The canvas displays the content using the default dark mode preview.x
By default, the dark mode preview applies the
full color invertcolor scheme to all elements except images and icons. This color scheme detects areas with light and dark elements and inverts them. Light backgrounds become dark and dark text becomes light, or dark backgrounds become light and light text becomes dark.
ダークモードのカスタム設定の定義 custom-dark-mode
After switching to dark mode, you can choose to edit specific styling elements of your content that are displayed only when dark mode is enabled in the recipient's email client (provided it supports that feature).
The custom dark mode styling in the email design space uses the @media (prefers-color-scheme: dark) CSS query, which detects if the email client is set to dark mode and applies the dark-themed design that is defined in your email.
To define custom dark mode settings :
-
If needed, move the selector to Dark mode (
-
Edit any styling color attributes, such as text, backgrounds, or buttons.
-
For the images and icons, define specific assets for dark mode only.
You cannot change the colors of images and icons, but you can define alternative assets to be used for dark mode. You can experiment with different color combinations for your icons or make adjustments for color and saturation for photographic images.
Select any image and switch to Dark mode using the dedicated toggle in the Settings pane. Then, select a different image asset.
See Add image assets for more information about selecting an image asset.
-
At any point during your design changes, select Switch to live view to check how your content might render on various device sizes.
From this view, change the selector to Dark mode (
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など）でデザインをシミュレートし、ダークモードでカラーや画像がどのように動作するかを確認します。