色の組み合わせ方を身につけよう: 棒グラフや円グラフなど、データをビジュアル化した際に効果的な配色
Post on:2015年12月1日
sponsors
センスの良いカラーパレットを手に入れるのは簡単ですが、データを見せるための正しいカラーパレットを見つけることは非常に困難です。データの情報を正しく、効果的に伝える必要がある時に適したカラーパレットを紹介します。
Finding the Right Color Palettes for Data Visualizations
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
既存のカラーパレットの注意点
まずは、既存のカラーパレットを調査してみました。
ほとんどのカラーパレットは、複雑なグラフやデータをビジュアル化するためにはデザインされていないことに気がつきました。既存のカラーパレットが適さない理由は、3つです。
1. アクセシブルではない
カラーパレットの多くは、ビジュアル化のためにデザインされたものではありません。「Flat UI Colors」は多くの人が利用しているカラーパレットの一つで、確かにその見た目は美しく、魅力的に見えます。しかし、その名前が示すように、ユーザインターフェイスのためにデザインされています。色盲である人たちは、この「Flat UI Colors」を使ってデータをビジュアル化したものを理解するのが難しいでしょう。
2. 色の数が十分ではない
もう一つの問題が、十分な色数が用意されていないことです。データをビジュアル化する際に、さまざまな用途をカバーするためには8-12色、最低でも6色は必要です。多くのカラーパレットは十分な色数を提供していません。
美しいカラーパレットはありますが、複雑なデータを提供するのに十分な適用性がありません。
3. 区別するのが難しい
カラーパレットの中には、グラデーションを使ったものもあります。確かに多くの色数を使えますが、色の変化が十分ではないため、それぞれを区別するのが困難です。
色の変化が十分でない例は、下記を見てください。
もし平均的なユーザーが見た目で正確に色を識別することができ、例えば上記の左4つのグリーンを正確に判断できたら、私は非常に驚きます。
データに最適なカラーの3つのポイント
データのビジュアル化に適したカラーパレットを見つけるために多くの時間を投資し、そのプロセスの間に多くを学びました。そのポイントは3つです。
1. 明度と色相の両方が広範囲であること
カラーパレットがアクセシブルであるためには十分な明度が必要で、明度における相違がポイントです。明度に変化をつけたカラーパレットが、第一色盲、第二色盲、グレースケールのモードでどのように見えるか試してみましょう。
左から順に、Google Material Colorのフルカラー、第一色盲、グレースケール
それぞれで区別がつき、このパレットがアクセシブルであることが分かると思います。
しかし、明度だけが異なるパレットでは十分ではありません。多くの色を使用できれば、それだけユーザーはデータの違いを認識することが容易です。色盲ではないユーザーのために、色相の変化を利用できれば、それはもっと良いカラーパレットになります。
明度と色相の両方に広範囲の色を利用できると、より多くのデータをサポートすることができます。
2. 色の自然のパターンに従う
すべての色が平等ではありません、直感的に分かりやすい、そして分かりにくいものがあります。例えば、明るいイエローから暗いパープルは移行が自然ですが、明るいパープルから暗いイエローは非常に不自然に見えます。
分かりやすい色の移行は、自然界で見られるグラデーションに条件付けられます。夕暮れの暗いパープルの中に明るいイエローの移行が見られますが、暗いイエローの中に明るいパープルの移行は存在しません。
Photo: Kyle Pearce
色の移行は、自然界に存在するグラデーションを参考にするのがよいでしょう。
3. 複数のカラーを使うならグラデーションで
異なる色相を含むグラデーションのパレットはベストを提供します。あなたが2つ、あるいは10の色を必要とするかに関わらず、明度と色相に十分な相違があり、データを見せるための色はグラデーションから抽出することができます。
グラデーションからどうやって色を使えばよいのか？ その方法は簡単です。
Photoshopで水平にグラデーションを描き、等間隔にグリッドを設定します。あとはそのグリッドごとに色を抽出するだけです。
グラデーションのオーバーレイを微調整し、グリッドのブレイクポイントから色を抽出し、カラーパレットが機能するか確認します。
上下のグレースケールは、色の正確なコードを入手するためのものです。
分かりやすいデータのためのカラーパレット
さっそくカラーパレット見てみましょう、3通り用意しました。
3つともピュアホワイトから始まり、明度が最も異なるピュアブラックで終わります。
寒色系のカラーパレット（縦軸は、色の数）
暖色系のカラーパレット
ネオン系のカラーパレット
カラーパレットを実際のデータに適用
寒色系を適用
暖色系を適用
ネオン系を適用
最後に
さまざまなカラーパレットがあるように、この3つですべてのグラフやチャートのビジュアル化に適用できるわけではありません。ビジュアル化のカラーパレットのアプローチは、明度と色相の両方で異なる自然のグラデーションを作ることです。
このカラーパレットは1-12種類のデータを分かりやすく伝え、非常にアクセシブルです。
sponsors
