メールマーケティングにおけるダークモード対応について徹底解説！メーラーでの見え方やダークモードでも読みやすいメールの作り方を紹介

ダークモードとは、OSやアプリのユーザーインタフェースを暗色デザインに切り替えられる機能のことです。スマホやPCなどでダークモードを適用している方もいるのではないでしょうか。メールソフトにも採用され始めており、メーラーによってはメールの配色をダークモードに合わせて調整されてしまうことも！

そこで今回は、メールマーケティングにおいて知っておくべきダークモードの現状と対応方法についてご紹介します！

>>メールマーケティングの最新情報をお届け！ メルラボ / 配配メールのメルマガに登録する

ダークモードとは

ダークモードとは、OSやアプリのUIを暗色系に切り替える機能のことです。

2019年9月にリリースされたiOS13で登場して以来、様々なデバイス、アプリで採用され始めています。デバイスによっては、「ナイトモード」「ハイコントラスト」と称されていることもあります。

▼ライトモード（通常）

▼ダークモード

メールにおけるダークモードの利用率

ダークモードの設定は、メールアプリやメーラーでも対応できるようになってきましたが、一体どれくらいのユーザーが利用しているのでしょうか？

2020年に海外で行われた「携帯電話でダークモードを利用しているかどうか」のアンケート調査では、なんと8割以上の回答者が「ダークモードを利用している」と回答していました。「携帯電話において」ではあるものの、多くの人がダークモードを利用していることが分かりました。

アンケート調査かつ携帯電話における利用率ではあるものの、圧倒的に利用している方が多いということがわかります。

では、国内ではどうでしょうか？

弊社で「メーラーやメールアプリでダークモードを利用しているか」を調査したところ、なんと結果は、「ダークモードを利用している」と回答した人は2割程度にとどまりました。

海外に比べると、ダークモードを利用している人の割合は非常に少ないという結果でした。iPhoneでは、設定自体をダークモードにしているとiOS標準のメールアプリでは、ダークモードが適用されます。そういう場合もありますので、あくまでも参考程度にご認識いただければと思います！

ダークモードでのメールの見え方

ダークモードを適用している場合、基本的にはメール本文も色が反転するようになっています。ですが、どのように反転するか、本文だけは反転しないなどの見え方はメーラーによって異なります。

見え方にはいくつか種類があるので、ご紹介します。

完全反転

完全反転は、画像以外の部分がすべての色が反転します。

明るい配色の部分は暗い配色になりますが、それだけではなく元々のメールが暗い配色の場合、明るい配色に反転させてしまいます。

画像引用元：The Ultimate Guide to Dark Mode for Email Marketers（Litmus Blog）

部分反転

部分反転は、明るい配色を暗い配色に反転させます。
完全反転とは違い、暗い配色の部分はそのまま適用されます。

画像引用元：The Ultimate Guide to Dark Mode for Email Marketers（Litmus Blog）

反転しない

メーラーによっては、ダークモードを適用していても反転しない場合があります。 そのため、メールのデザインは作成したデザインのまま反映されます。

各メーラーのダークモード対応状況

ダークモード下でのメールの見え方をご紹介しましたが、メーラーによってどのように見えるかが異なります。ここでは、「完全反転」「部分反転」「反転しない」といった各メーラーの見え方をご紹介します。

Litmus社の調査によると、2021年10月時点で各メーラーの対応は以下のようになっています。

メール作成時のポイント

ダークモードを適用しているユーザー、していないユーザーでは、メールの見え方が変わってきます。かつ、ダークモードを適用している場合もどのメーラーでメールを閲覧しているかによっても見え方が変わってしまいます。

そのため、見やすい・読みやすいメールを作っているつもりで、ユーザーの環境によっては読みにくいメールになっている可能性も…。

ここからは、ダークモードの適用・非適用に関わらず、ユーザーにとって見やすくて読みやすいメールを作成するためのポイントを紹介いたします！

配色・コントラスト

1つ目のポイントは、フォントやCTAに使う色など全体の配色です。

明るい背景であれば見やすいフォントの色を選んでいても、反転した際に文字が読みづらくなってしまっているということがあります。

また、ハイライトなど強調色やCTAの色、背景色など全体の配色をきれいに設定しているつもりでも、ダークモード下で閲覧するとコントラストが強すぎて、受信者にとっては読みにくいデザインになっている可能性もあります。

反転しても読みやすい配色を保つためには、

• ・文字色は反転した場合のこと踏まえて、黒など濃い色にする
• ・ハイライトを付ける部分など強調色やCTAの色など、目立たせたいもの、は黒背景でも見やすい/読みやすい配色にする

といった点に気を付けましょう。

黒背景と相性の良い色については、下記をご参考ください。
参考：黒背景のスライドでプレゼンをするときの注意点

画像

自社のロゴ画像や、SNSアカウントのロゴ画像など、メールに画像を活用している方も多いと思います。ダークモードでは、背景や文字色は反転するものの、画像はそのままです。

自社のロゴ画像を使っている場合、社名の文字色が黒になっていると反転した際に背景と同じ色になってしまい、見えなくなってしまうこともあります。

画像を使う場合に気を付けたいポイントをご紹介します。

①画像の背景は透過処理する

活用する画像の背景は透過処理しておきましょう。

メール本文と画像の背景色が同じであれば、見え方・デザインに影響はありません。しかし、ダークモード下だと画像の背景は反転せず白色のままのため、全体のデザインが崩れてしまいます。

画像の背景を透過しておけば、メール本文の背景が何色でも問題なく馴染みます。しかし、画像に暗色の文字などが入っている場合は注意が必要です。その理由や対策については、「③画像に書かれた文字が暗色の場合（ロゴの社名など）は縁取りする」をご確認ください。

②背景色のある画像は十分な余白をつくる

先ほど、画像の背景を透過させる方が良いとお伝えしましたが、透過処理が難しい・できないといった場合もあるかと思います。その場合は、少しでも見え方を整えるために、十分な余白を作ることをおすすめします。

画像ギリギリの余白になっていると、画像が見にくいだけでなく、全体のデザインもぎこちなくなります。

③画像に書かれた文字が暗色の場合（ロゴの社名など）は縁取りする

メール本文にロゴや文字の入った画像を差し込んでいるという方も多いと思います。その文字が黒や紺など暗色の場合、当然ダークモード下では見えなくなってしまいます。

そのために、明るい色で縁取りをいれると暗い背景でも文字が消えずに表示されるだけでなく、目立たせることができます。

縁取りでなくとも、影や光彩を入れることでも同様の効果が得られます。

デザインなどでお好きな手法をお試しください。

配配メールでのダークモード対応

弊社企画チームで配信しているメルマガでも、ダークモードでの見え方を意識してメルマガの配色を変更しました。 左がダークモードを意識する前で、右がその後のメールになります。

▼ライトモード

▼ダークモード

細かい部分ではありますが、フォント色を黒に、強調色やCTAの色を赤から黒背景でも目立ち・見やすい色に変更しています。ダークモードでの見え方を見ていただくとわかる通り、右側の方が文字もはっきり見え、黒背景でも読みやすい・見やすい色にしています。 詳しいカラーコードは以下を参照ください。

>>メールマーケティングの最新情報をお届け！ メルラボ / 配配メールのメルマガに登録する

配信前のテストで見え方をチェックしよう

これまでダークモードでも見やすいメールを作るためのポイントをご紹介してきました。しかし、メーラーによっては反転の仕方も違いますし、ポイントを押さえて作成したつもりでも、ライトモード下で見るのとダークモード下で見るのでは印象が違うこともあります。

そのため、メール配信をする前にはテスト配信を行い、PC・スマホなど端末ごとのライトモード・ダークモードでの見え方を実際にチェックすることをおすすめします。

まとめ

日本ではメーラーにおいて、ダークモードを利用しているユーザーはまだ少数派ですが、ゼロではありません。どのような環境においてもデザインの崩れていない、見やすく・読みやすいメールを配信することが、成果にもつながります。

フォントの色を変えてみる、など細かい部分でも見え方は変わりますので、ぜひできるところから取り入れてみてください！

関連記事：iOS15問題、AMP for EmailにBIMI認証！メールマーケティングの最新トピックス5選

>>【無料ダウンロード】メールマーケティングの基礎を知りたい方におすすめの資料はこちら！

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

山盛有希子

自動車部品メーカーで広報として3年間従事し、2020年6月にラクス入社。現在は、オンラインマーケティングチームに所属し、メルマガ運用やメルラボの企画・コンテンツ作成を担当。社内外向けにセミナーや勉強会を行い、メールマーケティングのナレッジを提供している。

最新記事 by 山盛有希子 (全て見る)

• 【イベントレポート】第4回パートナー交流会を開催しました！ - 2023年7月14日
• 営業メールに返信は必要？返信の5つのマナー・例文6つも紹介 - 2022年10月7日
• 【2024年最新】メール一斉送信ツールの選び方は？失敗しないポイントを徹底解説！ - 2022年9月30日