カラーパレットの持つ力 – 分かりやすいデータ可視化のための色づかい

連載

エクスペリエンスデザインの基礎知識

チャートやスケールを使ってデータを視覚的に示すとき、色はとても便利な道具です。正しく使えば、読者を惹きつけるだけでなく、データをより良く理解するための助けにもなります。

では、どのようにデータの可視化に色を使用すれば上手く行くのでしょう？この記事では、何をすべきか、何を避けるべきかを説明します。

シーケンシャルなカラースケール

数値を色を使って表現するときは、スケールを作成することになります。（後で説明するカテゴリーの表現にスケールを使わないのは大事な点です） 片方に大きな値を、他方に小さな値を持つスケールを、グラデーションとして考えてみましょう。このとき、視覚心理学を利用できます。私達には、濃い色を密度と関連付け、そして密度を大きな数値と関連付ける傾向があります。つまり、暗い色は明るい色よりも大きな数値を表すものとして認識されます。ですから、スケールの大きな値の側には暗い色を、小さな値の側には明るい色を配置することを忘れないようにしましょう。両端の差が大きいほど、色使いは効果的になります。

単純な黒から白へのスケールから始めても良いでしょう。黒を他の濃い色に変えると、少し見やすくなります（上図左）。もう一方の端を白から黄色に変えてみましょう（上図右）。濃紺に近づくに連れて、スケールは徐々に色を変え、中央では海緑色になります。これは多色相スケールの例で、明度と色相の両方が変化するように色を選んだことで、より見た目が分かりやすくなっています。

明るい背景の上に置くグラフでは、寒色系の高コントラストの色、例えば青や紫で一方を始め、暖色系の低コントラストの色を他方に使うのが良い方法です。これは、暗い色から明るい色への変化を強調します。逆の方針は自然に逆らうもので、読み取りにくく見た目も不自然に映るでしょう

分岐カラースケール

分岐スケールも数を表すのに使われますが、この場合には意味を持つ中間点が存在します。米国の選挙中であれば、共和党と民主党の状況を示すグラフとして目にしたことがあるでしょう。

この種類のスケールを効果的につくるには、低い方の値を共有する2つのシーケンシャルなスケールとして考えます。この共有した値が中間点です。それぞれのスケールの色相が近くなり過ぎないように注意しましょう。中間点からの距離を強調したいのであって、隠したいわけではないことをお忘れなく。

カテゴリーと色

数値的な意味を持たないデータ（カテゴリー）をグラフに表すとき、データそれぞれを示すオブジェクト（円グラフのスライスやバーチャートのブロックなど）には、読者が識別しやすい色を選びたいものです。

デザイナーとしては、これらの色が並んだときの見た目も良くしたいところです。そのため、隣り合う色相がしばしば使われます。実際、これはきれいな配色になりますし（下図右）、若い自分の眼ではラップトップ画面上の各カテゴリーをはっきりと区別できます。しかし、もし同じ色をプロジェクターで見たら、あるいは視力の弱い人が見たら…似かよった色が並んでいるように見えることでしょう。これは大きな問題です。そもそも色を使う理由は、読者に個々のオブジェクトが異なることを分かりやすくする点にあるのですから。

これに対処するには、色相環を他の側まで飛び飛びに選び、色の差を最大化する手段があります（上図中央）。このアプローチは学会で人気があり、私や同僚は見た目の騒々しさと（大抵の目に）醜く映ることからコスビーセーターと呼んでいます。

では、どちらのアプローチが優れているでしょう？美しさと分かりやすさとどちらを取りますか？人によっては、最初のアプローチに明度の変化を加えて色の差をはっきりとさせるよう薦めています（上図右）。読みやすさは向上しますが僅かなものです。一方、新たな問題を導入します。人が暗い色を大きな数値と関連付けるという心理的な現象を覚えていますか？意図せずに、読者に暗い色が明るい色より大きな値であると伝えてしまっているのです。

この問題には特効薬はありません。私にできる最上のアドバイスは妥協することです。読みやすさと美しさをそれぞれ少しずつ放棄するのです。隣り合った色相を選択する際の間隔を大きめにし（少なくとも35°の色相変化）、明度は一定に保ちます。これによりカラーパレットは5-6色に制限されますが、それ以上の数になると、そもそも読者が個々の意味を覚えるのに困難を感じているでしょう。

ちょっとした助け

色について決めるとき、私は自分の目を頼りに始めるのが好きです。そして、見た目が良くて、説明しようとしているデータに合った色を選択します。しかし、先に進み過ぎる前に、いくつかの便利なツールの助けを借ります。選択する色の最適化の様々な作業（と数値の計算）を軽減してくれるからです。

色がデータに魅力を与えることは誰でも知っています。しかし、これらのテクニックを活用すれば、データをより意味のある有益なものにできます！読者は、丁寧なデータの扱いに対して感謝し、それに報いた注意を払うでしょう。そして、これはとても楽しい作業です。グラフ作りを楽しみましょう！

※ この記事はThe Power of The Palette: Why Color is Key in Data Visualization and How to Use It（著者:Alan Wilson）の抄訳です