Upgrade to Pro — share decks privately, control downloads, hide ads and more …

色に関する基礎知識

F1e359b5fb3358d9051bcfaf43a4e3af?s=47 Designsprint
December 15, 2016

 色に関する基礎知識

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

F1e359b5fb3358d9051bcfaf43a4e3af?s=128

Designsprint

December 15, 2016
Tweet

Transcript

  1. これからWebデザイナーになる人のための ⾊に関する基礎知識 デザイン基礎講義 currently v 1.1

  2. ⾊(表⾊)の表す2つの方法 混色系 と 顕色系 混⾊系は物理的な光に近い⾊の表現形式で、 RGB や CMY など が主に用いられる。混⾊系は数学的な扱いに適しているので

    PCによって計算機的簡単に作りだすことができる。 一方、顕⾊系は人間の知覚に近い⾊表現。コンピュータ上の 処理より洋服や部屋の内装を考えるなどのカラーコーディネ ートに向いている。
  3. 混⾊系 色を物理的に捉え数値で再現したもの 加法混色(色材の三原色) 混ざるほど暗くなる混⾊。 印刷物の再現方法。例える と、沢⼭の絵の具を一度に 混ぜ合わせると⿊っぽく濁 るイメージ。 減法混色(光の三原色) 混ざるほど明るくなる混⾊。

    モニターディスプレイの再 現方法。例えると、⽩いス クリーンに⾊つきのスポッ トライトを当てるようなイ メージ。
  4. 三原⾊理論 ヤング・ヘルムホルツの三原色理論 イギリスの物理学者トマス・ヤングとドイツの⽣理学者ヘル ムホルツが”三原⾊理論”を発⾒した。⾊覚に⾚、緑、⻘(あ るいは紫)の3要素があり、これらが同じ割合で刺激されると ⽩⾊を感じる、互いに独⽴した3つの光を適切な割合で選択し、 組み合わせる(加⾊混合法)ことであらゆる⾊を再現できる ということを発表した。これを「三原⾊理論」と⾔う。 カラーフィルム、モニターディスプレイ、⾊盲表はこの説を 応用している。

  5. 画面表示と印刷物の違い 印刷すると、なぜ色が違うのか? 画面で表されている⾊情報は⾚(R)、緑(G)、⻘(B) の3要素。プリンタで印刷する場合は、シアン、マゼンタ、 ⻩(Y)の3⾊(または⿊(K)を加えた4⾊)で⾊を構成 する。 よって、画面情報のRGB情報が印刷するときにCMYK情 報に置き換えられるため、画面で⾒た⾊と印刷された⾊とが 違ってくる。さらにモニターディスプレイもプリンタも個体 差があるので、⾊の再現性をさらに困難にしている。このた

    めPCで扱う⾊を厳密に調整したいときには「ガンマ補正」と いう処理が必要になってくる。 MacがWindowsのPCより人気があるのは、ガンマ補正が Windowsよりも優れているから。
  6. 顕⾊系 色を「色相」「彩度」「明度」で配列させたもの ・原理は⾊相 彩度 明度の「⾊の三属性」表わされる ・人間の知覚に近いかたちで⾊を模式化したもの ・マンセル表⾊系やPCCS表現系などの沢⼭の理論がある ・⾊の組み合わせをイメージしやすい

  7. ⾊相 色の幅のこと

  8. 彩度 色の鮮やかさのこと

  9. 明度 色の明るさのこと

  10. 有彩⾊と無彩⾊ 有彩⾊ 無彩⾊ 無彩⾊は、有彩⾊に引きずられる。 補⾊または、その系統に⾊に 染まって⾒える。

  11. 暖⾊・寒⾊・中性⾊ 暖⾊ 寒⾊ 中性⾊ ※「紫」「緑」は授業ではそれぞれ「暖⾊」「寒⾊」として取り上げました。この考えか方は間違いではないのですが、 正確にはどちらでも「中性⾊」という部類に属するので、訂正しておきます。

  12. 24色の色相環 24色の色相環 向かい合う色が同士が「補 色」関係 向かい合う 色が同士が 「補色」関係 補⾊ 最もきれいに引き⽴てあう色の組み合わせ

  13. 24色の色相環 24色の色相環 隣同士、近い色は 「同系色」 隣同士、近い色は 「同系色」 同系⾊ 同じ系統の色・似た色

  14. 「同系⾊」同士を 並べるとそれぞれ の⾊は目⽴たなく なる(識別しにく い) 「補⾊」同士を並 べるとそれぞれの ⾊が引き⽴て合う (識別しやすい) 「同系⾊」同士を

    並べるとそれぞれ の⾊は目⽴たなく なる(識別しにく い) 「補⾊」同士を並 べるとそれぞれの ⾊が引き⽴て合う (識別しやすい) ⾊の組み合わせ 捕色の組み合わせ・同系色の組み合わせ
  15. 目の錯覚で、⾊相がないはずの無彩⾊が、 わずかだが有彩⾊に染まって⾒える。 ⾊の組み合わせ 無彩色との組み合わせ