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

公開: 2022-06-29

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

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

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

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

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

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

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

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

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

ええと、一日中画面を見つめるのは私たちの目には良くないことがわかりました。 テレビ、電話、ラップトップのいずれであっても、スクリーンタイムが長すぎると、目の疲れにつながります。

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

出典:Weekdone

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Apple Mail(デスクトップ)

  • 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の場合、メールの内容は1ビット変更されません。Gmailテーマのみが暗くなります。

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

Gmailダークモード

Gmailダークモード

出典:Gmail

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

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

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

この場合、サブスクライバーがダークモードをオンにしている場合でも、背景が暗い電子メールキャンペーンのデザインは変わりません。

ダークモードデザイン

出典:リトマス

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

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

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

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

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

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

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

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

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

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

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

出典:中

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

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

背景が透明な画像をできるだけ使用するのが賢明です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

要約

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

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

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

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

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

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

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