色数を増やしすぎない考え方とは?配色をまとめるコツを解説

基本の理解

まずはこの考え方の中身と、色数を絞るとなぜ良いのかを押さえましょう。

色数を増やしすぎない考え方とは何か

色数を増やしすぎない考え方とは、配色に使う色の種類を、ベースカラー・メインカラー・アクセントカラーの3色程度に絞り込み、むやみに増やさないという考え方のことです。この3つは配色で色に与える役割の名前で、ベースカラーは背景や余白などの土台になる色、メインカラーはサービス全体の印象を決める色、アクセントカラーはボタンなど一番気づいてほしい要素だけに少量使う色を指します。

色数を絞ることで、デザイン全体に統一感が生まれ、まとまりのある印象になります。また、どの色が重要かが分かりやすくなり、情報の優先順位が伝わりやすくなるという効果もあります。

違いは、実際に並べてみると一目瞭然です。

左(NG):赤・黄・緑・青・紫の5色がバラバラに主張している/右(OK):紺・水色・オレンジの3色+白・濃いグレーでまとめた例。予約ボタンにも自然と目が行く

なぜ色数を絞る必要があるのか

初心者に多い失敗の一つが、色数の使いすぎです。5色以上の色が混在すると、デザインがまとまらなくなりやすい傾向があります。色数が多いほど、それぞれの色をどのくらいの面積で使うかの管理や、色同士のコントラスト(色の差の大きさ)の調整も複雑になり、バランスを取るのが難しくなります。

実践としては、まず基本の3色(ベースカラー・メインカラー・アクセントカラー)を決め、それ以外の色は極力使わないようにします。

どうしても色数を増やしたい場合は、まったく新しい色相を足すのではなく、既存の色の明度・彩度を変えたバリエーションで増やすのがおすすめです。言葉の意味は次の通りです。

• 色相(しきそう):赤・青・黄など「何色か」という色の種類
• 明度(めいど):白っぽいか・黒っぽいか(明るさ)
• 彩度(さいど):派手か・くすんでいるか(鮮やかさ)

たとえば青をメインカラーにしているなら、新たに緑を足すのではなく、「青」という色相はそのままに、明度を上げた水色や、明度を下げたネイビーを用意するという考え方です。

3つとも色相は同じ「青」なので、色数を増やしても統一感が崩れにくい

デザインツールでは、カラーピッカーで色相(H)はそのままに、明るさ(B)や彩度(S)の数値だけを動かせば、こうしたバリエーションを作れます(操作のイメージは明度・彩度を使った配色とは?で解説しています)。

なお、白・グレー・黒といった無彩色(色みを持たない色)は、色数のカウントに含めずに考えることが多いとされています。ただし「いくらでも使ってよい」わけではなく、無彩色も種類を増やしすぎると雑然とします。目安としては、背景の白、本文の文字色の黒(または濃いグレー)、区切り線や補足に使うグレー1色くらいに抑えると安心です。本文の文字色は、真っ黒よりも#333333のような濃いグレーにすると、読みやすさを保ちながら柔らかい印象になります(詳しくは背景色と文字色の組み合わせとは?で解説しています)。

実践のポイント

3色の選び方・使い方と、色数を絞る際に陥りやすい失敗、よくある疑問をまとめます。

相性の良い3色の選び方

「3色に絞る」と決めても、相性の良い組み合わせを自力で見つけるのは最初は難しいものです。次のような方法から始めると迷いにくくなります。

• 同系色でまとめる:メインカラーと色相環(色みを順番に円形に並べた図)で隣り合う色を選ぶと、統一感のある落ち着いた配色になります(類似色配色とは?)
• アクセントだけ反対色にする:アクセントカラーに、メインカラーの反対側にある色(補色)を選ぶと、ボタンなどがしっかり目立ちます。上のOK例も、紺・水色に対してアクセントをオレンジにしています(補色配色とは?)
• 配色ツールを使う:Adobe ColorやCoolorsなどの無料の配色ツールを使えば、相性の良い組み合わせを提案してもらえます(配色の基本ルールと配色ジェネレーターの紹介)

3色の使う割合の目安

3色を決めたら、同じ量ずつ使うのではなく、面積に差をつけるのがポイントです。配色の基本比率として、「ベースカラー70%・メインカラー25%・アクセントカラー5%」がよく知られています。背景など広い面はベースカラー、見出しやヘッダーなどはメインカラー、一番押してほしいボタンだけにアクセントカラー、というイメージです。詳しくは色の割合とは?配色の黄金比率70:25:5を初心者向けに解説で解説しています。

注意点・よくある間違い

• 「もっと華やかにしたい」という理由で色を次々と追加してしまい、気づけば統一感のない配色になっていることがあります。色を追加する前に、本当に必要かを一度立ち止まって考えましょう。
• ロゴやアイコン、写真など、さまざまな要素それぞれで別の色を使ってしまい、全体で見ると色数が想定より多くなっていることがあります。パーツごとではなく、ページ全体で色数を数える習慣をつけましょう。

よくある質問

• Q. 無彩色を含めても本当に3色でいいの?
  A. はい。白・グレー・黒などの無彩色は、色数のカウントとは別に考えることが多いです。色みを持つ色(有彩色)を3色程度に絞り、無彩色で土台を作るとまとまりやすくなります。なお、ベースカラーに白などの無彩色を使う場合は、有彩色はメインカラーとアクセントカラーの2〜3色になります。無彩色も、上で紹介したように白・黒(濃いグレー)・グレー1色程度に抑えましょう。
• Q. 写真を多く使うデザインでも色数を絞れる?
  A. 写真自体の色数までは完全にコントロールできませんが、周囲の背景・文字・ボタンなどデザイン側の色を3色程度に絞ることで、写真が多くても全体としての統一感を保ちやすくなります。

まとめ

色数を増やしすぎない考え方とは、配色に使う色をベースカラー・メインカラー・アクセントカラーの3色程度に絞り込むという考え方です。色数を絞ることで、統一感があり、情報の優先順位も伝わりやすい配色になります。3色は70:25:5を目安に面積に差をつけ、無彩色も白・黒(濃いグレー)・グレー1色程度に抑えましょう。

色を増やしたくなったときは、新しい色相を足すのではなく、水色やネイビーのように既存の色の明度・彩度のバリエーションで対応することを意識してみましょう。