コミュニケーションデザイングループの山口です。

最近のスマートフォンやPCには「黒」を基調とした画面になる「ダークモード」というのがあります（眩しくないので、目に優しいらしいです）。 この設定をすると、ウェブサイトだけでなく、メールアプリも黒ベースに変更になります。そうすると、今まで白を背景としてキレイに見えていた（HTML）メールも、作り方や環境によっては、白黒と混ざり合って読みづらくなってしまうことになります。

あくまでも、ユーザーが選んで設定しているので、その設定をすべて覆すようなことはもちろんできません。ただ、その設定においてもメールを読みやすくすることは可能です。

ダークモードの種類として、
① 部分的な色反転
② フルカラー反転
③ 色の変化なし
という3種類のパターンがあります。このうち「①部分的な色反転」と「②フルカラー反転」の特徴をまず説明します。

① 部分的な色反転

明るい背景のある領域を検出し、反転させて明るい背景を暗く、暗いテキストを明るくします。すでに暗い背景を持つ領域はそのままです。この方法を使用するメールクライアントは、メディアクエリによるダークモードターゲティングをサポートしているため、クライアントのデフォルトのダークテーマに対しても上書きできます。

② フルカラー反転

背景が明るい領域を反転するだけでなく、背景が暗い場合にも影響します（暗いテーマを使用するように設計している場合には、逆に明るくするように強制します）。このスキームは、メールを最も根本的に変えるだけでなく、このスキームを使用するメールクライアントは、現時点ではメディアクエリによるダークモードターゲティングを許可していません。

HTMLメールをダークモードに対応させるダークモードターゲティングの方法

【POINT 1】 ダークモードのユーザーにstyleを効かせる

@mediaでダークモードでの表示された場合のスタイルを設定します（prefers-color-scheme:dark）
[data-ogsc]または[data-ogsb]を設定します（Outlook環境のみ-ウェブメールとiOSアプリ-）

【POINT 2】 画像や文字の変更

ロゴ画像と文字を白抜き版に変更します。

枠線をつける、またはダークモードをターゲットにして画像を入れ替えます。

ダークモードになった時の画像の区切りを考慮して、余白を設けたり、逆に透明にしたりします。

あとはダークモードになった時の視認性を確認しながら調整していきます。

対応メールクライアント一覧

メールクライアント ダークモードでのHTMLの扱い @media [data-ogsc]または[data-ogsb]
Gmailアプリ（Android） ①部分的な色反転 × ×
Gmailアプリ（iOS） ②フルカラー反転 × ×
Outlook（Android） ①部分的な色反転 × ○
Outlook（iOS） ①部分的な色反転 ○ ×
iOS Mail ③色の変化なし ○ ×
Apple Mail(Mac OS) ③色の変化なし ○ ×
Outlook 2019（MacOS） ①部分的な色反転 ○ ×
Outlook 2019（Windows） ②フルカラー反転 × ○
Outlook.com ①部分的な色反転 ○ △（部分的）
  • ＠mediaが効くのは、Mac OS MailとMac OS 365、iOSメール。ただし、＠mediaでつけても、 Mac OS MailとMac OS 365 のBGは効かない。効くのは画像変更とテキストカラー。iOSメールは ＠mediaはBGに対しても効くが、BG設定が既に入っていれば、それがそのまま効くのであえて＠mediaでBGをダークに。
  • 完全に＠mediaでコントロールできるのはiOSメールのみ

まとめ

ダークモードの最大の利点の1つは、暗い場所でのユーザーやその他の個人的な理由で、目の疲れを軽減できることです。ユーザーがダークモードでメールを表示するという意識的な決定を行っている場合は、それをメールでも尊重することをお勧めします。ユーザーがデフォルトで画像をオフにしたい場合に備えてALTテキストを追加するのと同じように、暗いインターフェースも尊重するメールを作成する必要があります。

参照サイト

コミュニケーションデザイングループ
山口寿和