昨今、ダークモードも市民権を得て、一般の方もダークモードで常に表示していることがあると思う。
メールもご多分に漏れず、ダークモード。
今回は、ダークモード括りでHTMLメールで送信する上で気をつけた方がいいところを書いていきたい。
自動で色が変更される
ダークモード設定にユーザーがしていると、メーラーにもよると思うが、
自動で色が反転するメーラーが多くなってきているように思う。
自動反転のルールは
「明るい」ものは「暗く」
「暗い」ものは「明るく」
という感じだ。
一見、いいじゃん！
って感じなんやけども、
実際そういうこともない場合が多い。
メーラーによってだいぶ変わる
この色の自動変更はメーラーによってもだいぶ違ってくる。
Gmail、Outlook、Thunderbirdなどなど。
例えば、Gmailアプリ（iOS、Android OS）だと、
iOSだと、cssでのカラーリング判定はシビアだが、画像判定はしない。
Android OSだと、cssでのカラーリング判定はゆるいが、画像にも反転ルールを適応するなど。
今の例は、スマホでのGmailアプリやけども
他にもブラウザやPCでの挙動などもあるし、Outlookなどの別メーラーも同様以上の分類分けが必要である。
ダークモードの対応はどうしたらいいのか
今のところ、Gmailに関して言えば、ダークモードの制御はできない状況。
つまりは、ダークモードでもおかしく見えないデザイン・カラーリングにしないといけないということ。
縁取る
例えば、アイコンやロゴなど透過した画像の場合、反転した場合に反転したカラーと同系色になる可能性がある。
その対応策として、透過の外側にライトモードでの背景色と同様の色を3px前後で縁取るという方法がある。
このメリットはそこまでコストをかけずに視認できる可能性が高いという点です。
カラー調整
あとは、ダークモードで確認しながら”いい塩梅”のカラーを見つけるというもの。背景色などは特にそのメールの印象にも直結する事案なので、確認はしておいた方がよいでしょう。
現状だとできることは限られている
対応策として何点か挙げたが、多くはない対応策数なので、妥協なども必要になってくるなという心持ちが必要なのかもしれない。ダークモードのルールも少しずつ変わってきていそうなので今後の動向もチェックしていきたい。