そのメール、見えてませんよ!

そのメール、見えてませんよ!

朝陽とともに同居人のWinba君(フクロモモンガ)に起こされても、お布団を被ってダークモードに突入しようとする下村です(ぬくぬく幸せ時間……)。

さて、ダークモードといえば、画面表示が黒基調になるUIデザインで、MacOSから始まり、今はiOS(iPhoneとかiPadとか)にも採用されるようになった表示スタイル。

このダークモードを利用するにはいくつかの理由があります。

目に優しい
コントラストが高く、読みやすい
なんとなく見た目がカッコいい!

しかし……ダークモードが登場したことによって、メールが表示されなくなる(厳密には表示はされているが黒地に黒字という視認できない状況)というトラブルが続出してるんです!

状況に気付いて、メルマガのデザインを修正していればまだいいのですが、そんなことが起こっているのも知らずに、今日も読めないメルマガを送信し続けてるマーケターが多いのも事実なのです。

 

ダークモードの現状を整理してみました

そんなダークモード、メール閲覧のために使っているアプリによっても、適用されるかどうかが違ってきます

ダークモードに対応している主要メーラーは以下の通りです。

モバイルデバイス
Outlookアプリ版(iOS/Android)
Gmailアプリ版(iOS/Android)

デスクトップデバイス
MacOS標準Mailアプリ
Outlook 2019(MacOS)
Outlook 2019(Windows)

Web(ブラウザー)クライアント
Outlook.com

 

ところが……もっと厄介な問題があるんです。

それは、一言で「ダークモード」と申しても、実はどうインプリされているかはメーラー次第!なんです。(汗)

そう。メーラーによって、ダークモードというものがどう処理されているのかさえ、バラバラなんです。

 

本ブログを執筆している2019年12月現在、大きく分けて3種類のダークモードハンドリングがあるようです。

その1:変化なし
ダークモードと言いつつ、その影響を受けるのはメーラーのUIだけで、表示されるメールは元々コーディングされたHTMLの通りに表示されるというもの。
HTML内にダークモードを指定するコードを含めない限り、iOSとMacOSの標準メーラーは、通常どおりのレンダリングをします。
その2:部分的反転
メーラーが明るい背景を検出し、暗い色にしつつテキストを明るい色に反転させる、というものです。
すでに背景が暗い領域は手付かずのままとなります。
この仕組みを使っているのはOutlook.comですが、幸いにしてこのメーラーではダークモード指定にも対応しているため、事前にダークモード指定されたデザインの場合は影響を受けません。
その3:完全反転
最も強引な対応がこの手法。
明るい領域は暗くなり、暗い領域は明るくなってしまうものです。
皮肉なことに、ダークモードのような暗いHTMLデザインを使っていると、これが反転されて明るいメールに変えられてしまうのです。残念ながら、Gmailアプリ(iOS13)やOutlook 2019(Windows)など、普及範囲の広いメーラーがこのような対応をしてしまっています。

 

入念な表示確認をお勧めします

ダークモードにどう対応するかは、まだ業界標準での対応というものは存在せず、いまのところ各社が試行錯誤している様子が見られるので、今後も目が離せないところではあります。
いずれにせよ、以前より重要だった複数環境でのメールレイアウトの検証は今、ますます範囲が広がって複雑化してきています。

せっかく作ったメールが意図した通りに表示されるかどうか、念入りに確認するとともに、必要に応じて修正を行うのを忘れないようにしてくださいね!

そして、「そんなことをやっている時間もノウハウもないよ!」というMarketoユーザーの場合は、徹底した表示環境チェックとあらゆるベストプラクティスが施されている「マルテンを採用すれば、こうした諸々の厄介な作業から解放されますよ!
業務効率化のためにも、ぜひご検討を♪

執筆者に質問しちゃう!

「もうちょっと突っ込んだこと知りたい……。」とお思いのあなた!このブログの執筆者に、直接質問をしちゃいましょう!

メルマガ登録

マーケターやマーケティングにご興味のある方へ。些細なことから「おっ」と思う注目の事柄まで、読んでお得な情報をメールで配信中!気になる方は今すぐご登録を!