色の組み合わせ、どっちが正解？配色のセンスを磨いておこう

3問目の答え：B

3問目は少し難しかったかもしれません。

ではここからは、私なりの解説です。

それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。

「暖色」と「寒色」を上手く使い分けるコツ

「暖色」と「寒色」を上手く使い分けたいときは、以下のイメージを参考にしてください。

「暖色」と「寒色」は上記のように使用するのが一般的ですが、必ずしも上記のルールが当てはまらない場合もあります。

例えば 、温かい珈琲を出すカフェが「知的さ」や「スタイリッシュさ」を軸にしたブランディングを展開している場合などは、ブランドカラーに青を使うといったことも考えられます。

トライアド配色を用いて、コンバージョンボタンの色を決定する

以下の図は、色相環（カラーホイール）上で黄色、水色、マゼンダの3色が120°ずつ離れ、正三角形を形成していることを示したものです。

そして、色相関上で、正三角形を形成する3つの色を組み合わせる配色を、トライアド配色（Triadic color scheme）と呼びます。

トライアド配色はバランスのよい配色を実現できるほか、互いに離れた色相を用いることから、コントラストを生み出し、活気のある印象を与えてくれます。
そのため、セールやキャンペーンの訴求や、ポップな広告デザインで有効な配色です。
また、ユーザーの行動の背中を押すコンバージョンボタンにもうってつけといえます。

作例Aのボタンの赤系の色は、まさにこのトライアド配色の法則を用いて選んだ色でした。

Adobe Colorを使えば、プロの配色ルールを確認できる

「色相環の見方に慣れていないので、自分で配色を選ぶのは難しそう……」という方は、Adobe Colorのような配色ツールを使うことをオススメします。

Adobe Colorはオンライン上で様々な配色を確認できるツールで、「トライアド」や「補色（コントラストが強い組み合わせ）」といったプロがよく使う配色を見ることができます。

1. 「Adobe Color」のページへアクセス
2. カラーホイールの「カラーハーモニー」から「トライアド」など選びたい配色ルールを選ぶ
3. 色相環上で好きな箇所をクリックし、色を指定する
4. 色をひとつ指定すれば、残りの色が自動で提案される

このように、配色ツールを活用して「失敗しない配色」の基本を学んだうえで、「ここだけはあえて目立たせる！」というメリハリを付けていくことが、効果的なバナーデザインのコツです。

色調を決める「明度」と「彩度」について知っておく

色調とは、明度と彩度との組み合わせによる「色の調子」を指すといいました。
ここで「明度」と「彩度」について解説しておきます。


1．明度

「色の明るさ」 の度合いです。
高くなれば色が明るく白っぽくなり、低くなれば色が暗く黒っぽくなります。


2．彩度

「色の鮮やかさ」 の度合いです。
高くなれば色が鮮やかで派手になり（ビビッドカラーになる）、低くなれば色がくすんで地味になり、灰色に近くなります。

上記の右側の画像は、Adobe Illustratorのカラーピッカーのインターフェイスです。
カラーピッカー画面では、縦軸が明度、横軸は彩度と覚えておきましょう。

Illustrator「オブジェクトを再配色」を用いて、色を調整する

Illustratorには、選択したオブジェクトの色相・彩度・明度を一括調整できる「オブジェクトを再配色」という機能があります。

1. 配色を変えたいオブジェクトを選択した状態で、コントロールパネルの「オブジェクトを再配色」アイコンをクリックし、「オブジェクトを再配色」のパネルを開く
   (または、メニューの「編集」→「カラーを選択」→「オブジェクトを再配色」）
2. パネル上で明度や彩度マークをクリックし、バーを左右に動かすことで色調を調整できます
   （※上記の調整後の画像では、彩度を高くしています）

この「オブジェクトを再配色」という機能には、「テーマカラーピッカー」機能もあります。
このピッカーを使って、配色のイメージに近いアートワークをクリックすれば、デザインに使われている色をもとに自動で配色されます。
配色の見本となるデザインを用意し、このピッカーを使うことで、配色のバリエーションが手に入ります。

Illustratorの生成AI機能「生成再配色」も使ってみる

「オブジェクトを再配色」パネルでは、手動で再配色するほかにも、生成AIを用いた「生成再配色」という機能が用意されています。
この機能は、指示文（プロンプト）を入力するだけで、デザイン全体の配色を調整してくれます。

1. 「オブジェクトを再配色」パネル上部にある「生成再配色」を選択
2. 「プロンプト」のエリアに指示文を入力します
3. すると、AIが自動で、テーマにあった配色を複数提案してくれます
   （以下のパターンは、プロンプトに「ビビッドな配色」と入力して提案されたものです）

デザインを仕上げる際には微調整は必要になりますが、この「生成再配色」を使うことで、「なんとなくこういう雰囲気にしたい」といった感覚的なデザインを「言葉（プロンプト）」をもとに実現できます。
ぜひ試してみてください。

1.　伝えたい情報に合わせて「色の温度感」を統一する

• 「暖色」と「寒色」を上手く使い分ける

2.　コンバージョンボタンは目立つ色を割り当てる

• ボタンの目的はクリック（コンバージョン）してもらうことなので、原則として、クリックしたくなるような目立つ色を採用するとよい
• ボタンの色を決定する際は、トライアド配色を用いる
• Adobe Colorを使えば、プロの配色ルールを確認できる

3.　背景の色調（トーン）は統一する

• 色調とは、明度と彩度との組み合わせによる「色の調子」を指す
• Illustrator「オブジェクトを再配色」を用いて、色を調整する
• Illustratorの生成AI機能「生成再配色」もオススメ

配色のセンスを高めるためには、実際に配色ツールを用いて、まずは様々な配色ルールを知ることが近道です。
今回のノウハウを用いて、ぜひ配色のセンスを磨いてくださいね。

お相手はデザイナーのやんこでした。

本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。


※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。