color theoryApril 13, 20269 min read

60-30-10ルールは破られた：実際に機能する現代のカラーシステム

60-30-10ルールは、インテリアデザインのデザイナーが製品デザインに無理やり適用しようとする安易な手法です。現代のカラーシステムは、代わりにどのような方法を採用しているのでしょうか。

By Boone

60-30-10ルールは、ほとんどのデザイナーが色について最初に教わることであり、同時に、多くの真剣な製品開発チームが実際のインターフェースをリリースした瞬間にひっそりと放棄する原則でもあります。60%の主色、30%の補助色、10%のアクセントカラー。

すっきりとしていて、引用しやすい。しかし、ブランドにボタン、無効状態、通知、グラフ、ダークモード、そしてドキュメントサイトが加わると、完全に機能しなくなります。

このルール自体は間違っていません。ただ、異なる問題のために作られたものなのです。最も優れたデザインシステムが採用しているのは、比率ではなく、役割に基づいたトークンシステムです。本稿では、60-30-10がなぜ機能しなくなるのか、それに代わるものは何か、そして大規模にその代替を実現している5つの実際のデザインシステムについて解説します。

60-30-10ルールの由来

60-30-10ルールは、20世紀半ばにインテリアデザインで生まれた簡略化された手法で、後にデジタルデザインに転用されました。これは、ルールを引用する必要があった人々によって考案されたものです。

その起源は住宅デザインにあります。部屋には、メインカラー（壁）、サブカラー（家具、カーテン）、アクセントカラー（クッション、アート）があります。60、30、10。部屋は一度に一人の人間が見る静的な表面であり、誰かが塗り替えるまで同じ色のままなので、このルールは部屋に適用できます。

出荷された製品のインターフェースの表面を覆おうとする際に、60-30-10ルールが目に見えてひび割れる様子を示すボクセル模式図。

しかし、これらの前提はプロダクトデザインには当てはまりません。デジタルプロダクトは静的な表面ではありません。それぞれが独自の状態、テーマ、コンテキストを持つ何百もの表面から構成されています。このルールはそもそもデジタルプロダクトの世界のために設計されたものではなく、その欠点は明らかです。

プロダクトデザインにおいてなぜこのルールが破綻するのか

60-30-10ルールは、単一の静的なサーフェスと単一のビューアを前提としていますが、これはプロダクトデザインの実際の仕組みとは全くかけ離れています。

実際のインターフェースには、無効化されたボタン、ホバー状態、フォーカスリング、エラーバナー、成功トースト、グラフデータ系列、空の状態、ローディングスケルトン、破壊的な操作を表すセマンティックカラーなどがあります。これらはどれも「キャンバスの60%、30%、10%」にきれいに対応づけられるものではありません。これらはキャンバスではなく、動作なのです。

また、ダークモードを追加した途端、このルールは崩壊します。60%の明るいニュートラルカラーは60%の暗いニュートラルカラーに変更する必要があり、30%のセカンダリーカラーは階層構造を維持するためにトーンを調整し、10%のアクセントカラーはアクセシビリティを維持するために明るさを上げるか、色相を完全に変更する必要があります。これは比率の問題ではなく、システムの問題です。

アクセシビリティは決定的な要素です。WCAGコントラスト比は、ページ全体の青色の割合を気にしません。特定のボタンの特定の青色が、その背景に対して十分なコントラストを持っているかどうかを気にします。この問題は、面積比率で解決できるものではありません。

優れたデザインシステム5選

これらのシステムは、ライトモード、ダークモード、そしてユーザーが触れるあらゆる画面で機能する役割ベースのカラーパレットを備え、大規模に展開されています。

マテリアルデザイン3

Material Design 3 のカラーシステムに関するドキュメントでは、プライマリ、セカンダリ、ターシャリ、サーフェスの各ファミリーに分割された役割ベースのトークンが示されています。

m3.material.ioでライブ映像をご覧ください。

マテリアルデザイン3は、この変化を最も明確に示しています。システムは、「プライマリー」「オンプライマリー」「サーフェス」「オンサーフェス」「インバースプライマリー」といったカラー役割を定義し、それぞれの役割はコントラストを考慮して事前にペアリングされています。デザイナーは色を選択するのではなく、役割を選択します。すると、トークンはアクティブなテーマに適した値に解決されます。

参考にすべき点：「on-」命名規則。メインサーフェス上に配置されたテキストやアイコンの場合、on-primary という命名規則によってアクセシビリティがトークン名に直接組み込まれます。

Radix Colors

radix-ui.comで実際にご覧ください。

Radix Colorsは、色相ごとに12段階のスケールを提供し、各段階には役割（アプリの背景、控えめな背景、UI要素、ホバー、フォーカス、アクティブ、ソリッド、テキスト、高コントラストテキスト）があらかじめ割り当てられています。比率のロジックは不要です。すべての段階が役割となります。

参考にすべき点：役割注釈付きの番号付きスケール。デザイナーに共通の語彙を提供し、「どのグレーを使うべきか」という議論の90%を解消します。

Shopify Polaris

polaris.shopify.comで実物をご覧ください。

Polarisは、コンポーネントの役割（背景（サーフェス）、テキスト（コンテンツ）、アイコン、ボーダー、インタラクティブ）ごとに色を整理します。各コンポーネントには、ホバー、押下、無効化、選択といったサブロールがあります。このシステムにより、デザイナーは定義されたトークンの範囲外に手を出すことが構造的に困難になります。

参考にすべき点：役割のグループ化。「ボーダー」トークンと「サーフェス」トークンを分離することで、コンポーネントレベルでの意図的な色の使用が促されます。

単なる見本ではなく、拡張性も考慮したカラーシステムが必要ですか？Brainyは、トークンティア、ダークモード、アクセシビリティ機能を組み込んだパレットを作成します。

2つのブランドが本番環境で導入

上記のデザインシステムドキュメントは参考資料です。以下の2つのブランドがその有効性を証明しています。StripeとLinearは、製品レイヤーで役割ベースの色を毎日使用しており、実際の使用環境においてもこのパターンが有効であることを証明しています。

Stripe

stripe.comでライブ配信をご覧ください。

Stripeは、デザインシステムドキュメントだけでなく、実際に運用されているブランドを提供しています。公開サイトでは、役割に基づいたカラーが本番環境でどのように機能するかが示されています。

ほぼすべての要素がニュートラルなサーフェスとコンテンツで構成されています。紫はアクセントカラーとして使用され、アクション、リンク、ブランドシグナルが配置される場所に正確に表示されます。比率のロジックはなく、役割に基づいたロジックです。

参考にすべき点：アクセントカラーを薄く保つという規律。Stripeのアクセントカラーは、その役割が予約されているため、控えめに使用されています。アクセントカラーを装飾に使うと、アクションに使うことができなくなります。

Linear

linear.appでライブ配信をご覧ください。

Linearは、大規模に展開している他のほとんどの企業よりも、ニュートラルカラーを多用しています。製品全体は、暗い表面トークンのレイヤーで構成され、単一のアクセントカラー（紫）がすべてのアクションを担っています。比率のルールではこのようなデザインは実現できません。これは純粋な役割ベースのシステムであり、「アクセント」層は控えめに使用された1色、「表面」層は完全な高さのスタックで構成されています。

参考にすべき点：アクセント層を1色にすることを躊躇しない自信。多くの新しいデザインシステムでは、アクセントカラーを過剰に割り当てています。Linearは、厳選された1つのアクセントカラーを一貫して使用することで、3つのアクセントカラーを均等に使うよりも強い認知度を築けることを証明しています。

役割ベースのパレットの構築方法

この方法でパレットを構築するには、3色を選んで割合を割り当てるよりも時間がかかりますが、デザイナーがダークモードを初めて導入した時点でその価値を実感できます。

このプロセスは、ほとんどのデザイナーが学んできた方法とは逆です。まず色を選んでから役割を割り当てるのではなく、まず役割を決めてから色を割り当てます。

役割階層を定義する。 サーフェス、コンテンツ、アクセント、状態、セマンティックの5つから始める。ほとんどの製品では、この5つが必須となる。データ視覚化のために6つ目の階層が必要になる場合もある。
16進数値を選択する前にトークンを作成する。 各トークンは役割（surface-subtle、content-muted、accent-primary-hoverなど）を表す必要がある。トークン名が色（「ライトブルー」など）を表している場合は、名前を変更する。
まずニュートラルカラースケールを設定する。 実際のインターフェースの大部分はニュートラルカラーで構成されている。ブランドカラーに手を加える前に、フルスケール（Radixが12段階を使用しているのには理由がある）を作成する。
最後にアクセント階層を追加する。 アクセントカラーは通常、ブランドアイデンティティが実際に使用される唯一の場所である。ここでは抑制が鍵となる。
ダークモードは、再設計ではなくトークンの再解決によって実現してください。 システムがロールベースの場合、ダークモードはトークン値の入れ替えであり、色の変更ではありません。
トークン層でアクセシビリティを強制してください。 すべてのon-surfaceトークンは、対応するサーフェスに対して4.5:1の比率を満たす必要があります。チェック機能を組み込みましょう。

3つのロール（プライマリ、セカンダリ、アクセント）を定義し、成功を宣言して出荷するという誘惑に駆られる近道があります。これは、トークンという装いをまとった60-30-10ルールです。しかし、最初の真のコンポーネントで必ず破綻します。

トークン作業が重要になる前に、ユーザーが色をどのように認識するかというより広い視点については、デザインにおける色彩心理学で意味レイヤーについて解説しています。カラーシステムがより大きなシステムコンテキストの中でどのように位置づけられるかについては、デザインシステムガイドで全体像を把握できます。

よくある質問

60-30-10ルールは役に立つことがありますか？

はい。単一面のデザインでは今でも有効です。ポスター、ソーシャルメディア投稿、マーケティングのヒーローセクション、パッケージ、編集ページなど、一度だけ表示されるキャンバスであれば、このルールは比率を素早く把握するための近道となります。ただし、プロダクトデザインはそうではありません。

デザインシステムにはいくつの色が必要ですか？

想像よりも少ない数の16進数値で、想像よりも多くのトークンに整理されています。ほとんどの配色システムでは、8～12色のニュートラルカラー、8～12色のアクセントカラー、3～5種類のセマンティックファミリーがあり、これらはすべて役割ベースのトークンに分解されています。色の数は少ないですが、役割の数は多いのです。

カラーパレットとカラーシステムの違いとは？

カラーパレットは色の集合です。カラーシステムは、役割の集合、それらの役割がどのように相互作用するかのルールの集合、そしてテーマごとに変化する役割と色のマッピングの集合です。パレットは「ブランドにどのような色が使われているか」という問いに答えます。カラーシステムは「このテーマにおいて、この要素はどのような状態にあるか」という問いに答えます。

色の割合を測るのはやめましょう

60-30-10ルールは悪いものではありません。ただ、範囲外です。

プロダクトデザインは部屋ではありません。ユーザーが移動するにつれて変化する、表面、状態、役割のシステムです。

色の割合を測ることは、ページ全体の割合でタイポグラフィを測るのと同じくらい無意味です。「テキストの30%は見出しです」とは言いません。「見出しは定義されたスタイルを持つ役割です」と言うでしょう。色も同じように扱うべきです。

最も優れたスケーリングを実現しているブランド、Material、Radix、Polaris、Stripe、Linearは、この点を理解し、それに基づいて構築しています。彼らのパーセンテージを真似しても意味がありません。重要なのは、彼らの役割構造を真似することです。

もし現在のカラーパレットが3色だけで、割り当てルールが曖昧なだけなら、それはカラーシステムとは言えません。単なる色の好みです。階層構造を構築し、役割を明確に定義し、色の16進数値については最後に議論するようにしましょう。