配色の基本｜失敗しない色の組み合わせ方と見本（チラシ・資料・ホームページ）
先に結論
- 使う色は3色まで。ベース（背景）7・メイン2.5・アクセント0.5の割合にすると、まとまって見えます。
- いちばん目立たせたい1か所だけにアクセントの色を使います。あちこちに使うと、どこも目立ちません。
- 迷ったら白黒＋差し色1色。報告書やスライドはこれで十分です。
色の割合（70:25:5）
| 役割 | 割合 | 使う場所 |
|---|---|---|
| ベース | 約70% | 背景・余白。白や薄い色 |
| メイン | 約25% | 見出し・帯・図。その資料の「顔」の色 |
| アクセント | 約5% | 申し込みボタン・「今だけ」・いちばん大事な数字 |
目的別の配色見本
帯の下のカラーコードは、そのままWord・PowerPoint・Canvaに入れられます。少し明るく・暗くしたいときはカラーコードの道具で調整できます。
| イメージ | 色（右はしがアクセント） | 向いているもの |
|---|---|---|
| 信頼・誠実 | #1F3A5F・#4A78B5・#F2F5F9・#F0A030 | 会社案内・提案資料 |
| やさしい・安心 | #3E8E7E・#A8D5C6・#FAFAF5・#F28C6B | 医療・介護・教室の案内 |
| 元気・楽しい | #FF6B35・#FFD23F・#3BCEAC・#FFFFFF・#2B2D42 | 子ども向け・イベントのチラシ |
| 上品・落ち着き | #6D5A72・#D8C3D0・#FBF8F6・#B8925A | 女性向け・サロン・お礼状 |
| 自然・食 | #4F6F3A・#C7D59F・#FFFDF5・#D9822B | 飲食店・農産物・健康 |
| 白黒＋差し色 | #222222・#777777・#FFFFFF・#E53935 | スライド・報告書（迷ったらこれ） |
色の組み合わせの考え方
| 組み合わせ | 見え方 | 例 |
|---|---|---|
| 同じ色の濃い・薄い | まとまる。落ち着く | 紺と水色 |
| となりの色（似た色） | 自然でやわらかい | 黄緑と緑 |
| 反対の色（補色） | はっきり目立つ。使いすぎると疲れる | 青とオレンジ（アクセントだけに） |
読みやすさで気をつけること
- 白地に黄色、黒地に紺など、明るさが近い組み合わせは文字が読めない
- 写真の上に文字を置くときは、文字のうしろに半分すけた黒や白の帯を敷く
- 赤と緑の区別がつきにくい人がいる（男性の20人に1人ほど、と言われます）。色だけで区別せず、形や文字でも分かるようにする
- 印刷すると画面より暗く見える。薄い色は少し濃いめに
カラーコードの道具
PowerPointの使い方ほかのデザインのページ
- カラーコード色を選んでコピー
- フリーフォント商用OKの探し方
- フォントのインストールWindows・Mac
- フリー素材（写真）使ってよい範囲
- イラストのフリー素材いらすとや など
- Canvaの使い方チラシ・資料を作る
- Canvaの無料版できること・プロとの差
- サムネイルの作り方ブログ・SNS
- YouTubeのサムネイルサイズと設定
- 名刺の作り方Word・Canva
- ポスターの作り方A4・A3で印刷
- ロゴの作り方無料で・注意点
配色で失敗しないコツは？
色は3色までにして、ベース7・メイン2.5・アクセント0.5の割合にします。迷ったら白黒に差し色1色です。
チラシに合う配色は？
子ども向けやイベントなら明るいオレンジと黄色、医療・介護なら緑系、会社案内なら紺系が合わせやすいです。見本のカラーコードをそのまま使えます。
デザインの関連ページ
- デザインの基本と素材（まとめ）
- カラーコード
- フリーフォント
- フォントのインストール
- フリー素材（写真）
- イラストのフリー素材
- Canvaの使い方
- Canvaの無料版
- サムネイルの作り方
- YouTubeのサムネイル
- 名刺の作り方
- ポスターの作り方
ほかの1ページも見る
このページについて
操作は2026年11月時点の日本語の画面（Windows 11・Mac・Microsoft 365）に合わせています。素材サイト・フォントの規約は2026年11月13日に確かめた要点で、変わることがあります。使う前にそれぞれの公式の規約を確かめてください。このサイトは紹介しているサイトとは関係ありません。運営者情報
参考にした資料：