この色の選び方、どっちが正解?配色のセンスを磨こう

現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

デザイナーのベーコンです。

今回、私は「色の選び方」についてのクイズを出題します。

早速ですが、3問クイズを出します。

以下の3つの作例を見て、AとB、あなたはどちらの「配色」がよいと感じますか?

1問目「クリックしたくなるボタンの配色はどっち?」(難易度★)

2問目「届けたいお客さんに響く配色はどっち?」(難易度★★)

3問目「配色が美しくまとまっているのはどっち?」(難易度★★★)

いかがでしたか?

私が考える答えは……

1問目の答え:B

2問目の答え:A

3問目の答え:A

以上が私なりの解答です。

あなたが良いと感じた配色は、AとBどちらでしたか?

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


※本コーナーの作例は、Adobe Illustrator使って作られています。

Illustratorは、ロゴやイラストをはじめ、ポスターや名刺といった紙媒体のデザイン、さらにwebやアプリのUI設計まで対応できるデザインツール。

多くのプロが使っており、最新のAI機能搭載しています。

ワンランク上のデザインを実現したい方や、プロフェッショナルなデザイナーを目指したい方は、ぜひAdobe Illustrator使ってみてください。


1.配色理論よりも「美味しさ」と「世界観」を優先する

では、1問目から振り返っていきます。

私が選んだ答えは「B」でした。

作例AとBの違いは、下部の(ボタン)の配色です。

Aはチョコレートの茶色に対して、補色(反対色)にあたる青を使っています。

デザインを勉強し始めた方なら、「ボタンを目立たせるために補色を使うのが正解だ」と感じたかもしれません。

しかし、今回の正解は「B」としました。

あえて補色である青を避けた理由は、青という色が「美味しさ」のイメージを損なってしまう恐れがあるからです。

青は一般的に食欲を減退させる色と言われています。

食品のデザインにおいて、本能的に「美味しそう」と感じられない色を使うのは避けたいところです。

一方でBのように、同系色のゴールドを使えば、チョコレートがもつ上質なイメージを損なうことなく、自然に馴染みます。

「同系色だと目立たないのでは?」と思うかもしれませんが、単なる塗りつぶしではなくグラデーションを適用することで、ボタンの存在感を高めることができます。

ただし、補色の配色がうまくいく場合もあります。

例えば「抹茶」のデザインに補色の「赤」を使うのは、和菓子やお正月のイメージとして私たちが慣れ親しんでいるため、世界観を壊さず使いやすい組み合わせだったりします。

デザインの配色は、ロジックだけで考えるのではなく「その商品が魅力的に見えるかどうか」を最優先に考えましょう。

Illustratorで簡単にゴールドのグラデーションを作る方法

今回の作例のようなゴールドのグラデーションを、Illustratorで手軽に作る方法をご紹介します。Illustrator 2026(v30.0)からグラデーションパネルに「プリセット」が追加され、グラデーション設定がとても楽になりました。

【手順1】プリセットから「メタル」を選ぶ

グラデーションを適用したいオブジェクトを選択し、「ウィンドウ」メニューから「グラデーション」をクリックし、「グラデーションパネル」を開きます。

そして、パネル内にあるプリセットの一覧から「メタル」を選択しましょう。

【手順2】「ゴールド」を適用する

メタルのサムネール(リスト)の中から「ゴールド」を選択します。

このとき、「ゴールド」という文字部分ではなく、左側にある四角いプレビューアイコンをクリックしてください。

【手順3】角度を「90°」に設定する

グラデーションの向きを調整します。

パネルの角度入力欄を「90°」に設定し、色が縦方向に変化するようにします。

光源が上になることで、金属が光を反射しているような自然なグラデーションになります。

【手順4】自分好みに微調整

最後に、グラデーションスライダー上の「カラー分岐点(小さな丸)」を左右に動かして、色の密度や位置を調整すれば完成です。

この「グラデーションプリセット」は、Illustrator 2026から追加された新機能です。

プリセットをベースに微調整することで、目的に近い色表現を作りやすくなります。

作業効率を上げる手段として、ぜひ活用してみてください。

2.届けたい相手に合わせた色を選ぶ

続いて、2問目の振り返りです。

私が選んだ答えは「A」でした。

作例AとBの違いは、配色のコンセプトです。

Aは少し淡くやさしい配色、Bはコントラストを強めた、くっきりとした配色です。

一見すると、パッと目に飛び込んでくるBのデザインがよいと感じるかもしれません。

強いコントラストや鮮やかな色はインパクトがあるため、ついつい「完成度が高い」と錯覚してしまいがちです。

ですが、今回のデザイン内に書かれている「自然派のやさしいお家」という言葉に着目すると、このバナーが届けたい相手は、派手さよりも「木の温もり」や「穏やかな暮らし」を求めている人たちであることがわかります。

そう考えると、Bの強い配色はターゲットにとって少し「騒がしい」印象になってしまいます。

目立つことよりも、その言葉が伝えようとしている「空気」と色が矛盾していないか。

その点を一度確認してみるだけで、バナーを届けたい相手にしっかり響く配色が選べるようになるはずです。

Illustratorのカンバス内に並べて比較してみる

Illustratorなら、およそ60mという大きなカンバスの中で、自由にデザインを並べて比較できます。

「どの色がコンセプトに合っているか」を考えるとき、たった1つの案だけを見て納得のいく答えを出すのはなかなか難しいことです。

そんなときは、カンバス内に複数のバリエーションを作り、並べて見比べる「オーディション」をしてみましょう。

【手順1】 オブジェクトを複製して並べる

まずは、作成したアートワークを丸ごと選択し、Altキー(MacはOptionキー)を押しながら横にドラッグして複製します。

広いカンバスを活かして、少しずつ色を変えたものをいくつか作ってみましょう。

1つの案を何度も塗り替えてこねくり回すよりも、複数の案を並べるほうが、ずっと客観的に判断しやすくなります。

【手順2】画面を引いて、客観的に見比べる

いくつか案が並んだら、少し画面をズームアウトして全体を眺めてみてください。

このときチェックすべきは「どちらが目立つか」ではなく、言葉のもつ「空気」にどの色が一番馴染んでいるかを比較しましょう。

一歩引いた視点で「オーディション」を行う習慣をもつと、納得のいく配色を選びやすくなります。

3.色を混ぜる際は統一感を意識する

最後に3問目の振り返りです。

私が選んだ答えは「A」でした。

作例AとBの違いは、背景にある「MATCHA」という文字や、上部にある「CAFE GREEN」の配色です。

Bは、メインの文字色と似ているけれど、微妙に異なる色がいくつか混ざっています。

一方でAは、関連する要素の色を、メインのキーカラーと完全に同じ色に統一しています。

そのため、今回は「A」を正解としました。

似たような色を重ねて深みを出す手法もありますが、それは色のコントラストを緻密に計算して初めて成り立つ高度なテクニックです。

今回のように、意図が見えにくい「似ているけれど微妙に異なる色」がいくつも混ざってしまうと、深みが出るどころか「整理されていない」「詰めが甘い」という印象を与えがちです。

こうした色をきれいに揃えるだけで、アートワーク全体がすっきりと整った雰囲気になります。

細部を揃える手間は、見る人への「信頼感」として無意識に伝わっていくものです。

この少しの気配りで、デザインの質は高まるはずです。

Illustratorのスポイトツールで「色だけ」を正確に揃える方法

今回の作例のように、文字の色が周囲から浮いてしまっているとき、Illustratorの「スポイトツール」を使って色を素早く正確に統一する方法をご紹介します。

スポイトツールは便利ですが、普通にクリックすると、クリック先の「フォントの種類」や「サイズ」「透明度」などの設定(アピアランス)まで丸ごとコピーされてしまい、レイアウトが崩れてしまうことがあります。

文字の設定は変えずに「色だけ」を揃えたいときは、Shiftキーを活用しましょう。

【手順1】 色を適用したいオブジェクトを選択する

「選択ツール」を選び、色を変えたいパーツをクリックします。

【手順2】 Shiftキーを押しながらクリック

「スポイトツール(ショートカット:I)」に切り替え、色を吸い取りたい対象の上で、Shiftキーを押しながらクリックします。

これで、フォントやサイズの設定はそのままに、クリックした場所の「色情報」だけをピンポイントで抜き出し、選択中のオブジェクトに適用できました。

ここまで、バナーなどを想定したクリエイティブを例にお話してきました。

以下の記事ではバナーデザインのコツと、IllustratorやAdobe Photoshopでデザインする手順を解説しています。

ぜひ参考にしてみてください。

バナーデザインのコツと作り方!おすすめツールも紹介

まとめ:配色のセンスを磨くための3つのポイント

今回は配色に関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。

1.配色理論よりも「美味しさ」と「世界観」を優先する

  • 補色で目立たせることが正解とは限らない
  • 食品は特に、本能的な“おいしさ”や“上品さ”を損ねない色を選ぶ

2.届けたい相手に合わせた色を選ぶ

  • 強いコントラストは完成度が高く見えやすいが、ターゲットや言葉の空気感と矛盾すると逆効果
  • 届けたい相手に合うトーンを選ぶ

3.色を混ぜる際は統一感を意識する

  • 「似ているけど違う色」が増えると散らかって見えやすい
  • 色数・色ブレを抑えると、画面がすっきりして信頼感につながる

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

※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。


執筆:ベーコン

北海道で「楽しく暮らす」をテーマに活動するグラフィックデザイナー。
「ベーコンさんの世界ブログ」や、登録者数11万人を超えるYouTubeチャンネル『ベーコン家のポテとひだり』を運営している。
著書に累計3万部を超える『レイアウト・デザインの教科書』(共著/SBクリエイティブ)他。Adobe Community Expert。


すべての問題にチャレンジしてみよう!

あなたの感性はどれを選ぶ?「デザインクイズチャレンジ」

第44回 このイラスト、どっちが正解?イラストを使ったデザインのセンスを磨こう

第43回 この寸法線、どっちが正解? 図面制作のセンスを磨こう

第42回 このあしらい、どっちが正解?バナーのあしらいのセンスを磨いておこう

第41回 この線のスタイル、どっちが正解?シーンに合わせた線を使うセンスを磨こう

第40回 この色の選び方、どっちが正解?配色のセンスを磨こう

第39回 この図版、どっちが正解?見やすい図版作成のセンスを磨こう

第38回 このグラフの見せ方、どっちが正解?伝わるグラフをデザインするセンスを磨こう

第37回 この文字の遊ばせ方、どっちが正解?文字デザイン演出のセンスを磨こう

第36回 この写真の見せ方、どっちが正解?買いたくなる商品写真のセンスを磨こう

第35回 この情報の強弱の付け方、どっちが正解?情報整理のセンスを磨こう

第34回 このあしらい、どっちが正解?装飾のブラッシュアップ力を磨いておこう

第33回 この文字のあしらい、どっちが正解?バナーの文字デザインのセンスを磨こう

第32回 このアイコン、どっちが正解?アイコン作成のセンスを磨こう

第31回 この背景パターン、どっちが正解?パターンを扱うセンスを磨こう

第30回 このZINEのデザイン、どっちが正解?誌面デザインのセンスを磨こう

第29回 このタイポグラフィ、どっちが正解?作字のセンスを磨いておこう

第28回 このカラー値、どっちが正解?印刷におけるCMYKの「黒(ブラック)」のセンスを磨こう

第27回 表のデザイン、どっちが正解?情報の整理に役立つデザインセンスを磨いておこう

第26回 そのデザインの仕上げ、どっちが正解?「整列」や「ガイド」を使いこなすセンスを磨こう!

第25回 このレイアウト、どっちが正解?視線誘導のセンスを磨いておこう

第24回 このパス、どっちが正解? ロゴ制作で必要になる造形センスを磨いておこう

第23回 この矢印のデザイン、どっちが正解?図解における矢印選びのセンスを磨いておこう

第22回 線の扱い、どっちが正解? 罫線のセンスを磨いておこう

第21回 このドロップシャドウ、どっちが正解?ドロップシャドウのセンスを磨いておこう

第20回 この名刺の文字組、どっちが正解?名刺デザインのセンスを磨いておこう

第19回 この価格の見せ方、どっちが正解?数字のデザインのセンスを磨いておこう

第18回 この書き出し、どれが正解?画像の特徴に合わせた書き出しを学ぼう

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

第16回 このスライドのデザイン、どっちが正解?伝わるプレゼン資料作成のセンスを磨いておこう

第15回 このコントラスト、どっちが正解?文字と背景の配色のセンスを磨いておこう

第14回 この余白、どっちが正解?レイアウトにおける余白のセンスを磨いておこう

第13回 このレイアウト、どっちが正解?レイアウトのセンスを磨いておこう

第12回 このフォント選び、どっちが正解?フォントを上手に使うセンスを磨いておこう

第11回 この改行や行揃え、どっちが正解?文字組みのセンスを磨いておこう

第10回 この約物の使い方、どっちが正解?約物の違和感に気付けるセンスを磨いておこう

第9回 このグラデーション、どっちが正解?グラデーションのセンスを磨いておこう

第8回 この吹き出し、どっちが正解?デザイン演出のセンスを磨いておこう

第7回 この名刺デザイン、どっちが正解?名刺作成のセンスを磨いておこう

第6回 このデザインのあしらい、どっちが正解?装飾のセンスを磨いておこう

第5回 欧文フォントの見せ方、どっちが正解? フォント選びのセンスを磨こう

第4回 このデザインの配置、どっちが正解?整列のセンスを磨いておこう

第3回 この文字間や行間、どっちが正解?文字の余白のセンスを磨いておこう

第2回 この文字組み、どっちが正解?ベースライン調整のセンスを磨いておこう

第1回 この文字詰め、どっちが正解?文字間調整(カーニング)のセンスを磨いておこう

Illustratorを始めましょう。