すべてのマーケターがダークモードメールについて知っておくべきこと

公開: 2021-08-18

最近では、アプリでさえゴスのトレンドを利用しています。

もっと真剣に、私たちはダークモードについて話している。 オペレーティングシステムは常に反転した配色を提供してきましたが、ダークモードのメールとアプリは少し異なります。

多くのユーザーがダークモードに興奮していますが、それはメールマーケターにとって少し頭痛の種です。

各電子メールクライアントが同じキャンペーンを異なる方法で表示できることに間違いなく気づきました。 さて、ダークモードの導入は方程式にもう1つの層を追加します。

この投稿では、ダークモード用にメールキャンペーンを最適化する前に知っておく必要のある基本事項について説明します。

ダークモードとは何ですか?なぜ人々はそれを使用するのですか?

何年もの間、オペレーティングシステムとアプリは、デフォルトで白い背景と黒いテキストでコンテンツを表示してきました。 ここでは、これを「ライトモード」と呼びます。

ライトモードは、ほとんどのアプリやシステムのデフォルトオプションですが、多くの知識のあるインターネットユーザー、特に1日のほとんどをオンラインで過ごすユーザーには人気がありません。

新しいデータによると、平均的な人は毎週44時間以上オンラインで過ごしています。 多くの人にとって、コンピューターやラップトップでの6時間は何の意味もありません。

ええと、一日中画面を見つめるのは私たちの目には良くないことがわかりました。 テレビ、電話、ラップトップなど、画面の時間が長すぎると目の疲れにつながります。

ブライトスクリーンデジタル眼精疲労

出典:Weekdone

害を及ぼす可能性があるのは明るさだけではありません。 白い画面からの青色光の放出は、体内がメラトニンを生成するのを防ぎます。メラトニンは、概日リズムと睡眠サイクルを狂わせる可能性があります。 アメリカ人の最大半数が慢性または急性の不眠症に苦しんでいることを考えると、私たちは皆、睡眠衛生を改善するために立つことができます。

現在、多くの電話やオペレーティングシステムでは、暖かい色相に切り替えて青色光を減らしたり、毎日特定の時間後に青色光フィルターを自動的にオンにしたりできます。

ダークモードのメールとアプリは別の選択肢を提供します。 白の色相を微調整する代わりに、テーマ全体を黒またはダークグレーに変更するだけで、有害な青い光を簡単に取り除くことができます。

Reddit、Facebook Messenger、Twitter、WhatsAppなどのいくつかの人気のあるアプリは、組み込みのダークモードオプションを提供します。 Facebook Messengerは、絵文字を送信することでトリガーできるイースターエッグとして最初にダークモードを開始しましたが、今では誰でもアプリの設定でそれをオンにできます。

一部のスマートフォンアプリはダークモードを提供しますが、ユーザーはAppleまたはAndroidのテーマをこのモードに切り替える必要があります。 つまり、アプリの設定では提供されません。

ダークモードのメールとアプリは、OLED画面を備えたデバイスのバッテリー消費量を削減するのにも役立ちます。 OLEDを使用すると、暗いピクセルは黒であるため、画面に表示されません。 ただし、LCDおよび標準のLEDスクリーンでは、暗いピクセルでもバッテリー寿命が必要です。

どのクライアントがダークモードのメールを提供していますか?

電子メールクライアントは、ダークモードを受け入れることに消極的です。

必ずしも提供したくないというわけではありませんが、メールキャンペーンごとにコーディングが異なるため、見た目に美しいダークバージョンを実装することは困難です。

一部のメールクライアントは、アプリ内でオンにできる特定の設定としてダークモードを提供しています。 一方、他のクライアントでは、アプリが自動的にダークモードに切り替わる前に、オペレーティングシステムの設定を変更する必要があります。

現在ダークモードを提供していることがわかっているクライアントとアプリは次のとおりです。

  • Gmailアプリ(iOSおよびAndroid)

  • Outlookアプリ(iOSおよびAndroid)

  • アップルメール(デスクトップ)

  • Outlook 2019(Mac、Windows、およびWeb)

また、Gmailは特定の「ダークモード」を提供していない場合がありますが、テーマを明るい色から暗い色に切り替えることができます。

ダークモードのメールはどのように見えますか?

すべてのものの電子メールと同様に、それは異なります。

アプリでは、ダークモードは簡単です。 開発者は、CSSの一部を切り替えて、ユーザーが選択できるようにするだけです。

Twitterには、ダークモードの2つのバージョンがあります。ライトアウトとディムです。

Twitterダークモード自動生成された携帯電話の説明のスクリーンショット

出典:Twitter

FacebookMes​​sengerとRedditでのダークモードは次のようになります。

Facebookとredditダークモード自動生成されたコンピューターの説明のスクリーンショット

出典:Facebook、Reddit

完璧な世界では、ダークモードの電子メールはMicrosoftブログのこのグラフィックとまったく同じように見えます。

Microsoftブログダークモード

出典:Microsoftブログ

ダークモードの電子メールについては、次のようになります。電子メールクライアントは、使用する特定のバージョンを1つも選択していません。 さまざまな電子メールクライアントで見られるダークモードには、3つの特定のタイプがあるようです。

1.色の変化はありません

まず、メールクライアントがダークモードのテーマを保持している間に、独自のHTMLでレンダリングされるメールがあります。

デスクトップ用Gmailの場合、メールの内容は少しも変わりません。Gmailのテーマだけが暗くなります。

Gmailデスクトップアプリでは次のように表示されます。

Gmailダークモード

Gmailダークモード

出典:Gmail

Appleの場合、プレーンテキストの電子メールがライトモードからダークモードへの切り替えをトリガーするように見えますが、HTMLメールはトリガーしません。

2.パーシャルダークモード

部分的なダークモードの電子メールでは、クライアントは明るい背景を識別し、それらを自動的に暗いものに切り替えます(暗いテキストを明るいものに切り替えます)。

この場合、サブスクライバーがダークモードをオンにしている場合、背景が暗い電子メールキャンペーンの設計は変更されません。

ダークモードデザイン

出典:リトマス

3.完全反転ダークモード

最後に、フルダークモードは、設計方法に関係なく、すべての電子メールを対象とし、CSSを完全に反転させます。

つまり、背景が黒のダークモードのメールをデザインすると、メールクライアントはそれを白に戻します。

これは、多くの人が使用するダークモードのバージョンです。

GmailやOutlookなどの人気のあるクライアントでは、ダークモードのユーザーをターゲットにすることもできません。 うまくいけば、電子メール開発者が適応し始めると、電子メールクライアントはコードを変更して、すべての人に適したダークモードを見つけます。

ダークモードメールのデザイン

覚えておくべき最も重要なデザイン要素は、背景色が黒に切り替わるということです。

デザイナーは、画面の背景とブレンドするために部分的に白い要素を持つ画像を選択するのが一般的です。 また、デザイナーは特定の色で画像を作成し、背景に同じ色を使用してシームレスに見えるようにすることもあります。

ダークモードで色が反転すると、思いやりのあるデザインが失われる可能性があります。

このメールで色がわずかに変化する様子をご覧ください。

パーシャルダークモードデザイン

出典:中

ライトモードの明るい黄色は、ダークモードの茶色に切り替わります。 一方、Samsung画像のティールの背景は、メールの背景色が暗くなるため、ダークモードで目立ちます。

ダークモードメール用の画像の作成

背景が透明な画像をできるだけ使用することをお勧めします。

背景色を制御できない場合は、写真とロゴをきれいに保つ必要があります。 したがって、透明性が進むべき道です。

繰り返しになりますが、ほとんどのデザイナーは、エッジの周りに白いトリムが付いたロゴと写真を使用しています。 通常、トリムは電子メールの白い背景に溶け込むため、これは問題ではありません。

ただし、ダークモードでは、そのトリムが際立ちます。 通常は大きな欠陥ではありませんが、メールが少し乱雑に見える可能性があります。

これらのソーシャルメディアアイコンとの違いがわかりますか?

ソーシャルメディアアイコンダークモード

出典:キャンペーンモニター

ダークモードでギラギラと感じる可能性のある明るい画像に調光フィルターを追加することも価値があります。

ダークモードメール用のテキストの最適化

多くのブランドが無地の黒のロゴを使用しています。 透明な背景を追加し、黒い背景の上にロゴを投げると、ロゴが見えなくなります。

幸い、少し計画を立てれば簡単に修正できます。

黒一色のロゴまたはヘッダーを扱っている場合は、ダークモードのメールで黒の背景に表示されるように白の境界線を追加します。

白い境界線を追加すると、背景が白くなると境界線が消えるため、ダークモードとライトモードの両方でうまく機能します。

サイトポイントダークモード

出典:キャンペーンモニター

テストすることを忘れないでください

すべてのメールマーケティングと同様に、特にダークモードの場合は、十分なテストを実行せずにキャンペーンを送信しないようにしてください。

メールクライアントとアプリはまだ理想的なダークモード戦略を見つけていないため、標準とCSSスタイルが数回変更されることを期待してください。

さらに、ダークモードの電子メールはすべてのクライアントで異なって見えます。 ただし、ライトモードとダークモードでテストを実行すると、すべてのデバイスでメールを読みやすく見事に保つことができます。

要約

一貫性のある電子メールデザインを明確にすることはすでに課題である可能性があり、ダークモードの電子メール機能は役に立ちません。 幸い、サブスクライバーが使用している電子メールクライアントについて学習し、いくつかのベストプラクティスに従って電子メールの見栄えを良くすることができます。

  • 黒一色のテキストまたはロゴの周りに白のアウトラインを含めます。

  • 明るい画像にビネットまたは薄暗いフィルターを追加します。

  • 背景が透明な画像、ロゴ、写真を使用してみてください。

  • 画像を背景色とブレンドすることは避けてください。

  • たくさんのテストを実行します。

デザインを改善し、最高のメールを送信したいですか? 効果的なメールデザインについては、この究極のガイドをご覧ください。