こんにちは！UIデザイナーのYunyです。
- 自分のプロダクトやWebサイトにダークモードを用意すべきか判断に迷っている方
- ダークモードのメリット・デメリットを客観的に整理し、チームやクライアントに説明したい方
- FigmaのVariablesを使った破綻しない変数設計や、実務で役立つ便利プラグインを知りたい方
数年前からOSやアプリで標準機能となったダークモード。
「とりあえず流行っているから」「今っぽく見えるから」という理由で、導入を検討したことのある方も多いのではないでしょうか。
しかし、単に背景を黒にして文字を白に反転させただけでは、コントラストがきつくて目が疲れたり、カードやモーダルの重なりが見えなくなってしまいます。
また、運用のルールを決めずにコンポーネントを別々に作ってしまうと、デザイン修正のたびに二重のメンテナンス工数がかかってしまいます。
ダークモードはすべてのサービスに無条件で必要な機能ではありません。
この記事では、そもそもダークモードを用意すべきかを見極める「3つの導入基準」から、実務でのメリット・デメリット、Figma Variablesを活用した破綻しない変数設計、制作を効率化するプラグインまでを体系的にまとめました。
ダークモードは夜間や暗所で使われるアプリ、動画・画像・コードなどを長時間集中して扱うツールに導入価値があります。設計時は真っ黒を避けてダークグレーを基調とし、影ではなく「面の明るさ」で段差を作り、Figmaの変数（Variables）で色を一元管理するのが破綻を防ぐポイントです。
- 1. そもそもダークモードは用意すべき？「導入基準」の3つの判断軸
- 基準①：利用シーンと時間帯（暗所・夜間に使われるか？）
- 基準②：コンテンツの性質（写真・映像中心か、長文・ECか？）
- 基準③：デザインシステムの運用リソース（2重管理を許容できるか？）
- 2. ダークモードは本当に目に優しい？知っておくべきメリット・デメリット
- 3. 「読みにくい・平坦」を防ぐ！ダークモード配色の4大設計ルール
- ルール①：ベース背景は純黒（#000000）を避け「ダークグレー（#121212〜#181818）」を敷く
- ルール②：影の代わりに「サーフェス明度（Elevation）」と「極細半透明ボーダー」で階層化する
- ルール③：テキスト色は純白（#FFFFFF）を避け、不透明度で階層化する
- ルール④：アクセントカラーの彩度を落とし、暗闇でのギラつきを抑える
- 4. Figma Variablesで構築する「破綻しない2層変数（トークン）設計」
- PrimitiveとSemanticのシンプルな2層トークン構造
- Variablesの「Mode」機能を使った設定手順
- 5. 実務がスムーズに進む！ダークモード設計におすすめのFigmaプラグイン4選
- ① Appearance
- ② Dark Mode Magic
- ③ Stark（コントラスト・アクセシビリティチェック）
- ④ Tokens Studio for Figma
- 6. まとめ：ダークモードは「目的」ではなく「ユーザーへの配慮」
- 終わりに
1. そもそもダークモードは用意すべき？「導入基準」の3つの判断軸
ダークモードの設計に入る前に、まず考えるべきは「そのサービスに本当にダークモードが必要なのか」という根本的な問いです。
ユーザーの利用シーンやコンテンツの特性に合っていない場合、多大な工数をかけて実装しても、使われないどころかUXを損ねてしまうリスクがあります。
導入の是非を判断する際は、以下の3つの基準でサービスの性質を客観的に照らし合わせてみてください。
基準①：利用シーンと時間帯（暗所・夜間に使われるか？）
ユーザーがその画面を「どんな環境で開くか」は、最もわかりやすい判断材料です。
寝室や夜間の移動中、照明を落とした室内で使われるサービスであれば、ダークモードの眩しさ低減効果が大きく活きます。
SNS、動画配信アプリ、チャットツール、電子書籍リーダーなどは夜間の利用頻度が高いため、優先して対応すべき領域と言えます。
一方で、オフィスの明るい照明下でしか使われないBtoBの経理システムや、日中の閲覧がメインのコーポレートサイトでは、ダークモードの需要はそこまで高くありません。
基準②：コンテンツの性質（写真・映像中心か、長文・ECか？）
画面の中に配置されるメインコンテンツの種類によっても、向き不向きがはっきりと分かれます。
写真、映像、色分けされたデータグラフ、プログラムのコードなどは、暗い背景に置くことで周囲の光に邪魔されず、要素そのものが引き立ちます。
しかし、長文テキストをじっくり読ませるオウンドメディアや、商品の色味・質感を正確に確認する必要があるアパレル・食品のECサイトでは注意が必要です。
暗い背景に白い文字をぎっしり並べると、人間の眼球はピントを合わせにくくなり、読解スピードが低下することが知られています。
また、ECサイトで服の色味が背景の暗さで誤認されてしまうと、購入後の返品やトラブルに繋がりかねません。
基準③：デザインシステムの運用リソース（2重管理を許容できるか？）
見落とされがちですが、デザイナーやエンジニアの運用工数も極めて現実的な判断基準です。
ダークモードを用意するということは、カラーパレット、コンポーネント、アイコン、画像アセットを2つのテーマ分メンテナンスし続けることを意味します。
新規施策や機能追加のたびに「ライトとダークの両方で破綻していないか」をレビューする工数が恒常的に発生します。
専任のUIデザイナーやデザインシステム管理者がいない小規模チームでは、無理にダークモードを導入するよりも、ライトモードの使い勝手を磨き込む方にリソースを集中させる方が結果的に良いプロダクトになります。
2. ダークモードは本当に目に優しい？知っておくべきメリット・デメリット
チーム内でダークモードの導入を検討する際は、感覚的な好悪ではなく、客観的なメリットとデメリットを共通認識として持っておくことが重要です。
「ダークモードは目に優しい」というイメージが広く浸透していますが、視覚人間工学や眼科学の観点からは「暗い環境での眩しさを抑える点では目に優しいものの、明るい場所や長文読解ではかえって目が疲れやすくなる」というのが客観的な事実です。
暗い背景に白い文字を表示すると、周囲の光を取り込もうとして瞳孔が開き気味になり、光の屈折で文字の輪郭が滲んで見える「ハレーション現象」が起こります。特に乱視傾向のあるユーザーの場合、白文字がぼやけて焦点が合いにくくなり、長時間のテキスト閲覧では眼精疲労に繋がりやすくなります。
海外の人間工学研究やNielsen Norman Group（NN/g）の調査レポートでも、白背景に黒文字（ポジティブ表示）の方が文字の誤読が少なく読解速度が速いことが実証されています（参考：Dark Mode vs. Light Mode: Which Is Better? – Nielsen Norman Group）。
そのため、ダークモードを導入する際は「すべてのユーザーにとって目に優しい万能のモードではない」という前提を理解した上で、メリットとデメリットを天秤にかける必要があります。
それぞれのメリットとデメリットを対比して整理しました。
| 評価軸 | メリット（利点） | デメリット（課題・リスク） |
|---|---|---|
| 視覚体験・可読性 | 暗所での強い発光（眩しさ）を抑え、目の刺激を和らげる | 明るい日中や屋外では画面に周囲が映り込み、文字が読みにくくなる |
| コンテンツ表現 | 写真、映像、グラフ、シンタックスハイライトが鮮やかに際立つ | 長文読解では瞳孔が開き気味になり、白文字が滲んで読解速度が落ちる |
| バッテリー性能 | 有機EL（OLED）端末では黒画素が消灯するため、消費電力を節約できる | 液晶（LCD）端末ではバックライトが常時点灯するため、節電効果はほぼゼロ |
| 制作・運用コスト | ユーザーに環境に合わせた閲覧の選択肢を提供できる | カラーやコンポーネントの管理工数が2倍になり、ロゴや透過画像の調整が必要 |
※バッテリーの節電効果についても、パーデュー大学（Purdue University）の実測研究において、液晶（LCD）では効果がなく、有機EL（OLED）端末でも画面輝度を高めに設定している環境で約39〜47%の節電効果が確認される一方、通常の明るさでは3〜9%程度の差にとどまることが報告されています（参考：Dark mode may not save your phone’s battery life as much as you think, but there are a few silver linings – Purdue University ECE）。
このように、ダークモードは万能の正解ではなく、「暗い環境で特定の作業に集中する」という目的に特化したモードです。
屋外や明るい照明下ではかえって視認性が落ちることもあるため、利用環境に応じた使い分けを前提として捉えておく必要があります。
3. 「読みにくい・平坦」を防ぐ！ダークモード配色の4大設計ルール
ダークモードの導入を決めた後、多くのデザイナーがつまずくのが「配色の設計」です。
単に白を黒に、黒を白に機械的反転させただけでは、文字がギラついて目がチカチカしたり、カードの重なりが見えなくなって画面全体が真っ平らに沈んでしまいます。
洗練された視認性の高いダークUIを組むために、現場で役立つ4つの配色ルールをご紹介します。
※本セクションで紹介するカラーコードや不透明度の数値は、Google Material Design（Dark themeガイドライン）をベースにした代表的な参考値（ベースラインの一例）です。自社プロダクトのブランドカラーや世界観に合わせて柔軟に調整してください。
ルール①：ベース背景は純黒（#000000）を避け「ダークグレー（#121212〜#181818）」を敷く
画面の一番底に敷くベース背景には、純黒（#000000）ではなく、ごくわずかに明度を持たせたダークグレー（#121212 や #181818 など）を敷くのが実務的なアプローチです。
純黒を敷いてしまうと、その上にある文字とのコントラスト比が最大値（21:1）に達してしまい、白文字の周りが発光して見えるハレーション（光背現象）を引き起こしやすくなります。
さらに、背景を真っ黒に塗りつぶすと、より深い影（ドロップシャドウ）を落とすための「暗さの余白」が消滅してしまいます。
ベースに一段淡いグレーを敷いておくことで、奥まった窪みやシャドウを表現する余地を残すことができます。
ルール②：影の代わりに「サーフェス明度（Elevation）」と「極細半透明ボーダー」で階層化する
ライトモードでは、カードやモーダルなどの浮遊感を「ドロップシャドウ（黒い影）」で表現するのが一般的でした。
しかし暗い背景の上では、黒い影を落としても背景と同化してしまい、要素の前後関係がまったく見えなくなります。
ダークモードでは、影の代わりに「手前にある要素ほど背景色を段階的に明るくする（Elevation Surfaces）」というルールで奥行きを作ります。
物理的な光源が上部にある空間では、手前（高い位置）にある板ほど光を反射して明るく見えるという知覚現象を模倣した手法です。
- Base（最下層背景）:
#121212（参考値） - Surface Level 1（カード・リスト面）:
#1E1E1E（参考値） - Surface Level 2（ドロップダウンメニュー）:
#252525（参考値） - Surface Level 3（モーダルダイアログ）:
#2C2C2C（参考値）
さらに、カードの周囲に rgba(255, 255, 255, 0.08) 程度の「ごく薄い1pxの半透明ボーダー」を添えると、明度差だけに頼らず輪郭がキリッと引き締まり、視認性が大幅に向上します。
ルール③：テキスト色は純白（#FFFFFF）を避け、不透明度で階層化する
背景をダークグレーにしたとしても、テキストに純白（#FFFFFF）を100%で当ててしまうと、依然としてコントラストが強すぎて眼精疲労の原因になります。
GoogleのMaterial Designでも推奨されている通り、テキスト色は固定のグレーではなく、白の「不透明度（Opacity / Alpha）」を使って階層化するのが実務的です。
- High Emphasis（見出し・主要本文）:
rgba(255, 255, 255, 0.87)（87%） - Medium Emphasis（補足テキスト・ラベル）:
rgba(255, 255, 255, 0.60)（60%） - Disabled（非活性・プレースホルダー）:
rgba(255, 255, 255, 0.38)（38%）
不透明度で色を定義しておくことで、背面のサーフェスが一段明るいカードになっても、テキストが自然に背景色と馴染み、コントラスト比のバランスが自動で保たれます（固定のグレーを指定してしまうと、背景の明度変化によって文字のコントラストがブレてしまいます）。
ルール④：アクセントカラーの彩度を落とし、暗闇でのギラつきを抑える
ライトモードで使用していた鮮やかな青や緑（プライマリカラー）をそのままダークモードに持ってくると、黒背景の上でネオンサインのように強く浮き上がって見えます。
暗い背景の上では、人間の目は色をより鮮やかに知覚する傾向があるためです。
ダークモード用のアクセントカラーは、ライトモードのカラーから「彩度（Saturation）を10〜20%落とし、明度（Lightness）をわずかに引き上げる」のが基本です。
例えばライトモードで #2563EB（鮮快なブルー）を使っている場合、ダークモードでは #60A5FA（少し淡く明るいブルー）を指定することで、眩しさを抑えつつ十分なアクセント効果を発揮できます。
アクセントカラーや色の濁りを防ぐ知覚色空間の調整については、グラデーションの配色ルールを解説した以下の記事でも詳しく紹介しています。
4. Figma Variablesで構築する「破綻しない2層変数（トークン）設計」
配色のルールが定まったら、それをFigma上でどう実装・管理していくかが次のステップです。
スタイル（Styles）を複製して「Button-Dark」のように別コンポーネントを量産する手法は、修正時の手戻りが多すぎて実務では耐えられません。
FigmaのVariables（変数）機能とMode（モード）を活用すれば、ひとつのコンポーネントのまま、ワンクリックでライトとダークを切り替えられる破綻しない基盤が作れます。
PrimitiveとSemanticのシンプルな2層トークン構造
変数設計で最も重要なのは、「生の色（Primitive）」と「UI上の役割（Semantic）」をしっかりと分離することです。
- Tier 1：Primitiveトークン（生の値）
カラーパレットそのものを保持する階層です。画面上の意味を持たせず、色の名前と濃淡スケールで登録します。
例：_primitive/neutral/50（#F8FAFC）、_primitive/neutral/900（#0F172A） - Tier 2：Semanticトークン（役割と意味）
UIコンポーネントに実際に適用する階層です。Primitiveの値を参照（エイリアス）して登録します。
例：surface/default、surface/card、text/primary、border/subtle
UIパーツには必ずSemanticトークンを割り当てます。
デザイナーが直接Primitiveを選べないよう、Primitiveコレクションには先頭に `_`（アンダースコア）をつけてライブラリ非公開にしておくのが運用のコツです。
Variablesの「Mode」機能を使った設定手順
FigmaでLightとDarkの2つのモードを設定する手順は非常にシンプルです。
- コレクションにMode列を追加:
変数パネルでSemanticコレクションを開き、右上の「+」ボタンからモード列を2つ作成します（名前を「Light」「Dark」に設定）。 - モードごとの参照先（エイリアス）を指定:
例えばsurface/defaultという変数に対し、Light列には `_primitive/neutral/white`、Dark列には `_primitive/neutral/900` をそれぞれ紐付けます。 - テキストやボーダーも同様に対応付け:
text/primaryに対して、Light列には濃いグレー（`_primitive/neutral/900`）、Dark列には白の不透明度87%（`_primitive/white/87`）を割り当てます。 - フレーム側でModeを切り替える:
デザインフレームを選択し、右サイドパネルの「Layer」セクションにある変数アイコンから「Change variable mode ➔ Dark」を選択します。
この設定を一度組んでおけば、フレーム内の全コンポーネントが一瞬でダークモード配色へ適応されます。
画面を二重に作成する必要がなくなるため、レイアウト修正や文言変更の工数が半減します。
Variablesの命名規則やトークン設計の基礎をより体系的に学びたい方は、以下の完全ガイドもぜひ参考にしてみてください。
5. 実務がスムーズに進む！ダークモード設計におすすめのFigmaプラグイン4選
ダークモードの設計を手動ですべて行おうとすると、コントラスト比の計算や色の反転作業に多くの時間が取られてしまいます。
実務で役立つ便利なFigmaプラグインを4つ厳選しました。目的に応じて使い分けてみてください。
① Appearance
カラースタイルの命名規則（名前の中に [day] と [night] を含めるルール）をもとに、選択したUIパーツの配色を一括でライト／ダークへ反転・切り替えてくれるプラグインです。
コンポーネントを複製して別々に作ることなく、既存のスタイルを保ったまま配色の見え方を瞬時にスイッチして検証したいときに役立ちます。
② Dark Mode Magic
選択したフレームの色構成を自動解析し、明暗を反転させたダークモード画面を手早く自動生成してくれるプラグインです。
背景色、テキスト色、ボーダーの明度を推測して変換してくれます。
完全な完成形には手動の微調整が必要ですが、「とりあえずダークモードにしたときの全体的な見え方を瞬時に確認したい」という初期ブレストの段階で非常に作業時間を短縮できます。
③ Stark（コントラスト・アクセシビリティチェック）
ダークモード設計において最も神経を使う「WCAGコントラスト基準（4.5:1以上）」をリアルタイムで検査できるアクセシビリティツールです。
レイヤーを選択するだけで、背景色と文字色のコントラスト比が基準を満たしているかを即座に判定してくれます。
「見た目は格好いいけれど、実は文字の視認性が不足していた」という手戻りをデザイン段階で確実に防止できます。
④ Tokens Studio for Figma
Figma Variablesよりもさらに高度なトークン管理を行いたい場合や、開発チームとのJSON連携を本格化させたいプロジェクトで重宝するプラグインです。
Light/Darkテーマのトークン構造をJSON形式でGitHubリポジトリと直接同期できるため、エンジニアの実装コードとデザインデータを完全に一致させることができます。
大規模なデザインシステムを運用している中〜大規模プロダクトに向いています。
6. まとめ：ダークモードは「目的」ではなく「ユーザーへの配慮」
ダークモードは、単に画面を黒くして見た目の印象を変えるための装飾ではありません。
暗い環境で作業するユーザーの目の疲労を和らげ、コンテンツへの集中を支えるための「機能的な選択肢」です。
- 導入基準を見極める: 夜間利用が多いか、写真・コード中心かなど、利用シーンに合致しているかを冷静に判断する。
- 配色のルールを守る: 純黒を避け、サーフェス明度で階層を作り、テキストは不透明度でコントラストを緩和する。
- Variablesとプラグインで仕組み化する: PrimitiveとSemanticの2層構造を組み、プラグインで検証・変換工数を削減する。
そして最も重要なのは、「ユーザーに選択の自由を残すこと」です。
OSの設定に合わせて自動適用するだけでなく、画面内のトグルスイッチなどでユーザー自身がライトとダークをいつでも手動で切り替えられるUIを用意しておくことが、最も親切で誠実なUX設計につながります。
まずは自社のサービスでダークモードが本当に求められているかを振り返り、必要な場面で破綻のない美しいダークUIを組み立ててみてください。
ダークモードのVariables運用とあわせて、ボタンや入力フォームの肥大化を防ぐコンポーネント設計術については、以下の記事で詳しく解説しています。
終わりに
最後までお読みいただき、ありがとうございました！
それでは、良いデザインライフを！
