ダークモードメールデザインのベストプラクティス

このページで学べること

ダークモードについて確認しましょう。ダークモードは、デバイスまたはメールアプリでオンにして、画面表示を暗くできる設定です。この設定は、メールの表示方法に影響します。Klaviyoは、各受信トレイがダークモードをどのように適用するかを直接制御することはできません。

なぜダーク モードを使用するのでしょうか？

ダークモードは、さまざまなメリットがあると考えられているため、人気が高まっています。ユーザーがダークモードを選択する理由：

• 目の疲れを軽減します。
• より健康的な睡眠習慣をサポートします。
• デバイスのバッテリー寿命を延ばします。
• アクセシビリティを改善します。

Litmus によると、ダークモードでメールを閲覧する人数は 2021 年の 28％から 2022 年には 34％に増加しました。

ダークモードとブランディング

ダークモードは、受信ボックスでレンダリングするために使用される HTML を調整することで、メールのブランディングに影響します。これらの調整は、テキストのみのメールで色を反転する程度（HTML メールは変更しない）から、完全にデザインされたメールテンプレート内のすべての色を調整するほど大幅なものまでさまざまです。

メールをデザインする際にダークモードを考慮しないと、テキストが読みづらくなったり、色がブランドのスタイルと合わなくなったりするなどの問題が発生する可能性があります。

SWAK Cosmetics のロゴを検討してください。白い背景では、とても映えます。

ただし、ダークモードのデバイスで表示すると、判読できません。

ライトモードとダークモードで、このメールヘッダーにどのような変更があるかを確認してください。メールの背景色、テキストの色、リンクバーの色がすべて反転しました。

ダークモードを提供するメールアプリとデバイス

ダークモードによる変更の詳細は、メールアプリ、デバイス、オペレーティングシステムによって異なります。Litmusでは、ダークモードに対応しているメールクライアントと、HTMLメールがどのように扱われるかに関するリソースを提供しています。

一般的に、受信トレイは 2 つのカテゴリのいずれかに分類されます。変更が最小限またはまったく行われないものと、メールの色が反転されるものです。

最小限の変更

デスクトップ版のApple Mailなど、一部の受信トレイでは、ダークモードのメタタグを含めない限り、完全にデザインされたHTMLメールの色が変更されないままになります。テキストのみのメールでも、ダークモードでは変更されることがあります。メールのコンテンツが同じままの場合は、受信トレイの周囲のみが色を変更します。

色の反転

Outlook.comなどの他の受信トレイでは、色が部分的に反転されます。つまり、一部の明るい色はより暗い色合いに置き換えられ、一部の暗い色はより明るい色に置き換えられます（例：これまで明るい背景上にあった暗い文字など）。結果として、元のメールよりも明らかに暗いメールになります。

一部の受信トレイでは色が完全に反転され、明るい背景と暗い背景の両方が変わります。たとえば、Windows版Outlook 2021では、暗い背景が明るい背景になることがあります。

緩和策

ライトモードとダークモード向けに最適化しながらブランディングを維持するための戦略はいくつかあります。チームの対応能力とブランディングのニーズに最も合うものを選択してください。

ライト モードとダーク モードを考慮してデザインを作成する

Klaviyo のドラッグ＆ドロップ エディターを使用してメールを送信する場合、この戦略が最適です。ダーク モードのデバイスで生じる変更を考慮しながら、メール テンプレートを作成します。

• Bola の焼き菓子の例のように、明るい背景と暗い背景の両方で見栄えのするロゴや画像を使用してください。
  

• または、透明な背景の暗いロゴに薄い色の影を追加して、ダークモードで目立つようにします。
  

• または、透明な背景を使用するのではなく、背景色を含む画像ファイルを使用します。このオプションを選択する場合は、画像が占めるスペースを完全に埋めていることを確認してください（例：全幅画像の場合は幅 600px）。
  

• 可能な限り、テキストを含む画像ではなくテキストを使用してください。これにより、完全な色反転が可能になります（また、アクセシビリティの面でも優れています）。

カスタム コードのダーク版とライト版

ゼロから HTML メールをカスタムコーディングできる開発チームがある場合は、閲覧者がダークモードかライトモードかを検出して、それに応じてデザインを調整する CSS を用意できます。これにより、一部の受信トレイで特定のダークモードのデフォルト設定を上書きできるため、より多くの制御が可能になります。

メールコード内でダークモードユーザーを具体的にターゲットにするには、@media (prefers-color-scheme: dark) と [data-ogsc] を使用できます。これらのタグをサポートしているメール クライアントと、独自のデザインで使用するコードについて詳しく確認してください。

画像のみのメールは避けてください

さまざまな理由から、画像のみのメールの使用はおすすめしません：

• 代替テキストがないと、メールが受信ボックスに 怪しい と見なされ、迷惑メール フォルダに振り分けられる可能性があります。
• 画像のみのメールは、多くの人やスクリーン リーダーにとって読み取りが難しいため、アクセシビリティのベスト プラクティスではありません。
• ライトモードの見た目を強制するために画像のみのメールを使用することは、購読者の設定を回避する行為です。

多くのブランドが画像のみのメールを使用するのは、画像ファイルによって画像に組み込まれた色やフォントを保持できるためです。ただし、画像のみのメールでも、レイアウト、間隔、周囲の背景にはHTMLが使用されます。受信トレイはダークモードでこれらの周囲の色を変更する可能性があるため、この方法ではメール全体が元のデザインと一致することは保証されません。

ライトモードとダークモードでメールをテストする

送信前に、ロゴ、テキスト、リンクが両方のモードで読みやすいことを確認してください。受信トレイテストは有料のKlaviyoアカウントで利用でき、ユーザーあたり月100回のテストが含まれます。作成した各受信トレイプレビューは、1回のテストとしてカウントされます。

1. ドラッグ&ドロップメールエディタで、プレビューをクリックし、受信トレイテストを選択します。
2. プレビューに使うプロファイルを選択してください。イベントデータを使用するメールの場合は、関連するイベントを選択して、パーソナライズされたコンテンツを確認できるようにします。
3. 受信トレイテストを選択の下でダークモードを展開し、購読者が使用する受信トレイを選択してください。比較のためにライトモードのバージョンを選択し、不要な受信トレイの事前選択を解除してください。
4. テストを実行をクリックしてください。プレビューの準備ができたら、各タイルをクリックして内容を確認してください。
5. [完了]をクリックしてエディターに戻ります。必要に応じてデザインを変更し、その後、新しいテストを実行して更新後のメールを確認してください。

受信トレイテストを使用する方法について詳しくはこちらをご覧ください。また、アクセス可能な受信トレイにテストメールを送信し、ライトモードとダークモードで比較することもできます。

その他のリソース