デザイン

データ可視化の配色で意識したい3つの仕事―色は最後に決めると、グラフは強くなる

グラフの色を選ぶとき、何から考え始めますか。多くの方は「見た目」から入ります。ですが、色には見た目の前に果たすべき具体的な仕事があります。区別する、強調する、順序を示す。3つの役割を理解すれば、配色は感覚ではなく設計に変わります。

グラフ作成の最終段階で「色を選ぼう」と思ったとき、ツールに用意されたパレットの中から「なんとなく好きな色」を選んでしまうことはありませんか。私自身、長らくその習慣がありました。ですが、色を「最後の飾り」として扱っているうちは、グラフは情報の運び手としては弱いままです。

データ可視化の世界では、色は明確な仕事をしています。装飾でも雰囲気作りでもありません。色は情報を運ぶのです。良いグラフは、形と色が一緒に意味を伝えています。色を後付けで考えるのではなく、伝えたい情報の構造から色を導き出す。これが本記事のテーマです。

仕事1:区別する(カテゴリカル)

色の最も基本的な仕事は「これとあれは別物だ」と読み手に伝えることです。複数の系列を区別するための配色をカテゴリカルカラーと呼びます。

カテゴリカルカラーで重要なのは、色相(色味)が十分に離れていることです。青と緑、赤とオレンジのように、近い色を並べると、読み手はパッと見で区別できません。Tableau 10、ColorBrewer の Qualitative、D3 の category10 など、世の中のデフォルトパレットが似たような構成(青・オレンジ・緑・赤・紫など6〜10色)になっているのは、この「色相の離れ方」を慎重に設計した結果です。

カテゴリカルカラーで気をつけたいのは、色の意味を持ち込まないこと。たとえば「売上」を赤、「コスト」を緑にしてしまうと、文化的な連想(赤=危険・マイナス、緑=OK・ポジティブ)と中身の意味が衝突し、読み手が瞬間的に混乱します。色そのものに文化的な含意があるため、カテゴリカルでも色選びは慎重に行うべきです。

図1:カテゴリカルカラーの例です。青・緑・オレンジ・紫が十分に離れているため、4系列がはっきり区別できます。色の選び方が、グラフの可読性を決めます。

仕事2:強調する(フォーカス)

すべての要素を同じように扱うグラフは、結果として何も強調していません。「読み手にどこを見てほしいか」を色で示すのが、フォーカスカラーの仕事です。

具体的には、強調したい要素を1つ(多くて2つ)だけ目立つ色にし、それ以外をグレーやくすんだ色に落とします。ハイライトとディムの対比です。これだけで、グラフの「主役」が決まります。

強調する対象は、「最大値」「最新の値」「自社」「目標達成項目」などケースバイケースです。重要なのは、強調が1つに絞られていることです。10本の棒のうち5本を強調しても、それは強調ではなく「半分」にすぎません。本当に伝えたい1〜2本だけを目立たせる。これが効果的なフォーカスです。

図2:「自社」だけを青で強調し、他社をグレーに落とした棒グラフです。読み手の視線は迷わず青に向かい、「自社が業界で何位か」が一瞬で伝わります。

10色使うグラフより、9色をくすませて1色を立たせるグラフのほうが、はるかに伝わります。

仕事3:順序を示す(シーケンシャル・分岐)

3つ目は、色そのものに「量の順序」を持たせる使い方です。これにはシーケンシャル(連続)配色と分岐配色(diverging)の2種類があります。

シーケンシャル配色は、薄い色から濃い色へのグラデーションで「値の大小」を示します。たとえばヒートマップで「PVが多いセルほど濃い青」のように使います。色相は1つに固定し、明度や彩度だけを変えます。これは「値が大きい=色が濃い」という直感的な対応関係を作ります。

分岐配色は、「中央の基準値」から両側にそれぞれ別の色相が広がる配色です。たとえば「予算比 ±20%」を可視化するとき、ゼロを白、プラス側を青、マイナス側を赤にします。読み手は「白から離れているほど偏差が大きい」「色相で方向(プラスかマイナスか)がわかる」という二重の情報を一瞬で受け取れます。

順序を示す配色を使うべきデータは、棒グラフの色分けではなく、ヒートマップ・コロプレス地図(地理データ)・等高線図などです。一般的な棒グラフや折れ線グラフでは、シーケンシャル配色は使いません。なぜなら、棒の長さや線の高さですでに値の大小を表現しているため、色まで使うと冗長になるからです。

「なんとなく好きな色」が引き起こす3つの問題

配色を感覚で決めると、いくつかの典型的な問題が発生します。

問題1:色の数が多すぎる。カラフルなパレットを全部使ってしまうケースです。色が増えるほど、それぞれの色が伝える情報量は減ります。3〜5色を超えるカテゴリカル配色は、ほとんどの場合、情報を増やすのではなく減らしています。

問題2:強調すべき要素が埋もれる。すべての項目を同じ色相のグラデーションで描いてしまい、結局「どれが大事なのか」が伝わらないケースです。グラフを作るとき、まず「読み手に何を見てほしいか」を決め、それ以外を視覚的に下げる勇気が必要です。

問題3:色覚多様性への配慮が抜ける。赤と緑を区別しにくい方は、男性で約20人に1人と言われています。「ポジティブを緑、ネガティブを赤」という伝統的な配色は、この方々には機能しません。代替案として、青系(ポジティブ)とオレンジ系(ネガティブ)の組み合わせは、ほぼすべての色覚タイプで識別しやすいことが知られています。

色を「最後に」決める設計プロセス

では、配色をどのタイミングで決めるべきでしょうか。私が推奨するのは、グラフ作成の最後の段階です。

順番はこうなります。第一に、伝えたいメッセージを言語化する。「Q4のキャンペーンが効いた」「自社が業界3位」など、結論を1文で書く。第二に、メッセージが最も伝わるグラフ種別を選ぶ。第三に、軸とラベルを設計する。データの範囲、目盛、項目名を決める。第四に、ここでようやく色を決める。色には3つの仕事のうちどれをさせるかを意識する。

このプロセスで色を最後に決めると、色は飾りではなく道具になります。「自社を強調したい→自社だけ青、他社はグレー」「変化の方向を示したい→プラスは青、マイナスは赤」のように、メッセージから色が自動的に導き出されます。これが配色の設計です。

「迷ったら無彩色」が最強

最後に、私が長年使っている経験則を共有します。配色に迷ったら、まずすべてグレーで描いてみる。それで伝わるなら、色は不要です。それでも伝わらない部分が出てきたら、その部分にだけ色を足す。

無彩色から始める設計は、「色の使い過ぎ」を防ぐ最強の予防策です。色を足すたびに「この色は何の仕事をしているのか」を自問することになるからです。仕事を答えられない色は、削除する。これだけで、グラフは見違えるほど強くなります。

配色は感性のものではなく、論理のものです。色を最後に決め、3つの仕事のどれをさせるかを意識し、迷ったら無彩色から始める。この3つだけで、明日からの資料の品質はぐっと上がるはずです。