HTMLメールをダークモード対応にする方法 ― 知っておくべきすべてのこと

iOS 13のアップデートにより、Apple Mailにダークテーマが搭載されました。これによりApple Mailは、prefers-color-schemeというCSSメディアクエリをサポートした初の主要メールクライアントとなります。つまり、ダークテーマとライトテーマの両方に最適化されたメールデザインが可能になったのです。

私は大のダークモード好きで、まぶしいほど明るいメールは大の苦手です。iOS 13でダークモードが登場すると知り、真っ先にやったのは新しいiPhoneを注文して実際に試してみることでした。

せっかくなので、問題児のOutlookを含むほぼすべてのメールクライアントでダークモードの挙動もテストしました。以下がその結果です。

まずは基本：prefers-color-schemeとは？

prefers-color-schemeは、ユーザーがライトテーマとダークテーマのどちらを好んでいるかを検出するためのCSSメディアクエリです。これを活用すれば、両方のテーマに合わせたメールデザインを作れます。

iOS 13のアップデートにより、人気メールクライアント全体でのサポート率は2.3%から38.4%へと一気に跳ね上がりました！これはApple Mailの圧倒的なシェアによるものです。意外なことに、Apple Mail以前にこの機能をサポートしていたのはOutlookだけでした。

人気メールクライアントにおけるダークモードの挙動

メール自体を暗く表示するために、メールクライアントは裏側で自動的にメールの色を反転させています。通常の個人間メールであれば、どのクライアントでも安定してうまく機能します。

しかし、カスタムHTMLメール――つまり受信箱の大部分を占めるトランザクションメールやプロモーションメール――となると話はそう単純ではありません。

各メールクライアントのダークモードでのレンダリング処理には、以下のような違いがありました。

* シェア率はプラットフォーム間で正確に区別できないため、同一メールクライアント内で共通の数値としています。出典：Litmus「2019年メールクライアント市場シェア」。

（テスト時の詳細なメモや、今後追加されるメールクライアントの最新テスト結果については、元記事をご覧ください。）

HTMLメールをダークモード対応にする方法

私はすでにこのデータを実務に活かし、Outlook関連のいくつかの課題を乗り越えながら、自社のメールをダークモード対応にしました。同じように対応するための手順を紹介します。

データが示すもの：
開かれるメールの55%以上が、ダークモード有効の環境である可能性があります。Gmailがダークモードに対応すれば、その数字は83%にまで急上昇します！

1) 配色の調整

特に注意が必要なのはApple Mailです。背景色が透明または未指定の場合にのみ色を反転し、白背景のままでは反転してくれません。メールで誰の目も眩ませないための最も簡単な方法は、背景色がきちんと指定されているかを確認することです。さらに細かくデザインをコントロールしたい場合は、ここでprefers-color-schemeが威力を発揮します。

記述例（@media prefers-color-scheme）：

<style>
	/* ライトモード（デフォルト）のスタイル */
	body {
		background: white;
		color: #393939;
	}

	@media (prefers-color-scheme: dark) {
		/* ダークモードのスタイル */

		body {
			background: black;
			color: #ccc;
		}
	}
</style>

デザインのヒント：文字色に純白の#fffは避けましょう。本文テキストのコントラスト比は11.5前後が「明るすぎず暗すぎない」絶妙なバランスだと感じています。コントラスト比は https://contrast-ratio.com やChrome DevToolsで確認できます。

2) ライト用・ダーク用ロゴの切り替え

暗い背景に暗い文字はほぼ見えません。ダークモード有効のメールクライアントでロゴを表示すると、まさにこの現象が起こります。

昨今のロゴは、透明背景・カラフルなアイコン・暗い文字という構成が一般的です。問題の所在が分かりますか？メールクライアントは画像の色を反転しないため、自分で対策する必要があるのです。

対策としては、次の選択肢があります。

1. ロゴを透明背景ではなく白背景で保存する（最も手軽な解決策）。ただしこの方法はおすすめしません――ダークモードユーザーは喜ばないでしょう。
2. 明るいロゴを暗い背景に載せ、メールの残りの部分は白背景のままにする（Litmusの採用している手法）。
3. ダークモードのメールをデフォルトにする。アプリでダークテーマしか提供していないSpotifyなどが好例です。
4. ライト版とダーク版の両方のロゴを用意し、prefers-color-schemeメディアクエリで切り替える。

私のお気に入りは最後の方法です。実装手順は以下の通りです。

ダークロゴに単純な"display: none"を指定するだけで、最新のメールクライアントでは問題なく動作します。ところが驚くことに、OutlookとWindows 10メールでは機能しません。

CSSの記述：

<style>
	@media (prefers-color-scheme: dark) {
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

そしてHTMLの構造：

<image src="dark-logo.png" class="darkLogo" />

<!--
	OutlookとWindows 10メールでライトロゴを完全に非表示にするには、
	ライトロゴのimgタグをdivで囲む必要があります。
-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

この方法はかなりうまく機能しますが、それでもすべての環境で完璧に動作するわけではありません。ダークモードをサポートしつつprefers-color-schemeをサポートしないメールクライアントでは、暗い背景に暗い文字という問題が発生します。該当するのはOutlook、Windows 10メール、Zoho、そしておそらくGmailです。

そこで、ロゴを完全に堅牢にするために、上述の方法1と4を組み合わせます。方法1は、ダークモードをサポートするがprefers-color-schemeをサポートしないすべてのメールクライアントをカバーし、方法4は、両方をサポートするApple Mail、macOS版Outlook、Outlook.comをカバーします。

さらに、ロゴを白背景で保存する代わりに、背景色と同色の幅3ピクセルのボーダーを追加し、従来どおり透明背景で保存します。

（ロゴのためだけに）だいぶ複雑になってきましたね。まずはHTMLマークアップから見てみましょう。

<!-- デフォルトのロゴ（背景色と同色の3pxボーダー付き） -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />

<!-- ライトテーマ用（ダークロゴ）：
Apple Mail、macOS版Outlook、Outlook.com向け -->
<div class="darkLogoWrapper" style="mso-hide: all; display: none">
	<image src="dark-logo.png" class="darkLogo" style="display: none" />
</div>

<!-- ダークテーマ用（ライトロゴ）：
Apple Mail、macOS版Outlook、Outlook.com向け -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

そしてCSSのスタイル：

<style>
	@media (prefers-color-scheme: light) {
		.darkLogoDefault,
		.lightLogo {
			display: none !important;
		}

		.darkLogoWrapper,
		.darkLogo {
			display: block !important;
		}
	}

	@media (prefers-color-scheme: dark) {
		.darkLogoDefault,
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

Gmailにもダークモードがやってくる

Android 10の登場によりダークモードが標準搭載され、Gmailもついに完全にダークになるはずです。必要なのはAndroid 10と最新版のGmail（バージョン2019.09.01.268168002以降）だけです。ただしGoogleは新機能（今回はダークテーマ）をサーバーサイドのプッシュで段階的に有効化する傾向があり、執筆時点では私の環境ではまだ有効になっていませんでした。

Gmailが@media prefers-color-schemeをサポートするのかどうかも気になるところです。各所の情報を見る限り、あまり有望ではなさそうです。結論を待つしかなさそうです。Gmailでダークテーマが有効になり次第、本記事を更新します。

まとめ

HTMLメールにもダークモードの時代が到来しました。個人的には大歓迎です！とはいえ、レイアウトにHTMLテーブルを使わなければならない苦労に加えて、また新たな懸念事項が増えたのも事実です。

メールのダークモードに関する最新情報は、メーリングリストへの登録でお受け取りいただけます。SaaS製品Sidemailの開発・成長の過程で得た知見や直面した課題も、そこで随時共有しています。

最後までお読みいただきありがとうございました！