年輪で表す1790年から2016年の米国移民。各色は移民の出身地域を表している。

データビジュアライゼーションで効果的に色を使うには?

データビジュアライゼーションに関するシリーズのパート2では、色を効果的に使ってデータを明確化し、理解を促す方法を説明します。

Favorite Medium
FM Stories
Published in
7 min readJul 1, 2019

--

UXリサーチャー Chrisanthy Rebecca Surya

この記事は、2019年3月に発行された How to Use Color in Data Visualizationの日本語翻訳です。

「ビジュアライゼーションにはどんな色を使ったらいいのか?その理由は?」「ビジュアライゼーションが何を伝えたいのかを、ひと目見て理解してもらうには?」「見る人にビジュアライゼーションをどう受け止めてもらうか」など、優れたれたデータビジュアライゼーションの作成は、一筋縄ではいきません。

データビジュアライゼーションに関するシリーズのパート2では(データビジュアライゼーションのプロセスを説明したパート1は、こちらからご覧ください)、明確でわかりやすいビジュアライゼーションを作る過程で私たちが学んできた、デザインの実践的なヒントをご紹介します。

色を使ってデータに対する理解を促し、情報を強調する

「Above all do no harm」(まず、害を与えないこと)」 — エドワード・タフテ

色は基本的に控えめに、そして色がなぜデータの理解を高めるのに役立つかという明確な理由をもって使用します。タフテの言葉にあるように、色はその使用がデザインを守り、明確に正当化できるように、適切な考えに従って選択すべきです。

色を使用すべき理由:

1. ビジュアライゼーションを見た時に感じてほしい感情を引き起こし、ストーリーテリングを助ける

人間はデータそのものよりも、感情や気持ち、全体的なメッセージをはるかによく覚えているものです。落ち着いた色は静かな気持ちを引き起こし、鮮やかな色は陽気な気持ちを誘い出します。それに対して、暗い色はネガティブな雰囲気を伝えます。色の使用は無意味ではありません。それは感情的な副次的効果があり、データの理解を深め、データをどう解釈するかに影響します。ビジュアライゼーションを作る時には、見る人、見る状況、見る環境に焦点を合わせましょう。「このビジュアライゼーションからどんな気分を引き出したいのか?」「このビジュアライゼーションを見た時にどんな気持ちを抱いてほしいのか?」を自身に問いかけ、その気分を反映する色の組み合わせを作りましょう。

核兵器の数の増加を表す上のビジュアライゼーションでは、黒をメインカラーに使って重苦しい雰囲気を強調している。下の動物と植物のビジュアライゼーションは児童書向けなので、明るい色を使って楽しさを伝えている。

2. 図表の各要素を区別する

ビジュアライゼーションで各要素に異なる色を指定すると、パターンの把握や比較が簡単にできるようになります。色がないと、図表の理解に努力が必要です。

米国各州の労働者賃金

3. 多い・少ない、高い・低いなどの値の違いを表示する

IBMはこの例で色を使用して違いを効果的に表し、配色の違いが隣接する地域間の違いを際立たせています。

4. 実物、文化的慣習、一般的な象徴を表す

実際の物体を思い起こさせる色、文化的慣習や一般的な象徴とマッチする色を使うことで、見る人の理解を促し、データをすぐに解釈してもらえるようになります。マッチする色を使用すると、見る人の経験とつながり、意識的に考えなくてもすぐに想起させることが可能です。また、一般的な概念と色をマッチさせることで、凡例を何度も確認する必要がなくなり、データそのものに集中できるようになります。

果物の色を使用している右のグラフでは、理解する速度が10%速い。 写真出典:Sharon Lin & Jeffrey Heer | Harvard Business Review

5. 重要な情報を強調する

鮮やかで強い色を使う部分を限定すると、重要な情報が強調されます。このような色は、ぼやけた色調の背景の上や間に、控えめに使用します。鮮やかで強い色を全体に使うと、効果に秩序がなくなって混乱を招きます。

IBMはこの例で重要なポイントを強調して伝えている

色を選ぶ

さて、色を使うべき理由を説明してきましたが、それでは使う色をどう選べばよいのでしょうか?ここからは色の選び方をご紹介します。

1. 彩度のあまり高くない色、特に自然界にある色を使う

ライトブルー、黄、グレーなど、自然界にある色はデータビジュアライゼーションに特に適しています。このような色は私たちの周りによくあるので、ビジュアライゼーションに使うと親近感や安心感を呼びます。

自然界から発想を受けた色をビジュアライゼーションに使用

2. 広い範囲の背景には落ち着いた色を使い、ベースカラーを抑えて見た目のゴチャゴチャを避ける

背景に落ち着いた色を使うと、前景の要素が強調されます。このような理由から、グレーは最も汎用度の高い色であり、多くのビジュアライゼーションの背景に最適かもしれません。

背景の色と枠を控えめにし、画像の重要な部分を色で強調するとビジュアライゼーションがわかりやすくなる。 画像出典:Envisioning Information, Edward Tufte, 1990.

3. 誰にでも伝わる色

視覚障害者や色盲の人など、誰にでもはっきりとわかりやすい色を使うことも重要です。色の選択をチェックできるオンラインツールも、以下をはじめとして多数あります。

美しい色の組み合わせは、デビッド・ニコラス氏もいくつかまとめており岡部正隆氏と伊藤啓氏が開発した配色は色覚障害を持つ人にも見分けやすいものです。

まとめ

私たちは長い時間をかけて、ビジュアライゼーションの作成ではユーザーがメッセージをすぐに、そして簡単に理解できるようにすることが最も重要だと学びました。色はインタラクション、情報ヒエラルキー、形式などと並んで、その目的を満たすのに役立つ1つのツールです。

色の選択が悪いと、間違ったメッセージが伝わり、ユーザーの関心がデータに向けられません。適切な色を選択すれば、データの理解を促し、ストーリーテリングが強化されて、伝えたい雰囲気と同調する波長の感情を作り出します。次にビジュアライゼーションを作る時は、こう問いかけてみてください。「なぜこの色を選ぶのか?」

「デザインに必要不可欠なのは、内容の理解にどれだけ役立つかであり、デザイン自体がどれだけ洗練されているかではない。」 — エドワード・タフテ

--

--

Favorite Medium
FM Stories

Favorite Medium builds digital products with tangible purpose for companies around the world.