色の割合とは?配色の黄金比率70:25:5を初心者向けに解説

記事内に広告が含まれています。

Amazon ＞ books セール＆キャンペーンへ

楽天市場＞電子書籍（楽天kube）セールへ

色の組み合わせ自体は良いはずなのに、なんだかバランスが悪い。

そんなときは、色の「割合」に原因があるかもしれません。

この記事では、配色における色の割合とは何か、そして定番の目安として知られる「70:25:5」の考え方を、初心者向けに解説します。

基本の理解

まずは色の割合とは何を指すのか、そして定番の比率を押さえましょう。

色の割合とは何か

色の割合とは、デザインの中でベースカラー・メインカラー・アクセントカラーをそれぞれどのくらいの面積(比率)で使うかという配分のことです。

この3つは、配色を考えるときに色へ与える役割の名前で、ベースカラーは背景や余白などデザインの土台になる色、メインカラーはサービスの印象を決める色、アクセントカラーは一番気づいてほしい要素だけに使う目立つ色を指します。

この3つの役割を、「ベースカラー70%:メインカラー25%:アクセントカラー5%」の面積で使うという比率が、定番の目安として広く知られています。

役割	比率の目安	使う場所の例
ベースカラー	約70%	背景・余白
メインカラー	約25%	ヘッダー・見出しなど、全体の印象を決める部分
アクセントカラー	約5%	CTAボタン(申し込み・購入などを促すボタン)など、目立たせたい部分

なぜ比率の目安が必要なのか

色そのものの組み合わせが良くても、使う面積の配分を誤ると、意図した印象と違う仕上がりになってしまいます。

「70:25:5」のような具体的な数値の目安がないと、初心者は色をどのくらいの分量で使えばいいか判断に迷いやすいものです。

実践では、背景や余白などベースカラーに全体の約7割を割り当ててデザインの土台とし、サービスの印象を決めるメインカラーを約2.5割使って全体の雰囲気を形作ります。

そしてCTAボタンなど本当に目立たせたい箇所だけにアクセントカラーを約5%使うことで、視線を集中させられます。

実践のポイント

比率を使うときに気をつけたい点と、よくある疑問をまとめます。

注意点・よくある間違い

アクセントカラーのつもりで選んだ色を、ついあちこちに使いすぎてしまい、割合が想定よりずっと多くなってしまうことがあります。使う箇所を決めてから配置するとブレを防げます。
「70:25:5」を厳密な数値として捉えすぎないようにしましょう。あくまで目安であり、実際の見え方を確認しながら調整することが大切です。

よくある質問

Q. 70:25:5を厳密に測る必要はある?
A. ピクセル単位で厳密に測る必要はありません。「ベースカラーが圧倒的に多く、アクセントカラーはごく少量」という大まかな感覚を守れていれば十分です。
Q. 比率通りにしてもバランスが悪く感じるときは?
A. 同じ色でも広く使うか狭く使うかで明るさや鮮やかさの印象が変わる「面積効果」があるため、同じ比率でも色の組み合わせ次第で印象は変わります。
比率はあくまで出発点とし、最終的には実際の画面で目視確認しながら微調整しましょう。
Q. 「60:30:10」という比率も見たことがあるけど、どちらが正しい?
A. どちらも実在する目安で、間違いではありません。どちらもページ全体の面積を対象にした比率ですが、役割の分け方の細かさが異なります。
「60:30:10」は背景を含む全体の基調色をメインカラー(60%)としてひとまとめにし、残りを補助的な色(セカンダリー30%)とアクセント(10%)に分けます。
一方、本記事の「70:25:5」は、背景・余白の部分を独立してベースカラー(70%)と呼び、ヘッダーやロゴなど印象を決める部分をメインカラー(25%)として、より細かく役割を分けています。
どちらを使っても大きな失敗にはなりませんが、本サイトでは「ベース70%:メイン25%:アクセント5%」に統一しています。
Q. 70:25:5の比率を測定できる専用ツールはある?
A. 比率そのものを自動で測定してくれる専用ツールは、今のところ見当たりません。
既存デザインの実際の面積比率を確認したい場合は、Photoshop・GIMPなどの画像編集ソフトの「カラー範囲選択」やヒストグラム機能を使うと、特定の色が画像全体の何%を占めているかをピクセル単位で確認できます。
ただし、そこまで厳密に測る必要はなく、「ベースカラーが圧倒的に多いか」を目視で確認する程度で十分です。