グラフ上での配色の魔力

人を惹きつけるグラフを作るための配色について解説してみます。

グラフを見てもらう

人を惹きつけるグラフを考える前に、忙しい人は「１秒以内に最初の決断をする」という事実を知る必要があります。時間をかけてデータをグラフにしても、あなたの苦労とは関係なく、見る人は即断即決で見るべきか決めてしまいます。ぱっと見、「ごちゃごちゃしている」という印象を持たれたら、それ以上は見てもらえません。人を惹きつけるには多くの工夫が必要ですが、最も簡単で効果的なものは配色です。従って、配色さえ注意していないグラフは、人に見せる準備が整っていないと言えます。

上手い人を真似る

f:id:gri-blog:20200905123256j:plain

良い配色のグラフを作るには、専門家を真似るのが手っ取り早いです。例えば、データジャーナリズムに力を入れている、The Economist誌。2019年度グラフィック詳説（Graphic-Detail）の色使いを真似するだけで、１秒の関門を通過できる確率が一気に高まります。The Economist誌の記事がグラフに力を入れているのは、読者の視線の流れの傾向が、次のようになることを調査の上で知っているからです

グラフや写真をまず見て
次にグラフの読み方の補足説明
記事タイトル
記事本文

上手い人のやり方は真似した方が良いです。

自分なりの配色を作る前に

配色の真似だけでは、グラフをたくさん作っていく上で色が足りなくなっていきます。次のステップは、自分なりのカスタム配色（カラーパレット）を作れるようになることです。相性の良い色の関係を教えてくれるサイトが多く存在しますが、それらのメインターゲットはウェブページのデザイナー向けだったりするので、グラフで利用する配色としては、不適切なことがほとんどです。自分も何回か試しましたが、微妙な配色が提案され、いつの間にか使わなくなりました。そんな中で、Palettonはグラフ用の配色選びが簡単で便利です。他のサイトで上手くできないことを、Palettonができている理由を説明する前に、背景として色が、色の３属性で成り立っていることを説明します。

f:id:gri-blog:20200905124616p:plain

色相（Hue）：　純色（赤や青や緑などの色）を360度で表現したもの
彩度（Saturation/Chroma）：　純色と白または黒との混合
明度（Lightness, Value）：　明るさ

色の選択は、色の３属性を３次元から選ぶ行為で、さらにグラフでは何色か選ぶので、実は難しい作業です。

Palettonで自分なりの配色を作ってみる

f:id:gri-blog:20200905131417j:plain

Palettonは、この辺のことを実に見事なUI表現で克服しています。まず、色円環内（外側のドーナツ）の丸点を動かしPrimary Colorの色相（Hue）を選び、さらに対比する色相を同様に外側の丸点で決定します。これで色相は決ったので、後は彩度と明度を２次元の中（内側の円）から選択するという、範囲を狭めることに成功しています。真ん中に５つの丸点があり、５つの丸点の真ん中が、ベースとなる色の彩度と明度の組み合わせです。５つの丸点の角度や幅を変えることで、彩度と明度のバリエーションを同時に４つ選ぶことができます。

色相（Hue）とは？

f:id:gri-blog:20200905132509j:plain

色相の範囲は、どのように決まっているかと言うと、太陽光とその光を捉える瞳のメカニズムの関係から決まっています。太陽光は電磁波の内の一つですが、人の見える光の範囲が可視光線で、これは波長の範囲（380 nm〜780 nm）が対応します。光をプリズムに通すと、スペクトル（赤・橙・黄・緑・青・藍・紫）が見えます。これが色相に対応します。

発達言語から色の区別の複雑さを知る

f:id:gri-blog:20200905153819j:plain

人類は色の区別をどのように他の人に伝えてきたのでしょうか？言語としての色の区別の歴史が分かると、グラフで区別しようとしている色の複雑度も理解しやすくなります。Berlin and Kay (1969) "Basic Color Terms"の研究によると、様々な言葉の色表現の進化の歴史は類似性があり、おおよそ以下のようです。

ステージ１：　黒と白
ステージ２：　赤
ステージ３：　黄色と緑
ステージ４：　青
ステージ５：　茶色
ステージ６：　ピンクとオレンジと紫とグレー

実際の雰囲気は？

f:id:gri-blog:20200905170409j:plain

Tableauのsuperstoreのデータを使って、Tableauのデフォルトの色と、The Economist風、適当にPalettonで作った配色でダッシュボード比較をしてみました。同じデータですが、印象はどのように変わったでしょうか？デフォルトのTableauの配色は判別つきやすいのは事実です。ただ、慣れてくると、またかぁ、って思われます。The Economist風のものは、ストーリを語りやすくなっています。Palettonのも、簡単に選んだ割に、ちゃんとした配色がでていると思います。配色を変えるだけで、魔法にかかったかのように、見栄えがよくなります。

まとめ

見づらいダッシュボードの典型例は、ごちゃごちゃして何を伝えたいか分からない。作者は、全部が重要だから、全部を目立たせたいので、全部派手な色になってしまった。こういうときは、今回ご紹介したPalettonなどを使って、落ち着いた配色を選んでみて、多くの色が使えない状況から、ダッシュボードを作ってみるのが良いのではないでしょうか。