![見出し画像](https://assets.st-note.com/production/uploads/images/124409240/rectangle_large_type_2_77fdc5e5192fccf98fa173f52def651e.jpeg?width=1200)
データ可視化につかえる色彩理論
はじめに
ここでは、視覚デザインに大きな影響を与える色の構造や意味合いを学びます。色は便利な一方で、氾濫すると受け手に混乱をもたらします。これを意識的にコントロールすることで、より効率的・効果的にメッセージを伝えることができます。
データ可視化においては、グラフの色の選択は難しい問題です。本稿を通じて、なるべく迷いなく選択できるように工夫しましょう。
学習目標
色彩の構造・意味合いを理解して駆使できるようにする。各個人のデザインコードを決めて実際の資料に展開できるようにする。
三原色
あらゆる色は三原色の混合から出来上がる。そして色が展開される基体によって次の2つのパターンがある。
光の三原色(Red,Green,Bleu +White)
色の三原色(Magenta,Yellow,Cyan +Black)
ディスプレイ等は暗い画面に光を加えて色を作ることから前者で、加色混合と言う。印刷物などはもともと明るい白地に色を加えて暗くすることから後者で、減色混合と言う。
![](https://assets.st-note.com/img/1702425679047-0NVFRkjSdh.png)
色の3要素
色を言葉で表現する際には、3つの要素がある。
色相
![](https://assets.st-note.com/img/1702425798515-p5phSCl9ax.png)
彩度
![](https://assets.st-note.com/img/1702425818140-FP0Y0yQd3M.png)
明度
![](https://assets.st-note.com/img/1702425829301-1GWzJQpHGw.png)
色同士の関係<補色・類似色>
色は必ず対照となる色を持っている。色相環[図2]で向かい合っている色を補色[もしくは反対色]と呼ぶ。隣り合っている色を類似色と呼ぶ。
補色を同じ画面に配置すると色彩的なバランスが取れる。また、補色関係をデザインの基礎に使うと要素を最少化できる。シンプルな画面構成に有効である。
![](https://assets.st-note.com/img/1702425956921-r8ORnaPZcA.png)
色の意味づけ
色には進出色・後退色という見え方の区分がある。また、ネガティブ・ポジティブな意味がある。文化・個人によってバラツキあるが、1つの指標として覚えておく。
![](https://assets.st-note.com/img/1702426739226-i16ZhKLT83.png?width=1200)
色デザイン・コードの作成【実践演習】
デザイン・コードを決めると資料に統一感が生まれ、強調点をコントロール出来るようになる。もっとも主張したい点にフォーカスできるデザインとするには、バリエーションを極力抑えたデザイン・コードが有効である。
本講座で得た知識を使い、実践演習として各自で色デザイン・コードを作成する。
パワーポイントやGoogle Slide、Excelなどで下記の表2と同じ表を作成しましょう。
帯色は任意の色を選んでください。
モノトーン(白・黒・灰色)以外の色数は2色です。それ以上は使わないようにして下さい。これによりコントロールができるようになります。
それぞれトーン(彩度)を落として下さい。
強調1と2とは補色関係にして下さい。
強調1と2の色のそれぞれの意味を教えて下さい。
HexコードとRGBの各値を調べて記載して下さい。
![](https://assets.st-note.com/img/1702427974140-8fbhye7PAE.png?width=1200)
色デザインパターンの応用
優れた色デザインはプロダクトに活かされている。講師から参考にしているデザインをヒアリングする。