塾長 尾上こんにちは！ぬるま湯デザイン塾の尾上です。
メモりすこんにちは！Webデザイナーのメモりすです。
バナーやサイトを作っていて、色を決める段階でいつも手が止まってしまう…。
組み合わせてみたけれど、なんだか素人っぽく見える…。
そんなふうに感じると、「自分には色のセンスが無いのかもしれない」と考えてしまいませんか？
でも、色選びはセンスの問題ではありません。よしあしの判断基準を習得することで解決できます。
この記事では、色の組み合わせを決めるための考え方を、Webデザインの実務でも使える順番に沿って解説します。読み終えるころには、自信を持って配色を決められるようになるはずです。
色の組み合わせで迷うのは「センス」の問題ではない
メモりすぼく、いつも迷っていて色のセンスが無いのかも…。
塾長 尾上センスじゃなくて手順の問題だよ。ステップをたどれば誰でも選べるようになる！
色選びで手が止まる理由は、はっきりしています。選択肢が無限にある状態で、ゼロから選ぼうとしているからです。
パソコンで扱える色は1,600万色以上あります。その中から「なんとなく良さそうな組み合わせ」を探そうとすれば、迷って当然です。
この記事で身につけていただきたいのは、次の3つのステップです。
配色を決める3つのステップ
1、色を構成する3つの性質（色相・明度・彩度）
2、配色の比率「70:25:5」
3、色は「決める」のではなく「抜いて、削る」
では、順番に見ていきましょう。
1、押さえるべきは「色相・明度・彩度」の3つだけ
色にはさまざまな理論がありますが、実務で最初に押さえるべきなのは3つの性質です。
- 色相（しきそう） … 赤・青・黄といった色味そのもの
- 明度（めいど） … 色の明るさ。白に近いほど高く、黒に近いほど低い
- 彩度（さいど） … 色の鮮やかさ。高いほどビビッド、低いほどくすんだ色になる
色相環で「なじむ色」と「目立つ色」が分かる
色相を円形に並べたものを色相環（しきそうかん）と呼びます。この円の位置関係で、2色の関係が決まります。
- 隣り合う色＝近似色（青と青緑など）… なじむ。まとまりが出るが、平坦になりやすい。
- 向かい合う色＝補色（青とオレンジなど）… 強く目立つ。使いすぎると騒がしくなる。
「まとめたいのか、目立たせたいのか」で、色相環のどこから色を取るかが決まります。これが最初の絞り込みです。
2、迷わないための配色の比率「70:25:5」
塾長 尾上任意の色をいきなり3つ選ぶんじゃなくて、まず3つの役割に割り当てよう。
配色でよく使われる目安に、ベースカラー70%・メインカラー25%・アクセントカラー5%という面積比があります。
| 色の役割 | 面積の目安 | 使う場所 | 選び方 |
|---|---|---|---|
| ベースカラー | 70% | 背景・余白 | 白やごく薄い色など、他を邪魔しない色 |
| メインカラー | 25% | 見出し・メインビジュアル | 伝えたい印象やブランドカラー |
| アクセントカラー | 5% | ボタン・強調したい箇所 | メインと対照的で、最も目を引く色 |
ここで大事なのは、比率そのものよりも発想の順番です。
多くの方は「どの色を3つ選ぼうか」と考えます。そうではなく、3つの役割に色を割り当てていくと考えてください。役割が決まれば、その色に求められる条件も自動的に決まります。
- ベースならデザインを邪魔をしないカラー
- メインはターゲットに合わせたカラー
- アクセントならメインカラーと相性がよく目立つカラー
というイメージです。
失敗の典型例
アクセントカラーの使いすぎです。目立たせたい箇所が多すぎると、情報の優先順位がわかりづらい（＝情報伝達の精度が低い）制作物になってしまいます。
メインカラーは25%、使いすぎないほうが、結果的に伝わるデザインになります。
すぐ使える配色パターン（成立する理由つき）
代表的な4つのタイプです。
| 配色のタイプ | 色の関係 | 与える印象 | 向いている場面 |
|---|---|---|---|
| 同系色 | 同じ色相で明度・彩度を変える | 統一感・上品 | コーポレートサイト、士業・医療系 |
| 類似色 | 色相環で隣り合う色 | 自然でまとまりがある | ナチュラル系、食品、サロン |
| 補色 | 色相環で向かい合う色 | 力強い・目を引く | セール告知、スポーツ、CTAボタン |
| 無彩色＋1色 | 白・黒・グレー＋差し色1色 | 洗練・都会的 | ファッション、ポートフォリオ |
同系色と類似色がまとまって見えるのは、色相の距離が近く、脳が「同じ仲間の色」と認識するからです。逆に補色が目を引くのは、色相の距離が最も遠く、互いを強調し合うからです。
そして、迷ったときに使える3色の作り方の型がこれです。
- メインカラーを決める（伝えたい印象・ブランドカラーから）
- ベースカラーを決める（白またはメインの彩度をぐっと落とした色）
- アクセントカラーを決める（メインの補色、または最も目立つ色を5%だけ）
この順番なら、無限の組み合わせから探すより、はるかに速く決まります。
3、色は「決める」のではなく「抜いて、削る」
メモりす役割は分かったけど、そもそも最初の1色ってどうやって決めるの？
塾長 尾上ゼロから考えないのがコツだよ。参考から抜いて、あとは削るだけ！
色をゼロからひねり出そうとすると、また1,600万色の中で迷子になります。ぬるま湯デザイン塾でお伝えしているのは、自分で考えるのではなく、参考から抜き取って、余分を削るという順番です。
手順1: 「どう見られたいか」を1行でまとめる
いきなり色を触ってはいけません。最初に決めるのは「誰に、どう思われたいか」です。
例：初めて来た30代の女性に、清潔で安心できると思ってほしい
この1行が無いまま色を選ぶと、あとから「なんとなく」以外の説明ができなくなります。逆にこの1行さえあれば、以降の手順はすべて「合うか、合わないか」の判断だけで進みます。
手順2: 参考を3枚集めて、色を抜き取る
手順1で書いた印象に近いサイトやバナーを3枚集めます。そしてスポイトツールで、実際に使われている色をそのまま抜き取ります。自分で色を作るのではなく、うまくいっているものから借りてくるイメージです。
ただし、抜き取るのは色だけです。レイアウトや文言ごとコピーするのは、参考ではなく模倣になりますのでご注意ください。
手順3: たし算してから、引き算する
3枚から抜き取ると、色は9色近くになるはずです。ここで一度、抜いた色を全部並べてしまいます。これが「たし算」です。
そこから、次の順番で削ります。これが「引き算」です。
- 手順1で書いた1行に合わない色を削る（「清潔・安心」なら、蛍光色やビビッドな色はここで消えます）
- 似ている色は、どちらか1つに寄せる（明るいほうか暗いほうか、役割が明確なほうを残します）
- 残すのは3色まで
最初から3色に絞ろうとすると手が止まりますが、いったん全部出してから減らすほうが、はるかに速く決まります。
残った3色を、そのままベース70%・メイン25%・アクセント5%の役割に割り当てれば完成です。あとは、次のチェックを通すだけになります。
実務で失敗しないための3つのチェック
メモりすおしゃれかどうかより、大事なことがあるんだね！
配色が決まったら、納品前に3つだけ確認してください。ここが、参考を真似しただけのデザインとの分かれ目になります。
チェック1: 文字が読みやすいか
見落とされがちですが、最も重要です。文字色と背景色のコントラストが不足していると、情報収集がしづらい（＝伝わりづらい）ページになってしまいます。
Webアクセシビリティの国際基準であるWCAG 2.1では、文字と背景のコントラスト比について次の基準が定められています（レベルAA）。
- 通常の文字（18ポイント未満、または太字で14ポイント未満）… 4.5:1以上
- 大きい文字（18ポイント以上、または太字で14ポイント以上）… 3:1以上
薄いグレーの文字は今どきに見えますが、基準を下回れば読者は読めません。コントラスト比はブラウザの検証ツールや無料のチェックツールで測れます。
Adobe Color コントラストチェッカー
特徴：日本語UI。テキスト色・背景色を並べて確認できる
チェック2: グレースケールにしても成立するか
作った画面を一度グレースケール（白黒）にしてみてください。明度差が無いと、色を外した瞬間に情報の優先順位が消えてしまいます。
色だけで違いを表現していると、色覚特性のある方や、屋外でスマホを見ている方には伝わりません。明度でも差がついているかを確認します。
Grayscale Screen（Chromeの拡張機能）
特徴：ワンクリックでPC画面をモノクロにできる
チェック3: その色を選んだ理由を説明できるか
クライアントに「なぜこの色なんですか」と聞かれたら、答えられるでしょうか？「なんとなくおしゃれだから」では、修正指示に振り回されてしまいます。
「誰に何を伝えるために、この色にした」と言えて初めて、提案として成立します。
まとめ
色の組み合わせで迷わなくなるために、押さえておきたいのは次の3点です。
1、迷うのはセンスの問題ではない。選択肢を絞る手順を知れば解決できる
2、色を3つ選ぶのではなく、3つの役割（ベース70%・メイン25%・アクセント5%）に割り当てる
3、納品前に「読みやすいか・明度差があるか・理由を言えるか」を確認する
配色は、知識で確実に上達する分野です。今日から使えるセオリーを持っておけば、色選びにかかる時間は大きく減らせます。
Webデザインの学び方に関する情報を受け取りたい方は、ぬるま湯デザイン塾のLINEにご登録ください。5日間チャレンジ（無料体験）も実施中です。
5日間チャレンジの内容や案内時期などの詳細については、LINEでご案内します。
＼ LINEのお友達登録はこちらから ／
参考にした情報源
- ウェブラボ「配色の比率を知ろう」 https://www.weblab.co.jp/blog/creator/14687.html
- ウェブアクセシビリティ基盤委員会（WAIC）「達成基準 1.4.3: コントラスト（最低限）を理解する」 https://waic.jp/translations/WCAG21/Understanding/contrast-minimum.html
- ぬるま湯デザイン塾 公式ブログ「“真似る”ことから逃げた人は、伸びない」 https://nurumayu-member.jp/blog/?p=15154
- ぬるま湯デザイン塾 公式ブログ「デザインの引き算を覚えよう。」 https://nurumayu-member.jp/blog/?p=16130
- ぬるま湯デザイン塾 公式ブログ「ついやりがちな6つのNGデザイン」 https://nurumayu-member.jp/blog/?p=1038
塾長 尾上次のブログでもまたお会いしましょう！
メモりすバイバイ！またね！
