色の組み合わせ、どっちが正解？配色のセンスを磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
こんにちは！デザイナーのやんこです。
今回私は、配色そして視覚効果についてのクイズを出題します。
まずは、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらの「配色」がよいと感じますか？
さっそくチャレンジしてみましょう！
1問目「鍋料理のレシピのバナー」（難易度★）
美味しくて温かい鍋料理の雰囲気が伝わる配色はどちらですか？
2問目「クーポンのバナー」（難易度★★）
クリックしたくなるボタンの配色はどちらですか？
3問目「カラークイズバナー」（難易度★★★）
色が美しくまとまっているのはどちらですか？
いかがでしたか？
私が考える答えは……
1問目の答え：A
2問目の答え：A
3問目の答え：B
3問目は少し難しかったかもしれません。
ではここからは、私なりの解説です。
それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
1．色の温度感は統一する
まず、1問目から振り返っていきましょう。
私が選んだ答えは「A」でした。
作例AとBの違いは、「あったか鍋レシピ」というテキストの配色です。
このバナーで伝えたいのは鍋料理の「温かさ」です。
作例Aは、温かさを連想させる「暖色」を使っていますが、Bでは、温かさとは対極の「寒色」寄りの緑色を使ってしまっています。
（本来、緑は暖色と寒色の「中間色」ではあるのですが、作例の緑色は青に近い緑となっています）
そのため、Aを正解としました。
もしかすると、作例Bの緑の色を見て、「野菜がたくさん入っているように見えるから、アリなんじゃないか」といわれる方もいらっしゃるかもしれません。
しかし、今回の作例では「あったか」というテキストが使われているので、より温かさを連想させる「暖色」を選びました。
「暖色」と「寒色」を上手く使い分けるコツ
「暖色」と「寒色」を上手く使い分けたいときは、以下のイメージを参考にしてください。
1．暖色（赤・オレンジ・黄など）がもつイメージ
火、太陽、情熱、活気、エネルギー、若々しさ、親しみやすさをイメージさせます。
以下のような場面で使えます。
- 食べ物や飲み物の温かさ、美味しさを強調したいとき
- セールやイベントの盛り上がりをアピールしたいとき
- 注意喚起や緊急性を打ち出したいとき
2．寒色（青・水色・青緑など）がもつイメージ
水、空、涼しさ、静けさ、知性、誠実さ、信頼感、未来をイメージさせます。
以下のような場面で使えます。
- 飲み物やデザートの冷たさを強調したいとき
- 知的な製品やサービスをアピールしたいとき
- 医療やテクノロジー関連のデザイン
「暖色」と「寒色」は上記のように使用するのが一般的ですが、必ずしも上記のルールが当てはまらない場合もあります。
例えば 、温かい珈琲を出すカフェが「知的さ」や「スタイリッシュさ」を軸にしたブランディングを展開している場合などは、ブランドカラーに青を使うといったことも考えられます。
2．コンバージョンボタンは目立つ色を割り当てる
次に2問目を振り返ります。
私なりの答えは「A」です。
作例AとBの違いは、「CLICK」というボタンの色です。
このボタンのように、ユーザーの行動を促すボタンのことを一般的に「コンバージョンボタン」と呼びます。
（コンバージョンとはユーザーの態度変容を示す言葉です）
作例Aのコンバージョンボタン（以降「ボタン」と表記します）は、背景の水色と黄色に対して、赤系の配色を大胆に採用しています。
そうすることで、ボタンがバナーのどの部分よりも強く目立ち、ユーザーのクリックを促しています。
その一方、作例Bのボタンは背景の黄色と同じ色を使っていることで、背景と同化してしまっており、あまり目立っていません。
バナーデザイン初心者の方は、「色相を揃えないと」「類似色で考えなきゃ」と考えるあまり、ボタンの色を背景色やメインカラーと揃えてしまいがちです。
しかし、ボタンの目的はクリック（コンバージョン）してもらうこと。
コンバージョンのしやすさを考えると、クリックしたくなるデザインであるべきです。
そのためにはボタンが目立つことは重要。
統一された配色だけでなく、あえて目立つ色を選んでボタンを作ることも大切なのです。
ちなみに、作例Aの配色はただ単に目立つ色を選んだわけではありません。
目立っていながらも、バナー全体の色の調和がとれる色を選びました。
トライアド配色を用いて、コンバージョンボタンの色を決定する
以下の図は、色相環（カラーホイール）上で黄色、水色、マゼンダの3色が120°ずつ離れ、正三角形を形成していることを示したものです。
そして、色相関上で、正三角形を形成する3つの色を組み合わせる配色を、トライアド配色（Triadic color scheme）と呼びます。
トライアド配色はバランスのよい配色を実現できるほか、互いに離れた色相を用いることから、コントラストを生み出し、活気のある印象を与えてくれます。
そのため、セールやキャンペーンの訴求や、ポップな広告デザインで有効な配色です。
また、ユーザーの行動の背中を押すコンバージョンボタンにもうってつけといえます。
作例Aのボタンの赤系の色は、まさにこのトライアド配色の法則を用いて選んだ色でした。
Adobe Colorを使えば、プロの配色ルールを確認できる
「色相環の見方に慣れていないので、自分で配色を選ぶのは難しそう……」という方は、Adobe Colorのような配色ツールを使うことをオススメします。
Adobe Colorはオンライン上で様々な配色を確認できるツールで、「トライアド」や「補色（コントラストが強い組み合わせ）」といったプロがよく使う配色を見ることができます。
- 「Adobe Color」のページへアクセス
- カラーホイールの「カラーハーモニー」から「トライアド」など選びたい配色ルールを選ぶ
- 色相環上で好きな箇所をクリックし、色を指定する
- 色をひとつ指定すれば、残りの色が自動で提案される
このように、配色ツールを活用して「失敗しない配色」の基本を学んだうえで、「ここだけはあえて目立たせる！」というメリハリを付けていくことが、効果的なバナーデザインのコツです。
3．背景の色調（トーン）は統一する
それでは最後の3問目です。
3問目は難しかったのではないでしょうか。
このデザインクイズで、私が選んだ正解は「B」でした。
この作例AとBの違いは、背景のパッチワーク模様の色調（トーン）です。
色調とは、明度と彩度との組み合わせによる「色の調子」を指します。
作例Aのデザインをよく見ると、鮮やかな色やくすんだ色などが入り乱れ、色調がバラバラです。
その結果、背景がうるさく感じられ、中央の「Color Quiz Challenge」というテキストがパッと頭に入ってきづらくなっています。
その一方でBのデザインは、使われているすべての色が、パステルカラーのようなトーンで統一されています。
その結果、背景は賑やかでありながらも調和して見え、中央のテキストが自然と目立つようになっています。
色調を決める「明度」と「彩度」について知っておく
色調とは、明度と彩度との組み合わせによる「色の調子」を指すといいました。
ここで「明度」と「彩度」について解説しておきます。
1．明度
「色の明るさ」 の度合いです。
高くなれば色が明るく白っぽくなり、低くなれば色が暗く黒っぽくなります。
2．彩度
「色の鮮やかさ」 の度合いです。
高くなれば色が鮮やかで派手になり（ビビッドカラーになる）、低くなれば色がくすんで地味になり、灰色に近くなります。
上記の右側の画像は、Adobe Illustratorのカラーピッカーのインターフェイスです。
カラーピッカー画面では、縦軸が明度、横軸は彩度と覚えておきましょう。
Illustrator「オブジェクトを再配色」を用いて、色を調整する
Illustratorには、選択したオブジェクトの色相・彩度・明度を一括調整できる「オブジェクトを再配色」という機能があります。
- 配色を変えたいオブジェクトを選択した状態で、コントロールパネルの「オブジェクトを再配色」アイコンをクリックし、「オブジェクトを再配色」のパネルを開く
(または、メニューの「編集」→「カラーを選択」→「オブジェクトを再配色」） - パネル上で明度や彩度マークをクリックし、バーを左右に動かすことで色調を調整できます
（※上記の調整後の画像では、彩度を高くしています）
この「オブジェクトを再配色」という機能には、「テーマカラーピッカー」機能もあります。
このピッカーを使って、配色のイメージに近いアートワークをクリックすれば、デザインに使われている色をもとに自動で配色されます。
配色の見本となるデザインを用意し、このピッカーを使うことで、配色のバリエーションが手に入ります。
Illustratorの生成AI機能「生成再配色」も使ってみる
「オブジェクトを再配色」パネルでは、手動で再配色するほかにも、生成AIを用いた「生成再配色」という機能が用意されています。
この機能は、指示文（プロンプト）を入力するだけで、デザイン全体の配色を調整してくれます。
- 「オブジェクトを再配色」パネル上部にある「生成再配色」を選択
- 「プロンプト」のエリアに指示文を入力します
- すると、AIが自動で、テーマにあった配色を複数提案してくれます
（以下のパターンは、プロンプトに「ビビッドな配色」と入力して提案されたものです）
デザインを仕上げる際には微調整は必要になりますが、この「生成再配色」を使うことで、「なんとなくこういう雰囲気にしたい」といった感覚的なデザインを「言葉（プロンプト）」をもとに実現できます。
ぜひ試してみてください。
まとめ：配色のセンスを高めるポイント
今回は配色にまつわるクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1. 伝えたい情報に合わせて「色の温度感」を統一する
- 「暖色」と「寒色」を上手く使い分ける
2. コンバージョンボタンは目立つ色を割り当てる
- ボタンの目的はクリック（コンバージョン）してもらうことなので、原則として、クリックしたくなるような目立つ色を採用するとよい
- ボタンの色を決定する際は、トライアド配色を用いる
- Adobe Colorを使えば、プロの配色ルールを確認できる
3. 背景の色調（トーン）は統一する
- 色調とは、明度と彩度との組み合わせによる「色の調子」を指す
- Illustrator「オブジェクトを再配色」を用いて、色を調整する
- Illustratorの生成AI機能「生成再配色」もオススメ
配色のセンスを高めるためには、実際に配色ツールを用いて、まずは様々な配色ルールを知ることが近道です。
今回のノウハウを用いて、ぜひ配色のセンスを磨いてくださいね。
お相手はデザイナーのやんこでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：やんこ
フリーランスのWeb・DTPデザイナー兼、講師。
遅咲き業界挑戦者や転職者、さらに「母」という立場の方々を支援するため、ひろしまクリエイターズギルドの運営にも携わっている。2024年からはAdob e Community Expertとしても活動。