色に関する基礎知識

Webデザイン・UIデザインをこれから学びたい方、エンジニアの方、経営者の方向けの基礎知識をまとめました。

Transcript

1. これからWebデザイナーになる人のための ⾊に関する基礎知識 デザイン基礎講義 currently v 1.1
2. ⾊（表⾊）の表す２つの方法 混色系 と 顕色系 混⾊系は物理的な光に近い⾊の表現形式で、 RGB や CMY など が主に用いられる。混⾊系は数学的な扱いに適しているので PCによって計算機的簡単に作りだすことができる。 一方、顕⾊系は人間の知覚に近い⾊表現。コンピュータ上の 処理より洋服や部屋の内装を考えるなどのカラーコーディネ ートに向いている。
3. 混⾊系 色を物理的に捉え数値で再現したもの 加法混色（色材の三原色） 混ざるほど暗くなる混⾊。 印刷物の再現方法。例える と、沢⼭の絵の具を一度に 混ぜ合わせると⿊っぽく濁 るイメージ。 減法混色（光の三原色） 混ざるほど明るくなる混⾊。 モニターディスプレイの再 現方法。例えると、⽩いス クリーンに⾊つきのスポッ トライトを当てるようなイ メージ。
4. 三原⾊理論 ヤング・ヘルムホルツの三原色理論 イギリスの物理学者トマス・ヤングとドイツの⽣理学者ヘル ムホルツが”三原⾊理論”を発⾒した。⾊覚に⾚、緑、⻘（あ るいは紫）の3要素があり、これらが同じ割合で刺激されると ⽩⾊を感じる、互いに独⽴した3つの光を適切な割合で選択し、 組み合わせる（加⾊混合法）ことであらゆる⾊を再現できる ということを発表した。これを「三原⾊理論」と⾔う。 カラーフィルム、モニターディスプレイ、⾊盲表はこの説を 応用している。
5. 画面表示と印刷物の違い 印刷すると、なぜ色が違うのか？ 画面で表されている⾊情報は⾚（Ｒ）、緑（Ｇ）、⻘（Ｂ） の３要素。プリンタで印刷する場合は、シアン、マゼンタ、 ⻩（Ｙ）の３⾊（または⿊（Ｋ）を加えた４⾊）で⾊を構成 する。 よって、画面情報のＲＧＢ情報が印刷するときにＣＭＹＫ情 報に置き換えられるため、画面で⾒た⾊と印刷された⾊とが 違ってくる。さらにモニターディスプレイもプリンタも個体 差があるので、⾊の再現性をさらに困難にしている。このた めPCで扱う⾊を厳密に調整したいときには「ガンマ補正」と いう処理が必要になってくる。 MacがWindowsのPCより人気があるのは、ガンマ補正が Windowsよりも優れているから。
6. 顕⾊系 色を「色相」「彩度」「明度」で配列させたもの ・原理は⾊相 彩度 明度の「⾊の三属性」表わされる ・人間の知覚に近いかたちで⾊を模式化したもの ・マンセル表⾊系やPCCS表現系などの沢⼭の理論がある ・⾊の組み合わせをイメージしやすい
7. ⾊相 色の幅のこと
8. 彩度 色の鮮やかさのこと
9. 明度 色の明るさのこと
10. 有彩⾊と無彩⾊ 有彩⾊ 無彩⾊ 無彩⾊は、有彩⾊に引きずられる。 補⾊または、その系統に⾊に 染まって⾒える。
11. 暖⾊・寒⾊・中性⾊ 暖⾊ 寒⾊ 中性⾊ ※「紫」「緑」は授業ではそれぞれ「暖⾊」「寒⾊」として取り上げました。この考えか方は間違いではないのですが、 正確にはどちらでも「中性⾊」という部類に属するので、訂正しておきます。
12. 24色の色相環 24色の色相環 向かい合う色が同士が「補 色」関係 向かい合う 色が同士が 「補色」関係 補⾊ 最もきれいに引き⽴てあう色の組み合わせ
13. 24色の色相環 24色の色相環 隣同士、近い色は 「同系色」 隣同士、近い色は 「同系色」 同系⾊ 同じ系統の色・似た色
14. 「同系⾊」同士を 並べるとそれぞれ の⾊は目⽴たなく なる（識別しにく い） 「補⾊」同士を並 べるとそれぞれの ⾊が引き⽴て合う （識別しやすい） 「同系⾊」同士を 並べるとそれぞれ の⾊は目⽴たなく なる（識別しにく い） 「補⾊」同士を並 べるとそれぞれの ⾊が引き⽴て合う （識別しやすい） ⾊の組み合わせ 捕色の組み合わせ・同系色の組み合わせ
15. 目の錯覚で、⾊相がないはずの無彩⾊が、 わずかだが有彩⾊に染まって⾒える。 ⾊の組み合わせ 無彩色との組み合わせ