UIデザインの配色は、ボタンやアクセントカラーばかりに目が向きがちです。
しかし、実際の画面を見渡すと、面積の60%以上を占めているのは背景やカード、枠線、テキストといったグレー（無彩色）の要素です。

過去の自分も、画面内のグレーをカラーピッカーでその場しのぎに選んでいました。
その結果、画面内に20種類以上のグレーが乱立し、カードの境界が背景に埋もれたり、文字の視認性が落ちて開発現場への引き渡しで大きな手戻りを経験しました。

今回は、画面を濁らせずに美しく整理するためのUIグレー設計の原則と4層の明度ステップを解説します。
感覚的な色選びから脱却し、誰が見ても破綻しない配色ロジックを身につけていきましょう。

1. なぜUIのグレー選びは失敗しやすいのか？画面が散らかる2つの原因

UIデザインにおいて、グレーは最も使用頻度が高いにもかかわらず、最も破綻しやすい要素です。
画面の統一感が損なわれる背景には、設計段階における明確な2つの原因が存在します。

原因①：感覚的なカラーピッカー選択によるグレーの増殖

1つ目の原因は、新しいコンポーネントを作るたびにカラーピッカーで感覚的にグレーを拾ってしまうことです。
「この枠線は少し薄くしたい」「この文字は少し濃くしたい」と場当たり的に数値を調整すると、プロジェクト全体で無数のグレーが乱立します。

自分自身の失敗談としても、エンジニアから「この枠線とあの枠線で微妙にカラーコードが違うが、どちらが正しい仕様なのか」と指摘された経験があります。
ルールがないまま選ばれたグレーは、デザインシステムの保守性を著しく低下させ、実装現場の手戻りを生む要因になります。

原因②：彩度0%の「無機質なグレー」による画面のくすみ

2つ目の原因は、完全な無彩色（RGBの値がすべて等しい彩度0%のグレー）を使ってしまうことです。
白背景の上に彩度0%の純粋なグレーを置くと、人間の目には冷たく不自然に映り、画面全体がくすんで見える現象が起きます。

自然界や日常の印刷物において、純粋な無彩色はほとんど存在せず、周囲の光や環境の色を微細に反射しています。
デジタル画面上でも、周囲のブランドカラーと全く関係を持たない無彩色は反発し合い、洗練された印象を損ねてしまうのです。

2. 洗練されたUIを作る「グレー設計の3原則」

画面のくすみを防ぎ、破綻しない配色を作るためには、感覚ではなく論理に基づいたルールが必要です。
実務で即座に活用できるグレー設計の3原則を押さえておきましょう。

原則①：ブランドカラーの「色味（Tint）」をわずかに加える

グレーを設計する際は、完全な無彩色を避け、ブランドカラーの彩度を2%〜5%程度混ぜた色味のあるグレー（Tinted Gray）を採用します。
ブルー系のサービスであれば青みを帯びたスレートグレー、温かみのあるサービスであれば暖色を含んだストーン系を選ぶのが基本です。

わずかな色味を含めることで、主要ボタンやブランドアイコンと背景・枠線が自然に馴染みます。
画面全体に上質な一体感と奥行きが生まれ、プロダクト固有のトーン＆マナーを無彩色エリアからも表現できます。

原則②：「真っ黒（#000000）」を避け、濃紺・チャコールで止める

テキストの最も濃い色として、背景の白（#FFFFFF）に対して真っ黒（#000000）を配置することは推奨されません。
コントラスト差が極端すぎると、文字のエッジがチカチカとして視覚的な疲労を引き起こし、長時間の閲覧に適さないUIになってしまいます。

実務では、最も濃いテキストであっても、明度10%〜15%前後の濃紺やチャコールグレーを上限にします。
十分な可読性を維持しながら、画面全体のコントラストを柔らかく整え、目への刺激を抑えた読みやすいレイアウトを実現できます。

原則③：1画面で同時に使うグレーの役割を制限する

画面内で同時に使用するグレーは、無制限に増やさず、あらかじめ役割ごとにステップ数を固定します。
背景、カード面、境界線、テキストの各役割に対して、明確な明度差を確保して運用します。

隣接する要素同士で明度が近すぎると、境界線がぼやけて要素の分離が難しくなります。
役割ごとに階層を厳格に割り振ることで、誰が画面を見ても直感的に情報の境界を判別できる状態を作ることができます。

3. 破綻しない「4層の明度ステップ」と役割分担

UIの無彩色は、画面の奥行きと情報の優先度に応じて4つの階層に分類できます。
この4層の明度ステップを明確に分けることで、迷いのないUI構造を構築できます。

第1層：Background（背景色 / 最明ステップ）

第1層は、画面全体の下地となるキャンバスの背景色です。
真っ白ではなく、わずかに色づいた淡いペールトーン（ペールブルーや淡いスレートグレーなど）を配置します。

この淡い背景色を用意することで、その上に乗る白いカード領域が際立ちます。
画面全体に落ち着いたトーンを敷くことが、次層のカードを浮き立たせるための土台になります。

第2層：Surface（面・カード / ピュアホワイト）

第2層は、情報コンテンツを乗せるカードやコンテナの面領域です。
背景色の上に配置するサーフェスには、基本的にピュアホワイト（#FFFFFF）を採用します。

淡い背景色と白い面の明度差によって、枠線に頼らなくても直感的なグルーピングが成立します。
ユーザーの視線が自然とコンテンツ面に集まり、情報のまとまりを一瞬で把握できる視覚階層が完成します。

第3層：Border & Divider（枠線・境界線 / 中明度ステップ）

第3層は、カードの外枠やテーブルの行を分ける仕切り線の領域です。
枠線はコンテンツの邪魔をしてはならないため、主張しすぎない中明度のグレーを選定します。

実務での目安として、隣接する面に対してコントラスト比1.2〜1.5:1程度の薄い線（線幅1px程度）を推奨します。
背景と同化して消えてしまわない視認性を保ちつつ、画面のノイズにならない端正な輪郭を定義します。

第4層：Text & Icon（文字・記号 / コントラスト確保ステップ）

第4層は、情報をユーザーへ正確に伝えるテキストとアイコンの領域です。
文字情報の中核を担うため、アクセシビリティ基準を満たす十分なコントラスト比を確保します。

実務では、以下の3段階に分類して明度をコントロールします。

• Primary（主要見出し・本文）: 濃紺チャコールで最も濃く設計し、WCAG 4.5:1以上の高コントラストを確保
• Secondary（補足テキスト・メタ情報）: 中明度グレーで優先度を一段落とし、3:1〜4.5:1程度で設計
• Disabled（非活性・プレースホルダー）: 意図的にコントラストを下げ、操作不能な状態を直感的に伝達

4. Figma Variablesで組むニュートラルトークン実践手順

整理した4層のグレーをプロダクト全体で一貫して運用するには、デザインシステムとしてのトークン化が不可欠です。
FigmaのVariables（変数）を活用した2層トークン構造の実践手順を解説します。

手順①：Primitive Tokens（基本値）のスケール定義

まずは、純粋な色の物差しとなるPrimitive Tokens（プリミティブトークン）を定義します。
Gray-50からGray-900まで、明度ステップを段階的に9〜10段階で並べたパレットを作成します。

この段階では「ボタン用」「テキスト用」といった用途は考えず、均等な明度のグラデーションを客観的に並べます。
ブランドカラーの青みを数パーセント混ぜた独自のカラースケールを固定することで、デザインの基礎パレットが確立します。

手順②：Semantic Tokens（役割）へのマッピング

次に、実際のコンポーネントへ適用するSemantic Tokens（セマンティックトークン）を作成します。
Primitive Tokensで定義した数値を、画面上の「役割（意味）」に紐付けてマッピングします。

実務で基本となる代表的なマッピング例は以下の通りです。

• bg/canvas: 背景色として「Gray-50」を指定
• surface/card: コンテンツ面として「#FFFFFF」を指定
• border/default: 標準の枠線として「Gray-200」を指定
• text/primary: 主要テキストとして「Gray-900」を指定
• text/secondary: 補足情報として「Gray-600」を指定
• text/disabled: 操作不能テキストとして「Gray-400」を指定

直接カラーコードを入力せず、Semantic変数を介してスタイルを当てる設計を徹底します。
将来的にダークモードへ対応する場合や、ブランドリニューアルの際にも、トークンの参照先を変更するだけで画面全体を一括更新できる柔軟性が得られます。

実践例：デザペディアの配色構造から学ぶ背景とボックスの関係

自社メディア「デザペディア」の実際のUI構造でも、この明度ステップの考え方を厳格に適用しています。
デザペディアでは、記事本文エリアを含むページ全体の背景色に淡いブルー（#F5F7FF）を採用しています。

そのため、記事内で要約や補足情報をグルーピングするボックス（サーフェス）を配置する際は、背景と同化しないよう真っ白（#FFFFFF）を敷き、自然なドロップシャドウやごく薄いボーダーを添えて階層を分離しています。
淡い下地と白いボックスの明度差を論理的に設計することで、画面のノイズを抑えながら、読者の視線を重要コンテンツへスムーズに誘導できる視覚階層を担保しています。

次のステップ：あわせて深掘りしたい知見

UIのグレー設計を確立した後は、カラーパレット全体の比率や、カードコンポーネントへの落とし込み、アクセシビリティ基準の検証へとステップを進めましょう。
実務で直結する以下の関連記事もあわせて確認してみてください。

UI全体のカラーバランスを見直し、無彩色のベースカラーとアクセントカラーの調和を保ちたい方へ。

【60-30-10の法則】アクセントカラーの使いすぎを防ぐUI配色の黄金比率

UIデザインでアクセントカラーを使いすぎて画面が散らかる原因と解決策を解説。「60-30-10の法則」をUI構造に落とし込み、破綻しない配色設計を網羅します。

今回設計したグレーの背景・面・枠線を活用し、美しいカードコンポーネントを組むレイアウト術を知りたい方へ。

カード型UIの設計ルール｜枠線・影・余白の使い分けと情報整理術

カード型UIの設計ルールと情報整理のコツを現役デザイナーが解説。枠線・影・背景色・余白の境界線4パターンの使い分けから、詰め込みすぎを防ぐ視覚階層まで具体的に整理します。

テキストやアイコンのグレーがWCAG基準を満たしているか、視認性と美しさを両立させる判定基準を深掘りしたい方へ。

UIアクセシビリティ基礎｜コントラスト比4.5:1とデザイン性の両立ルール

コントラスト比4.5:1を守りながら洗練されたUIを作るための実践ルール。WCAG 2.2基準と美しい色設計を両立させる具体的な手法を解説します。

終わりに

最後までお読みいただき、ありがとうございます！

UIデザインにおいて、グレーは単なる「色味のない隙間埋め」ではありません。
情報の優先順位を整理し、ユーザーを迷わせずに導くための最も重要な骨格です。

感覚的なカラーピッカーの指定をやめ、4層の明度ステップとわずかな色味（Tint）を味方につけるだけで、画面の洗練度は格段に向上します。
まずは手元のプロジェクトで、散らばっているグレーを整理し、整然としたニュートラルトークンを構築してみてください。

The post UIのためのグレー配色ルール｜背景・枠線・文字の破綻しない明度設計 first appeared on デザペディア.

数年前からOSやアプリで標準機能となったダークモード。
「とりあえず流行っているから」「今っぽく見えるから」という理由で、導入を検討したことのある方も多いのではないでしょうか。

しかし、単に背景を黒にして文字を白に反転させただけでは、コントラストがきつくて目が疲れたり、カードやモーダルの重なりが見えなくなってしまいます。
また、運用のルールを決めずにコンポーネントを別々に作ってしまうと、デザイン修正のたびに二重のメンテナンス工数がかかってしまいます。

ダークモードはすべてのサービスに無条件で必要な機能ではありません。
この記事では、そもそもダークモードを用意すべきかを見極める「3つの導入基準」から、実務でのメリット・デメリット、Figma Variablesを活用した破綻しない変数設計、制作を効率化するプラグインまでを体系的にまとめました。

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）。

そのため、ダークモードを導入する際は「すべてのユーザーにとって目に優しい万能のモードではない」という前提を理解した上で、メリットとデメリットを天秤にかける必要があります。

それぞれのメリットとデメリットを対比して整理しました。

※バッテリーの節電効果についても、パーデュー大学（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（少し淡く明るいブルー）を指定することで、眩しさを抑えつつ十分なアクセント効果を発揮できます。

アクセントカラーや色の濁りを防ぐ知覚色空間の調整については、グラデーションの配色ルールを解説した以下の記事でも詳しく紹介しています。

グラデーションカラーがダサい原因は？Figmaで濁らない配色ルール【2026】

色相環のデッドゾーンを回避する3つの中間色ルールや、知覚色空間OKLCHを活用して濁らないグラデーションを作る方法を解説します。

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つのモードを設定する手順は非常にシンプルです。

1. コレクションにMode列を追加:
   変数パネルでSemanticコレクションを開き、右上の「+」ボタンからモード列を2つ作成します（名前を「Light」「Dark」に設定）。
2. モードごとの参照先（エイリアス）を指定:
   例えば surface/default という変数に対し、Light列には `_primitive/neutral/white`、Dark列には `_primitive/neutral/900` をそれぞれ紐付けます。
3. テキストやボーダーも同様に対応付け:
   text/primary に対して、Light列には濃いグレー（`_primitive/neutral/900`）、Dark列には白の不透明度87%（`_primitive/white/87`）を割り当てます。
4. フレーム側でModeを切り替える:
   デザインフレームを選択し、右サイドパネルの「Layer」セクションにある変数アイコンから「Change variable mode ➔ Dark」を選択します。

この設定を一度組んでおけば、フレーム内の全コンポーネントが一瞬でダークモード配色へ適応されます。
画面を二重に作成する必要がなくなるため、レイアウト修正や文言変更の工数が半減します。

Variablesの命名規則やトークン設計の基礎をより体系的に学びたい方は、以下の完全ガイドもぜひ参考にしてみてください。

Figma Variables（変数）の使い方完全ガイド｜破綻しない命名規則とトークン設計【2026】

生の値（Primitive）と役割（Semantic）の2層構造でスモールスタートし、Light/Darkモード切り替えやスコープ制限を破綻なく運用する実践ルールを解説します。

5. 実務がスムーズに進む！ダークモード設計におすすめのFigmaプラグイン4選

ダークモードの設計を手動ですべて行おうとすると、コントラスト比の計算や色の反転作業に多くの時間が取られてしまいます。
実務で役立つ便利なFigmaプラグインを4つ厳選しました。目的に応じて使い分けてみてください。

① Appearance

Appearance | Figma Community

スタイル名の命名規則をもとに、選択した要素のライト／ダークテーマを瞬時に切り替えるFigmaプラグイン。

カラースタイルの命名規則（名前の中に [day] と [night] を含めるルール）をもとに、選択したUIパーツの配色を一括でライト／ダークへ反転・切り替えてくれるプラグインです。
コンポーネントを複製して別々に作ることなく、既存のスタイルを保ったまま配色の見え方を瞬時にスイッチして検証したいときに役立ちます。

② Dark Mode Magic

Dark Mode Magic | Figma Community

ライトテーマのフレームを選択するだけで、ダークモード用の配色を自動計算・生成して瞬時に適用してくれるFigmaプラグイン。

選択したフレームの色構成を自動解析し、明暗を反転させたダークモード画面を手早く自動生成してくれるプラグインです。
背景色、テキスト色、ボーダーの明度を推測して変換してくれます。
完全な完成形には手動の微調整が必要ですが、「とりあえずダークモードにしたときの全体的な見え方を瞬時に確認したい」という初期ブレストの段階で非常に作業時間を短縮できます。

③ Stark（コントラスト・アクセシビリティチェック）

Stark - Contrast & Accessibility AI Checker | Figma Community

コントラスト比の自動判定や色覚シミュレーションなど、アクセシビリティ基準のチェックを効率化するFigmaプラグイン。

ダークモード設計において最も神経を使う「WCAGコントラスト基準（4.5:1以上）」をリアルタイムで検査できるアクセシビリティツールです。
レイヤーを選択するだけで、背景色と文字色のコントラスト比が基準を満たしているかを即座に判定してくれます。
「見た目は格好いいけれど、実は文字の視認性が不足していた」という手戻りをデザイン段階で確実に防止できます。

④ Tokens Studio for Figma

Tokens Studio for Figma | Figma Community

Figma Variablesを超える高度なデザイントークン設計と、JSON形式によるGitHubリポジトリ直接同期を実現するプラグイン。

Figma Variablesよりもさらに高度なトークン管理を行いたい場合や、開発チームとのJSON連携を本格化させたいプロジェクトで重宝するプラグインです。
Light/Darkテーマのトークン構造をJSON形式でGitHubリポジトリと直接同期できるため、エンジニアの実装コードとデザインデータを完全に一致させることができます。
大規模なデザインシステムを運用している中〜大規模プロダクトに向いています。

6. まとめ：ダークモードは「目的」ではなく「ユーザーへの配慮」

ダークモードは、単に画面を黒くして見た目の印象を変えるための装飾ではありません。
暗い環境で作業するユーザーの目の疲労を和らげ、コンテンツへの集中を支えるための「機能的な選択肢」です。

• 導入基準を見極める: 夜間利用が多いか、写真・コード中心かなど、利用シーンに合致しているかを冷静に判断する。
• 配色のルールを守る: 純黒を避け、サーフェス明度で階層を作り、テキストは不透明度でコントラストを緩和する。
• Variablesとプラグインで仕組み化する: PrimitiveとSemanticの2層構造を組み、プラグインで検証・変換工数を削減する。

そして最も重要なのは、「ユーザーに選択の自由を残すこと」です。
OSの設定に合わせて自動適用するだけでなく、画面内のトグルスイッチなどでユーザー自身がライトとダークをいつでも手動で切り替えられるUIを用意しておくことが、最も親切で誠実なUX設計につながります。

まずは自社のサービスでダークモードが本当に求められているかを振り返り、必要な場面で破綻のない美しいダークUIを組み立ててみてください。

ダークモードのVariables運用とあわせて、ボタンや入力フォームの肥大化を防ぐコンポーネント設計術については、以下の記事で詳しく解説しています。

Figmaコンポーネントプロパティの使い方｜バリアント増えすぎを防ぐ設計術

Boolean・Text・Instance Swapの3大プロパティを活用し、増えすぎたバリアントを最小限に抑えるコンポーネント設計術とスロット運用のコツを解説します。

終わりに

最後までお読みいただき、ありがとうございました！
それでは、良いデザインライフを！

The post ダークモードは必要？3つの導入基準とFigma変数設計・便利プラグイン first appeared on デザペディア.