ダッシュボードをデザインしよう〜色編〜

2024年1月19日 08:13

マガジン：ダッシュボードをデザインしよう！
こちらの記事は概要編・配置編・コンテナ編に続く4作目です。

引き続き、自分で作成したこちらのVizをメインに見ていきます。

ダッシュボード作成の手順

今回は太字の2つに注目し、色について掘り下げていきます。

Preattentive Attributeでも重要な位置にいる「色」について考えていきましょう。

色に拘る個人的な理由は、余計な色でミスリードを起こす可能性を低くしたいからです。ダッシュボード上でも、細かいところまで気を配りたいと思っています。
何より色に拘ると見やすいですし、なんとなくお洒落な印象を与えることができます。

国や文化、育ってきた環境によってカラーイメージが変わることもありますが、基本はみなさん同じようなイメージを持っています。
カラーイメージを考慮することは重要です。

赤やオレンジなどの暖色には「暖かい・情熱的」などのイメージがあり、青やネイビーなどの寒色「涼しい・知的」などのイメージがあると思います。

例のダッシュボードでは、「雪」に関するダッシュボードのため寒色の青を使用しています。

「70：25：5の法則」を意識すると良いです。
ベースカラーを70%、メインカラーを25%、アクセントカラーを5%使用すると良いというものです。
こちらのサイトで画像の色解析を行ってみました。

ワークシートの色である白や文字色であるグレーを除いて、ベースカラー・メインカラー・アクセントカラーです。

背景に使っている薄い水色っぽい色がベースカラー、棒グラフや折れ線グラフで使われている緑っぽい色がメインカラー、中央の文字や雪の結晶に使われている水色がアクセントカラーだと思って作成しました。
（勉強中のため、解釈が違っていたらごめんなさい）

明度が明るいと軽くなり、明度が低いと重くなります。
明るい方はパステルカラーを想像してください。パステルカラーは彩度が低く、明度が高い色になっています。
低い方はグランドピアノのような重厚感があります。

例のダッシュボードでは、雪だるまなど楽しい雪遊びの印象を与えたかったので、背景色をパステルカラーっぽくしています。

私が過去に作成したダッシュボードで意識したことを見てみましょう。

Vizリンクはこちら

Vizリンクはこちら

ロゴのままの黄色を持ってきてしまったのですが、今見ると少し背景色が煩い気がしますね。不透明度を下げるとより見やすいと思います。

ぜひ、皆さんも色まで拘ってダッシュボードを作ってみてください。