色の使い方の設計思想：アクセントの予算
パレットはどの色が使えるかを定義する。アクセントの予算は、それぞれの色がどれだけ現れるかを定義する ―― アクセントは装飾ではなく、希少で役割に縛られた信号だ。
問題
カラートークンのシステムが制約するのは語彙であって、その分量ではありません。厳密なトークン設定 ―― タイトトークン戦略 と Design Token Lint を参照 ―― は、ページ上のすべての色が正当なトークンであることを保証します。しかし、そのページが意図したブランドとして読まれることまでは保証できません。なぜなら、トーンはどの単一の色にも宿る性質ではないからです。それはニュートラルな領域とアクセントの領域の比率であり、比率を見る lint ルールは存在しません。
このギャップには、実測された失敗パターンがあります。あるダークテーマのカタログサイトで、AI が生成したページのプロトタイプを監査したところ、プロトタイプはブランドのアクセントオレンジを1 ページあたり約 29 回使っていました。一方、それが模倣した本番サイトでは1 ページあたり約 1 回でした ―― 約 29 倍の差です。しかもこれは、正しいパレットトークンが与えられ、「アクセントは控えめに使うこと」という文章での指示があったうえでの結果でした。強調のかたちをした判断はすべてアクセントに解決されていきました ―― セクションラベル、リンクの矢印、ホバー状態、カードの上部ボーダー、カウンター、バッジ。その出力はトークンとしては正当でしたが、ブランドからは完全に外れていました。
このドリフトは不注意によるものではなく、構造的なものです。トークンの表は accent を bg、fg、surface と対等な選択肢として並べます。そして、アクセントで飽和したマーケティングサイトやダッシュボードを前提として持つ読者は、明示されていない「どれだけ」を「たくさん」で埋めてしまいます。AI エージェントが従うデザイントーン仕様の書き方 はその失敗の仕様側のメカニズムを扱います。この記事が扱うのは、予算そのものです。
解決方法
アクセントを予算として扱いましょう。明示的な役割のリストに紐付けられた希少なリソースであり、ビューポートあたりの上限に対して消費されるものです。リストにないものはすべて、デフォルトでニュートラルになります。
古典的な 60-30-10 ルール（カラーパレット戦略 を参照）は、60% を支配的なニュートラル、30% を副次的な色、10% をアクセントに割り当てます。この 10% は目標ではなく上限として読んでください。抑制の効いた、エディトリアルな、あるいはダークカタログ系のブランドは、もっと切り詰めて運用します ―― 90-9-1 に近く、アクセントはニュートラルな地の上にある数点の光にすぎません。実際に面積の 10% をアクセントに費やすページは、うるさいページです。
どちらの列も同じパレットと同じレイアウトを使っています。左の列は、キッカー（kicker、見出し上の小さなラベル）、上部ボーダー、バッジ、カウンターのピル、矢印リンク、価格、そして CTA にアクセントを費やしています ―― すべての要素が競い合うため、どれも勝てません。右の列はアクセントを 2 回だけ費やします。価格（アンバー、購買のハイライトという役割）と CTA です。CTA はいまやカード上で唯一もっとも目立つ要素になっています ―― これこそがアクセントを持つことの本来の目的です。
アクセントのコストの段階
アクセントの使い方は、どれも同じコストがかかるわけではありません。使い方を、それが消費する視覚的な面積の大きさでランク付けしてみましょう。
| 段 | 使い方 | コスト |
|---|---|---|
| 1 | アクセント色のテキスト（1 語、1 つの値） | 最も安い |
| 2 | アクセントの下線、または 1px のボーダー | 低い |
| 3 | アクセントのアイコン、または小さなマーカー | 中程度 |
| 4 | アクセントの塗りつぶし背景 | 最も高い |
アクセントの塗りつぶし背景は、使える中でもっとも強い一手なので、もっとも厳しい上限を持ちます。ビューポートあたり最大 1 つの塗りつぶしアクセント要素、多くの場合はゼロです ―― 抑制の効いた多くのシステムは、塗りつぶしを一時的な状態（押下、選択）のために取っておき、常時それに頼ることはありません。大きな塗りつぶしアクセントの領域 ―― セクションヘッダー、ヒーローパネル、カード全体 ―― は、デフォルトで予算違反です。
役割のホワイトリスト
アクセントは役割に紐付くのであって、サーフェス（面）に紐付くのではありません。そのリストを書き出しましょう。実用的なデフォルトのホワイトリストは次のとおりです。
| 役割 | 使い方 |
|---|---|
| プライマリ CTA | 塗りつぶし、またはボーダーのアクセント ―― ビューポートあたり最大 1 つ |
| アクティブ／選択済み／押下状態 | 小さなコントロールへのアクセントのリング、バー、塗りつぶし |
| フォーカスインジケーター | アクセントのアウトライン |
| 主要な強調 | 1 語、または 1 つの値へのアクセントテキスト（文全体ではなく） |
| 購買のハイライト（価格、割引） | ブランドに専用のサブ色相があれば、それを使う（例：アンバー） |
リストにないものはすべて、ニュートラルのデフォルトを取ります。生成された出力がもっとも頻繁にアクセントで塗る要素は、まさにニュートラルをデフォルトとするものたちです。
| 要素 | ニュートラルな扱い |
|---|---|
| リンク | ニュートラルなテキスト＋下線で完全なアフォーダンスになります。ホバーで反転させるか明るくします。リンクをアクセントの役割として宣言することはできます ―― ただしその場合、ページ上のすべてのリンクが予算を消費するため、リンクの多いページは一瞬で予算を使い果たします。明示的に決め、ホワイトリストに記録してください。 |
| 見出し、キッカー、セクションラベル | 階層を担うのはスケールとウェイトであって、色相ではありません |
| ボーダー、罫線、区切り線 | 構造的な線はニュートラルです。アクセントのボーダーはアクティブ状態の信号であって、装飾ではありません |
| カテゴリバッジ | デフォルトはニュートラル。カテゴリに本当に色分けが必要なら、専用のカテゴリカルパレットを使います ―― ブランドのアクセントは決して使わず、バッジごとに場当たり的な色相を使うこともしません |
| カウンター、メタチップ、タイムスタンプ | 純粋な情報 ―― 定義からしてニュートラルです |
機能的なステータス色（エラーの赤、成功の緑、警告の黄）は、アクセントの予算の外側にあります。これらは検証、在庫状況、破壊的な操作といった、それぞれ独自の意味的な役割に紐付いており、強調をめぐってアクセントと競合することはありません。また、これらは抜け穴でもありません。目立たせるためにエラーの赤で塗った NEW バッジは、やはり予算違反です。
ビューポート単位の予算チェック
ホワイトリストが制御するのはどこに使うかで、予算が制御するのは一度にどれだけ使うかです。公開する前に、1 つのビューポートに見えるアクセントの出現回数を数えましょう。
抑制の効いたシステムでは、ビューポートあたり 2〜3 個のアクセント要素が実用上の上限であり、ほとんどのビューポートはゼロか 1 つであるべきです。
ビューポートあたり 2 つ以上の塗りつぶしアクセント要素は、ほぼ常に間違いです ―― 2 つの塗りつぶし CTA は競合し、読者はページがどの操作を求めているのかを判別できなくなります。
スペーシングの設計思想 の目を細めて確認するテストには、色における対応版があります。ページをぼかして、何が残るかを見るのです。アクセントは、ニュートラルな地の上にある数点の孤立した光として生き残るべきです。ぼかしたときにアクセントのにじみが見えるなら、たとえ個々の使い方それぞれが正当に感じられたとしても、予算は使い果たされています。
色に頼らない階層
生成された出力がアクセントを使いすぎる理由は、アクセントがもっとも手軽な強調ツールだからです ―― クラスを 1 つ付ければ要素が目立ちます。しかし成熟したシステムは、まずより安い材料から階層を組み立て、色に手を伸ばすのは最後です。
| 優先度 | 軸 | なぜ色より優先されるか |
|---|---|---|
| 1 | スケール | 大きな見出しは、勝つために色を必要としません |
| 2 | ウェイト | 太字のニュートラルテキストは、通常のニュートラルテキストより上位です |
| 3 | スペース | 周囲に余白のある要素は重要なものとして読まれます（スペーシングの設計思想） |
| 4 | ニュートラルの段階 | 明るいニュートラルと抑えたニュートラルのテキストの対比は、それ自体で完全な階層の軸になります |
| 5 | 色 | 上の 4 つを使い切ってから初めて費やします |
デザインがすでにスケール、ウェイト、スペース、ニュートラルのコントラストを通じて構造を伝えているなら、アクセントの予算は、その画面で本当にそれを必要とする唯一のもののために温存されます。
クイックリファレンス
| シナリオ | テクニック |
|---|---|
| ページがどれだけアクセントを担ってよいかを決める | 60-30-10 を上限とする。抑制の効いたブランドは 90-9-1 に近づける |
| ある要素に強調が必要だと感じる | 色の前に、スケール、ウェイト、スペース、ニュートラルの段階を費やす |
| アクセントの扱いを選ぶ | コストの段階を上っていく：text → border → icon → fill |
| 塗りつぶしアクセント背景 | ビューポートあたり 1 つ以下。塗りつぶしは一時的な状態のために取っておくことを検討する |
| 完成したページを監査する | ビューポートごとにアクセントを数える（2〜3 個以下）。色の目を細めて確認するテストを実行する |
| リンク／インタラクティブなホバー | ニュートラルの反転、または明度のシフト ―― アクセントは決して使わない |
| アクセントを許可する役割 | プライマリ CTA、アクティブ／選択済み／押下、フォーカスリング、1 つの主要な語または値 ―― それ以外はすべてニュートラル |
| 役割がホワイトリストにない | ニュートラルのデフォルトを取る ―― 雰囲気による例外はなし |
AIがよくやるミス
トークンの表を許可証だと思い込む。
text-accentが存在するからといって、どの要素でもそれを使ってよいわけではありません。トークンは語彙であり、ホワイトリストは文法です。すべてのリンクにアクセントのホバーを付ける。 グローバルなアクセントホバーは、アクセントをページ上のリンクの数だけ増やします。ニュートラルの反転や明度のシフトなら、予算を使わずにホバーのフィードバックを保てます。
セクションの装飾としてのアクセント。 キッカー、上部ボーダー、矢印、罫線をすべてのセクションでアクセントで塗る ―― これは実測されたドリフトの最大の原因です（監査した事例では約 29 回/ページ 対 約 1 回）。
「プライマリカラー」を「重要なものの色」だと解釈する。 ある色相を「プライマリ」や「アクセント」と名付けることは、パレットの中でのその役割を表すのであって、すべての重要な要素に対する権利を主張するものではありません。
デフォルトの強調がアクセントに解決されてしまう。 システム内のあらゆる強調の仕組み（強いテキスト、警告、価格、ハイライト）が同じ色相ファミリーに対応づけられていると、「これを目立たせたい」という衝動はすべてアクセントを消費します。どの役割が本当に色相を必要とし、どの役割がウェイトやスケールを必要とするのかを監査してください。
クロムではなく写真に合わせてしまう。 サイトの画像が暖色系や色鮮やかだと、ページの印象にはそれも含まれます ―― しかし写真の周りの UI クロム（chrome、UI の外枠部分）は、厳密にニュートラルかもしれません。スクリーンショットではなく、クロムを測ってください。
使い分け
アクセントの予算を適用する
指定されたアクセント／ブランドカラーを持つすべてのプロジェクトで ―― つまりほぼすべてのプロジェクトで適用します。ブランドが切り詰められているほど（エディトリアル、カタログ、ダークテーマ、技術系）、予算は厳しくなります。
ホワイトリストを書き出す
デザインシステムのドキュメントがカラートークンを列挙するときは常に書き出します。役割のホワイトリストが隣にないトークンの表は、メニュー読み（menu-reading）を招きます ―― AI エージェントが従うデザイントーン仕様の書き方 を参照してください。
ビューポート単位でカウントする
新しいページやセクションを公開する前、そしてページがサイトの他の部分より「うるさく感じる」ときは常に実行します。カウントは、感覚よりも速く、そして信頼できます。