UI配色で60–30–10ルールを使う方法
色を3つ選んでも、すべてを同じ強さで使うと画面のどこを見ればよいか分かりにくくなることがあります。60–30–10ルールは、色を「背景」「補助」「アクセント」の役割に分け、使う面積に差を付けるための考え方です。HueRollには、選択した色から2種類の60–30–10パレットを作る機能があります。本記事では、その見方と実際のUIへの当てはめ方を説明します。
HueRollで2つの候補を表示する
HueRollのカラーパレットで色を1つ選び、詳細パネルのHEX入力欄に#2563EBを入れて「適用」を押します。「60–30–10」でバリエーションAとBを見比べてください。選んだ青は、両方の候補でアクセントの役割になります。
60–30–10ルールとは
60–30–10は、画面やデザインの約60%を背景となる色、約30%を補助色、約10%を注目させる色に割り当てる目安です。もともとインテリアなどで使われてきた考え方ですが、WebサイトやアプリのUIでも、色の役割を整理する出発点として利用できます。
大切なのは、60、30、10が色を混ぜる比率ではないことです。また、画面上のピクセルを厳密に数えて比率を一致させる決まりでもありません。「最も広い基礎部分」「内容を分ける補助部分」「視線を集める小さな部分」という優先順位を作るための目安です。
3つの色の役割
60%：背景／サーフェス
ページ背景、カード背景、広い余白など、最も大きな面積を占める役割です。長時間見ても疲れにくく、文字や画像を邪魔しない色が向いています。白や薄いグレーだけでなく、ブランドカラーの明るいティントも候補になります。
30%：セカンダリ／補助
ヘッダー、サイドバー、区切られたセクション、カードの一部など、情報をまとめたり背景に変化を付けたりする役割です。背景とは区別でき、アクセントほど強く主張しない色を選びます。基準色の類似色、彩度を抑えた色、無彩色なども合わせやすい候補です。
10%：プライマリ／アクセント
主要ボタン、選択状態、重要なリンク、通知など、利用者に見つけてほしい場所へ使います。面積を小さくすることで、鮮やかな色でも効果的に目立たせられます。すべてのボタンや装飾へ使うと特別な意味が弱くなるため、本当に重要な操作へ絞るのがポイントです。
HueRollの60–30–10パレット
HueRollでは、現在の選択色を「プライマリ／アクセント — 10%」として扱います。「背景／サーフェス — 60%」には、選択色20%・白80%で混ぜた最も明るいティントを使います。「セカンダリ／補助 — 30%」には、選択色の色相を動かした2種類の候補を表示します。
3色の色見本のいずれかを選ぶと、その色が現在の色になり、パネル全体が再計算されます。選択済みの色見本には現在の色と表示されます。現在の色を変えずに各役割のHEXコードを使いたい場合は、各バリエーションの下にあるコピーを押します。
たとえば#2563EBを選ぶと、背景候補は#D3E0FBになります。バリエーションAの補助色は#EB4A25、バリエーションBは#C6EB25で、アクセントは元の#2563EBです。Aは青と暖色の対比が強く、Bは青、黄緑、淡い青の組み合わせになります。
これらはHueRollが一定の計算方法で提示する候補です。「必ず調和する色」や「アクセシビリティに合格する色」を保証するものではありません。補助色が用途に強すぎる場合は、カラーピッカーで彩度や明るさを調整したり、同じ色のティントを試したりしてください。
バリエーションAとBの比較
| 役割 | A | B |
|---|---|---|
| 背景・60% | #D3E0FB | #D3E0FB |
| 補助・30% | #EB4A25 | #C6EB25 |
| アクセント・10% | #2563EB | #2563EB |
この例では、背景とアクセントは同じで、補助色だけが変わります。表の色見本は比較用で、セルの面積が60–30–10を表すものではありません。
Webサイトへ当てはめる手順
- ブランドカラー、主要ボタンの色、または使いたい基準色をHueRollで選びます。
- 60–30–10パレットのバリエーションAとBを比べ、デザインの目的に近い方を選びます。
- 選んだバリエーションの下にある3つのコピーを使い、現在の色を変えずに各役割のHEXコードをデザインへ移します。
- 60%の色をページ背景やカード背景、30%の色をセクションやナビゲーション、10%の色を主要操作へ仮に割り当てます。
- 実際の文章や画像に色を当てはめ、情報の優先順位が自然に見えるか確認します。意味の識別には、文字やアイコンなども併用します。
- 文字を置く色はコピーではなく色見本本体を選び、白文字と黒文字のコントラスト比を確認します。
- 候補を残す場合は、最初に控えた各HEXコードを1色ずつ入力して適用し、「マイパレットに保存」を押します。3色がセットで保存される機能ではありません。
- 制作した画面をPCとスマートフォンで開き、通常時と操作時の見え方を確認します。マイパレットは別端末へ自動共有されないため、必要なコードは手元にも控えます。
どのようなデザインに向いているか
60–30–10は、ランディングページ、企業サイト、管理画面、プレゼン資料など、背景、情報のまとまり、主要操作という役割を分けやすいデザインに向いています。使う色が多すぎてまとまらないときや、ブランドカラーをどの程度見せればよいか迷ったときにも役立ちます。
一方、写真が画面の大部分を占めるページ、複数系列を識別するデータ可視化、状態ごとに決められた色を使う業務画面では、3色だけに整理できない場合があります。ダークモードでは、明るいティントを背景にするHueRollの候補をそのまま当てはめるのではなく、背景と文字の役割を組み直す必要があります。
色を足す前に役割を見直す
デザインが単調に見えるとき、すぐ4色目や5色目を追加する必要はありません。背景色のティントを変える、補助色の彩度を下げる、アクセントを使う場所を減らすだけで、同じ3色でも見え方が整うことがあります。警告、成功、エラーなど意味を持つ色が別に必要な場合は、60–30–10とは別の機能色として管理します。
60–30–10ルールは完成図を自動的に作る仕組みではなく、色へ役割を与えるための会話の土台です。HueRollで候補を作り、実際のUIへ置き、必要な調整とコントラスト確認を行う。この順番で使うと、単なる3色の一覧ではなく、目的に合った配色へ近づけられます。
補助色と文字色をさらに調整する
補助色の方向性を変えたい場合は補色と類似色のガイド、背景やボタンに文字を載せる場合はコントラストのガイドを参照してください。HueRollで各色を確認しながら、用途に合わせて調整できます。