デザインにおける「配色」って大切！バナー制作で使用した配色をご紹介

2024年7月19日

こんにちは、デザイナーのayumiです。

私が普段Webデザインやバナーを制作をしている中で、頭を悩ます要素のひとつが「配色」です。デザインをする上でどんなレイアウトにするのか、どんな画像を使用するのか、どんなフォントを使用するのか、考えるべき要素はたくさんありますが、特に「色」は最も視覚に入りやすく重要なものだと思っています。まだまだデザイン勉強中の身ですが、今回は配色を考える際に参考にしていること、実際制作したバナーの配色をご紹介したいと思います！

配色って大事！

バナーやサイト、資料など制作している中で、何色を使えばわからない、何色使えばいいかわからない…なんて思うことありますよね。赤や青、緑に黄色など普段服やポスター、お菓子のパッケージなどで色んな色を目にしているはずなのに、いざ自分で制作物に色を付けようとするととても難しいものです。

私が配色をする上で気を付けていることは以下の2点です。

基本は3色を使用する
「色相」「彩度」「明度」のどれかを統一

色は使いすぎず、背景などの「ベースカラー」を70%、企業カラーなどの「メインカラー」を25%、目立たせたい部分に「アクセントカラー」を5%の割合で使用すると良いと言われています。

そして3色を使用する上で、色味を表す「色相」、色の鮮やかさを表す「彩度」、色の明るさを表す「明度」のいずれかを統一させてあげることで全体的にまとまりが出ます。

Webデザインを始めたての頃はなんとなーく自分で考えた色でなんとなーく設定していて、なんだか「しっくりこないな〜」なんてことがしょっちゅうありました。私が「しっくりこないな〜」と感じていた部分は、「色相」「彩度」「明度」の部分が統一できていなかったからだなあと思っています。

バナー制作で使用した配色

2024年7月現在、メンバーのえみさんと1ヶ月間毎日バナーを投稿する「#つむぐ1ヶ月チャレンジ」を開催中です！笑その中で制作したバナーの配色について一部ご紹介したいと思います。

銀行アプリ（ピンク×ネイビー）

「銀行」と聞くと少し堅い、気軽には利用しづらいといったイメージがあるかと思います。そのため気軽に「利用したい！」とフランクさを感じてもらえるよう、ポップなイメージのピンクをベースカラーにしました。また、銀行らしい誠実さも残したく、ネイビーで全体的なまとまりを出すようにしています。

飛行機セール（青×黄色）

「広〜い青い空を飛ぶ飛行機」を連想させる青をベースカラーとして全体的に使用しました。目立たせたい部分には、青の反対色（＝目立つ色）ということで黄色をメインカラーに採用しています。

水着セール（緑×黄色×ピンク）

夏らしくリゾートの美しいビーチを彷彿とさせるエメラルドグリーンはベースカラーにしました。そこに燦々と照らす太陽をイメージとした黄色をメインカラーにして、最も目立たせたい「MAX80%OFF」の部分に取り入れました。水着の写真と同系色のショッキングピンクをアクセントカラーでセールの開催日を表記しています。

配色に参考にしているサイトや本

Color Hunt

https://colorhunt.co

4色の配色パターンを参考にできるサイトです。「Blue」や「Green」など色を選択するとその色を使った配色が一覧で見られます。「Pastel」や「Retro」「Summer」などテーマでカテゴリー分けもされているので、制作しているデザインに合わせて簡単に配色パターンが参考にできて便利です◎

HELLO COLOR

https://jxnblk.github.io/hello-color/?c=bfe35e

ランダムで2色の配色パターンが永遠に見られるサイトです！もう何も考えたくないけどオシャレでええ感じの配色知りたい！っていう時に重宝しています。笑自分ではなかなか思いつかない組み合わせがあって、見ているだけでも楽しい＆参考になります。

Pinterestなどデザイン参考サイト

https://www.pinterest.jp

Pinterestやデザイン参考サイトで素敵だなと思った参考物の配色を参考にすることもあります（結構このパターンが多い）。例えばPinterestなら「緑デザイン」で検索すると上記イメージが表示されるので、自分が制作しているサイトの雰囲気やテイストに近しいデザインの配色を参考にしています。配色パターンサイトと違って、「配色×フォント」「配色×素材（画像・イラスト）」といった複数イメージが一気に見れるのがメリットです！

3色だけでセンスのいい色

https://book.impress.co.jp/3colors

デザイナーの多くが持っている・目にしたことのある本で、私もめちゃくちゃお世話になっています。「ナチュラル」「エレガント」などテイストごとにデザイン例が掲載されていて、パラパラとページをめくっているだけでも「あっこれ参考にしたい！」というイメージが湧いてきます。CMYK・RGBのカラーコードが記載されているので、Webだけでなく紙媒体の制作にも役立ちます。