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

こんにちは！UIデザイナーのYunyです。

UIをデザインしているとき、ブランドカラーを目立たせようとしてボタンやアイコン、見出し、タグに同じ色を使いすぎてしまった経験はないでしょうか。
良かれと思って色を足した結果、画面全体がチカチカして「結局どこが最重要のアクションなのか」が分からなくなるケースは現場で頻繁に見られます。

配色はセンスや感覚だけに頼ると、画面内の要素が増えるにつれて整合性を保つのが難しくなります。
そこで役立つのが、インテリアデザインの黄金比率をUI向けに応用した「60-30-10の法則」です。
本記事では、この黄金比率をUIコンポーネントの構造へ具体的に落とし込み、迷わず美しい配色システムを構築する実践手法を整理します。

1. そもそもUIにおけるアクセントカラーの役割とは？

装飾ではなく「Primaryアクションへの誘導」

UIデザインにおけるアクセントカラーは、グラフィックデザインやイラストのような「見た目を華やかに飾るための色」ではありません。
その本質は、画面内で「次に押してほしい主要なアクション（Primary CTA）」をユーザーに迷わず見つけてもらうことにあります。

画面を開いたユーザーは、わずか数秒のうちに「どこを見ればいいのか」「どこを押せば目的が達成できるのか」を判断します。
その際、周囲の背景やテキストから最も際立った色（アクセントカラー）が、最優先で視線を集めるPrimaryボタンとして機能します。

有彩色が多すぎると何が起きる？「コントラストの飽和」が引き起こす視線誘導の混乱

人間の視覚システムは、無彩色（白・黒・グレー）の背景に対して、色味を持った「有彩色（アクセントカラー）」に無意識に視線を引きつけられる性質を持っています。
しかし、アクセントカラーを画面内のあらゆる要素に散りばめてしまうと、「コントラストの飽和（Contrast Saturation）」が発生します。

有彩色（色味を持った強い色）の面積や主張が画面全体で大きくなりすぎると、ユーザー視点では「画面のどこに目を引かせればいいのか（何が一番重要なのか）」が直感的に分からなくなります。
「すべてが強調されている画面」は、ユーザーにとっては「何も強調されていない画面」と同じです。

その結果、デザイナーが本来最も意図していたはずのアクション（「新規登録」や「購入手続き」などのPrimary CTA）をユーザーが正確に行えない状況に陥ります。
視線が定まらず操作に迷ったユーザーは、目的のアクションを完了できずに画面から離脱してしまいます。

UIにおける配色の役割は、画面をカラフルにすることではなく、デザイナーが意図した順序でユーザーを迷わずアクションへ導くことです。
有彩色を10%の1〜2箇所に厳密に絞り込み、周囲を無彩色で抑えるからこそ、ユーザーは一瞬で目的のボタンを見つけ出し、意図通りの操作を実行できます。

現場でブランドカラーが散らかりやすい背景と構造的要因

実際のプロダクト開発現場でも、この「有彩色のインフレ」は非常によく起こります。
例えば、ブランドの認知を高めようと意識するあまり、Primaryボタンだけでなく、ヘッダー背景、見出しテキスト、アイコン、ステータスタグ、さらにはグラフの枠線に至るまで、同じブランドカラーのブルーを適用してしまうようなケースです。

一見するとブランドの統一感が出ているように思えますが、いざ画面全体を俯瞰すると、「画面全体が青すぎて目が疲れ、どれが押せるボタンで、どこが重要ステータスなのか判別できない」という状態に陥ります。
実際にプロトタイプでユーザーテストを行っても、本来押してほしい決定ボタンを見落として迷う様子が顕著に現れるなど、感覚的な色選びはユーザービリティを直接損ねる要因になります。
アクセントカラーは「絞り込んで使う」からこそ機能するのだと意識することが、UI配色における第一歩です。

2. UIデザインにおける「60-30-10の法則」基本思想

インテリアから生まれた「60-30-10の法則」

「60-30-10の法則」は、もともとインテリアデコレーションの世界で、部屋のカラーコーディネートを誰でも失敗なく調和させる経験則として長年使われてきた黄金比率です。
部屋全体を見渡したときに、ベースカラー（壁や床）を60%、メインカラー（家具やカーテン）を30%、アクセントカラー（クッションや小物）を10%の比率で配分すると、空間が最もバランスよく美しく整うとされています。

この考え方は、情報設計と視認性が求められるUIデザインの画面設計においても極めて有効です。
画面内の色面積を論理的な比率で制御することで、統一感のある落ち着いた土台と、際立ったアクション領域を両立できます。

Web/UIで「70:25:5」ではなく「60:30:10」が機能する理由

デザインの入門書などでは、ポスターやWebサイトの配色比率として「70:25:5（ベース70%、メイン25%、アクセント5%）」が紹介されることもあります。
グラフィックやシンプルなLPであればアクセント5%でも十分に目立ちますが、機能的なWebアプリや管理画面のUIでは「60:30:10」がより実用的です。

UIには、ボタンの通常状態だけでなく、ホバー、アクティブ、選択状態のタブ、未読バッジなど、ユーザーの操作に応じて状態を示す要素が複数存在します。
アクセント比率を10%程度確保しておくことで、操作要素の存在感を損なわずに状態変化を明快に表現できるようになります。

3. UIコンポーネントへの具体マッピング（Base 60% : Main 30% : Accent 10%）

「60-30-10の法則」を実際のUIに適用する際、画面全体のピクセル数を厳密に計算する必要はありません。
画面を構成するUIコンポーネントのレイヤー（役割）ごとに、どの色を割り当てるかを明確にルール化することが重要です。

「メインカラー＝ブランドカラー」ではない？UI配色における用語の落とし穴

従来のグラフィックやWebデザインでは、「メインカラー＝企業のブランドカラー（ロゴの色）」と呼ぶことが多かったため、ここで少し混乱しがちです。
しかし、UIデザインにおける「60-30-10の法則」でいうMain 30%は、「画面内の情報構造とコンテンツ（文字や線）を担う色」を指します。

もしブランドカラー（例えば鮮やかな青や緑）を30%もの大面積で使ってしまうと、画面の大半が色で埋め尽くされ、アクセント10%が全く目立たなくなってしまいます。
UIにおけるMain 30%は、あくまで「コンテンツを快適に読ませるためのテキストや枠線」に充てるのが成功の鉄則です。

【具体例】このサイト「デザペディア」で見る60-30-10の配分

イメージを掴みやすくするために、今見ていただいている当サイト（デザペディア）の画面構造を例に分解してみましょう（※2026年9月時点のデザインを元にしています）。

• Base 60%（背景・キャンバス）: 記事本文エリアの背景（淡いペールブルー）やカード面のホワイト。画面の約6割を占める広大な下地であり、無彩色〜淡いトーンで敷くことで視覚的ノイズをなくし、コンテンツを引き立てます。
• Main 30%（構造・テキスト・コンテンツ）: 本文のダークグレー、見出しのブラック、H2下線のライトグレーや枠線。画面の約3割を占め、読者に情報を正しく届けるための文字情報と境界線をしっかり形作ります。
• Accent 10%（Primaryアクション・視線誘導）: ブランドブルーのPrimaryボタン、タグバッジ、H2見出し左側のアクセントライン、青リンク。画面全体のわずか1割程度に絞り込まれているからこそ、読者の視線が迷わず「押すべきボタン」に吸い寄せられます。

このように、「背景（60%）の上に、文字と線（30%）で骨格を作り、一番押してほしい箇所だけ色（10%）を差す」と捉えると、どんな画面でも迷わず配色を決められるようになります。

Base 60%（ベースカラー）：背景とサーフェス（Surface / Background）

Baseの60%は、画面全体の基盤となる背景領域です。
コンテンツを配置する余白を十分に確保し、視覚的な圧迫感をなくして情報を受け入れやすくする役割を持ちます。

• 背景色: 純白（#FFFFFF）や、目に優しいオフホワイト・ペールブルー（#F8FAFC, #F5F7FFなど）。
• カード・コンテナ面: 背景とわずかに明度差をつけたサーフェス色。
• モーダル・ドロワーの背景面: 主要コンテンツを支える下地領域。

ベース領域に余計な色味を持たせず無彩色（ニュートラルグレー）またはごく淡いトーンを維持することで、上位のテキストやボタンが引き立ちます。

Main 30%（メインカラー）：情報構造と可読性（Text / Border / Neutral）

Mainの30%は、情報の骨格を作り、コンテンツの可読性を担保する構造領域です。
画面内の大半を占めるテキストや線がこの領域に該当し、UI全体の秩序と安心感を形作ります。

• 見出し・本文テキスト: 背景とのコントラスト比4.5:1以上を確保したダークグレー・濃紺（#0F172A, #1E293Bなど）。
• 補足テキスト・メタ情報: 優先度を下げたミディアムグレー（#64748Bなど）。
• 境界線・区切り線: カードやテーブルの輪郭を定義する薄いグレー（#E2E8F0など）。
• 入力フォームの未選択枠線: 入力エリアの境界を示すニュートラルなボーダー。

真っ黒（#000000）を避け、わずかに青みや暖かみを含んだダークグレーを採用すると、画面全体のトーンが柔らかくまとまります。

Accent 10%（アクセントカラー）：行動喚起の焦点（Primary Action / Highlights）

Accentの10%は、ユーザーの視線を集めて具体的なアクションへと導く焦点領域です。
1画面（またはファーストビュー）の中で、「ユーザーが次に取るべき最も重要な1〜2箇所の操作」だけに限定して適用します。

• Primary CTAボタン: 「新規登録」「購入手続き」「保存」などの最重要ボタン。
• アクティブ状態の選択要素: 選択中のタブ、選択されたラジオボタンやトグルスイッチ。
• 重要通知・未読バッジ: ユーザーの注意を喚起する小さなバッジやインジケーター。

この領域にだけ高彩度のカラーを適用することで、ユーザーは迷うことなく目的の操作を見つけ出すことができます。

【UIコンポーネント別】60-30-10適用早見表

各UIコンポーネントがどの比率に属するのかを以下の表に整理しました。

4. 画面を破綻させないための「3つの実務調停ルール」

基本の60-30-10比率を定めても、実際のプロダクト運用では「エラー表示」「複数のボタン」「ダークモード」などの例外ケースに直面します。
ここでは、現場で配色が崩れないための3つの実務調停ルールを解説します。

ルール①：セマンティックカラー（エラー・成功）との衝突を防ぐ「フィードバック層」の分離

UIには、アクセントカラー以外にも、エラー（赤）、警告（黄・オレンジ）、成功（緑）といったセマンティックカラー（状態伝達色）が必要です。
これらをアクセントカラーと同じテンションでベタ塗りしてしまうと、画面内で強烈な色が衝突し、10%の枠を大きくオーバーしてしまいます。

セマンティックカラーは「アクセント層」ではなく、独立した「フィードバック層」として分離して扱います。
背景全体を濃い赤にするのではなく、「淡い赤の背景色（明度95%前後）＋濃い赤のテキスト・アイコン」の組み合わせで表現するのが実務の定石です。
面積あたりの彩度を抑えることで、Primaryボタンの視認性を邪魔せずに状態を的確に伝えることができます。

ルール②：Secondary・Tertiaryボタンは「Main 30%の無彩色（グレー）」を基本にする

画面内に「保存（Primary）」と「キャンセル（Secondary）」のように、複数のアクションが並ぶ場面は日常的に発生します。
このとき現場でよく見かけるのが、Secondaryボタンにも同じアクセントカラーを流用してしまうパターンです。

具体的には、「青いベタ塗りのPrimaryボタン」の隣に、「青い枠線＋青い文字のアウトライン型Secondaryボタン」を並べてしまうようなケースです。
デザインシステムによっては許容される設計もありますが、「60-30-10の法則」に基づいて画面のノイズを抑え、Primaryへの視線誘導を迷わせないベースラインとしては、Secondary以下を無彩色（グレー）で組むアプローチが推奨されます。これには明確な2つの根拠があります。

根拠1：アクセント比率（10%）をオーバーし、視線誘導の優先度が崩れる

アクセントカラーは「画面全体で最も注目させたい1〜2箇所」に絞るからこそ機能します。
しかし、SecondaryボタンやTertiaryボタンにまで同じ青色を使ってしまうと、画面内の青の占有率が10%を大きく越えてしまいます。その結果、画面内に強い有彩色が散らばり、ユーザーの視線が分散して「今どちらを優先して押すべきか」の判断にわずかな迷いが生じます。

根拠2：屋外やスマホ画面における認知負荷と誤認リスク

ベタ塗りとアウトライン（枠線）の差は、じっくり画面を見ているデザイナーにとっては明確に見えても、移動中にスマホを操作しているユーザーや直射日光下のディスプレイでは、同じ色相であるだけで「同列の強いボタン」として目に飛び込んできます。明度差だけに依存した差別化は、認知負荷を高める原因になります。

推奨アプローチ：Secondary以下を無彩色に倒し、Primaryの「青」を際立たせる

AppleのHuman Interface GuidelinesやモダンなWebアプリケーションのUIでは、SecondaryやTertiaryボタンを「Main 30%のグレー（無彩色）」で解決する設計パターンが多く採用されています。

• Secondaryボタン: 薄いグレーの背景（#F1F5F9）＋濃いグレーの文字（#1E293B）
• Tertiaryボタン: 枠線なし・背景なしのゴースト型＋ミディアムグレーの文字（#64748B）

このように設計すると、「画面内でアクセントカラー（有彩色）をまとっているのはPrimaryボタンただ1つだけ」という状態が作れます。これによって視線の着地点が完全に固定され、ユーザーは一切迷わずに目的の操作を完了できます。

ルール③：ダークモード時の比率維持と彩度コントロール（OKLCH知覚調和）

ダークモードでは、Base 60%が「黒〜濃いグレー」に反転します。
この暗い背景の上に、ライトモードと同じ高彩度のアクセントカラーをそのまま配置すると、知覚的なコントラストが強すぎて文字が滲んで見えたり、目がチカチカしたりする問題が生じます。

ダークモードにおけるアクセントカラーは、ライトモードの値から彩度を5〜10%程度抑え、明度をわずかに引き上げた調整値を用意するのが実用的です。
OKLCH色空間などを活用して人間の知覚に沿ったトーン調整を行うことで、ダークモード特有の眩しさを防ぎつつ、10%のアクションとしての際立ちを維持できます。

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

配色の黄金比率を押さえた後は、グラデーションの濁り防止やダークモードの変数設計、Figma Variablesでのトークン管理をあわせて学ぶことで、さらに強固なUIデザインシステムを構築できます。

以下の記事では、現場で起こりがちな配色の失敗パターンと、Figma上での具体的な操作テクニックを詳しく解説しています。

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

中間色がグレーに濁る現象をOKLCH知覚色空間で解決。Figmaで美しく澄んだグラデーションを作る具体的な配色テクニックを解説します。

ダークモードでのサーフェス階層や配色の破綻を防ぐ基準については、こちらの記事が役立ちます。

ダークモードは必要？3つの導入基準とFigma変数設計・便利プラグイン

安易な白黒反転で失敗しないための3つの導入基準と、Figma Variables（変数）を用いた実務設計手順を体系的に整理しました。

Figma上でカラーパレットを定義し、Primitive（生の色）とSemantic（UI上の役割）の2層トークン構造としてチーム運用する具体的な手法については、以下の完全ガイドを参考にしてみてください。

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

Variablesの基本概念からStylesとの違い、PrimitiveとSemanticの2層トークン構造まで、破綻しない設計術を徹底解説します。

終わりに

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

UIデザインにおいて、色を効果的に扱う秘訣は「足すこと」ではなく、役割を定めて「引き算すること」にあります。
インテリアの黄金比である「60-30-10の法則」をUIのレイヤー構造に当てはめることで、感覚に頼らない論理的で美しい画面を作ることができます。

アクセントカラーを10%の重要なアクション要素として大切に扱い、ユーザーが迷わず心地よく操作できるインターフェースをぜひ目指してみてください。

これからも、心地よいUI配色とデザイン設計を一緒に楽しんでいきましょう。
それでは、良いデザインライフを！