デザイン初心者が知っておきたい配色の基本｜色が与える印象と選び方のコツ

2026年8月18日

この記事を読むとわかること

色ごとに与える印象の違いと使いどころ
デザイン初心者が配色でつまずきやすいポイント
迷ったときにすぐ使える配色の基本ルールとツール

「なんとなく」で色を選ぶと、デザインが一気に安っぽくなる

Webデザインやチラシ制作を始めたばかりの頃、レイアウトやフォントは意識しても、配色は「なんとなく好きな色」で決めてしまいがちです。しかし配色は、見る人の印象を大きく左右する要素のひとつです。同じレイアウト・同じ写真を使っていても、色の組み合わせひとつで「安っぽく見える」デザインと「洗練されて見える」デザインに分かれてしまいます。まずは色が持つ基本的な印象を知ることから始めましょう。

色が与える基本的な印象を知っておこう

色にはそれぞれ、見る人に与える心理的な印象があります。代表的なものを押さえておくだけでも、配色の方向性は決めやすくなります。

暖色（赤・オレンジ・黄）は、元気・情熱・親しみやすさといった印象を与えます。飲食店やイベント告知など、目を引きたい場面や購買意欲を刺激したい場面で使われることが多い色です。

寒色（青・緑）は、信頼・誠実・清潔感といった印象を与えます。企業サイトや金融・医療系のデザインで多用されるのは、この「信頼感」を演出しやすいためです。

中間色・淡い色（ベージュ・パステルカラー）は、やさしさや落ち着き、ナチュラルな印象を与えます。近年人気の高いミニマルなデザインとも相性がよい色味です。

実際に、誰もが知っているブランドのロゴやポスターにも、こうした色の使い方が表れています。

マクドナルドの赤と黄色は、食欲を刺激し人目を引く暖色の代表的な組み合わせです。
スターバックスのグリーンを基調としたロゴは、落ち着きや自然なイメージという寒色の効果をうまく活かした例といえます。
ティファニーの水色（通称ティファニーブルー）は、上品さと特別感を印象づける色として世界的に知られており、色そのものがブランドの記憶に直結する好例です。

まずは「このデザインで、見た人にどんな印象を持ってほしいか」を先に決めてから色を選ぶと、軸がぶれにくくなります。

デザイン初心者にありがちな配色の失敗パターン

配色で「なんとなく素人っぽい」印象になってしまうデザインには、いくつかの共通パターンがあります。

使う色を増やしすぎる。1つのデザインに5色も6色も使ってしまうと、どこを見ればいいのか分からず、まとまりのない印象になります。

彩度の高い色ばかりを組み合わせる。ビビッドな色同士を隣り合わせにすると、目がチカチカして読みにくいデザインになりがちです。

コントラストが不足している。背景色と文字色の明暗差が小さいと、読みにくいだけでなくアクセシビリティの観点でも問題になります。

基本的なデザインツールの使い方に不安がある方は、先にPhotoshopとIllustratorの違いとは？初心者はどっちから学ぶべき？もあわせてチェックしておくと、配色を試しながら手を動かす際にスムーズです。

迷わず決める配色の基本ルール「70:25:5」

配色に慣れていないうちは、色の「比率」を意識するだけで一気にまとまりが出ます。よく使われるのが、ベースカラー・メインカラー・アクセントカラーを70:25:5の割合で配分する考え方です。

ベースカラー（70%）は、背景など画面の大部分を占める色です。白やごく薄いグレーなど、主張しすぎない色を選びます。

メインカラー（25%）は、デザイン全体の印象を決める色です。ブランドカラーやテーマカラーをここに使います。

アクセントカラー（5%）は、ボタンや見出しなど「一番目立たせたい部分」にだけ使う色です。使う面積を絞ることで、視線を自然に誘導できます。

色の数自体は3色程度に絞り、この比率を意識するだけでも、配色の失敗はかなり減らせます。

この比率は、身近なサービスのデザインにも見て取れます。

たとえばLINEのアプリ画面は、白をベースカラーに、緑をメインカラー、通知や重要なボタンにオレンジなどのアクセントカラーを限定的に使うことで、情報が整理された見やすい画面になっています。

配色に自信がないときに頼れる無料ツール

センスだけに頼らなくても、配色パターンを提案してくれる無料ツールを使えば、初心者でもバランスの取れた配色にたどり着けます。カラーパレット生成ツールでベースとなる色の組み合わせを探したり、既存の配色パターン集を参考にしたりする方法が代表的です。素材選びとあわせて配色にも活用できる無料サイトについては、おすすめフリー素材・イラストサイト3選でも紹介していますので、あわせて参考にしてください。