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
Keisuke Watanuki
June 07, 2020
Design
1
340
イラストの色選びはナチュラルハーモニーを意識しようって話
2020年6月7日に開催された「なごやデザイナーLT会 Vol.3.5」で発表した資料のうちの1つです。
Keisuke Watanuki
June 07, 2020
Tweet
Share
More Decks by Keisuke Watanuki
See All by Keisuke Watanuki
CSS in JSで変わること変わらないこと
kskwtnk
3
410
ゆるデザトークのロゴを作った話
kskwtnk
1
140
実装まで視野に入れるならAtomic Designを辞めましょう
kskwtnk
1
280
良いUXを実現するために、まずはチーム内にデザインを浸透させている話
kskwtnk
3
240
Figma APIを使って活動履歴をグラフ化した話
kskwtnk
0
720
アプリケーションのインターフェースはOOUIにしようって話
kskwtnk
0
98
FigmaのAuto Layoutを活かしてUI Kitを作った話
kskwtnk
0
150
経営理念達成のためのデザイン
kskwtnk
0
51
私のおすすめのデザインガイドライン構築法
kskwtnk
0
60
Other Decks in Design
See All in Design
UXデザインはなぜ定着しないのか?
designstudiopartners
0
900
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
220
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
110
デザイナー向けフライル説明資料
toshiblues
0
110
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
640
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
500
What makes a great Director?
_limex_
0
120
Memory Man v3 (WIP)
storybychad
PRO
0
2.5k
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
100
CMS管理画面のアクセシビリティ
magi1125
8
2.4k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.2k
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
600
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
338
57k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
It's Worth the Effort
3n
187
28k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Embracing the Ebb and Flow
colly
86
4.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Transcript
イラストの色選びは ナチュラルハーモニーを 意識しようって話 なごデLT会 vol.3
PCがMacで昼ごはんがマックで ファンデがMACです。 Incrementsのデザイナーです。 主にQiita Jobsの開発をしています。 綿貫 佳祐 @xrxoxcxox
自前でイラストを用意する機会 ありますよね?
自前でイラストを用意する機会、ありますよね? フラットなイラスト ちゃんと描いてる(?)イラスト
自前でイラストを用意する機会、ありますよね? - 自分は色選びを感覚でやると大抵破綻する - ので、理屈で覚えた - 割と汎用的に使える - それがナチュラルハーモニー
そもそも ナチュラル ハーモニー って何?
そもそもナチュラルハーモニーって何? - りんごがあるとして - 光が当たってる場所は黄色っぽい - 光が当たってない場所は紫っぽい - 葉っぱがあるとして -
光が当たってる場所は黄緑っぽい - 光が当たってない場所は青緑っぽい - 光側は黄色く、陰側は青い配色
そもそもナチュラルハーモニーって何?
そもそもナチュラルハーモニーって何? 明るい 暗い
具体的に どう選ぶの?
具体的にどう選ぶの? - 箱に色をつけていきます - ピンクい箱だとしましょう
具体的にどう選ぶの? - ベースの色を選びます
具体的にどう選ぶの? - 光側の面 - 色相を黄色に振る - 明度を上げる - 彩度を少し下げる
具体的にどう選ぶの? - 陰側の面 - 色相を青(紫)に振る - 明度を下げる - 彩度を下げる
明度だけの変化でも 良くない?
明度だけの変化でも良くない? ナチュラルハーモニーに沿ったもの 明度だけ変化させたもの
明度だけの変化でも良くない? - それぞれの面の明度の数値は同じ - 違いは色相と彩度 - 明度だけの変化だと - 光の面は若干濁った色になる -
陰の面は鮮やか過ぎる
まとめ
まとめ - 単に明度を変えるだけでなく - 光側は黄色に - 陰側は青(紫)に - そして彩度も調整する -
ナチュラルハーモニーは自然光っぽく見える - ということで、だいたいいつでも使える