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

色に関する基礎知識

Designsprint
December 15, 2016

 色に関する基礎知識

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

Designsprint

December 15, 2016
Tweet

More Decks by Designsprint

Other Decks in Design

Transcript

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

    View full-size slide

  2. ⾊(表⾊)の表す2つの方法
    混色系 と 顕色系
    混⾊系は物理的な光に近い⾊の表現形式で、 RGB や CMY など
    が主に用いられる。混⾊系は数学的な扱いに適しているので
    PCによって計算機的簡単に作りだすことができる。
    一方、顕⾊系は人間の知覚に近い⾊表現。コンピュータ上の
    処理より洋服や部屋の内装を考えるなどのカラーコーディネ
    ートに向いている。

    View full-size slide

  3. 混⾊系
    色を物理的に捉え数値で再現したもの
    加法混色(色材の三原色)
    混ざるほど暗くなる混⾊。
    印刷物の再現方法。例える
    と、沢⼭の絵の具を一度に
    混ぜ合わせると⿊っぽく濁
    るイメージ。
    減法混色(光の三原色)
    混ざるほど明るくなる混⾊。
    モニターディスプレイの再
    現方法。例えると、⽩いス
    クリーンに⾊つきのスポッ
    トライトを当てるようなイ
    メージ。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 顕⾊系
    色を「色相」「彩度」「明度」で配列させたもの
    ・原理は⾊相 彩度 明度の「⾊の三属性」表わされる
    ・人間の知覚に近いかたちで⾊を模式化したもの
    ・マンセル表⾊系やPCCS表現系などの沢⼭の理論がある
    ・⾊の組み合わせをイメージしやすい

    View full-size slide

  7. ⾊相
    色の幅のこと

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 目の錯覚で、⾊相がないはずの無彩⾊が、
    わずかだが有彩⾊に染まって⾒える。
    ⾊の組み合わせ
    無彩色との組み合わせ

    View full-size slide