Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
色に関する基礎知識
Search
Designsprint
December 15, 2016
Design
0
160
色に関する基礎知識
Webデザイン・UIデザインをこれから学びたい方、エンジニアの方、経営者の方向けの基礎知識をまとめました。
Designsprint
December 15, 2016
Tweet
Share
More Decks by Designsprint
See All by Designsprint
spj-01book2019_.pdf
designsprint
0
140
ExOスプリント
designsprint
0
310
designsprint デザインスプリントのすすめ
designsprint
0
150
DESIGN SPRINT lecture and Workshop Strategic IT Management in Yahoo! LODGE
designsprint
1
120
Exponential Transformation - ExO SPRINT
designsprint
3
510
ExO SPRINT 説明会
designsprint
0
84
デザインスプリント1日説明会+ワークショップ
designsprint
0
170
Designsprint-Massive-Transformative-Purpose01.pdf
designsprint
0
260
designsprint-Jobs-To-Be-Done01
designsprint
0
120
Other Decks in Design
See All in Design
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
120
NAHO SHIMONO_Portfolio2025
nahohphp
0
850
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
マンガで分かるサービスデザインガイドライン
senryakuka
1
890
Starry | Storyboards | Scene 1-21
giofortuna_story
0
290
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
610
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
510
「デザイン」を信じるには
iflection
0
280
オープンデータを利用して色々なものを作った話
hjmkth
1
110
問いの変遷
iflection
0
150
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
A better future with KSS
kneath
239
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building Adaptive Systems
keathley
43
2.6k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Raft: Consensus for Rubyists
vanstee
140
7k
Fireside Chat
paigeccino
37
3.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Side Projects
sachag
455
42k
Speed Design
sergeychernyshev
32
1k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Transcript
これからWebデザイナーになる人のための ⾊に関する基礎知識 デザイン基礎講義 currently v 1.1
⾊(表⾊)の表す2つの方法 混色系 と 顕色系 混⾊系は物理的な光に近い⾊の表現形式で、 RGB や CMY など が主に用いられる。混⾊系は数学的な扱いに適しているので
PCによって計算機的簡単に作りだすことができる。 一方、顕⾊系は人間の知覚に近い⾊表現。コンピュータ上の 処理より洋服や部屋の内装を考えるなどのカラーコーディネ ートに向いている。
混⾊系 色を物理的に捉え数値で再現したもの 加法混色(色材の三原色) 混ざるほど暗くなる混⾊。 印刷物の再現方法。例える と、沢⼭の絵の具を一度に 混ぜ合わせると⿊っぽく濁 るイメージ。 減法混色(光の三原色) 混ざるほど明るくなる混⾊。
モニターディスプレイの再 現方法。例えると、⽩いス クリーンに⾊つきのスポッ トライトを当てるようなイ メージ。
三原⾊理論 ヤング・ヘルムホルツの三原色理論 イギリスの物理学者トマス・ヤングとドイツの⽣理学者ヘル ムホルツが”三原⾊理論”を発⾒した。⾊覚に⾚、緑、⻘(あ るいは紫)の3要素があり、これらが同じ割合で刺激されると ⽩⾊を感じる、互いに独⽴した3つの光を適切な割合で選択し、 組み合わせる(加⾊混合法)ことであらゆる⾊を再現できる ということを発表した。これを「三原⾊理論」と⾔う。 カラーフィルム、モニターディスプレイ、⾊盲表はこの説を 応用している。
画面表示と印刷物の違い 印刷すると、なぜ色が違うのか? 画面で表されている⾊情報は⾚(R)、緑(G)、⻘(B) の3要素。プリンタで印刷する場合は、シアン、マゼンタ、 ⻩(Y)の3⾊(または⿊(K)を加えた4⾊)で⾊を構成 する。 よって、画面情報のRGB情報が印刷するときにCMYK情 報に置き換えられるため、画面で⾒た⾊と印刷された⾊とが 違ってくる。さらにモニターディスプレイもプリンタも個体 差があるので、⾊の再現性をさらに困難にしている。このた
めPCで扱う⾊を厳密に調整したいときには「ガンマ補正」と いう処理が必要になってくる。 MacがWindowsのPCより人気があるのは、ガンマ補正が Windowsよりも優れているから。
顕⾊系 色を「色相」「彩度」「明度」で配列させたもの ・原理は⾊相 彩度 明度の「⾊の三属性」表わされる ・人間の知覚に近いかたちで⾊を模式化したもの ・マンセル表⾊系やPCCS表現系などの沢⼭の理論がある ・⾊の組み合わせをイメージしやすい
⾊相 色の幅のこと
彩度 色の鮮やかさのこと
明度 色の明るさのこと
有彩⾊と無彩⾊ 有彩⾊ 無彩⾊ 無彩⾊は、有彩⾊に引きずられる。 補⾊または、その系統に⾊に 染まって⾒える。
暖⾊・寒⾊・中性⾊ 暖⾊ 寒⾊ 中性⾊ ※「紫」「緑」は授業ではそれぞれ「暖⾊」「寒⾊」として取り上げました。この考えか方は間違いではないのですが、 正確にはどちらでも「中性⾊」という部類に属するので、訂正しておきます。
24色の色相環 24色の色相環 向かい合う色が同士が「補 色」関係 向かい合う 色が同士が 「補色」関係 補⾊ 最もきれいに引き⽴てあう色の組み合わせ
24色の色相環 24色の色相環 隣同士、近い色は 「同系色」 隣同士、近い色は 「同系色」 同系⾊ 同じ系統の色・似た色
「同系⾊」同士を 並べるとそれぞれ の⾊は目⽴たなく なる(識別しにく い) 「補⾊」同士を並 べるとそれぞれの ⾊が引き⽴て合う (識別しやすい) 「同系⾊」同士を
並べるとそれぞれ の⾊は目⽴たなく なる(識別しにく い) 「補⾊」同士を並 べるとそれぞれの ⾊が引き⽴て合う (識別しやすい) ⾊の組み合わせ 捕色の組み合わせ・同系色の組み合わせ
目の錯覚で、⾊相がないはずの無彩⾊が、 わずかだが有彩⾊に染まって⾒える。 ⾊の組み合わせ 無彩色との組み合わせ