相手に伝わる！グラフやテキストの配色完全ガイド

こんにちは。デザイナーのasatoといいます。

今回はビジネスシーンで使えるグラフやテキストの配色について書いていきます。

色の基本

色は色相・彩度・明度で分かれています。

 

色相とは、色そのものの種類や色味を指します。私たちが赤、青、黄色と呼んでいる色は、すべて色相によって分類されます。

 

色の明るさを表します。ある色がどれくらい明るいか、または暗いかを示します。明度が高いほど色は明るくなり、明度が低いほど色は暗くなります。

画像だと左の色は明度が高く、右は明度が暗い状態です。

 

彩度は、色の鮮やかさや純度を表します。彩度が高いほど、色は鮮明で強くなり、彩度が低いほど色はくすんで弱くなります。

画像だと左の色は彩度が低く、右は明度が高い状態です。

 

色の基本について解説を終えたところで配色について記載していきます。

NG例

資料では視認性のある色使いが大事です。あまり重要な部分にパステルカラーは使わないようにしましょう。

 

例えばこのサンプル画像を見てみてください。色が淡い印象を受けますよね。

画面越しだとまだ色味が見えるかもしれません。ですが、対面での発表時の場面を想像してみてください。

プロジェクター越しだと色味が大分薄まり見えづらいことが予想されるでしょう。

彩度が高すぎる色もNGです。視認性自体は良いですが目がチカチカしてしまい、内容がうまく頭に入ってきません。

また真っ黒を使用するのもNGです。色が強すぎて他の部分が完全に負けてしまいます。背景や装飾に使用するのも良くないですが、文字色に真っ黒を使用するのも色が強くなってしまって読みづらいのでおすすめしません。

黒を使用する時は少しグレーに寄せた色を使用しましょう。例えばカラーコードで言えば「#333333」です。ちなみに真っ黒のカラーコードは「#000000」です。

カラーコードとは、特定の色を指定するためのコードです。カラーコードは、主に色のデジタル表現に使用され、色を正確に再現するためのものです。

さまざまなカラーコードの形式がありますが、代表的なものは RGB(rgb(0-255, 0-255, 0-255)) と 16進数 (#000000) です。デザインをする上でもその2種類を使用することがほとんどです。パワーポイントなどで色指定するときもカラーコードで指定できたりするので、使用したい色があればカラーコードを検索し指定してみても良いでしょう。

 

それぞれ伝えたい内容の役割が違うからといって色数を多く使うのもNGです。

上記の画像のように何を伝えたいのか、重要なのかがよく分からない資料になってしまいます。

 

それを踏まえて資料を見やすいように変更しました。

下記の画像を参照しながら解説していきます。

OK例

 

どうでしょうか？見やすくなったのではないでしょうか。

ポイントとしては色数を少なくしました。

よくデザインをする際に、ベースカラー、メインカラー、アクセントカラーを決めて作業すると良いと言われています。

ベースカラー70%：メインカラー25%：アクセントカラー5％の割合で使用すると良いです。

 

実際の配色例

このような配色を資料に使用すると見やすい資料になることでしょう。

ベースカラー/メインカラーとアクセントカラーは別の色相でも構いません。

別の色相を使用することでアクセントカラーを使用した箇所がより強調されるでしょう。同じ色相でも彩度を高いものにすれば目立たせることができます。また、同じ色相を使用することで統一感がより演出されるでしょう。

 

使用する色は青系や緑系統がおすすめです。それぞれの色は信頼感や落ち着きを求められる場面で効果を発揮します。

青は、クリーンで誠実なイメージを与えたり、人々を落ち着かせる効果があります。また知性的でプロフェッショナルな印象を与えます。

緑は、自然、成長、調和、健康を象徴する色で、ビジネスシーンにおいても良い効果をもたらします。緑を使うことで、フレッシュで爽やかなイメージを伝えられるでしょう。

もし、コーポレートカラー(会社のイメージカラー)を使用したい場合はそちらでも良いかもしれませんが、同じように色相/明度/彩度に気をつけて配色を行いましょう。

 

グラフ

NG例

見るからに見づらいなと感じるのではないでしょうか。

1つずつ解説していきます。

 

まずグラフの色相がバラバラなグラフを見てみましょう。

色の区別がはっきりとできるのでグラフとしては機能しているかもしれません。ですが、色相が全て異なるため色のまとまりがなく散らばった印象を受けます。

配色の法則性も特にないので、内訳の多いグラフを作成する時に散乱してしまうことでしょう。

 

次に色の階調が揃っていないグラフも問題です。階調とは、ある色が徐々に別の色へと変化する、色の濃淡や変化の度合いを指す言葉です。もう少し簡単にいうとグラデーションですね。

画像では同じ色相の緑を使用していますが彩度がバラバラのため違和感のある見た目になっています。彩度も異なるので、2つ目に大きな緑色の印象が強く映りますね。

 

そして異なる色相を交互に使用したグラフをみてみましょう。こちらも見づらい印象を受けますね。

色相が違う色を交互に使用しているため、グラフの内容を見ていくときに慌ただしさを感じます。全体的な印象も法則性がなく、まとまりがない感じを受けますね。

 

OK例

まとめ

いかがでしょうか。かなり見やすくなったのではないでしょうか。

グラフの色相は2つ以下に抑えることを推奨します。色数が多いと散らばった印象をどうしても受けてしまうため、絞った色相にすることが大切です。

どうしても内訳が20以上増えてしまった際には3つの色相を使用する必要性も出てくるかもしれないですが、その場合はそもそも円グラフでない見せ方を検討する必要性があります。(グラフとして見づらく、機能していないため)

 

また、同じ色相を隣接させましょう。そうすることでグラフにまとまりが発生してきます。

グラフ内で大枠のグループ分けを行いたい場合はこのように色相を分けても良いかもしれませんね。

 

以上がビジネスシーンの資料や発表で使える配色についてのTipsでした。

一番大事なのは色数を絞ることです。多く使用すれば良いわけでは決してないので、配色に困っている方はまず絞るところから始めてみてはいかがでしょうか。