デザイン初心者が本当に知りたい「配色」

バナー広告やスライド、ブログのアイキャッチなど……デザイナーではなくても日々の業務でデザインが必要になる場面は多々ありますよね。

アナグラムでは、デザイン初心者の方に向けたノウハウ記事をこれまで多数公開してきました。

私自身、それらの記事でデザインを学んだ一人。数年前からブログのアイキャッチを作る機会が増えたのですが、初期に比べると基礎が掴めてきたんじゃないかなと感じています。

とはいえサクッといい感じに作れるわけではなく、完成までにすごく時間がかかったり微妙な仕上がりになったり、まだまだ迷うことだらけ……！（上に載せているのは比較的出来が良いものだけピックアップしてます）

そこで、「本職のデザイナーはこんな時どうしてるの？」という素朴な疑問を、社内のデザイナーに直接尋ねてみることにしました。

今回のテーマは、とくに悩むことの多い「配色」。質問に答えてもらう先生は、「【こんな配色はNG】いつもの業務からバナー広告まで使える配色の基本を事例付きで紹介」を執筆した内藤さんです。

後半には配色の宿題も載せているので、みなさまもぜひチャレンジしてみてくださいね。

配色に関する素朴な疑問

以下3つの質問に絞って、内藤さんがどうやって配色を考えているのか聞いてみました。

あらゆるデザインに活用できる配色のヒントが詰め込まれているので、一緒に学んでいきましょう！

配色を考えるとき、まず何から始める？

───内藤さんの配色記事を読んで、色を上手に扱うためのルールがたくさんあることがわかりました！
ただ、ルールがあることは知りつつも、実際にデザインするときはカラーパレットから感覚で色を選んで「これかな？なんかしっくりこないな……」といちいち試して時間がかかってしまうんです。内藤さんは配色を決めるときに、何から始めていますか？

内藤　私は相手に持ってもらいたいイメージから、まず主役となる色を決めることが多いです。実際に私が作ったアイキャッチやバナーを使って、説明しますね。

＜ブランドカラーを使用する場合＞

たとえば「LINE広告アニメーション画像の作り方を徹底解説！」という記事のアイキャッチは、LINEのカラーである黄緑をベースに配色を考えました。これがもし黄緑ではなく赤や青だと、パッと見たときにLINEに関する記事だとわかりにくくなってしまいます。

バナー広告を作るときも、ブランドカラーがすでに決まっている場合は、その色を軸に相性のいい色を組み合わせていくことが多いですね。ブランドカラーの指定がなくても、遷移先のランディングページのファーストビューとの兼ね合い、商材の色や素材の色から連想して考えることも多いです。

＜使用素材から色を抽出する場合＞

こちらの「ゼロから学べるやさしいバナーの作り方」という記事のアイキャッチは、まずはじめに「初心者の方に優しく、とっつきやすい印象を持ってもらいたい」「明るいけど彩度が強すぎない配色にしたい」というイメージがあり、ゆるめのイラスト素材を探すことからはじめました。配色やテイストのイメージと近い素材が見つかったので、素材から色を拝借して作っています。

バナー広告でも、使用素材があらかじめ指定されている場合は、素材に合わせて配色を考えることも多いですね。たとえば下のバナーは、写真の女性がオレンジの小物を持っているので、目立たせたい部分にオレンジを使用しています。

ただ、場合によっては「素材の雰囲気は良いけど、色がイメージと合わない……」ということも。その場合は、与えたいイメージを優先して、素材側の色を変更する形で調整します。

＜「〇〇といえばこの色」と認識されている場合＞

最後に紹介するのは、「モバイルファーストなLPを制作するための5つのポイント」という記事のアイキャッチです。「モバイルファースト」ということで最先端とか近未来っぽいイメージにしたかったので、サイバー感のある配色にしました。

Google画像検索で「サイバー」と入力すると、同じような色味の画像が並びます。「サイバーといえば青や緑、紫のネオンカラー」というように、人によって多少の差はあるものの、多くの人が共通して持つ色のイメージがあるので、それを念頭に置きながら配色を考えていくと効果的です。

＜各色の一般的なイメージ＞

たとえば「夏」のデザインを調べてみると「海」や「青空」の印象からか水色系の涼やかな配色のデザインが多かったり、「あたたかい飲み物」のデザインで調べてみるとオレンジなどの暖色系が多かったりします。

バナー広告を制作するときも、「ターゲットが好む色味は？」「商材のイメージとそれを効果的に伝える色は？」という風に調査すると、ぴったりな色が見つかると思いますよ！

───相手に持ってもらいたいイメージから、主役となる色を決める……3パターンに分けた解説、実践的でとてもわかりやすいです！

主役となる色を決めたら、組み合わせはどうやって考える？

───内藤さんの配色記事には「色数が多いほどバランスが取りにくくなるため、3〜4色程度にするとまとまりやすい」とありましたが、この組み合わせを考えるのが難しくて……！どうしても「主役となる色＋白＋黒」のワンパターンになりがちなんです。

内藤　ふだん使用しているスライドやチャット系のツールも、ほとんどが「背景は白」「テキストは黒」のデフォルト設定になっているので、馴染みがある配色ですよね。

デザインでもそのまま使ってしまいがちなんですが、実はモノトーン配色のデザインが1番難しいと思います。なぜなら、モノトーン配色は文字まわりやレイアウトなどのデザインを丁寧に行わないと、「デザインしてない感」や「素人感」が出やすいからです。良いデザインというのは、モノクロ化してもかっこいいケースが多いですね。

───誰でも手を出しやすいからこそ、モノトーン配色は難しいんですね。内藤さんはどうやって色の組み合わせを考えていますか？

内藤　私の場合は、薄い色1色（背景用）、濃い色1色（テキスト用）、中間色かつ強調色1～2色（その他の要素）という組み合わせで制作することが多いかもしれません。反対にテキストを薄い色、背景を濃い色にする場合もあります。

以下のバナーを例に、配色を考えたときの思考の流れを頑張って言語化してみますね。

……といった流れで、このような配色に落ち着いたという感じです。

───話を聞くと「なるほど」と思うんですが、自分がこの写真素材を見ても同じように配色を考えるのはまだまだ難易度が高そうです……！違和感のない組み合わせを考えられるようになるには、どんなことを意識すれば良いでしょうか？

内藤　複数の色を使う場合は、トーン（色調）をなるべくそろえることを意識すると、統一感が出やすいと思います。

トーンとは、彩度と明度を組み合わせた色の調子のことです。一口に「赤」と言っても、原色の鮮やかな赤もあれば灰色が混じった暗めな赤もありますよね。この彩度と明度がゴチャゴチャの複数の色を組み合わせると、違和感が出やすくなります。

上のトーンのイメージはあくまでも参考であり、決して「全てこの通りで1%でもズレたらだめ！」というわけではありません。トーンを合わせると言うと難しく感じますが、「ナチュラルでやさしい印象にしたいから、くすみカラーやアースカラーで組み合わせよう」「決算セールのバナーで目立たせたいから、インパクトを出すために強い色同士をぶつけよう」という風に、与えたい印象から配色の方向性を明確にすることが大切です。

もう一つ重要なポイントは、視認性と可読性を高くすることです。

さきほど「トーンをそろえる」とお伝えしたのですが、一つのトーンの中だけで配色すると単調でメリハリがつかなかったり、視認性や可読性が悪くなることがあるんです。（上記の1番右のバナーが、トーンは合っているけど可読性が悪い例）

たとえばペールトーンだけでデザインすると、統一感はあるけど文字が読みづらいですよね。その場合はテキストを濃い色、他の色は薄い色でトーンをそろえる……といった調整をして、視認性や可読性を担保することを優先します。

バナーにおいて、視認性や可読性を担保するために大切なのは「明度差」です。基本的にモノクロにしたときに明度差がある配色を心がけましょう。

また、色の見え方は誰もが同じというわけではなく、多様性があります。黒背景×赤字の配色を避けるなど、カラーユニバーサルデザインを意識した配色にすることも大切です。

色の見え方の違いや配慮すべきポイントについては、こちらの記事をご参照ください。

カラーユニバーサルデザイン（CUD）とは？色の見え方の違いと広告やWebサイトで配慮すべきポイントを解説

色がぶつかり合って視認性が悪かったり、カラーユニバーサル的な観点で見たときに相性の悪い組み合わせの場合は、間に無彩色や彩度の低い色を挟むか、それぞれの色のトーンを調整すると見やすくなります。

できあがったデザインを縮小して遠くから見てみると、見づらさに気づきやすくなるのでおすすめです。ためしに上の画像を少し離れて遠くから見てみてください。〇がついている絵に比べて、△がついている絵は視認性が悪いのがわかるでしょうか？

───本当だ。遠目に見るとすぐに見づらいことがわかりますね！トーンをそろえることと視認性・可読性を高くすること、この2つを意識して組み合わせを考えてみます！

配色に「正解」はあるの？

───内藤さんが作ったバナーを見ると、どれもこの配色が正解のように思えて、この色から少しでもズレたらダメなんだと思ってしまいます……！配色に正解ってあるんでしょうか？

内藤　正解はないと思います。私も一発で配色を決められることはほぼなくて、毎回すごく悩んでいますね。

以前デザイナー同士で「こういう発注が来たとして、どういう水色を想像しますか？」というお題で考えたことがあったんですけど、全員違う水色を出したんですよ。人にはそれぞれ主観があるので、自分がベストだと思った配色に対して、この配色はちょっと好きじゃない……という人がいるのも普通のことだと思います。

ただ、違和感がなく見やすい配色にはルールがあるので、それを守った上で自分なりの根拠を持って配色を考えていますね。

私が以前書いた配色の記事も、今回の記事も、「これが絶対正解だ」と思われるのは本意ではなくて、読んだ人が自分なりの根拠を持って配色を考えるためのヒントになればいいなと思っています。

───美しい配色も、ルールを押さえて試行錯誤した上で作り上げられたものなんですね。言語化しづらいことをたくさん聞いてしまいましたが、丁寧に教えていただきありがとうございました！！

配色の宿題を出してもらった

内藤さんに「学んだことを実践できるような配色の宿題を出してもらえませんか？」とお願いしたところ、こちらの画像をいただきました。

レイアウトは整っていますが、見事に配色だけ違和感のあるバナーです。こちらのバナーを違和感のない配色にするには、どうすれば良いでしょうか？

Canvaのリンクを貼っておくので、フィードバックを見る前に、みなさんもぜひ実際に触りながら色を考えてみてくださいね。

宿題はこちら（Canva）

※複製してお使いください。
※PCからご確認ください。閲覧のみであればログイン不要ですが、編集するにはCanvaへの登録が必要です。

宿題提出

配色を考えるにあたって、内藤さんに教えてもらった配色のポイントを振り返ってみましょう。

実際に手を動かして、試行錯誤した結果がこちら。

イラスト素材の雰囲気と合わせるために、素材に使われている色を抽出して、背景用→白、テキスト用→赤、その他の要素→ピンク＆黄色の計4色でまとめてみました。

素材に使われている肌色をそのまま抽出すると、なんだか周りの枠とイラストの肌の色が同化して変だな……と思い、枠のピンクをイラストの肌の色より少し明るく調整しています。

自分なりの根拠を持って配色を考えてみましたが、いかがでしょうか……！？

宿題へのフィードバック

ご制作ありがとうございます！まず視認性・可読性もしっかり担保されていますし、イラストの赤い帽子に合わせて赤系の配色の濃淡でまとめられていて、とても良い感じです！

このように同じ色相の濃淡で差をつける配色は「同一色相配色（同系色）」と呼ばれるのですが、その配色方法を実践できているかと思います。

※色相について詳しくは以下の記事で解説しています。

【こんな配色はNG】いつもの業務からバナー広告まで使える配色の基本を事例付きで紹介

個人的には、テキスト情報がほぼ赤で統一されているので、もう1色追加してよりメリハリをつけるのもアリかもしれないなと思いました！

「3〜4色程度にするとまとまりやすい」とお伝えしましたが、5色以上でも、トーンをそろえると統一感を出すことができます。

右の画像は赤のトーンに合わせてチャコールグレーを追加してみたものです。ただ「これが正解！」というわけではなくて「こういう配色もアリなんだな」という参考として置いておきます。

　

私が考えた配色はこちらです。色はイラストから拝借。メインコピーは髪の色と同じチャコールグレーにし、赤を強調色として使ってみました。枠の色はイラストの緑色をそのまま使うと濃すぎたので、明度を上げて淡い色にしてみました。またイラストの服が白だったので、同化しないように背景の色も少しだけベージュっぽくしています。

おそらくデザイナー10人に同じお題を出したら、それぞれ異なる配色のものが上がってくると思います。今回すなえりさん解釈で配色したバナーが見られて面白かったですし、私も勉強になりました！

インプットを増やすことで配色のアイディアが広がる

内藤さんと話す前は、「本職のデザイナーなら一発で配色の正解がわかるんだろうな」と思っていました。そもそもたった一つの正解なんてなくて、デザイナーも毎回試行錯誤を重ねた上で、自分なりの根拠を持って配色を考えているんだと知れたことは大きな気づきです。

デザインに限らず、何かを生み出すにはインプットを行うことが大切ですよね。最後に、内藤さんが実践しているインプット方法を教えてもらいました！

内藤さんは、配色以外にもバナー制作やLP制作に役立つ知識など、多数の記事を執筆しています。どれもわかりやすくまとまっているので、気になるタイトルの記事があれば読んでみてくださいね。

内藤さんの書いた記事一覧