Webの常識が通じないHTMLメールのダークモード

このスライドはフロントエンドカンファレンス関西2026 の登壇に使用したスライドのアーカイブになります。

チームラボでは、フロントエンドエンジニアを募集しています。
少しでも、チームラボにご興味をお持ち頂けましたら、採用ページをご覧頂けますと幸いです。
https://www.team-lab.com/recruit/

Transcript

1. フロントエンドカンファレンス関西 2026 Webの常識が通じないHTMLメールの ダークモード take チームラボ パッケージチーム 所属 © teamLab Inc.
2. 自己紹介 Takeuchi Sota take (竹内 颯汰) 所属｜ チームラボ パッケージチーム フロントエンド班 茨城出身の新卒3年目フロントエンジニア カンファレンス初登壇ですが、がんばります🔥 © teamLab Inc. 2
3. HTMLメールとは・・HTMLとCSSで見た目を作るメール、画像やデザイン性を持たせられる テキストメール HTMLメール © teamLab Inc. 3
4. メールクライアントの例 Gmail Outlook Apple Mail © teamLab Inc. Yahoo Mail 4
5. 作りたいHTMLメール ライトモード ダークモード © teamLab Inc. 5
6. 一般的なWeb開発のダークモード対応ならこれでおわり :root { --background: #FFFFFF; --text: #16181A; } 01 CSS変数で色を定義 ライトモード用のカラー変数を らかじめ宣言 @media (prefers-color-scheme: dark) { :root { --background: #16181A; --text: #FFFFFF; } } 02 あ prefers-color-scheme: dark のときだけ値を切り替える メディアクエリを使い、ダークモード時 に変数のカラー値を上書き設定。 body { background-color: var(--background); color: var(--text); } © teamLab Inc. 6
7. 一般的なWeb開発のダークモード対応ならこれでおわり しかし、これをそのままHTMLメールで使おうとすると © teamLab Inc. 7
8. 同じメールでも、クライアントごとに崩れ方が違う：Apple Mail 想定したダークモード 実際の表示 問題点 01 ライトモードのまま © teamLab Inc. 8
9. 同じメールでも、クライアントごとに崩れ方が違う：Gmail 想定したダークモード 実際の表示 問題点 02 ボタンの色が意図せず変化 問題点 03 ロゴが背景に埋もれて見えない © teamLab Inc. 9
10. 同じメールでも、クライアントごとに崩れ方が違う どうしてこのようなスタイルの崩れが起きてしまうのか.... 🤔 © teamLab Inc. 10
11. メールクライアントによっては @media (prefers-color-scheme) が効かない ◯ 対応 Apple Mail ✕ 非対応 Gmail,Outlook ※Outlookは環境により対応 https://www.caniemail.com/features/css-at-media-prefers-color-scheme/ © teamLab Inc. 11
12. メールの色を最終的に決めるのはメールクライアント メディアクエリが効かないメールクライアントでは メールクライアントが色を自動反転する © teamLab Inc. 12
13. メールの色を最終的に決めるのはメールクライアント ライトモード 自動反転されたGmail クライアント側の自動反転で 勝手に色が変わってしまう © teamLab Inc. 13
14. どう対策すれば良いのか じゃあどう対策をすれば良いのか...🤔 © teamLab Inc. 14
15. 対策の考え方 制御できるところは制御し、自動反転されても崩れないように作る © teamLab Inc. 15
16. 対策①：まず color-scheme を宣言する Apple Mail <meta content="light dark" name="color-scheme" /> これがあるとメールクライアントがダークモードに対応している と判断する Apple Mailではメディアクエリが効くのでこの指定で制御可能に！ Apple Mail © teamLab Inc. 16
17. 対策②：自動反転されても崩れにくいデザインにする Outlook Gmail 自動反転後の色はメールクライアントごとに異 なり、狙って揃えることはできない • • 背景と文字の明るさの差を大きくとる 色の差だけに頼らず、枠線で区切る →自動反転されても崩れないデザイン © teamLab Inc. 17
18. 対策③：ロゴはPNG＋枠で背景に埋もれないようにする インラインSVGの色をCSSで変える → ✕ メールではインラインSVGが使えない ダーク用のPNGに切り替える → △ メディアクエリが効くクライアントだけ ロゴを白い背景で囲む → ◯ ライトモードとダークモードで見やすい ✕ 対策前 背景に埋もれる ◯ 対策後 © teamLab Inc. 枠・背景で視認性確保 18
19. どのクライアントでも読めるように Apple Mail Gmail © teamLab Inc. Outlook 19
20. まとめ • メールでは、Webで一般的なメディアクエリが効かないクライアント がある • 効かないクライアントでは色が自動反転され、その結果はクライアン トごとにバラバラ → HTMLメールのダークモードは「制御」より「崩れにくさ」 © teamLab Inc. 20
21. ご清聴ありがとうございました！ 竹内 颯汰 Webの常識が通じないHTMLメールのダークモード © teamLab Inc. チームラボ パッケージチーム 所属
22. We’re Hiring! 一緒にものづくりできるメンバー募集してます！ © teamLab Inc