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

このページで学べること

ダークモードについてご確認ください。これは、一部のユーザーがディスプレイを暗くするためにオンにするデバイス設定です。この設定は、メールの表示方法に影響します。ダークモードはデバイスレベルで選択されるエンドユーザー設定であり、Klaviyo では、各デバイスでダークモードがどのように実装されるかを直接制御できません。

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

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

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

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

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

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

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

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

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

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

ダーク モードを提供するデバイスとオペレーティング システム

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

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

最小限の変更

デスクトップ版 Apple Mail などの一部の受信トレイでは、（ダークモードのメタタグを含めない限り）メールコンテンツが直接変更されません。この受信トレイで、ダークモードとライトモードのメッセージ間で表示上の違いとして確認できるのは、送信者情報の背後にある色のみです。

色の反転

デスクトップの Outlook など、他の受信トレイでは色が部分的に反転されます。つまり、一部の明るい色が暗い色調に置き換えられ、一部の暗い色が明るい色に置き換えられます（例：以前は明るい背景にあった暗い文字）。その結果、元のものより明らかに暗いメールになります。

緩和策

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

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

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

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

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

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

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

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

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

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

画像のみのメールを使用する

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

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

ただし、多くのブランドがこの戦略を使用しているため、ここで言及しておく価値があります。画像のみのメールでは、色、フォント、間隔などに HTML を使用しません。つまり反転できないため、受信トレイには通常、元のデザインに概ね沿ったメールが表示されます。

その他のリソース