ダークモードに対応したメルマガデザインの作り方

スマホのダークモードを使ったことありますか？

目がラクになったり、電池が長持ちしたりと、いいことづくしで、使ってる人がめちゃくちゃ増えてるんです。

でも、ここに落とし穴が！

せっかく時間をかけて作ったあなたのメルマガ、読者がダークモードをONにしていると、メールアプリが気を利かせすぎて勝手に色を反転させちゃうんです。

その結果、

…なんていう見づらい問題が起こりがちなんです。

これじゃ、せっかくのメルマガの内容が伝わりにくくなります。

このままだと、もったいない！

この記事では競合他社よりも先に「あ、このメルマガ、気が利いてるな！」って読者に思ってもらえる、ダークモードでも崩れないイケてるメルマガデザインの裏ワザを、画像処理のコツからテストのやり方まで、ぜーんぶ教えちゃいます！

コンビーズメール

デザイン性と操作性に優れ、
AIが配信をサポート

コンビーズメールライト

初心者にもやさしい
シンプル機能と安心の配信

コンビーズメールプラス

低価格で直感的に使える
本格マーケティング機能

ダークモードとは？ 

ダークモードとは、私たちが毎日見ているスマホやPCの画面の色を「白背景に黒文字」から「黒背景に白文字」へとガラッと変えてくれる機能のことです。

「ナイトモード」なんて呼ばれることもありますね。

この機能、ただ見た目がクールなだけでなく、目への負担をグッと減らしてくれたり、スマホのバッテリーが長持ちしたりと、とても助かる機能なんです！

私も白色だと眩しくて目が痛くなってしまうので、よく使っています。ありがたや～。

このダークモードをONにしていると、ほとんどのアプリの見た目が暗い色調に変わるわけですが、メルマガも例外ではありません。

ユーザーが使っているメールアプリ（GmailやApple Mailなど）がダークモードに対応していると、せっかくデザインしたメルマガも自動的に「黒背景」として表示されちゃうことが多いんです。

これが何を意味するかというと、意図したメルマガデザインと、実際のユーザーの見え方がズレてしまう可能性がある、ということです。

たとえば、白背景に合わせて作った黒いロゴ画像や、見やすいように調整したボタンの色が、黒背景に反転した途端に「あれ？見づらい…」となってしまう。

それは困る！

メルマガ側で「この色で表示して！」と強く指定しても、完全にコントロールできないのはなぜか？

ダークモードは「ユーザーが設定した機能」として優先されるからです。

つまり、ユーザーの目に優しい設定が、メルマガのデザインよりも大切だと判断されます！

だからこそ、どんな環境でも美しく見えるように、メルマガ側でひと手間かける必要が出てきているわけです。

ダークモードで見る人ってそんなにいるの？

「自分のメルマガ読者の中に、わざわざダークモードで読んでる人なんてほとんどいないんじゃない？」と疑問に思うかもしれません。

でも、最近のデータを見ると、もはや無視できないどころか「対応しなきゃマズイ」レベルになっているのが現状です。

自社独自でアンケートをとってみました！

使ってる人が44.4％、たまに使う人は14.8％

合計するとなんと約6割の人がダークモードを使用しています。

あなたの読者も半分近く、あるいはそれ以上のユーザーが「色が反転したデザイン」でメルマガを読んでいる可能性があります。

せっかく時間をかけて作ったデザインが「見づらい」せいで、開封後すぐに閉じられてしまったり、クリック率が下がったりしたらもったいないですよね。

競合他社に先んじて、ダークモードに対応することで、メルマガの成果アップだけでなく「この会社のメルマガは気が利いているな」というブランドの信頼感にも繋がるはずです。

ダークモードの確認方法

実際に自分が作ったメルマガが、ダークモード環境でどう見えるのかをチェックしたい！となっても、これがまたちょっとややこしいのです。

実際にPCのGmailで確認しようと思い、PC本体の設定をダークモードに変えたのですが、Gmailの背景は白いままでダークモード表示にはなりませんでした。

一応、PC版Gmailの設定から「テーマ」を「ダーク」に切り替えることはできます。

ただ、このPC版Gmailのテーマ設定は、メルマガ本文の色反転はせず、メルマガを開くと、通常と同じ表示でした。

調査してみましたが、PC版Gmailでダークモードを公式で確認する方法は今のところないようです。

メルマガの色反転を確認するには、スマートフォンから見るのが一番簡単で確実です！

ほとんどのスマホのメールアプリは、スマホ本体の設定でダークモードをONにすると、連動してメールアプリの背景色も自動で反転してくれます。

だから、スマホ本体の設定をポチッと切り替えるだけで、すぐにダークモードでの見え方をチェックできるんです。

これで、うっかりデザインが崩れてしまったり、文字が消えて見えなくなったりするトラブルを、配信前にしっかり防ぐことができますよ！

ダークモードでどのような影響があるの？

ダークモードでGmailに届いているメルマガを見ていきましょう

テキスト

ダークモードがオンになると、背景が黒色に、テキストが白色になり、テキストと背景色の反転が起きます。

でも、この親切な機能が、時々困った問題を起こすんです。

たとえば、デザインを工夫して濃いグレーにしていた文字や、アクセントとして色をつけた文字は、反転後の真っ黒な背景に対してコントラスト（色の差）が弱すぎて、逆に読みにくくなっている例がたくさん出てきます。

特に、元の色が黒に近いと、反転後の黒い背景に「あれ？文字がない！」ってくらい溶け込んでしまうことも。

この自動反転が上手く機能するかどうか、事前にチェックしておかないと、肝心なメッセージが伝わらなくなるリスクがあるわけです。

【テキストの色反転で読みにくくなっている例】

画像

テキストと背景は反転しても、画像はそのままの色をキープします。

これがダークモード対応の最大の難関ポイントなんです！

想像してみてください。

会社のロゴや文字の透過画像が暗い色だった場合、ダークモードでは背景の黒色と同化してしまい、見えにくくなる例が発生します。

画像の中の文字は色が変わらないというルールを頭に入れて「暗い背景で見てもちゃんと読めるか？」という視点で画像を選ぶ必要があるわけです。

【通常モード】

【ダークモード】

ロゴ

ブランドロゴがダークモードの落とし穴にはまるケースが非常に多いんです。

特に、黒でデザインされたロゴは要注意です！

ほとんどのブランドロゴは、明るい場所で映えるように黒や濃い色が使われています。

これらのロゴ画像をそのまま使ってしまうと、ダークモードで背景が黒くなった瞬間に、ロゴの黒い部分が背景色にスッと溶け込んでしまい、見えなくなってしまうという事態が起こります。

【ロゴが背景に同化している例】

ロゴが見えなくなるのは「どこの会社から来たメール？」とユーザーを迷わせてしまい、信頼感を損なうことにもつながりかねません。

半透明の画像は黒色と混ざって色が濁る

画像を扱う上で、もう一つ知っておきたいのが半透明の画像が引き起こす現象です。

デザインで淡い色や影を表現するために、完全に透明ではない「半透明」の設定を使っていませんか？

ダークモードでは、この半透明の部分を通して背景の黒と混ざり、濁った色に見えてしまうんです。

ライトモードで表現したかった、あの繊細で洗練された色合いが、意図せず暗くくすんだ色に変わってしまう可能性があるわけです。

もし「そんな色の変化は困る！」という場合は、画像を書き出す際に、透過されないよう不透明度を100％にするのが基本です。

ただ、これを逆手にとることもできます。

あえて半透明にして、背景の黒を透けさせることで、落ち着いた、暗めのトーンを意図的に作り出し、白文字を目立たせるテクニックとしても使えそうです。

どちらにしても、必ず実際のダークモード画面で「色が濁っていないか？」をしっかりチェックすることが大切です。

▼しっかり届くのに、安くてシンプル。20年以上愛されているメルマガツールはこちら▼

ダークモードに対応したメルマガの作り方

ドロップシャドウやフチをつける

暗い背景にロゴの黒い文字が溶け込んで文字が消えてしまう問題をスマートに解決するのが、画像にドロップシャドウやフチをつける方法です。

特にロゴやアイコンなどの透過画像には、白や薄いグレーのフチを1〜3px程度つけるのが効果抜群です。

ここで一つポイントです。フチの色を真っ白（#FFFFFF）にしてしまうと、暗い画面で少し浮いて見えてしまうことがあります。

より自然に馴染ませるには、#EEEEEE〜#DDDDDDくらいの、ほんのり明るいグレーを選ぶのがおすすめです。

このひと手間で、読めなくなる問題をほぼ解消できるので、ぜひ試してみてください。

下に半透明の色を敷く

2つめは、テキストの下に半透明の色を敷く方法です。

この工夫をすることで、ダークモードで背景が暗くなっても、しっかり際立ちます。

特に、絶対にクリックしてほしいCTAボタンのテキストや、重要な見出しなど、視認性を最優先したい部分で活用すると、メルマガの効果アップに直結しますよ！

メルマガ全体を画像でつくる

もし、複雑なデザインをどうしても崩したくない場合や、ダークモード対応が難しいと感じるなら、メルマガ全体を一つの画像として作成し、それをHTMLメールに挿入する方法もおすすめです。

この手法の最大のメリットは、ダークモード設定に全く影響されないことです。

色やデザインが見えづらくなる心配がなく、デザイナーが作った通りのメルマガデザインを忠実に再現できます。

【画像で作られたメルマガの例】

・GU

・ユニクロ

ただし、注意点もあります。

メールクライアントの設定で「画像を非表示」にしているユーザーには、何も情報が伝わらなくなってしまいます。

そのため、絶対に代替テキスト（alt属性）を設定して、画像を読み込まれなくても内容がわかるようにしてください。

もし採用する場合は、重くならないようにファイルサイズにも気を付けてくださいね。

メルマガ1通あたり1MB以内が理想です！

テスト配信は必ず！

ここまで頑張ってダークモード対応メルマガを作っても、実際に配信してみたら特定のメーラーで崩れていた、ということがメルマガ制作ではよくあります。

安心してメルマガを届けるためには、本配信前の徹底したテスト配信が必須です。

テストするときは、ライトモードとダークモードの両方で、以下の項目をチェックすると安心です！

PC、スマホなど、様々な受信環境での見え方をシミュレーションすることが大切です。

これをしっかり行うことで「デザインが崩れたかも…」という不安から解放され、安心してメルマガ配信できるようになりますよ✨

復習テスト！

記事の内容を○×クイズにしました。ぜひ復習につかってみてくださいね！

解き終わったら以下の回答をどうぞ！

AIプロンプトを無料プレゼント！

コンビーズメールライト

まさかの月額3,300円〜。業界最安クラスなのに、安心のメール配信サービス

当方がご提供しているコンビーズメールライトは業界最安クラス月額3,300円〜のシンプルで使いやすいメール配信サービス。クレジットカード情報不要で開始できる無料トライアルもご用意しております。

初めてでも、使い方は無限大。大規模ビジネスはもちろんのこと、個人事業やサークル運営にも幅広く活用できます。

とにかくシンプルで使いやすく、安定してお客様に届きやすい。

だから初心者の方でも安心して使い始めることができます。

この記事を書いた人

宇都宮凛奈

コンビーズの公式XとYouTubeショートを担当しているりんりんです！
こんびーちゃんとお仕事をしたりおやつを食べてます。
ライターとしてまだまだ修行中！
いろんなデザインを見たり、空と海の写真を撮るのが趣味。

この記事の監修

川上サトシ

合同会社ぎあはーと 代表

Webマーケター。
ヴァイオリニストとして活動していた20代の頃、Webマーケティングの重要性を痛感。骨董品のEC管理や食べログの営業を経て、Webコンサル会社のマーケティング担当となる。引っ越し企業のサイトをSEO施策により【半年で1万PVから20万PVまで成長させる】、上場アパレル企業の【売上を1年で3倍にする】など数多くの実績を残して会社設立。専門はSEOと広告運用。ルリニコクのヴァイオリニストとしても活動中。