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
140
色に関する基礎知識
Webデザイン・UIデザインをこれから学びたい方、エンジニアの方、経営者の方向けの基礎知識をまとめました。
Designsprint
December 15, 2016
Tweet
Share
More Decks by Designsprint
See All by Designsprint
spj-01book2019_.pdf
designsprint
0
120
ExOスプリント
designsprint
0
220
designsprint デザインスプリントのすすめ
designsprint
0
100
DESIGN SPRINT lecture and Workshop Strategic IT Management in Yahoo! LODGE
designsprint
1
95
Exponential Transformation - ExO SPRINT
designsprint
3
350
ExO SPRINT 説明会
designsprint
0
67
デザインスプリント1日説明会+ワークショップ
designsprint
0
130
Designsprint-Massive-Transformative-Purpose01.pdf
designsprint
0
180
designsprint-Jobs-To-Be-Done01
designsprint
0
65
Other Decks in Design
See All in Design
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
290
ChatGPTを活用したUI勉強会のススメ
abokadotyann
24
15k
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
320
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
560
実案件でのFigmaデータの作り方
xxxkinu
2
210
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
610
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
310
リリース1ヶ月後で機能をなくした話
hinofu
1
690
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
今日から始めるDesignOpsのヒント
isaikaori
1
410
PRDがデザインプロセスを高速化した話
tooomo
0
240
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
YesSQL, Process and Tooling at Scale
rocio
161
13k
Into the Great Unknown - MozCon
thekraken
10
980
Building Your Own Lightsaber
phodgson
97
5.7k
Making Projects Easy
brettharned
106
5.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Fireside Chat
paigeccino
19
2.6k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
The Power of CSS Pseudo Elements
geoffreycrofte
58
5k
Debugging Ruby Performance
tmm1
69
11k
Unsuck your backbone
ammeep
662
57k
Git: the NoSQL Database
bkeepers
PRO
421
63k
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色の色相環 隣同士、近い色は 「同系色」 隣同士、近い色は 「同系色」 同系⾊ 同じ系統の色・似た色
「同系⾊」同士を 並べるとそれぞれ の⾊は目⽴たなく なる(識別しにく い) 「補⾊」同士を並 べるとそれぞれの ⾊が引き⽴て合う (識別しやすい) 「同系⾊」同士を
並べるとそれぞれ の⾊は目⽴たなく なる(識別しにく い) 「補⾊」同士を並 べるとそれぞれの ⾊が引き⽴て合う (識別しやすい) ⾊の組み合わせ 捕色の組み合わせ・同系色の組み合わせ
目の錯覚で、⾊相がないはずの無彩⾊が、 わずかだが有彩⾊に染まって⾒える。 ⾊の組み合わせ 無彩色との組み合わせ