ダークモードデザイン:最初のテーマを壊さずに2つ目のテーマを出荷する方法
現場のデザイナーのためのダークモード実践ガイド。本当に機能する色の計算、避けるべきコンポーネントの落とし穴、そして「反転」ではなく「デザインされた」ダークテーマを出荷する方法。
ほとんどのダークモードは、デザインされていません。反転されただけです。デザイナーが背景をほぼ黒にひっくり返し、テキストをほぼ白に染めて、「完成」と言う。その結果できるのは、刺々しく、ライト版より読みにくく、ブランドが「照明を間違えた別のプロダクト」に見えてしまうテーマです。
このペーパーは実践版です。ダークテーマを意図的に見せる色の計算、暗闇で壊れるコンポーネントの落とし穴、プロダクトが成長しても両テーマの同期を保つトークン構造。Dribbble風のグラデーションはありません。デザインシステムの中で、きちんと自分の居場所を獲得するダークテーマだけを扱います。
ダークモードの正体
ダークモードは色の反転ではなく、完全な2つ目のテーマです。 独自のサーフェスのロジック、独自のコントラストルール、独自のタイポグラフィの太さ調整を持ちます。本物のダークモードは、同じコンポーネントセットに対してゼロから設計され、その後、共有トークンを通じてライトテーマと整合させられます。
反転という近道が失敗するのには明確な理由があります。ライトモードは、白いサーフェスが奥行きを上方向に反射することに頼っています。ダークモードではそれを反転できません。純粋な黒のサーフェスは奥行きを生むのではなく吸収してしまうからです。エレベーションのシステム全体を作り直す必要があります。なぜこれが個々のコンポーネントではなくトークンの内側で行われなければならないかは、デザインシステムガイドの解説で扱っています。
2026年にダークモードが重要な理由
理由は3つ。どれも美的な話ではありません。
OLEDディスプレイのバッテリー持ち。 OLEDパネルで黒いピクセルは電力をゼロしか使いません。スマートフォンのダークなインターフェースは、高輝度設定でディスプレイの消費電力を30〜60%削減できます。モバイルユーザーにとって、ダークテーマは見た目の機能である前にバッテリーの機能です。
光に敏感な人のためのアクセシビリティ。 片頭痛、乱視、羞明のあるユーザーは、明るいインターフェースを長時間快適に使えません。ダークモードを出荷することはアクセシビリティへのコミットメントであり、好みの問題ではありません。監査全体の中でテーマ設定がどこに位置づくかは、Webアクセシビリティチェックリストで扱っています。
ユーザーの期待。 OSはOS全体に適用されるダークモードの切り替えを備えています。システム設定を無視するプロダクトは古く感じられます。ユーザーはアプリストアや拡張機能のディレクトリをダークモード対応で絞り込みます。ダークテーマがないことは、単なるUIの欠落ではなくマーケティング上の問題です。
第一のルール:純粋な黒は使わない
純粋な黒(#000000)は、新しいダークモードで最もよくある間違いです。最も暗いサーフェスに思えるので正しく感じます。しかし、人間の目は完全な黒を基準に奥行きを判断できないため、実際には間違って見えます。
解決策は、ほのかにブランドの色相を含んだダークグレーをベースのサーフェスにすることです。ほとんどのプロダクトでは#0B0B10から#121218の範囲、高くても#1A1A1F程度です。正確な値はブランドの色温度によって決まります。暖かいブランドならやや暖かいダーク、冷たいブランドならやや冷たいダークにします。完全なニュートラルは生気なく見えます。
最もコントラストの高いテキストにも同じルールが当てはまります。ダークなサーフェス上の純白(#FFFFFF)はハレーション、つまり明るい縁がにじむ効果を生み、小さな文字を読むと疲れます。テキストを#E8E8EA前後に落とすか、不透明度85〜92%の白を使いましょう。この差は目には見えませんが、可読性には絶大な効果があります。
ダークモードのサーフェスエレベーション
ライトモードでは、カードが背景より上にあることを影で示します。ダークモードでは、影が暗いサーフェスに飲み込まれるため使えません。代わりに、明度でエレベーションを表現します。
エレベーションが1段上がるごとに、サーフェスは暗くではなく明るくなります。 ベースのサーフェスの上にあるカードは、ベースよりわずかに明るい。カードの上にあるモーダルは、さらに明るい。ダークなインターフェースにおける奥行きは、足元に落ちる影ではなく、ユーザーに向かって段々と上がってくるサーフェスのグラデーションとして読み取られます。
Material Designはこれを5段階のエレベーションスケールとして体系化しました。この考え方はどんなデザインシステムにも通用します。ほとんどのプロダクトで使えるスケールは次のとおりです。
| エレベーション | 例 | サーフェスの値 |
|---|---|---|
| 0 | ベースの背景 | #0E0E12 |
| 1 | カード、入力フィールド | #17171C |
| 2 | 浮いたカード、メニュー | #1F1F25 |
| 3 | モーダル、ダイアログ | #28282F |
| 4 | ポップオーバー、ツールチップ | #31313A |
具体的な数値はブランドごとに変わりますが、ロジックは変わりません。浮いたサーフェスはすべて下のものより明るく、影はすべて控えめで、階層はページに描かれた箱ではなく、空間に積み重なったサーフェスとして読み取れます。
ダークテーマのコントラスト計算
コントラスト比の用語集では、通常テキストで4.5対1、大きなテキストで3対1というWCAGの基準を扱っています。ダークモードでもこのルールは緩みませんが、満たし方が変わります。
ライトモードでは、白背景に#222前後の本文テキストでおよそ16対1になります。デザイナーは最低基準を大きく上回る余裕に慣れています。ダークモードはもっとシビアです。#0E0E12の上に#E0E0E0の本文テキストでおよそ13対1。まだ十分強いものの、誤差の許容幅は小さくなります。見た目を柔らかくしようとテキストを#B0B0B0に落とすと、あるセクションが気づかないうちに4.5対1を下回ることがあります。
鉄則は、ダークモードの色の判断をすべてコントラストチェッカーにかけること。テーマごとに一度ではなく、トークンの組み合わせごとに一度です。ベースサーフェス上のテキスト、カード上のテキスト、モーダル上のテキスト、プレースホルダー、無効状態のテキスト、リンクテキスト。それぞれの組み合わせが別々のチェックです。
よくある罠が、ミュートテキストのトークンです。ライトモードでは、白の上の#666のミュートテキストは5.7対1ではっきり読めます。これを反転して#0E0E12の上に#999を置くと、比率は約4.2対1に落ち、WCAG AAを満たしません。反転という近道はアクセシビリティ準拠をひっそり壊し、ほとんどのチームは監査で指摘されるまで気づきません。
ダークモードの色:明度だけでなく彩度も
白い背景では歌うように映えるブランドカラーも、暗い背景では濁って見えたり、ギラついて見えたりすることがよくあります。暗いサーフェスは知覚される彩度を増幅するからです。彩度100%のアクセントは、明るいサーフェスでは自信に満ちて見えます。同じアクセントが暗いサーフェスでは、放射性物質のように見えます。
ルールは、ダークテーマのアクセントカラーの彩度を通常10〜20%下げ、少し明るくすることです。白の上で#3455FFのプライマリボタンは、ダークでは#5C78FFになるかもしれません。同じ色相のファミリーを、新しいコントラスト環境に合わせて調整します。ブランドは引き続きブランドとして読めます。ただ、目が痛くなくなるだけです。
この調整が収まる土台の構造は、カラーパレットの用語集で扱っています。良いダークモードは新しい色を発明しません。同じブランドカラーを、新しいサーフェスの文脈に合わせて調整した並行セットとして出荷します。
暗闇で壊れるコンポーネントの罠
ほとんどのコンポーネントは、ダークモードで少なくとも1つの調整が必要です。調整なしでは完全に壊れるものもあります。典型的な犯人を見ていきましょう。
境界線が主要な区切りになる
ライトモードでは、ごく控えめな影や、ほとんど見えない境界線でコンポーネントを区切ります。ダークモードでは影が消え、ほとんどの境界線も見えなくなります。境界線がコンポーネントの輪郭を定義する主要な道具になり、見え続けるにはライトモードの#EEE程度から、ダークモードの#2A2A30前後まで引き上げる必要があることも多いです。
テストは、ノートPCで明るさ80%でUIを見ること。コンポーネントの輪郭が消え始めたら、ダークテーマの境界線トークンにはもっと明るい値が必要です。
影の役割が逆転する
ライトモードの影は、サーフェスを下へ、奥へ押しやります。ダークモードの影は、サーフェスが上へ、手前へ出てくることを示唆しなければなりません。通常は、ごく控えめに明るいサーフェス(エレベーション)と、見えないほど薄い下側の暗い影を組み合わせて、見た目を主張せずに重みを加えることで実現します。
ダークモードで使える影のペアはこちら。
- 外側:
0 4px 12px rgba(0, 0, 0, 0.5)で要素を地面に定着させる - 内側の上部ハイライト:
inset 0 1px 0 rgba(255, 255, 255, 0.05)で持ち上がった縁を示唆する
組み合わせて使えば、コンポーネントは切り抜かれたものではなく、浮き上がったものとして読めます。単独で使うと、どちらの効果もまったく読み取れません。
無効状態が消える
ライトモードの無効なボタンは、たいてい白の上の彩度を落としたグレーです。同じ処理をダークモードでやると、ボタンがサーフェスに完全に溶け込みます。解決策は、無効状態の不透明度を下げるのではなく上げることです。色あせたグレーに落とすのではなく、浮いたサーフェスの色の上に不透明度40%程度を重ねます。無効状態でも、ボタンとして読めるべきです。ただ非アクティブなだけです。
画像とイラストには専用の処理が必要
白背景で撮影された商品写真は、暗いサーフェス上では壊れて見えます。白い線で描かれたブランドイラストは完全に消えます。画像には専用のダークモード処理が必要です。別アセット、背景の差し替え、慎重に調整したフィルターのいずれかです。これはダークモードを正しく出荷するうえで最もコストのかかる部分であり、ほとんどのチームが切り捨てる部分でもあります。
並行する画像アセットを出荷できないチーム向けの現実的な解決策は、ダークモードですべての画像コンテナに柔らかい背景、#F5F5F7前後に角丸を付けて敷くことです。白背景で撮られた画像は明るいコンテナの上に載り、UIのそれ以外の部分はダークのままです。
入力フォーカス状態にはより高いコントラストが必要
白い背景で機能する青いフォーカスリングは、暗いサーフェスでは存在感を失います。WCAGが求めるfocus-visibleインジケーターについては、フォーカス状態の用語集で扱っています。ダークモードでは、フォーカスリングはライトモードの双子より10〜20%明るく、または太くする必要があることが多いです。アクセシビリティ要件は変わりませんが、それを満たすために見た目の処理を調整しなければなりません。
デュアルテーマのためのトークン構造
CSSの上書きの中に住むダークモードは、いずれドリフトするダークモードです。新しいコンポーネントごとにテーマの扱いが変わり、半年もすれば、プロダクトには互いに喧嘩する3つのテーマ設定パターンが生まれます。
正しい構造はセマンティックトークンです。基本概念はデザイントークンの用語集で扱っています。ダークモードは、トークンが任意ではなく必須であることを証明するユースケースです。
トークンは3つの層で構成します。
第1層:プリミティブ。 生の色の値。color.neutral.900、color.brand.500。意見も文脈もありません。
第2層:セマンティック。 役割ベースの名前。color.surface.base、color.surface.raised、color.text.primary、color.text.muted、color.border.default。各セマンティックトークンはプリミティブを指します。
第3層:テーマ。 テーマごとに1つ、計2つの完全なマップで、各セマンティックトークンがどのプリミティブに解決されるかを決めます。ライトテーマはcolor.surface.baseをcolor.neutral.50にマップします。ダークテーマはcolor.surface.baseをcolor.neutral.900にマップします。
コンポーネントはセマンティックトークンだけを使います。プリミティブを直接参照することも、テーマをハードコードすることもありません。テーマ切り替えがマップを変え、コンポーネントが再描画され、何も壊れません。これは、デザイナー2人のチームを超えてスケールする唯一のパターンです。
システム設定を尊重する
ブラウザはCSSのメディアクエリを通じてprefers-color-schemeを公開しています。プロダクトはこれを尊重しなければなりません。OSレベルでダークモードを有効にしているユーザーのデフォルト体験は、ダークテーマ。以上です。アプリ内のトグルは改良であって、置き換えではありません。
正しい実装のための3つのルール:
初回読み込み時はシステム設定をデフォルトにする。 デザイナーがライトのモックアップを好むからといって、ユーザーのOSの選択をライトテーマで上書きしてはいけません。
ユーザーのアプリ内での選択を保持する。 ユーザーがアプリ内でダークに切り替えたなら、その選択はリフレッシュを越えて残り、リセットされるまでシステム設定に優先します。
「システムに合わせる」オプションを用意する。 OS設定に任せたいユーザーには、その動作に戻る手段が必要です。3状態のトグル(ライト、ダーク、システム)は期待されるパターンであり、デフォルトで出荷すべきです。
ダークモードのテスト
ダークモードのバグは隠れます。コンポーネントはデザインファイルでは問題なく見え、ライトテーマでコードレビューを通り、ユーザーが夜に開いたときだけ表面化するコントラスト不良を抱えたまま出荷されます。テストの規律は徹底的でなければなりません。
輝度テスト。 暗い部屋で、ノートPCの明るさ30%でプロダクトを開きます。消えるもの、にじむもの、不快にまぶしく光るものは、すべてバグとして記録します。これで、控えめすぎる境界線、明るすぎるテキスト、まだ彩度が高すぎるアクセントカラーを捕まえられます。
コントラスト監査。 テーマを変更するたびに、すべてのセマンティックの組み合わせに対して完全なコントラストチェックを走らせます。axe、WAVE、Figma内蔵のコントラストチェッカーといったツールが、目視レビューでは見逃すリグレッションを捕まえます。
スクリーンショット差分。 リリースごとに、主要な画面すべてのライトモードとダークモードのスクリーンショットを撮ります。ビジュアル差分は、ユーザーより先に意図しないテーマのドリフトを暴きます。
実機テスト。 OLEDのスマートフォンは、LCDのノートPCとは暗いサーフェスの描画が異なります。MacBookで完璧に見えるダークモードが、iPhoneではバンディングや荒いトランジションを見せることがよくあります。ブラウザのデバイスエミュレーターだけでなく、実際のスマートフォンでテストしましょう。
ダークモードのよくある失敗
ダークモードの出荷品質の問題の大半は、3つのパターンが原因です。3つとも、上で述べたトークン構造で避けられます。
半分だけ反転したUI。 メインのサーフェスはダークになったのに、埋もれたコンポーネント(モーダル、ツールチップ、マーケティングページ、レガシーな管理画面)はライトモードのまま出荷されている。ユーザーがダークに切り替えると、クリックした途端にプロダクトの半分が白に戻ります。解決策は、プロダクト内のすべてのサーフェスを監査し、画面ごとのテーマ対応状況を追跡するチェックリストを持つことです。
壊れたブランド体験。 プロダクトがダークになるのにマーケティングのランディングページはライトのまま、あるいはその逆。ユーザーの旅の途中でブランドアイデンティティが分断され、プロダクトが2つの会社のように感じられます。解決策は、マーケティングサイトでダークモードを出荷するかどうかを最初に合意することです。どちらの選択も有効ですが、2つのサーフェスは揃っていなければなりません。
アクセシビリティのリグレッション。 ライトモードはWCAG AAに準拠して出荷されるのに、ダークモードは3か所で外れ、コンプライアンス監査まで誰もチェックしない。解決策は、セマンティックトークン層と、CIでの自動コントラストチェックです。すべてのPRでコントラストチェックを走らせ、失敗はマージをブロックします。
トークンからテストまで、ダークモードを第一級のシステムの意思決定として出荷するチームが必要なら、Brainyに依頼してください。ダークモードが難問であることはまれです。難しいのは、ドリフトさせずに2つをペアで出荷することです。
FAQ
純粋な黒はダークモードに最適な背景ですか?
いいえ。純粋な黒(#000000)は白いテキストとの間に刺々しいコントラストを生み、目がエレベーションを読み取るために必要な奥行きの手がかりを奪います。ほのかなブランドの色味を持つダークグレー、通常は#0B0B10から#121218の範囲を使いましょう。ダークなインターフェースの奥行きは、ユーザーに向かって段々と上がるサーフェスとして読み取られるため、純粋な黒ではない出発点のサーフェスが必要です。
影なしでダークモードのエレベーションをどう表現しますか?
ダークモードのエレベーションは、影ではなく明度から生まれます。浮いたサーフェスはそれぞれ下のものよりわずかに明るく、ユーザーに向かって積み重なるサーフェスのグラデーションを作ります。控えめな暗い影とごくかすかな上部ハイライトで効果を補強できますが、主な手がかりはサーフェスの色そのものです。
ダークモードはライトテーマの色を反転するだけでいいですか?
いいえ。反転するとアクセントカラーの彩度が不快なレベルまで上がり、ミュートテキストがWCAGのコントラスト閾値を下回り、影に依存するエレベーションモデルが壊れます。ダークモードは、同じコンポーネントセットに対してゼロから設計された2つ目のテーマであり、その後、共有のセマンティックトークンを通じて整合させます。
ダークモードで画像や写真はどう扱えばいいですか?
白い背景で撮影された画像は、テーマの連続性を壊します。選択肢は、ダークモード用の並行アセットを出荷する、ダークモード時にすべての画像の周りに控えめな明るいコンテナを追加する、フィルターを慎重に適用する、の3つです。イラストには別のダークモード用バリアントが必要になることが多いです。これはダークモードで最もコストがかかり、最もよく省略される部分です。
デュアルテーマ対応のトークンはどう構造化しますか?
3層です。プリミティブ(生の色の値)、セマンティックトークン(color.surface.baseのような役割ベースの名前)、テーママップ(テーマごとに1つ、各セマンティックトークンをプリミティブに解決する)。コンポーネントはセマンティックトークンだけを使うので、テーマ切り替えがマップを変えても何も壊れません。このパターンこそが、ダークモードを小さなチームを超えてスケールさせます。
ダークモードはアクセシビリティを向上させますか?
光に敏感なユーザー、片頭痛や羞明のあるユーザーにとっては、はい。高コントラストのテキストや特定の色覚を必要とするユーザーにとっては、必ずしもそうではありません。ダークモードはアクセシビリティのオプションであって、自動的なアクセシビリティの勝利ではありません。正しく実装されたダークテーマはライトテーマと同じ厳密さでWCAGのコントラストルールを満たし、不十分な実装は満たせません。
ダークモードはトグルではなく、システムの意思決定
1つのテーマと壊れた2つ目のテーマを持つプロダクトは、きれいな1つのテーマだけのプロダクトより劣ります。ダークモードは、ライトテーマと並行する、完全にデザインされ、完全にテストされ、完全にトークン化されたものとして出荷するか、出荷しないかのどちらかです。
まずトークン層を作る。次にコントラストの計算を回す。すべてのエレベーション、すべてのコンポーネント、すべての画像コンテナに対してダークテーマをデザインする。実機で低輝度でテストする。両方のテーマを一緒に出荷するか、どちらも出荷しないか。
ダークモードを好みのトグルではなくシステムレベルのコミットメントとして扱う、ブランド、Web、UIの仕事が必要なら、Brainyに依頼してください。2つのテーマ、1つのプロダクト、一貫した1つのデザイン上の意思決定。
関連記事
Want a product that ships dark mode as a system decision instead of a last-minute toggle? Brainy builds brand, web, and UI with both themes wired into the tokens from day one.
Get Started
