ダークモード設定時のHTMLメールについて

社員ブログ

2022.01.31

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

最近のスマートフォンや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テキストを追加するのと同じように、暗いインターフェースも尊重するメールを作成する必要があります。