配色の比率とは
読み：はいしょくのひりつ英語：Color proportion (70:25:5)
更新日：2026年10月31日
ひとことで
配色の比率とは、配色に使う色それぞれの面積の割合のことで、ベース70%・メイン25%・アクセント5%という目安がよく知られています。
ひとに説明するなら
「配色は、どの色を使うかと同じくらい、どのくらい使うかが大事。よく言われる目安が、土台の色を7割、主役の色を2割半、目を引く色を5分。この割合にすると、まとまりがあって、ちゃんと見せ場もある配色になりやすい」
70:25:5 という目安
日本では、ベースカラー70%、メインカラー25%、アクセントカラー5% という割合が、配色の目安としてよく紹介されます。英語圏では、60:30:10 という目安もよく知られています。
どちらも、決まった法則ではなく「迷ったときの出発点」です。大切なのは、色ごとの面積に、はっきりした差をつけることです。
- ベース 70%
- メイン 25%
- アクセント 5%
割合に差があると、まとまる
3つの色を同じくらいの面積で使うと、どの色が主役なのか分からず、落ち着かない配色になります。割合に差をつけると、目が自然に、広い色から狭い色へと流れ、見る順番が生まれます。
アクセントの5% は、とても少なく感じますが、それくらいだからこそ、目を引く効果が生まれます。
比率の数え方
比率は、画面や紙の上で、その色が占める面積で考えます。Web なら、背景が広くベース、見出しや帯がメイン、ボタンや印がアクセント、という形が多くなります。
写真やイラストを使う場合は、その中の色も面積に入ります。写真の色を見て、まわりの配色の割合を調整すると、全体がまとまります。
よくある勘違い
勘違い70:25:5 を、きっちり守らなければいけない
ほんとうは迷ったときの目安です。大切なのは、色ごとの面積にはっきり差をつけることです。
勘違いアクセントを増やすほど、印象的になる
ほんとうは増やすほど効き目が薄れます。少ないから目を引きます。
COLOR JOURNEY で使うには
COLOR JOURNEY のパレットの6色を使うときも、この割合が役に立ちます。いちばん明るい色をベースに広く、深い色や中くらいの色をメインに、ひとつだけ色みの違う色をアクセントに少しだけ。6色全部を同じように使う必要はありません。
参考になるパレット
クイズ
70:25:5 の「5」にあたるのは？
アクセントカラー
正解です。答えは「アクセントカラー」。アクセントカラーを、ほんの少しだけ使います。
ベースカラー
ちがいます。答えは「アクセントカラー」。アクセントカラーを、ほんの少しだけ使います。
メインカラー
ちがいます。答えは「アクセントカラー」。アクセントカラーを、ほんの少しだけ使います。
3色を同じ面積で使うと、どうなりやすい？
主役が分からず落ち着かない
正解です。答えは「主役が分からず落ち着かない」。割合に差がないと、見る順番が生まれず、落ち着かない配色になります。
とてもまとまる
ちがいます。答えは「主役が分からず落ち着かない」。割合に差がないと、見る順番が生まれず、落ち着かない配色になります。
色が消える
ちがいます。答えは「主役が分からず落ち着かない」。割合に差がないと、見る順番が生まれず、落ち着かない配色になります。
よくある質問
配色の黄金比とは何ですか？
ベース70%・メイン25%・アクセント5% という割合の目安のことが多いです。英語圏では 60:30:10 という目安も知られています。
配色の比率は必ず守らないといけませんか？
決まった法則ではなく、迷ったときの目安です。色ごとの面積に差をつけることが大切です。
写真を使うときの比率の考え方は？
写真の中の色も面積に入れて考え、まわりの配色の割合を調整します。