デザインの配色の基本｜色の決め方・配色パターン・配色ツール

Webサイトやチラシ、資料を作るとき、多くの人が最初につまずくのが「色選び」です。なんとなく好きな色を並べてみたものの、なぜか野暮ったく見える。そんな経験は珍しくありません。

実は配色には、知っておくだけで見違える基本ルールがあります。この記事では、色の役割分担から具体的な決め方、すぐ使える配色パターン、便利なツールまでを順番に解説します。デザインが専門でない方でも、今日から実践できる内容にまとめました。

配色は「センスの問題」だと思われがちですが、実際にはルールと手順の積み重ねです。本記事の内容を順に押さえていけば、特別な才能がなくても、見る人に意図が伝わる配色を作れるようになります。まずは肩の力を抜いて読み進めてください。

配色の前に知っておきたい色の基礎知識

配色を学ぶ前に、色そのものの仕組みを軽くおさえておくと理解が早まります。色は「色相・彩度・明度」という3つの要素で表されます。この3つを意識するだけで、色の調整が驚くほどやりやすくなります。

逆に言えば、配色がうまくいかないときは、この3要素のどれかがそろっていないことがほとんどです。仕組みを知ることが、最短の上達ルートになります。

色相・彩度・明度の3要素

色相は赤・青・黄といった「色味」そのものです。彩度は色の鮮やかさ、明度は色の明るさを指します。同じ赤でも、鮮やかな赤と、くすんだ赤ではまったく違う印象になります。

配色がうまくいかない原因の多くは、彩度や明度がバラバラなことにあります。色相をそろえなくても、彩度と明度の調子（トーン）を合わせるだけで統一感が生まれます。これは初心者がまず覚えるべきポイントです。

たとえば淡いパステル調でそろえる、深く落ち着いた調子でそろえる、といったようにトーンを統一すると、複数の色を使っても散らかりません。色選びに迷ったら、まずトーンをそろえることを意識してみましょう。

色相環（カラーホイール）の見方

色相環は、色相を円状に並べた図です。配色を考えるときの地図のような役割を果たします。隣り合う色は相性がよく、向かい合う色は強いコントラストを生みます。

色相環上での位置関係を覚えておくと、後で紹介する配色パターンが感覚的に理解できます。難しく考えず「近い色は穏やか、遠い色は刺激的」とイメージするだけで十分です。

多くの配色ツールはこの色相環をベースにしています。ツールの提案を理解するうえでも、色相環の考え方は土台になります。一度仕組みを知っておくと、ツールの結果に納得感が持てます。

RGBとCMYK、Webで使う色の指定方法

Webで色を扱うときは、主にRGBやHEX（16進数）で指定します。「#FFFFFF」のような表記がHEXです。印刷物ではCMYKという別の方式が使われます。

同じ色でも、画面（RGB）と印刷（CMYK）では見え方が変わることがあります。Web中心なら基本はRGB／HEXで考えれば問題ありません。印刷も想定する場合は、色の見え方の違いに注意しておきましょう。

配色の基本ルール｜70：25：5の黄金比

配色で最も大切なのは、色に「役割」を与えることです。同じくらいの面積で何色も使うと、視点が定まらず散らかった印象になります。そこで使う面積の比率を決めます。

この「面積比」という考え方を知っているかどうかで、仕上がりは大きく変わります。色そのものより、どれだけ使うかが印象を左右するのです。

ベース・メイン・アクセントの役割分担

一般的に推奨されるのが「ベース70％・メイン25％・アクセント5％」という比率です。ベースカラーは背景など最も広い面積を占める色で、白やグレーなど主張の少ない色が向いています。

メインカラーはサイトやブランドの印象を決める主役の色です。アクセントカラーはボタンや強調したい部分だけに使う、少量で効く色です。この3つの面積を意識するだけで、配色は格段にまとまります。

比率はあくまで目安で、厳密に測る必要はありません。「ベースが一番広く、アクセントはごく一部」という大きな関係さえ守れば十分です。

役割	面積の目安	使う場所の例	色の傾向
ベースカラー	約70％	背景・余白	白・薄いグレーなど控えめ
メインカラー	約25％	見出し・ヘッダー・帯	ブランドを象徴する色
アクセントカラー	約5％	ボタン・リンク・強調	目立つ・対比の強い色

使う色は3色までを目安に

初心者がやりがちな失敗が、色を使いすぎることです。色数が増えるほど、まとめるのは難しくなります。まずは「ベース・メイン・アクセントの3色」に絞るのがおすすめです。

同じ色の濃淡（同系色のトーン違い）で変化をつければ、3色でも十分に表現できます。色を足したくなったら、まず手持ちの色の明度を変えられないか考えてみましょう。

プロのデザインほど、実は色数が少ないことがよくあります。色を減らす勇気が、洗練された印象につながります。色数の多さは、必ずしも豊かさではありません。

白・黒・グレーは「無彩色」として別枠で考える

白・黒・グレーには色味がなく、これらを無彩色と呼びます。無彩色はどんな色とも相性がよく、配色の調整役になります。文字色や境界線、余白の演出に欠かせません。

無彩色を上手に使うと、少ない色でも引き締まった印象になります。色で迷ったら、まず無彩色で骨格を作り、そこに1〜2色を足すと安定します。

たとえば黒に近いグレーを文字に、薄いグレーを区切り線に使うだけでも、デザインは整って見えます。無彩色は地味に思えますが、配色の完成度を左右する重要な役割を担っています。

色の決め方｜失敗しない手順

配色を一から考えるとき、どの色から決めればよいか迷う方は多いはずです。ここでは実務でも使える、現実的な決め方の手順を紹介します。順番を守るだけで、迷いが大きく減ります。

1．メインカラーを最初に1色決める

すべての出発点はメインカラーです。ブランドのロゴ色、商品の特徴、伝えたい印象から、主役となる1色をまず決めます。ここが定まらないと、ほかの色も決められません。

たとえば信頼感を出したいなら青系、温かみを出したいならオレンジ系、自然や安心ならグリーン系、といった具合です。迷う場合は、競合や業界でよく使われる色を調べると方向性が見えてきます。

2．ベースカラーで土台を整える

次にベースカラーを決めます。多くの場合、白や非常に薄いグレーが無難です。背景が落ち着いていると、メインカラーやコンテンツが引き立ちます。

背景に濃い色を使うこともできますが、文字が読みにくくならないよう注意が必要です。可読性は配色の最優先事項だと考えておきましょう。

白を基調にすると清潔感が出て、薄いグレーにすると柔らかい印象になります。ベースは目立たせる色ではなく、ほかの色を引き立てる「縁の下の力持ち」だと考えると選びやすくなります。

3．アクセントカラーで行動を促す

最後にアクセントカラーを足します。これは「ここを見てほしい」「ここを押してほしい」という箇所に使う色です。メインカラーの反対側にある色を選ぶと、自然に目立ちます。

アクセントは少量だからこそ効果があります。使いすぎると目立たなくなるため、ボタンや重要なリンクなどに限定して使いましょう。サイトであれば、申し込みボタンの色がその代表例です。

4．全体を見て微調整する

3色が決まったら、実際の画面やデザインに置いて全体を眺めます。机上で良く見えても、配置すると印象が変わることはよくあります。彩度や明度を少し調整するだけで、ぐっと見やすくなる場合があります。

この最終調整を省かないことが、完成度の差になります。少し離れて見る、白黒にして明度差を確認する、といった確認も有効です。

すぐ使える基本の配色パターン5種

色相環を使った代表的な配色パターンを知っておくと、色選びがぐっと楽になります。ここでは初心者でも扱いやすい5つのパターンを紹介します。どれもツールで簡単に再現できます。

同一色相配色（モノクロマティック）

1つの色相の中で、明度や彩度だけを変えて作る配色です。たとえば濃い青・中くらいの青・薄い青を組み合わせます。失敗しにくく、上品で落ち着いた印象になります。

1色しか使わないため、まとまらないことがまずありません。配色に自信がない最初の一歩として最適です。単調にならないよう、明度差をしっかりつけるのがコツです。

類似色配色（アナログ）

色相環で隣り合う色を組み合わせる方法です。青と青緑、オレンジと黄色など、近い色同士なので自然になじみます。穏やかでまとまりのある印象を作れます。

自然界にも多い組み合わせのため、見る人に安心感を与えやすいのが特徴です。やわらかい雰囲気を出したいときに向いています。

補色配色（コンプリメンタリー）

色相環で正反対にある色の組み合わせです。青とオレンジ、赤と緑などが代表例です。コントラストが強く目を引きますが、使う面積を間違えると派手になりすぎるので注意します。

片方を主役、もう片方をアクセントとして少量に抑えると、扱いやすくなります。活発さやインパクトを出したい場面に効果的です。

トライアド配色

色相環を三等分した位置にある3色を使う配色です。バランスよく華やかさを出せます。1色を主役にし、残りをアクセントに回すとまとまりやすくなります。

3色とも同じ強さで使うとうるさくなりがちです。あくまで主役を1つ決めるのが、トライアドを上手に使うコツです。

パターン名	特徴	向いている印象
同一色相	1色の濃淡だけで構成	上品・落ち着き
類似色	隣り合う色でなじませる	穏やか・自然
補色	反対色で強い対比	活発・インパクト
トライアド	三等分の3色	華やか・バランス
モノトーン+1色	白黒灰に1色だけ足す	洗練・都会的

モノトーン＋差し色（おすすめ）

初心者に特におすすめなのが、白・黒・グレーのモノトーンに1色だけアクセントを足す方法です。失敗がほぼなく、洗練された印象になります。色選びに自信がないときの安全策として覚えておくと便利です。

差し色をブランドカラーにすれば、シンプルなのに印象に残るデザインが作れます。「迷ったらモノトーン＋1色」と覚えておくと、多くの場面で役立ちます。

目的・業種別の配色の考え方

配色は「正解の1つ」があるわけではなく、目的によって最適解が変わります。ここでは代表的な方向性を整理します。あくまで出発点として参考にしてください。

信頼感・誠実さを出したいとき

金融、士業、医療、BtoB企業などでは、青系を中心にした配色がよく使われます。落ち着いたトーンでまとめ、彩度を抑えると、堅実で信頼できる印象になります。

派手さより安定感を優先するのがポイントです。アクセントも控えめにし、全体を静かにまとめると好印象につながります。

親しみやすさ・元気を出したいとき

飲食、子ども向け、地域サービスなどでは、オレンジや黄色など暖色系が効果的です。明るく親しみやすい雰囲気を作れます。彩度をやや高めにすると、活気が出ます。

ただし暖色を広く使いすぎると落ち着きがなくなります。ベースは明るい無彩色にして、暖色をポイントで効かせるとバランスがとれます。

高級感・上質さを出したいとき

高級ブランドやサロンなどでは、黒・濃紺・深い緑などの暗い色に、ゴールドや白を組み合わせる配色が定番です。彩度を抑え、余白を広くとると上質さが増します。

色数を絞り、コントラストを上品に保つことが鍵です。情報を詰め込みすぎないことも、高級感の演出につながります。

おすすめの配色ツール

配色は感覚だけでなく、ツールの力を借りると効率も精度も上がります。ここでは無料で使える代表的なツールを紹介します。料金や機能は変動するため、利用前に各公式サイトでご確認ください。

Adobe Color

Adobeが提供する配色ツールです。色相環を操作しながら、補色や類似色などのルールに沿った配色を自動で作れます。画像から色を抽出する機能もあり、写真の雰囲気に合わせた配色づくりに役立ちます。

作った配色を保存・共有できるのも便利な点です。色相環の動きを見ながら学べるため、配色の勉強用としても優れています。

Coolors

スペースキーを押すだけで配色パターンを次々に提案してくれる人気ツールです。直感的で動作が軽く、アイデア出しに向いています。気に入った色をロックして、残りだけ変えることもできます。

HEXコードのコピーやパレットの書き出しも簡単です。とにかく数を見たいときに頼りになるツールです。

Color Hunt

あらかじめ作られた美しい配色パレットを閲覧・コピーできるサイトです。自分で作るのが難しい場合、完成された組み合わせから選ぶだけでも十分実用的です。トレンドの配色を知る参考にもなります。

4色1組のパレットが多く、そのまま使える手軽さが魅力です。眺めているだけでも色の引き出しが増えます。

ジャンルや色味で絞り込めるため、目的に近いパレットを探しやすいのも利点です。完成度の高い組み合わせに触れることで、自分の配色感覚も自然と育っていきます。

その他のツールと使い分け

このほかにもPalettonやKhroma、各種ブラウザ拡張など、配色を助けるツールは数多くあります。役割は「アイデア出し」「ルールに沿った生成」「既製パレットの活用」に大別できます。

まずはCoolorsで数を当たり、Adobe Colorでルールを整え、Color Huntで完成例を参考にする、といった使い分けがおすすめです。ツールはあくまで補助で、最終判断は目的に照らして行いましょう。

配色でやりがちな失敗と対策

最後に、初心者が陥りやすい失敗とその対策をまとめます。多くは「色のせい」ではなく「使い方」の問題です。原因を知れば、対処は難しくありません。

色を使いすぎてまとまらない

最も多い失敗が色数の多さです。対策はシンプルで、3色に絞ること。変化は同系色の濃淡でつければ、色数を増やさずに表現の幅を広げられます。

「この色は本当に必要か」を一つずつ問い直すと、不要な色が見えてきます。引き算の発想が、まとまりを生みます。

彩度が高い色を広い面積で使う

鮮やかな色を背景全体など広い面積に使うと、目が疲れて安っぽく見えがちです。鮮やかな色はアクセントとして小さく使い、広い面積は彩度を抑えた色にすると落ち着きます。

「鮮やかな色ほど少なく使う」と覚えておくと、失敗が減ります。広い面積は控えめに、が基本です。

コントラスト不足で読みにくい

背景と文字の色が近すぎると、内容が伝わりません。特に薄いグレーの文字や、色背景に色文字を重ねる場合は要注意です。読みやすさは見た目の好みより優先しましょう。

判断に迷ったら、コントラストチェッカーで確認します。デザインの美しさと読みやすさは両立できます。

特に高齢の方や、画面を見る環境がさまざまな読者を想定するなら、コントラストは十分にとっておくほうが安全です。読みやすさを確保したうえで美しさを追求するのが、正しい順番です。

トーンがバラバラで統一感がない

色相は合っていても、鮮やかな色とくすんだ色が混ざると、ちぐはぐな印象になります。対策は、彩度と明度の調子（トーン）をそろえること。パステル調ならパステル調で統一します。

トーンをそろえるだけで、複数の色を使っても一体感が出ます。色相より先にトーンを意識するのが、上達の近道です。

こうした配色の考え方は、サイト全体のデザインやホームページ制作の品質にも直結します。色は印象とブランドを左右する大切な要素です。仕組みを知れば、誰でも着実に整えられます。

配色をデザインに落とし込む実践のコツ

ルールやパターンを覚えても、いざ自分のデザインに使う段階でつまずく人は多いものです。ここでは、知識を実際の制作につなげるための具体的なコツを紹介します。

カラーパレットを先に固めてから作り始める

作業の途中で色を増やしたり変えたりすると、全体のバランスが崩れがちです。デザインに着手する前に、使う色を「カラーパレット」としてまとめておきましょう。HEXコードを一覧にしておくと迷いません。

ベース・メイン・アクセントの3色に、それぞれ濃淡を2〜3段階用意しておくと、制作中に色で迷う時間が大きく減ります。最初の一手間が、後の作業をぐっと楽にします。

濃淡（シェード）で表現の幅を広げる

同じ色でも、明るい色から暗い色まで段階を用意すると、色数を増やさずに豊かな表現ができます。たとえばメインの青を、濃い青・標準の青・淡い青に分けて使い分けます。

見出しは濃く、背景の帯は淡く、といった使い分けで、統一感を保ちながらメリハリがつきます。新しい色を足す前に、まず濃淡で解決できないか考えるのがコツです。

余白も配色の一部として考える

配色というと色だけに注目しがちですが、余白（何も置かない空間）も印象を大きく左右します。色を詰め込みすぎず、適度な余白をとることで、選んだ色がきれいに引き立ちます。

余白は実質的にベースカラーの面積です。広い余白は上質さや落ち着きを生みます。色を足したくなったら、余白を活かせないかを先に検討してみましょう。

配色のトレンドと普遍的な基本

配色には流行り廃りもありますが、土台となる基本は大きく変わりません。トレンドを追いすぎず、基本を軸に取り入れる姿勢が長く使えるデザインにつながります。

近年よく見る配色の傾向

近年のWebでは、彩度を抑えた落ち着いた色合いや、淡いグラデーション、ダークモードに対応した暗い背景などがよく見られます。やわらかいパステル調も人気です。

こうした傾向は参考になりますが、流行はいずれ変わります。トレンドはあくまでスパイスとして取り入れ、ブランドの軸はぶらさないことが大切です。

ブランドカラーは一貫して使う

サイト、名刺、SNS、資料など、あらゆる接点で同じ色を使うことを「カラーの一貫性」といいます。一貫した色使いは、見る人の記憶に残り、ブランドの信頼感を高めます。

流行に合わせて毎回色を変えると、印象が定着しません。普遍的な基本として、ブランドカラーは長く使い続けることをおすすめします。一貫性こそが、最も強い武器になります。

具体例で学ぶ｜シーン別の配色サンプル

ここまでの考え方を、具体的なシーンに当てはめてみましょう。実際の場面をイメージすると、配色の決め方がより身近になります。あくまで一例として参考にしてください。

コーポレートサイトの配色例

信頼感を重視する企業サイトでは、ベースを白、メインを落ち着いた青、アクセントを少し明るい青やオレンジにする構成がよく合います。背景は白で広くとり、見出しやヘッダーにメインの青を使います。

問い合わせボタンだけアクセント色にすると、誘導したい行動が明確になります。全体は青系でまとめつつ、ボタンだけ目立たせる。これだけで、堅実さと使いやすさが両立します。

飲食店・カフェの配色例

温かみと食欲を感じさせたい飲食店では、ベースをクリーム色や白、メインを茶色やオレンジ、アクセントを差し色のグリーンや赤にする構成が向いています。暖色中心で親しみやすい雰囲気になります。

写真が主役になることも多いため、文字や装飾の色は控えめにして、料理の写真を引き立てるのがコツです。色で主張しすぎないことが、かえって魅力を高めます。

美容・サロンの配色例

上質さや清潔感を出したい美容・サロンでは、ベースを白、メインをくすみピンクやベージュ、アクセントをゴールドや濃いブラウンにすると、やわらかく洗練された印象になります。彩度は抑えめがポイントです。

淡いトーンで全体をまとめ、余白を広くとると、ていねいで上品な雰囲気が生まれます。トーンをそろえることの効果が、特に表れやすいジャンルです。

業種	ベース	メイン	アクセント
コーポレート	白	落ち着いた青	明るい青・オレンジ
飲食・カフェ	クリーム・白	茶・オレンジ	グリーン・赤
美容・サロン	白	くすみピンク・ベージュ	ゴールド・濃ブラウン
IT・スタートアップ	白・薄グレー	鮮やかな青・紫	蛍光系の差し色

いずれの例も「ベースは広く控えめ、アクセントは少量で対比」という基本は共通しています。業種が変わっても、考え方の骨格は同じだと分かります。

配色を上達させる学び方

配色は知識を入れるだけでなく、実際に手を動かし、観察を重ねることで上達します。最後に、効率よく上達するための学び方を紹介します。

良いデザインの色を分析する

好きなサイトやチラシを見つけたら、「どの色がベースで、どこにアクセントが使われているか」を観察してみましょう。色の役割を意識して見るだけで、配色の引き出しが増えていきます。

気に入った配色は、HEXコードを調べて記録しておくのもおすすめです。優れた事例を分解することが、最も実践的な学習になります。デザインの参考サイトを眺める習慣をつけると、感覚が磨かれます。

まず真似て、少しずつ崩す

最初からオリジナルを目指す必要はありません。良い配色を真似て使ってみて、慣れてきたら少しずつ自分なりに変えていく。この積み重ねが、確実な上達につながります。

真似ることは恥ずかしいことではなく、上達の正攻法です。基本パターンとツールを使い、量をこなすうちに、自然と判断が速くなります。

知っておくと差がつく配色の応用知識

基本を押さえたら、もう一歩進んだ知識も役立ちます。ここでは、現場でよく使われる応用的な考え方を分かりやすく紹介します。難しく感じる必要はありません。

色の面積効果に注意する

小さな見本で見た色と、広い面積に塗った色では、印象が変わって見えます。これを「面積効果」と呼びます。一般に、明るい色は広い面積でより明るく、鮮やかな色はより派手に感じられます。

見本帳やパレットで良いと思った色も、実際に広く使うと想像より強く出ることがあります。だからこそ、必ず実際のサイズで確認することが大切です。小さな見本だけで決めない、と覚えておきましょう。

進出色と後退色で奥行きを出す

暖色や明るい色は手前に飛び出して見え（進出色）、寒色や暗い色は奥に引っ込んで見えます（後退色）。この性質を使うと、平面のデザインにも奥行きや視線の流れを作れます。

たとえば目立たせたいボタンに進出色を使うと、自然と前に出て見えます。色の見え方の性質を知っておくと、意図した誘導がしやすくなります。

明度差で視線を導く

人の目は、明るさの差が大きいところに自然と引きつけられます。最も見てほしい部分に、背景との明度差を大きくつけると、見る人の視線を意図した順番で導けます。

色相だけでなく明度差を意識することで、情報の優先順位を視覚的に伝えられます。これは可読性の確保にも直結する、実用性の高い考え方です。

応用知識	内容	使いどころ
面積効果	広い面積ほど色が強く見える	背景色の最終確認
進出・後退色	暖色は手前、寒色は奥に見える	奥行き・ボタンの強調
明度差	明るさの差が視線を引く	優先順位づけ・可読性

これらは知らなくても配色はできますが、知っていると仕上がりの説得力が増します。少しずつ取り入れていけば十分です。基本ができてから応用へ、の順番で問題ありません。

よくある質問

配色は何色まで使っていいですか？

基本は3色（ベース・メイン・アクセント）が目安です。色数を増やすより、同系色の濃淡で変化をつけるほうがまとまりやすくなります。慣れるまでは3色を守ると失敗しにくいです。

センスがなくても配色はできますか？

できます。配色は感覚ではなく、役割分担とルールの技術です。70：25：5の比率や配色パターンを使い、ツールで補えば、専門知識がなくても整った配色は作れます。練習するほど精度も上がります。

メインカラーはどう決めればいいですか？

ブランドのロゴ色や、伝えたい印象から逆算して決めます。信頼感なら青系、温かみならオレンジ系といった具合です。迷う場合は業界でよく使われる色を調べると方向性が見えます。

白や黒は「色」に数えますか？

配色の比率を考えるうえでは数えます。特にベースカラーとして白やグレーを使う場面は多く、土台として重要です。無彩色はどんな色とも相性がよく、配色の調整役になります。

配色ツールは無料でも十分ですか？

多くの場面で無料ツールで十分です。Adobe ColorやCoolorsなどで配色作成・確認ができます。ただし機能や料金は変動するため、利用前に各公式サイトでご確認ください。

コントラストはどこで確認できますか？

WebAIMのコントラストチェッカーなど、無料の判定ツールで確認できます。背景色と文字色を入力すると読みやすさの基準を満たすか判定できます。アクセシビリティの観点でも確認をおすすめします。

補色は使わないほうがいいですか？

使い方次第です。補色は強いコントラストで目を引くため、アクセントに向いています。ただし広い面積で同量使うと派手になりすぎます。片方を主役、もう片方を少量にすると扱いやすくなります。

トーンとは何ですか？

彩度と明度を組み合わせた、色の調子のことです。同じ色相でも、明るく淡いトーンや暗く深いトーンがあります。複数の色を使うときはトーンをそろえると、統一感が出て失敗しにくくなります。

配色の比率は厳密に守るべきですか？

厳密に測る必要はありません。70：25：5はあくまで目安で、「ベースが最も広く、アクセントはごく一部」という関係さえ保てば十分です。だいたいの感覚で配分し、最後に全体を見て調整しましょう。

グラデーションは使ってもいいですか？

使えます。ただし同系色や近い色相でまとめると失敗しにくくなります。色相が大きく離れたグラデーションは派手になりやすいので、彩度や明度を近づけると上品にまとまります。背景の演出に向いています。

まとめ｜配色は役割分担とルールで誰でも整えられる

配色は生まれ持ったセンスではなく、学べる技術です。色相・彩度・明度の基礎を押さえ、ベース70・メイン25・アクセント5の比率で役割を分けるだけで、見違えるほど整います。

色は1色を起点に広げ、トーンをそろえることが失敗を防ぐ近道です。迷ったらツールに頼り、最後に可読性まで確認すれば安心です。基本を軸に少しずつ手を動かせば、配色は着実に上達していきます。