はじめに

昨今はスマートフォンやデジタルデバイスの普及によって、ユーザーは場所を問わずメールを確認できるようになりました。特に、コロナ禍でリモートワークが普及したことに伴い、仕事用のメールを外出先や自宅で時間帯を問わずにチェックする機会は、ますます増えています。 

ユーザーが夜間に暗い環境下でメールを開く場合に懸念されるのが、ディスプレイから発せられる強い光が気になり、不快感を覚えることです。 

ディスプレイ画面を夜間に対応させる「ダークモード」は、このようなストレスを解消するための有用な機能となります。   

以前に同ブログ内で配信した「マーケティングオートメーション(MA)の活用で知っておきたいメルマガ配信における重要指標」でも述べましたが、メールマーケティングにおいては、作成者側だけではなく、読み手側の様々な受信環境まで考慮したメールを作成することが重要です。 

特にBtoBのビジネスにおいては、Outlookが比較的ポピュラーなメールクライアントになりますが、OutlookはHTMLメールのレンダリングが特殊なことで知られています。  

MAなどのシステム側のエディタでは問題がないように見えても、実際にOutlook宛に配信すると盛大にレイアウトが崩れているといったことが頻発するため、自身の環境だけではユーザーに配信したメールがどう見えているかは推し量れません。  

今回読み手側の環境を踏まえたメール配信というテーマにおいて筆者が調査した範囲では、日本においては「ダークモードがマーケティングにどの程度のインパクトを与えるのか」についての認識が浸透していないように思われます。

そこで、本稿ではメールマーケティングにおいて「ダークモードの実装がなぜ重要なのか？」について解説します。 

 

そもそもダークモードとは？ 

ダークモードとは、文字通りディスプレイ画面全体を暗い色調にして夜間対応させる機能です。ユーザーが標準セッティングで使用している「ライトモード」の対義語で、ダークモードはユーザーインターフェース上の表示色をライトモードの「寒色系」から「暖色系」に反転させるモードとなります。 

以下は弊社で使用しているHTMLメールのライトモードとダークモード時の画像となります。

ダークモードはOSのシステム単位で設定することもあれば、システムに関係なくアプリケーション単位で設定するケースもあります。  

私たちが日常的に使用するTwitterなどのSNSアプリ、Slackなどのコミュニケーションアプリにもダークモードは実装されていて、昨今のトレンドとしてダークモード実装の動きは加速しています。  

ダークモードを活用するメリットとしては、表示色が暖色系になるため、デバイスからの光量が減り、目への負担が軽減されることが挙げられます。例えば、夜間になると家の明かりを間接照明に切り替えるのと同様、ダークモードではデバイスからの光の質も切り替えられます。 

日常生活においては、ダークモードに対して「目に優しいデバイス設定」以上の認識は必要ありません。しかし、ビジネスのマーケティングという観点に立った場合、ダークモードはより重要な意味を持ちます。 

 

なぜダークモードがマーケティングにおいて重要なのか？ 

前述の利点も踏まえ、メールマーケティングでダークモードを実装するメリットは以下のようなものが考えられ、これにより顧客体験の向上が期待できます。 

• デバイスからの光量が減ることで目への負担が軽減される 
• 有機ELディスプレイの場合は、デバイスのバッテリーの持ち時間が向上する 
• コンテンツ上に写真や動画を貼り付けている場合、背景とのコントラストがあがるため鮮明に見えるようになる 
• テキストが見えやすくなり、コンテンツの可読性が向上する 

ダークモードのメールマーケティングでの有効性は海外では認知が進んでおり、Pathwire社のダークモードに関する調査では「44%のマーケターが、Eメール作成においてダークモードを使用している」と述べられています。 

加えて「未対応ではあるが実装のプランはある」と回答した層まで含めると、実に72%のマーケターがダークモードに注目しているとのことです。 

上記の利点とトレンドを踏まえ、ユーザーの顧客体験を考えたときに、マーケティング用途で配信するメールをダークモード用に最適化する意義を考えてみましょう。

ここではダークモードの設定を有効にしており、ダークモードのUIを好む受信者を想定します。
前述した夜間にメールを読んでいるタイミングで、ダークモードに最適化されていない（ライトモード）でEメールを受信したら、読者がどう思うかは想像に難くないはずです。 

この場合、読者はコンテンツを読む集中力を維持できず、最悪のケースではコンテンツの途中で離脱してしまいかねません。 

昨今はユーザー側の嗜好性が多様化し、ダークモードを好むユーザーも増えてきているため、受信者視点での配慮が足りなければ自社のマーケティング活動の機会損失を招いてしまうでしょう。 

ダークモード利用の注意点 

各OSやメールクライアントにおいてダークモードへの対応は進みつつあり、2021年現在の主要なクライアントの対応状況は以下の通りです。 

ここで注目すべき要素は、各クライアントによってダークモードにおける色の反転のロジックが異なる点です。色転換の方法は、以下3パターンに分類されます。 

• 色転換なし (No change)
• 一部色転換あり (Partial invert) 
• すべて色転換 (Full invert) 

それぞれのケースでの色変換イメージは以下の通りです。 

このように、ダークモードはクライアントごとに色変換のロジックが異なるため、配信側の意図しないイメージ変換が起こる可能性に留意しなければなりません。 

以下より、「ダークモード対応の失敗例」の具体的なユースケースをいくつか紹介します。テクニカルな内容となるため、現在メール開発に従事している方・ご興味のある方向けの内容となります。 

ダークモード対応の失敗例①：ロゴ画像

HTMLメールのヘッダー部分には会社のロゴ画像を設置するのが一般的ですが、以下のようにロゴ画像周辺までダークモード最適化がされていないケースがたびたび発生します。 

上記はライトモードで使用しているロゴ画像がjpeg画像になっており、背景透過処理がされていないことが原因で起こります。

ライトモード時にバックグラウンドの色が白で同化している場合は問題になりませんが、ダークモードで背景が暗くなるとロゴ背景の白色がそのまま表れるため、UIを大きく毀損してしまいます。 

この問題はロゴをダークモード用に用意し、png画像で表示させると解決できます。ダークモードでは背景が暗くなるため、ロゴの文字が白抜きのダークモード用の画像を用意し、png画像として表示させることで違和感なく同化させることが可能です。 

ダークモード用のロゴ画像は、通常時はCSSでdisplay: noneで表示させないようにしておき、メディアクエリの@media (prefers-color-scheme: dark)下で表示するように設定しましょう。 

一方で、Outlookの場合は、メディアクエリを読み込まない仕様となっているため、追加での措置が必要となります。
オリジナルのロゴがpng画像かつ文字が原色系の場合はあまり問題になりませんが、黒色文字ロゴの場合のベストプラクティス(参照：The Ultimate Guide to Dark Mode for Email Marketers)としては文字周りに半透明の白いアウトラインを付けることです。

Outlookへの配信が多いと見込まれる場合は、こちらにも気を付けましょう。

また、フッターにSNSのアイコンを設置している場合も、ロゴ画像と同様の問題が発生する可能性があります。この場合は、アイコンと画像の輪郭の内側にきちんと背景透過処理を施すか、グレーベースの画像などダークモード時でも目立たないアイコン画像を使用します。 

ダークモード対応の失敗例②：意図せぬ色変換によるUIの毀損

「CTAなどで背景色をハイライトし、その上にテキストを乗せている」「background-image上にテキストを配置している」などのケースでは、うまく色変換が働かなくなるケースが発生します。 

こちらは大変面白い事例ですが、ライトモード時（左側）では可愛いラマが表示されていますが、ダークモードに変換されるとまったく違う生物に見えてしまっていることが確認できます。

また、こちらは主にGmailで確認されるbackground-image上のテキストの変換エラーです。
一番左側が意図しているUIとなりますが、中央（Gmail_iPhone）はBackground-imageが取り除かれてしまっており、右側（Gmail_Android）に関してはテキストに黒→白の色転換が働いてしまっており、完全にテキストが潰れています。

以上、ダークモードがもたらす悲劇についてご確認いただきましたが、自身のクライアントの表示だけを見て判断することは大変危険で、水面下で破滅的なUIとなっている可能性があります。

多数のメールクライアントに対しての配信を想定する場合は、メディアクエリに@media (prefers-color-scheme: dark)のセクションを実装し、CSSでダークモード時のスタイルを具体的に定義しましょう。 

最後に 

ダークモードに最適化されたEメールが完成したら、メール配信の前に必ず各メールクライアントでのレイアウトをチェックしましょう。マーケットワンではHTMLメールの開発にEmail on Acidというサービスを使用していますが、こちらでダークモードに対応するメールクライアントの表示確認も同時に行っています。 

筆者も仕事の性質上、システムやメールクライアントをダークモード表示に頻繁に切り替えますが、ダークモード最適化ができていないため、メールの見栄えが悪くなってしまっているケースが散見されます。 

ダークモードの実装は、日常的な業務の中では意識が向きづらいため、多くの企業内のマーケティング施策において決して優先的には取り組まれていないのが現実です。 

しかし、ダークモードはマーケティング活動で顧客のエンゲージメントを高めるために非常に重要な機能となるため、今後のメールマーケティング戦略に積極的に活用することをお勧めします。