そのダッシュボードが見られなくなる理由 - 色編
ダッシュボードについてよく聞く話が「ダッシュボード作ったはいいものの、誰も見てくれない。」です。Tableau にせよ何にせよツールをある程度使えるようになって、会社の KPI をダッシュボード化したのにアクセス数が伸びない。公開した日は伸びたのに、それ以降は話題にすら上らない。もう二度とダッシュボードなんか作るか！ と思ったことがある方は少なくないはず。でも、ダッシュボードが見られなくなるには理由があるんです。それも複数*1。
今回は最も目に訴える「色」について書いていきたいと思います。ここでは自分の興味を伝える意見型*2のダッシュボードではなく、KPI モニタリングなどに使用される中立型*3のダッシュボードを取り上げます。
イメージはこんな感じです。いわゆる KPI モニタリング用ダッシュボードの例。
伝わる色数は 3 色前後
いきなりですが、よく見るダッシュボード (もしくは自分が作ったダッシュボード) は何色の色がありますか？ デフォルトの文字の色を除いて、4 色以上あったら危険信号です。7 色を超えてたら今すぐ色について検討を始めた方がいいです。性差や文化的な背景の差として理由が語られることが多いですが、ここでは敢えて言います。色が多いのはダサいです。真面目な話をすると、色には意味と受け取り手に与えるイメージがあります。赤は熱い、注意などで、青は冷たい、カッコいいなどに代表されるものです。このイメージを無視した色を使ってしまうと、ダッシュボード上のチャートの意味と色の意味が食い違ってしまうためにユーザーは混乱をきたし、よくわからないから結果ダッシュボードを見ないということになりかねません。
ところが、多くの人が最も見慣れているであろう Excel は親切心からなのか、ものすごくカラフルなチャートを作ってくれます。*4これを見慣れるとなんとなくチャートはカラフルにしないといけない気持ちになってしまうのですが、そうなる前に一旦考えるべきなのは「このチャート (ダッシュボード) で何を伝えたいか」です。一般に KPI 用のダッシュボードならば、「達成」、(「もう少しで達成」)、「未達」の指標がわかればいいのでそれ以上の色を使う理由がありません。 製品やサービスのダッシュボードであっても細かいひとつひとつの SKU ごとに色を分ける理由は本来ないはずです。
色の選び方 (色相)
色を 3 色にすると決めたとして、その 3 色をどの組み合わせにするかは問題です。ここでセンスがないからと諦めるのは勿体ない。基本と便利なツールさえ覚えていれば、誰でも素敵な色を選ぶことができます。
配色の基本は 70:25:5
全体の色の割合です。ベースカラー 70％、サブカラー 25％、アクセントカラー 5％ にするとバランスが良いと言われています。
企業ロゴなどのデザインでは最も強い色をベースカラーに選ぶことが多いのですが、ダッシュボードだとベースのインパクトが強くなりすぎて本来注目すべき箇所に注意が向かなくなってしまうので、最も薄い色をベールにすると良いと思います。ベースに近い色で濃い色をサブカラー、ベースとは反対の色*5をアクセントカラーにするとまとまりがいいです。とは言え、そんな組み合わせも自分で選ぶのはなんとなく難しいのに変わりはありません。そんな時はツールを使いましょう。
[自分であまり考えたくない方向け]
LOL Colors - Curated color palette inspiration
あらかじめ 4 色の組み合わせを提案してくれるので、気に入った配色をそのまま使えます。
Colormind - the AI powered color palette generator
クリックで 5 色のパレットを次々に提案してくれます。十六進数カラーコード表記もあるので Tableau 向き。
[自分で多少考えたい方向け]
Palettable
1 色選ぶとそれに合う組み合わせを次々提案してくれます。十六進数カラーコード表記もあるので Tableau 向き。
色を増やすときは色の濃淡で
いくら 3 色でダッシュボードを作りたくても、カテゴリーのメンバーが 3 つしかないなんてことの方が珍しいですよね。製品独自のイメージカラーがある場合を除き、できれば色数は増やさないようにしたいものです。そんな時に役立つアイデアが「色の濃淡 (強度) 」です。同じ色でも濃淡を変えることで、色数を増やしながらも全体のトーンを損なうことがありません。この時、サブカラーやアクセントカラーに濃淡をつけて使うのがポピュラーな方法でしょうか。それもちょっと難しいという方にオススメしたいのは灰色を使うことです。
灰色は他の色を邪魔しにくくかつ注目したい色を引き立てるので、ダッシュボードのどこを見たらいいのか全体と比較してどうなのかが伝わりやすくなります。
色を減らすとこんなにわかりやすい
ここで少し例を見てみましょう。左右は同じチャートですが、左側は地域ごとに色分けしたもので、右側が注目したい地域だけに色を付けたものです。
同じように、同じチャートでも左はカテゴリーごとに色分けをし、右側は注目したいカテゴリーだけに色を付けたものです。
どちらの例も左右のチャートの情報量は同じですが、どこに注目すべきか、他と比較した場合の立ち位置等がわかりやすくなっています。
[参考資料]
tsutawarudesign.com
今回はダッシュボードに使うならということで色について書きましたが、そもそもの色とデザインの基本はこのサイトがわかりやすくまとまっています。
