配色は3つのポイントで、分かり易く見栄え良く

配色は3つのポイントで、分かり易く見栄え良く デザインの基本

配色の手順とポイント3つ

前工程が決まっていれば、配色に迷うことはありません

いよいよ大詰め配色の工程です。一つ前の工程であるレイアウトがしっかり出来ていれば、配色はさほど難しくありません。逆にレイアウトが曖昧なままでは、配色だけでは解決しない問題も発生してしまいます。

レイアウトで出来る優先順位付けや整理整頓、そしてグルーピングは、モノクロのレイアウトでしっかり完成させてください。さらに配色で完成までもって行きます。

配色は理由を添えて、必要最小限で

配色が苦手という方も多いかもしれません。デザイン自体自由度が高いものなので、沢山ある色のうちどんな色を着ければ良いのか。この背景色にマッチする色の組み合わせは何かと、迷って決められず時間が掛かってしまい、結果良いものが出来ているのかも分からない。

そんな状況もこの記事を読んでいただくとスッキリスムーズに配色ができるようになります。配色もレイアウトなどと一緒でロジックがあります。
まずは本当に必要な色のみを、理由を添えて使ってみてください。

配色は理由を添えて、必要最小限で

理由を添えてというのは具体的に後述しますが、レイアウトの工程でやりきれなかったこと、さらに意味合いを強調したいなどです。配色せずとも今のモノクロでのレイアウトが終わった状態でも、デザインとしての役割を果たせる状態になっていると思います。

メリハリ、グルーピング、雰囲気付け

必要最小限の色数で、理由を添えて行う配色の目的は主に3つだけです。一つはメリハリ、それからグループ分け、そして雰囲気付けです。この3つのポイントだけ押さえれば配色は出来てしまいます。

メリハリを付けるための配色

レイアウトで付けたメリハリをさらに強調する

配色の目的のうちおそらく一番多いのがメリハリをつけるため、優先順位をつけるための配色です。

レイアウトで付けたメリハリをさらに強調する

ここまで順に読まれた方であればもうお気づきだと思います。このメリハリとグループ分けはレイアウトの工程にもありました。

配色ではレイアウトの工程でし切れなかった分、さらに強調したい場合に行います。例えば文字を大きくしてメリハリをつけた場合に、同じ大きさの文字の中でさらに強弱をつけたい場合です。

同じ程度の文字が一箇所にある場合、離れている場合でも「赤」など目立つ色、前進色を付けることによりその中でも目立たせる、情報の優先順位を上げることができます。

また、同じ大きさの文字が並んでいる本文の中でも強調したい部分。ノートに板書された内容を書き写し、その中で覚えて起きたいところを赤ペンで書いたり、蛍光マーカーを引く。というようなイメージです。

デザインにアクセントを付けて受け手をアシスト

アクセントをつける意味合いでの配色もあります。白や黒を含めた同じ色と形状のオブジェクトが並んでいる場合に、そのうちの一部分の色を変更する。その部分だけ目立たせることができます。

デザインにアクセント

文字の場合でも同じです。白抜きのタイトルで文字が複数並んでいる場合、先頭の文字だけ単語の頭文字などを黄色にするなど。アクセントを付け、分かり易く強調することができます。

グループ分けのための配色

直感的に分かるように、スペースが限られている時にも

二つ目の配色の目的であるグループ分けも、レイアウトの工程にありました。同じようにレイアウトでできるグループ分けはモノクロレイアウトの段階で行うべきです。

グループ分けのための配色

同じ区分のものは近付けて、同じグループとして認識できるように。一つの枠で同じグループの複数の項目を囲むのも同じです。

さらに配色でグループ分けをするのは、より直感的に分かり易くするためです。ぱっと見て同じ色が付いていれば、おのずと同じ区分として認識ができます。

また、スペースが限られて違う区分にも関わらず、それぞれを離すことが出来ない。そんな場合にも配色でのグループ分けは有効です。

差はハッキリと反対色をベースに考える

ここで一つ注意しなければいけないのが、色の差はハッキリ明確に付けることです。メリハリと同じく微妙な差は、そのデザインの制作者であるあなたしか分かりません。

差はハッキリと反対色をベースに

例えば同系色の色である赤とピンクやオレンジ、さらには紅色や赤紫など微妙な差しかない色は多く存在します。そういった色を組み合わせて使用しないこと。

赤系統の色をグループ分けに使用したい場合には、もう一つのグループには反対色の緑や青系統の配色をすると良いでしょう。このあたりの色の基本的な知識について別ページで解説していますので、詳しく知りたい方は読んでみてください。

雰囲気付けのための配色

配色でそれぞれ固有のイメージをより分かりやすく

最後にもう一つ、メリハリやグループ分けのための配色に加え、雰囲気付けのための配色があります。ほかの二つに比べるとやや感覚的な目的に感じるかもしれません。

雰囲気付けのための配色

雰囲気付けのための配色では、その色が持つイメージをデザインに使います。例えば季節、春の色は何色でしょうか。夏の色、秋の色、冬の色もそれぞれすぐにイメージする色を挙げることが出来ると思います。

それ以外にも表現したい感情やテーマ。力強い、かわいい、格好良い、熱い、寒い、エコだったり経済だったり。それぞれから連想されるもの、その色を配色として使用します。

企業の広告や企画書などブランディングに関わることであれば、その企業のコーポレートカラーを使うこともあるでしょう。老舗有名企業ほど、その会社のロゴや商品からイメージできる色がすぐに連想されると思います。

伝える+訴えるための配色

メリハリとグループ化のための配色で伝える、さらに雰囲気付けのための配色で訴える。そうしてデザインは完成します。

誤った配所kは誤解を招く

ここで受け手に誤解させないことがとても重要です。誤った配色、誤解を受けやすい色の選択をしてしまうと伝わりにくく、受け手を混乱させてしまいます

そのためには配色で正しい選択をする、基本的な知識を知ること。そして自分のなかのイメージの引き出しを増やすために、日々様々なデザインに触れて学ぶ必要があります。

タイトルとURLをコピーしました