デザイン、レイアウトにおける配色の役割とは？

Training.Ⅰ レイアウト

色を選んで配置、構成していく「配色」は、デザイナーがデザインを組みたてる上で欠かせない作業のひとつです。レイアウトと同じく配色にも基本的なルールがあり、それを守ることで伝えたいことが伝わりやすくなります。ここでは、デザインにおける配色の役割や効果を探っていきます。

デザインに色を加えることは、ただカラフルに彩るためではありません。配色にはさまざまな役割があるので、下記でご案内します。

雰囲気作り

10代の女性向けのアクセサリーを紹介する広告なら、ピンクやオレンジを使ってポップな雰囲気に。30～40代の男性に向けた腕時計の広告なら、黒やグレーを使えば落ち着いた雰囲気を演出できます。このように、配色により、さまざまな雰囲気作りが可能です。

情報の整理

同じカテゴリーの情報に同じ色を使うことで、それらが同じグループのものであることをひと目で理解してもらうことができます。アクセサリーの広告だったら、ピアスは青、ネックレスは赤色というように同じ色の背景や文字を使うといったことで、ユーザーが情報を理解しやすくなります。

情報の強調

特に伝えたい情報に、ほかとは異なる色を配色すれば、その情報を強調することができます。イベント情報なら場所や日時、バーゲン情報なら価格に目立つ色が使われることが多いでしょう。

配色をするときに気を付けたいのは、色の面積の比率です。以下の比率を目安にして配色することで、美しく見やすいデザインに仕上がると言われています。

「ベースカラー」、「サブカラー」、「アクセントカラー」とはなんでしょうか？これらの意味を下記で解説します。

ベースカラー

もっとも大きな面積を占める色のことです。主に背景に使われ、全体のイメージを決める役割を持っています。「メインカラー」とも呼ばれることも。

サブカラー

ベースカラーの次に面積が大きい色です。メインカラーを補う役割を担っています。

アクセントカラー

面積は最小ですが、一番目立つ強い色です。デザイン全体を引き締めたり、人目を引いたりする役割を持っています。アクセントカラーは、ベースカラーの「補色」が使われることが多いようです。

上記の3色のみで配色をする必要はありませんが、使う色が増えるとまとめるのが難しくなり、統一感のない印象になりがちです。慣れないうちは3色での配色を考えてみましょう。

文字の読みやすさを「可読性」と言います。文字に配色を施して可読性を高めることは、デザインにおける重要な作業のひとつです。

基本的には、白に黒というように、文字と背景色の明度（明るさ）の差が大きいほど可読性が高くなります。たとえば、白に黄色ではどちらも明度が高いため、見づらくなってしまいます。

ただ、白に黒の場合でも、背景色を“真っ白”にしてしまうと眩しく感じられ、眼球疲労につながる可能性も。そんなときはやや明度を下げたり、白ではなくクリームがかったアイボリーなどを選んだりするのも良いでしょう。

デザインの印象は配色によって大きく変わります。上記のポイントを押さえて、伝えたいことが伝わるデザインを制作できるデザイナーになってください。

トレーニングコラム Day.5 | デザインにおける配色の役割