ダークモードでイラストが消える？Web UIを壊さないSVG設計と配色ルール
現在のWebサイトやアプリケーションにおいて、OSの設定に連動する「ダークモード（Dark Mode）」の対応はUI/UXデザインの必須要件となりました。
しかし、Webのコーディング現場で頻発しているのが、「ライトモードでは綺麗に見えていたイラストが、ダークモードに切り替わった瞬間にUIを破壊してしまう」というトラブルです。
本記事では、フロントエンドエンジニアやUIデザイナーに向けて、ダークモード切り替え時に事故を起こさないための、Web特化型イラストの正しいSVG設計術と、色彩理論に基づいた配色ルールを解説します。
PNG画像が引き起こす、ダークモード時の「2つの悲劇」
Web知識のないイラストレーターから納品されたラスター画像（PNGなど）をそのまま実装すると、以下の問題が確実に発生します。
- 「白浮き」現象
背景が透過されていないJPGや、背景を白で塗りつぶしたPNGを使用すると、ダークモードの黒い背景の中で、イラストだけが「白い四角いブロック」として強烈に浮いてしまい、サイトの洗練されたトンマナが一瞬で崩壊します。 - 「線画の消失」
では背景を透過（透過PNG）すればいいかというと、今度は「黒で描かれた線画や文字」が、ダークモードの黒背景と同化してしまい、何が描いてあるか全く見えなくなってしまいます。
UIの破綻を防ぐ「Web特化型イラスト」の設計条件
ダークモードにしなやかに追従するWebサイトを作るためには、実装を理解し、CSSと連携できるデータを作れるイラストレーターの存在が不可欠です。
1. CSS変数（カスタムプロパティ）に連動するSVGの構築
静的な画像（PNG）ではなく、コードとして制御可能な「SVGデータ」でイラストを構築します。
Webを理解するクリエイターは、SVG内のパスの塗り（fill）や線（stroke）の色を直接指定するのではなく、CSSのvar(--primary-color)のように変数で受け取れるよう、フロントエンドエンジニアと連携してデータを出力します。
これにより、prefers-color-scheme（メディアクエリ）を用いた1行のCSSで、イラストの色を完全に反転・制御させることが可能になります。
2. 色彩検定2級の視点：明度反転に耐えるアースカラーの選定
「黒を白に反転させる」だけでは、美しいダークモードは作れません。 色彩検定などの体系的な知識を持つプロは、ライトモードとダークモードの両方で「コントラスト比（視認性）」が保たれるカラーパレットを初期段階で設計します。彩度の高すぎる原色はダークモード時にハレーション（目がチカチカする現象）を起こすため、ほうじ茶色（ライトブラウン）やミュートトーンのアースカラーを巧みに使い、どちらのモードでも目に優しく、洗練された「抜け感」を維持します。
3. 「光」を意識したレイヤーの論理的分割
ダークモードは単なる「色の反転」ではなく、「光の当たり方の変更」としてデザインするとよりリッチなUXになります。 人物、ベースの背景、そして「光のハイライト」をそれぞれ別のレイヤーとしてSVGを分割納品することで、エンジニアは「ダークモード時だけ背景の不透明度を下げて、ハイライトの透過モードを変える」といった高度なCSSチューニングを簡単に行うことができます。
FAQ：ダークモード対応・SVGイラストに関するよくある質問
Q. すでに納品済みのPNGイラストを、ダークモード対応のSVGに変換・清書してもらうことは可能ですか？
A. はい、大歓迎です。過去のイラスト資産（PNGや手書きラフ）をベースに、Web実装に最適化されたクリーンなSVG（ベクターデータ）としてトレースし、ダークモード用の配色ルールを再設計して納品する「データ清書サービス」を行っております。
Q. SVGのアニメーション（Lottie）にもダークモードは対応できますか？
A. 可能です。LottieのJSONデータを出力する際にも、カラープロパティを外部から制御しやすい構造でパスを整理し、エンジニア側で動的に色を変更できる持続可能なデータとして納品いたします。
Q. サイト全体のダークモード用のカラーパレット設計から相談できますか？
A. もちろんです。イラスト単体だけでなく、UIデザインの観点から、サイト全体のアクセシビリティ（コントラスト比の基準）を満たす美しいカラースキームのご提案も可能です。
まとめ：UIの切り替えに追従する次世代のWebイラストを
イラストがWebサイトの足を引っ張る時代は終わりました。
デザインの美しさと、フロントエンドの実装要件（CSS制御）を高い次元で融合させることが、ユーザーに選ばれる最高のUXを生み出します。
「ダークモードで事故らない、CSSで制御可能な美しいSVGデータが欲しい」 そんなフロントエンドエンジニア様、UI/UXデザイナー様は、ぜひINOHARU DESIGN LABにご相談ください。
Webの実装仕様と色彩理論を熟知したプロが、貴社のプロダクトのUIに完璧に調和するデータをご提供します。