【Tableau Tips】背景色が白でない時にグラフの色をどう決める？
1.はじめに
TableauでVizを作る際、ワークシートやダッシュボードの背景色はデフォルトで白に設定されています。一方で、背景色を白以外のものに変更したくなる時もあるかと思います。
背景色を白以外に変更する際に考慮しなければならないのが、グラフの色使いです。例えば、白背景の時は目立っていた色が、別の色の背景になると目立たなくなってしまうことがあると思います。
なぜこのような現象が起こるのか、解決するにはどうすれば良いのか、一緒に見ていきましょう！
2.色に関する基礎知識
まずは色に関する基礎知識を押さえていきましょう。
2-1. 無彩色・有彩色について
全ての色は、「無彩色」と「有彩色」の２つに分けることができます。簡単に定義をまとめると、以下のようになります。
「無彩色」：色味を持たない。白、黒、グレー等の色。
「有彩色」：色味を持つ。赤、緑、黄、紫等の色。
2-2. 色相環について
色相環とは、有彩色の色の輪です。
色相環には、白・黒・グレーといった無彩色は登場しません。
2-3. 明度について
色を目立たせるために必要な知識として、"明度"も挙げられます。明度とは、色の明るさの度合いのことです。最も明るい白と、最も暗い黒とを両極としていて、左へ行けば行くほど明るくなり、右へ行けば行くほど暗くなります。
3.白以外の背景の時に目立つ色
色を目立たせたい時の基本的な考え方を２つご紹介します。
①色相環上で、「補色」の関係にある色を用いる
補色とは、色相環でほぼ反対の位置に存在している色同士の関係を指します。例えば、青と黄色、ピンクと緑などです。色相差が大きいため、ダイナミックな配色となり、色同士を目立たせることができます。
②明度に差のある色を用いる
高明度色が背景の場合は低明度色を、低明度色が背景の場合は高明度色を選択すると、メリハリの利いた配色にすることができます。
基本的な考えを抑えた上で、無彩色と有彩色の、それぞれが背景色だった場合に、目立つ色を考えましょう。
「無彩色」：色味を持たない。白、黒、グレー等の色。
「有彩色」：色味を持つ。赤、緑、黄、紫等の色。
3-1. 背景が無彩色の場合
①色相環の観点
無彩色は色味を持たないため、どのような有彩色と合わせても、色同士で喧嘩することがありません、白、黒、グレー等を背景色として使用する場合は、色相環を意識しなくてOKです。
②明度の観点
一方で、明度には気を付ける必要があります。
左の例のように、同程度の明度の色を組み合わせると、視認性が低くなってしまいます。色を目立たせたい場合は、右の例のように、背景色と明度の差が大きい色を使用しましょう。
3-2. 背景が有彩色の場合
有彩色を背景に用いる場合、グラフの色を目立たせる方法をいくつか紹介します。
①色相環の観点
色相環を眺めてみて、補色の関係になっている色を選択します。
例えば、水色が背景の場合は赤色を選んでみます。すると、赤がより目立つようになります。
②明度の観点
背景色と反対の「明度」を選択します。
高明度色が背景の場合は低明度色を、低明度色が背景の場合は高明度色を選択してみましょう。
4.楽チン！簡単に配色を決めるには？
今まで、色を目立たせるための様々なTipsをご紹介してきましたが、ここではあまり深く考えなくても素敵な配色に仕上げることのできる方法をご紹介します！
4-1. webサイトで確認
こちらのwebサイトでは、文字色と背景色の組み合わせサンプルを掲載しています。こちらのサイトを眺めるだけで、"背景色が青色の場合は黄色が目立つなんだなあ"等と直感的に目立つ/目立たないを判断できます。
http://html.seo-search.com/reference/color_sample.html
4-2. カラーパレットを使用する
「配色パターン 無料」等のワードで検索すると、簡単に素敵なカラーパレットを閲覧することができます。このような配色パレットから色を抽出すると、統一感のあるVizに仕上げることができます。
https://www.canva.com/ja_jp/learn/100-color-combinations/
4-3. ポスター等から色を抽出する
「poster 〇〇（例：sleep、nature等、Vizのテーマを入力）」等のワードで検索すると、簡単にデザイナーさんが作ったポスターを閲覧することができます。ポスターからはもちろんVizのレイアウトに関するインスピレーションを得ることができますが、それ以外にも、配色に関するアイディアを得ることができます。素敵な配色のポスターで使用されている色を自身のVizにも使ってみるのはいかがでしょうか。
