Webサイト発注虎の巻ダウンロード
Webサイト発注虎の巻ダウンロード

新人デザイナーに伝えたい!配色の進め方と気をつけるべき3つのポイント

ナガレダ

こんにちは、デザイナーのナガレダです。

私は入社後一年ぐらい自社のインハウスデザイナーとして、自社バナーやアイキャッチを作っていました。入社当時はデザインの基礎知識も浅くアイキャッチを一枚作るのにもとても時間がかかっていました……。ですが、デザイナーの先輩方に一から教えてもらいつつ自分でも調べたり、インプットすることでだんだんコツを掴んでいきました。

入社当時の私のように、配色部分で悩む初心者の方は多いのではないでしょうか……! 今回は、アイキャッチやバナーなどの一枚絵を作るときの配色の進め方と、気をつけているポイントをご紹介します!

進め方

1.ターゲットを想定する

実際に私が制作したLIGブログのアイキャッチから、配色を決めるときの進め方を紹介します! 今回例にするアイキャッチは、下記の安全衛生委員会の記事のものです!


簡単に説明すると安全衛生委員会とは、社内での医療面の対応策を考える場所です。直近ですと、コロナについて医療的な面での対応策、安全衛生について審議、議論する場として、各委員会が役割を果たしたのではないでしょうか。つまりこちらの記事は医療、衛生関連ということで結構専門的な記事になります。

そこからこの記事を読むターゲットを想定すると……LIGの安全衛生面はどう話し合ってるのかを、参考にしたいと思っている他社の人事や総務担当者、具体的に今まさに安全衛生委員会について調べていた人、LIGの社員などに絞られるかと思います。

このように多くの人に向けてというより、詳しく調べている方に向けての記事になります。制作するにあたって、ターゲットからぱっと見で、衛生面や医療的なことが書かれていることがわかるようなアイキャッチにしたいと思いました。

2.参考探し

ターゲットの設定ができたら次は参考探しです! このときは医療、衛生系に絞って媒体限らずpintarestで参考を探してみました。

すると清潔感を感じる青系や白系のデザインがたくさんでてきました! これは寒色である青が、副交感神経に働きかけて鎮静効果が期待できる色であるためです。

青は病院や歯医者さんの待合室などに使われてたりして、心を落ち着かせる効果があります。また白色は清潔なイメージを持つことから、医療現場や水回り、トイレなど、衛生的な印象を与えたい場合に使われることもある色です。

こういった参考をもとに青と白を基調にしたデザインにしようと思いました!

3.デザインに落とし込む

配色が決まったらデザインを作成します! 先ほど決めた青と白を基調にデザインに落とし込んでみました。

ただまとまりはあるけどなんか単調でつまんないかも……。ということで、ブルーの反対色であるイエローをアクセントカラーとして取り入れてみます

 


小物などの細かいパーツにイエローを入れてみました! 差し色を入れることでメリハリがついたかと思います。

一度同系色でまとめて後からポイントでアクセントになる色をたしてみる、という手法を私はよく使うのですが、配色が簡単になるのでおすすめです! 差し色に困ったらとにかくいろんな色を試してみると良いかと思います!(私は主に補色や反対色などから試してみてます!)

次に配色するときに気をつけたいポイントをご紹介します。

ポイント① 色数を制限しよう

特別な意図がない限り配色は3色までに制限するということを気をつけています!(虹とかのオブジェクトを使わないといけないときは、いろんな色を使った方がいいかもですが)

色数を増やすと、それだけデザインをまとめるのが難しくなります。どうしても色数を増やしたいときは無彩色なら比較的に邪魔しないので色数を足したいときに試してみるのはアリだと思います!

ポイント② 70:25:5の法則を試してみよう

これは一般的な美しい配色の比率とされています。

ベースカラーは全体の基盤になる色。メインカラーがロゴやキャチフレーズなど、見る人にとって目につきやすい「メインコンテンツ」に用いられる色。アクセントカラーがベースカラー、サブカラーとは色相や彩度が異なった色。

この比率を用いれば、全体のデザインにメリハリを出し、引き締めるようになります。

ポイント③ 真っ黒(#000000)は避けよう

純粋な黒(#00000)を配置すると、コントラストが強すぎて目がチカチカしてしまうのでなるべく避けたいです。そもそも自然界にあるものは、光が反射して目に見えているので、真っ黒なものはほとんどないです。

物体には光量があるので今見えてるのは真っ黒ではなく、限りなく黒に近い灰色になります。真っ黒を使うと、せっかくデザインした他の要素を殺してしまうので、黒にしたい場合も#000000ではなく少し数値を足して灰色がかった黒にしてみましょう!

黒やグレーの部分に背景色などの色味を少しだけ混ぜる、という手法を私はよく使います。そうすることで真っ黒やただのグレーにするよりまとまりが出るようになります!

まとめ

ということでデザインの配色するときの進め方や気をつけているポイントをまとめてみました! 色選びって難しいだけじゃなくて楽しいものなんだと伝えられたら幸いです!