MotionBoardデザインコンテンツ

グラフの配色

グラフの配色を決める時のポイントは？
Write your awesome label here.

もくじ

グラフの色の考え方

グラフの色は、見る人への情報認識の材料として必要な部分です。
ですが、画面上にグラフが複数あったり、項目が多くて色が決めきれなかったりと、作成するときに悩んでしまいますよね。
では、どのように色を作っていけばいいのでしょうか？
グラフは、どういった情報を届けたいかによって表現が変わります。それは配色にも同じことが言えます。
現状の把握、これまでの推移や傾向、ネガティブポイントの早期発見など、グラフを見る人にどういった情報を伝えたいのか考え、それが判断しやすい配色を検討しなければなりません。
グラフの色を決める時のポイント


  • 画面全体の配色イメージを意識する
  • グラフからなにを判断させるのかを考える
  • 重要度・優先度の高いものを濃い色or鮮やかな色にする

画面全体の配色イメージを意識する

色を決める時はグラフや表など各アイテムごとに考えるのではなく、画面全体のイメージから検討します。
テーマとなる色を決めることで、全体的に統一感を生み出し、見やすい画面になります。
テーマとなる色とは、画面のメインとなる色です。
具体的な決め方・考え方は【色の考え方】をご参照ください。
画面全体の配色イメージが決定した後、その配色をベースに色を検討していきます。
このように、メインカラーの類似色や、明暗を変えたグラデーションで構成すると、ダッシュボード全体のイメージを統一できます。
類似色やグラデーションを選ぶときは下記の例を参考にしてください。

例：メインカラーが青のときの配色の選び方

グラフからなにを判断させるのかを考える

グラフに表示させる項目数が多ければ多いほど色の種類も増えていきます。
そうなった場合、色だけでなにかを判断させるには限界があります。
項目の多いグラフは、そこからどういった判断が必要なのかを考えなければなりません。
例えば、以下のようなグラフがあるとします。
このグラフは、商品カテゴリの売上金額を積み上げ、月毎に表示したものです。
約50種類のカテゴリが積みあがっている状態で、メインカラーを緑とし、その類似色を12色作り、繰り返して配色しています。
こういったグラフは色での判断は非常に困難で、全カラーを設定したとしてもその見え方は大きく変わりません。
ここで重要なことは『このグラフからなにを判断させるのか』と、いう点です。
「なにを判断させるのか」という考え方は、できるだけシンプルなものを考えます。
例えば、『先月より売上げが低下しているカテゴリが知りたい』といった形です。
複雑に考えすぎてしまうほどグラフに対する要求が追加され、情報が複雑になり、一番伝えたいことがあいまいになってしまうので注意しましょう。
では 『先月より売上げが低下しているカテゴリが知りたい』 という判断を目的とした場合、先ほどの画面で判断できるでしょうか？
現状のままでは、大まかな売上状況は把握できるものの、先月との差を判断するためにはグラフをじっくり眺める必要があり、直感的に気付けませんね。
目的を達成させるためには、気づきやすい状態をあらかじめ作っておかなければなりません。
気づきやすい状態を考えるときのポイント


  • 見る人の視点で考える
  • 一番重要な判断を優先して考える
『気づきやすい状態』を考える時は見る人の立場にどれだけ近づけるかが重要なポイントです。
実際にグラフを見る人の感情や行動を推測し、目的を達成させるためにどんな行動・思考を行うのかを考えます。
例えば、今回の場合
　　先月より売上が低下しているカテゴリを知りたい
といった目的がありますが、この目的を達成させるには、２つの行動が必要だと推測できます。
目的を達成させるための行動


  • 先月より売上が低下している箇所を見つける　★最優先
  • その対象カテゴリを判断する
目的を達成させるための行動を推測し具体的に書き出すことはとても重要です。推測した情報をもとに「グラフの表現がどうあればいいのか」といったステップに繋がります。
また、行動が複数発生する場合は、すべてを同レベルで考えるのではなく、どの行動が最優先であるかを踏まえて検討すると、利用者と同じ視点レベルにより近づくことができます。
行動を書き出したら、その行動を実施しやすい状態がどういったものかを考えます。
どういった状態だと解決できるか


  • 先月より売上が低下している箇所を見つける　★最優先
    →対象箇所が他より目立つ
  • 対象カテゴリを判断する
    →気になる個所は随時変更され、その時に判断しやすい状態
解決させるための手段は、複数存在することもあります。
その場合は、操作の回数や視線の動く回数などを想定し、最適な回数で判断できる手段を検討しましょう。
次に、その状態をどう表現したら実装できるかを考えます。
どんな表現だと実装できるか


  • 先月より売上が低下している箇所を見つける　★最優先
    →対象箇所が他より目立つ
    　→視線を向けさせる配色
  • 対象カテゴリを判断する
    →気になる個所は随時変更され、その時に判断しやすい状態
    　→気になる部分にマウスオーバー
このように目的を達成させるための手段を言語化することで、配色や表現が検討しやすくなります。

重要度・優先度の高いものを濃い色or鮮やかな色にする

視線を向けさせるための要素として配色は重要なポイントのひとつです。
難しいようにも感じますが、考え方はシンプルです。配色で視線を向けさせるための法則は大きく二つあります。
それは、【他より色を濃く】【他より鮮やかに】を意識することです。
人の目は、他より濃い部分や鮮やかな部分に先に視線を向ける性質があります。
目立たせたい部分を際立たせるためには、対象以外の色を目立たないようにすることも重要です。例えば以下のようなイメージです。
このように、目立たせたい箇所のみの色を修正するのではなく、周囲の色を薄い色などに調整すると、重要な部分や優先的に知らせたい箇所を目立たせることができます。
では、この考え方を元に先ほどの積み上げグラフを修正しましょう。
今回の画面では先月より売上が低下している点を発見する必要があるので『注意すべき点が他より目立つ』といった考え方で色を考えます。
この時は「濃い色」であるよりは、「他より鮮やかな色」を選ぶと判断がしやすくなります。
ですが、上記の状態だと「濃い色」や「鮮やかな色（黄色系）」が混ざっており、目立たせたい箇所への注目はまだ向けさせにくい状態です。
これを以下のように調整しました。
利用している配色は青系を５色と、赤系の１色のみで、とても少ない色だけで表現しています。
ここでの重要ポイントは細かく積み上げられた内容ではなく、先月より売上が低下している箇所の発見であるという点です。
言ってしまえば、このタイミングでは注目させたい箇所以外は調査する必要がないということです。
このように、配色はグラフの目的や見かたによって大きく変わります。
分析を促すためには配色の役割が重要なポイントになるので、グラフを作る時にはこの考え方を頭において考えていきましょう。