初心者ノンデザイナーにとってバナー広告作成時の大きな壁。

それは何といっても『色使い』ではないでしょうか？

「どんな色を使おうか…」

「バナーの色彩がなんとなく納得いかない…」

「見にくいバナーになってしまった…」

色使いにまつわる悩みは尽きないかと思います。

そこで今回は色にまつわる基礎知識からバナーへの活用例をまとめてみました！

色使いをマスターして、目指せ脱初心者！

こんな色使いしてませんか…？

はじめに

今回は説明のために、ベースとなるバナーを用意しました。

架空の求人サイト広告をベースに、色使いについてまとめていきます。

 

このバナーにおいては白と黒をベースに作成しています。

実はこれだけでもまとまりのあるバナーを作成できるのですが…

今回は白・黒+αでどんな色を選べばいいのか、という点に注目していこうと思います！

では、このバナーを鮮やかなデザインに変えていきましょう！

初心者がやりがちなミス2選

…たしかに色鮮やかにはなったんですが…ちょっと…ね…

初心者のありがちミスを2つまとめて作ったので極端に良くないバナーなってますね(笑)

ただ、問題は何が良くないのかです。

漠然と良くないのはわかりますが、理由までわからないといけません。

下にスクロールする前に1度考えてみましょう！

・

・

・

・

・

思いつきましたか？

では、答え合わせです。

1.色の数が多すぎる

1つ目はわかりやすいですね。

とにかくバナーの中に色が多すぎることが挙げられます。

ベースのバナーと比べて、明らかに色が多いですね。

もちろん、虹色を使ったものやカラフルでポップなバナーもありますが作成難度は高いです。

色が増えれば増えるほど、比例して作成難度が高まることを覚えておきましょう。

あとで詳しくまとめていきますが、慣れないうちは白・黒＋メイン1色・サブ1色がまとめやすいです。

2.原色の多用

バナーの色味があまりにハキハキした印象になっている感じがしませんか？

この原因は原色を多用しているからなんです。

ここでは「混じりけのない派手な色」を原色と呼ぶことにします。

原色は目立つ色ではあるので文字・テキストを強調するのは得意です。

一方あまりに強い色なので使いすぎると、かえって強調どころがわからなくなってしまいます。

 

以上2点を踏まえて修正してみると…

だいぶまとまった印象になりましたね！

色は白・黒＋メイン1色(緑色)にしたので最初のものより鮮やかになりました。

緑色も色を調整して適材適所に色を配置することができました。

・

・

・

終わりの雰囲気が出ていますがまだ序盤です。

そもそも色の調整とは…？

先述したサブ1色をどのように選ぶのか…？

ここからは色選びについてもう少し深堀りしてみましょう。

ベースとなる色を選ぶ【色のイメージ】

バナーの作成時にどうやって色を決めていますか？

色鮮やかにする前にまずはメインとなる1色を選んでいきます。

もし普段難なく決められているのであれば、このセクションは流し見でも大丈夫です。

 

一番無難な選び方は広告を打ち出す『会社・商品・サービス』に色を合わせることです。

(先ほど緑色をメインにしたのも、弊社バリュークリエーションのカラーだからです。)

色による『会社・商品・サービス』と広告の親和性は重要です。

まずは合わせることを意識しましょう。

色とイメージ

では、0からベースの色を選ぶときにはどうするか。

一番参考となるのが、色が持つイメージの活用です。

例えば、集団物のヒーローなんかだとイメージしやすいです。

赤色が熱血漢、青色が冷静沈着、黄色は元気…といった具合です。

(最近はすごく多様化しているので一概には言えませんが…ピンクの男性もいますし…)

知らず知らず、我々のなかに色とイメージが紐づいていることがわかります。

こういったイメージはバナーにも転用することができます。

 

これを踏まえて色だけを変えたバナーを見てみましょう。

さて、皆さんはそれぞれのバナーからどんなイメージを抱きましたか？

おおよそこのようなイメージを抱いたのではないのでしょうか？

・赤色★：熱く就職活動に燃えているイメージ

・オレンジ色★：元気よく就職活動に向かうイメージ

・青色★：さわやかで誠実な就職活動イメージ

・黄色★：明るく希望を持った就職活動のイメージ

・紫色★：なんだか求人広告にしては怪しいイメージ

・ピンク色★：ポップでユニークなイメージ

特に青色が求人サイトの広告として一番しっくり来た方も多いのではないのでしょうか。

青の持つ「さわやか」で「誠実な」イメージが求人広告と相性がいい証拠です。

これこそ色が持つイメージの活用です。

 

色は相手に与えるイメージおいて大きな役割を持ちます。

簡単にイメージを表にまとめてみましたので是非ご参考ください！

色	抽象的イメージ
赤色★	情熱・興奮・歓喜
オレンジ色★	健康・活発・親しみ
青色★	誠実・理想的・さわやか
黄色★	陽気・元気・明朗・注意
緑色★	新鮮・平和・安らぎ
紫色★	高貴・神秘・妖艶
ピンク色★	愛・かわいらしさ・ポップ

 

原色を抜け出す【明度・彩度とは？】

ベースとなる色を決めたら色合いの調整を行います。

このときに重要なのが明度と彩度です。

様々な画像作成ツールで見かける上図のようなスライダーで調整する指標です。

ひとことに『赤』『青』と言っても明度と彩度によって雰囲気が異なります。

順に見ていきましょう。

明度について

明度とは漢字の通り「明るさの度合い」です。

すべての色において明度は存在します。

下の図を参考に見てください。

上の方では『黒』から『白』へと移り変わる過程が見えます。

これこそ明度の基本イメージになります。

明度が高いほど『白』に寄った明るい色、明度が低いほど『黒』に寄った暗い色となります。

この明度の違いがバナーの明暗につながってきます。

同じ緑色でも明度の違いによって印象が変わりますね。

比較的、右側がポップな印象で左側が重厚な印象を受けます。

セクション1で色とイメージについてまとめましたが、明度でも変わることを覚えておきましょう。

彩度について

彩度は「色味の強さ」のことです。

下の図を見てください。

彩度が高いと強く派手な色、彩度が低いと弱く柔らかい色になります。

これもバナーの印象に影響を与えます。

特にパッと見たときの印象への影響が大きいです。

明らかに右側の方が、一瞬のインパクトが強いです。

一方見ていてうるさい印象があり、左側の方が落ち着いて見えます。

例なので極端な印象の違いになっていますが、基本は高低合わせて使いましょう。

メリハリの利いたバナーになります。

明度・彩度のまとめ

明度・彩度を最初に出したスライダーに反映すると上図のようになります。

大体のツールにおいて、右上ほど明度・彩度が高く、左下ほど明度・彩度が低くなります。

実は1色だけでも明度と彩度を調整するだけで鮮やかさを増すことができます！

セクション1で紹介したバナーがまさに色を調整したものになっています。

明度・彩度を調整するとメリハリの利いたバナーになります。

調整時のポイントは可読性を意識した配色です。

バナーの基本として、文字が読めないと広告の意味がありません。

同じ色であれば、当然明度・彩度が近しいと文字が読みづらくなってしまいます。

鮮やかさに気を取られて可読性が悪くなることは初心者のあるあるです。

是非明度・彩度を駆使して鮮やか、かつ可読性の良いバナーを目指しましょう。

仲間の色を探す【色相基本編】

ここまで来ましたが、正直バナーでメイン1色だけって寂しいですよね。

そこでここからはサブ色の選び方についてまとめていきます。

色を選ぶ際に重要となるのが色相です。

さらに色同士の相性を示したものが色相環です。

色相環において近いほど調和がとりやすいようになっています。

そのため、サブ1色として隣り合う色を選ぶと調和がとりやすいです。

先ほどのバナーに隣接色を加えてみましょう。

 

矢印と「CHECK！」の背面の色を変更しました。

異なる色を使用していますが調和がとれています。

もう1色に悩んだときには隣接色をまず使ってみましょう。

 

ちなみにスライダーにおいては下図で調整します。

少しずつずらして色を探してみましょう。

色の対比をつくる【色相応用編】

バナーである以上、特定の部分を強調したいときがあると思います。

例における「新規エントリー受付開始」のようなメインテキストは特に強調どころです。

そのときにも使えるのが色相環です。

色相環の上に分度器を置くとわかりやすいです。

角度が広いほど調和は取りづらいですが対比がとりやすいです。

バナーに反映してみましょう。

まずは90°離れた色です。

単色のときや隣接色を使用したときよりもメリハリが出てきました。

複数の色のイメージをユーザーに伝えたいときにも有効です。

極めつけが180°離れた色です。

よりメインテキストを際立たせることができました。

ただ、やはり注意点は調和がとりにくいということです。

今回は1か所にしか使っていませんが、複数か所に使うとより調和が崩れていきます。

ここぞというときの奥の手であるということは忘れないようにしましょう。

バナー広告色使いの基礎知識【まとめ】

ここまで見てきていかがでしたでしょうか。

イメージ・明度・彩度・色相の4つについて例を交えて解説してきました。

 

改めて各項目のポイントです。

・イメージ：『会社・商品・サービス』に色を合わせる。⇒色のイメージ効果は絶大！

・明度：暗いと重厚、明るいとポップな印象(可読性注意！)

・彩度：高いと強く派手な色、低いと弱く柔らかい色(可読性注意！)

・色相：近い色ほど調和がとりやすく、遠い色ほど対比がつくりやすい。(調和崩れ注意！)

この4つが色選びの基本となるので、困ったときの引き出しとして覚えておきましょう。

最後に

…とはいえ、もっとカラフルで鮮やかなバナーが作りたいですよね？

上図は基本を押さえつつも色数を多くしたバージョンです。

作成時は特に明度・彩度を中心に微調整してバランスをとっています。

背景もグラデーションを入れて、より鮮やかに見せています。

 

では、このようなバナーを自力で作るためにはどうするか。

それはインプットとアウトプットの徹底です。

とにかくたくさんバナーを見て、たくさんバナーを作るのに限ります！

なんとなくでもいいなぁと思ったバナーを模倣して作るだけでも勉強になります。

実際知識として色使いを学んでも、すぐに使いこなすのは難しいです。

是非たくさんのバナーに触れて、色使いを学んでみてください。