こんにちは！UIデザイナーのYunyです。
- 画面内に何種類ものグレーが散らばり、配色に統一感が出ない方
- 背景・カード・枠線・テキストの明度差の付け方に悩んでいる方
- Figmaで破綻しないニュートラルトークンを構築したい方
UIデザインの配色は、ボタンやアクセントカラーばかりに目が向きがちです。
しかし、実際の画面を見渡すと、面積の60%以上を占めているのは背景やカード、枠線、テキストといったグレー（無彩色）の要素です。
過去の自分も、画面内のグレーをカラーピッカーでその場しのぎに選んでいました。
その結果、画面内に20種類以上のグレーが乱立し、カードの境界が背景に埋もれたり、文字の視認性が落ちて開発現場への引き渡しで大きな手戻りを経験しました。
今回は、画面を濁らせずに美しく整理するためのUIグレー設計の原則と4層の明度ステップを解説します。
感覚的な色選びから脱却し、誰が見ても破綻しない配色ロジックを身につけていきましょう。
- 1. なぜUIのグレー選びは失敗しやすいのか？画面が散らかる2つの原因
- 原因①：感覚的なカラーピッカー選択によるグレーの増殖
- 原因②：彩度0%の「無機質なグレー」による画面のくすみ
- 2. 洗練されたUIを作る「グレー設計の3原則」
- 原則①：ブランドカラーの「色味（Tint）」をわずかに加える
- 原則②：「真っ黒（#000000）」を避け、濃紺・チャコールで止める
- 原則③：1画面で同時に使うグレーの役割を制限する
- 3. 破綻しない「4層の明度ステップ」と役割分担
- 第1層：Background（背景色 / 最明ステップ）
- 第2層：Surface（面・カード / ピュアホワイト）
- 第3層：Border & Divider（枠線・境界線 / 中明度ステップ）
- 第4層：Text & Icon（文字・記号 / コントラスト確保ステップ）
- 4. Figma Variablesで組むニュートラルトークン実践手順
- 手順①：Primitive Tokens（基本値）のスケール定義
- 手順②：Semantic Tokens（役割）へのマッピング
- 実践例：デザペディアの配色構造から学ぶ背景とボックスの関係
- 次のステップ：あわせて深掘りしたい知見
- 終わりに
1. なぜUIのグレー選びは失敗しやすいのか？画面が散らかる2つの原因
純粋な無彩色（彩度0%）を避け、ブランドカラーの色味（Tint）を2〜5%加えたグレーをベースに、背景・面・枠線・文字の4層で明度差を固定して運用することです。
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 | 画面全体の背景・キャンバス | 最明ステップ（Gray-50 / ペールブルー等） | 土台（カードを浮き立たせる） |
| 第2層：Surface | カード・モーダル・コンテンツ面 | ピュアホワイト（#FFFFFF） | 背景との自然な明度差 |
| 第3層：Border | 枠線・区切り線・テーブル罫線 | 中明度ステップ（Gray-200） | 1.2:1〜1.5:1（主張しすぎない線） |
| 第4層：Text & Icon | 本文・見出し・アイコン表示 | 濃紺・チャコール（Gray-600〜900） | 4.5:1以上（WCAG AA準拠） |
第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全体のカラーバランスを見直し、無彩色のベースカラーとアクセントカラーの調和を保ちたい方へ。
今回設計したグレーの背景・面・枠線を活用し、美しいカードコンポーネントを組むレイアウト術を知りたい方へ。
テキストやアイコンのグレーがWCAG基準を満たしているか、視認性と美しさを両立させる判定基準を深掘りしたい方へ。
終わりに
最後までお読みいただき、ありがとうございます！
UIデザインにおいて、グレーは単なる「色味のない隙間埋め」ではありません。
情報の優先順位を整理し、ユーザーを迷わせずに導くための最も重要な骨格です。
感覚的なカラーピッカーの指定をやめ、4層の明度ステップとわずかな色味（Tint）を味方につけるだけで、画面の洗練度は格段に向上します。
まずは手元のプロジェクトで、散らばっているグレーを整理し、整然としたニュートラルトークンを構築してみてください。
