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
330
イラストの色選びはナチュラルハーモニーを意識しようって話
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
400
ゆるデザトークのロゴを作った話
kskwtnk
1
130
実装まで視野に入れるならAtomic Designを辞めましょう
kskwtnk
1
280
良いUXを実現するために、まずはチーム内にデザインを浸透させている話
kskwtnk
3
230
Figma APIを使って活動履歴をグラフ化した話
kskwtnk
0
710
アプリケーションのインターフェースはOOUIにしようって話
kskwtnk
0
93
FigmaのAuto Layoutを活かしてUI Kitを作った話
kskwtnk
0
140
経営理念達成のためのデザイン
kskwtnk
0
45
私のおすすめのデザインガイドライン構築法
kskwtnk
0
54
Other Decks in Design
See All in Design
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
150
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
720
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
140
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
790
太田博三(@usagisan2020)
otanet
0
230
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
580
aya_murakami_portfolio
ayakaimi1101
0
1.2k
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1k
Dive Deep into Communication
yomtsu
0
220
250131_product meetup
motokoishida
0
120
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
510
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
260
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
4 Signs Your Business is Dying
shpigford
182
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
It's Worth the Effort
3n
184
28k
How STYLIGHT went responsive
nonsquared
98
5.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Transcript
イラストの色選びは ナチュラルハーモニーを 意識しようって話 なごデLT会 vol.3
PCがMacで昼ごはんがマックで ファンデがMACです。 Incrementsのデザイナーです。 主にQiita Jobsの開発をしています。 綿貫 佳祐 @xrxoxcxox
自前でイラストを用意する機会 ありますよね?
自前でイラストを用意する機会、ありますよね? フラットなイラスト ちゃんと描いてる(?)イラスト
自前でイラストを用意する機会、ありますよね? - 自分は色選びを感覚でやると大抵破綻する - ので、理屈で覚えた - 割と汎用的に使える - それがナチュラルハーモニー
そもそも ナチュラル ハーモニー って何?
そもそもナチュラルハーモニーって何? - りんごがあるとして - 光が当たってる場所は黄色っぽい - 光が当たってない場所は紫っぽい - 葉っぱがあるとして -
光が当たってる場所は黄緑っぽい - 光が当たってない場所は青緑っぽい - 光側は黄色く、陰側は青い配色
そもそもナチュラルハーモニーって何?
そもそもナチュラルハーモニーって何? 明るい 暗い
具体的に どう選ぶの?
具体的にどう選ぶの? - 箱に色をつけていきます - ピンクい箱だとしましょう
具体的にどう選ぶの? - ベースの色を選びます
具体的にどう選ぶの? - 光側の面 - 色相を黄色に振る - 明度を上げる - 彩度を少し下げる
具体的にどう選ぶの? - 陰側の面 - 色相を青(紫)に振る - 明度を下げる - 彩度を下げる
明度だけの変化でも 良くない?
明度だけの変化でも良くない? ナチュラルハーモニーに沿ったもの 明度だけ変化させたもの
明度だけの変化でも良くない? - それぞれの面の明度の数値は同じ - 違いは色相と彩度 - 明度だけの変化だと - 光の面は若干濁った色になる -
陰の面は鮮やか過ぎる
まとめ
まとめ - 単に明度を変えるだけでなく - 光側は黄色に - 陰側は青(紫)に - そして彩度も調整する -
ナチュラルハーモニーは自然光っぽく見える - ということで、だいたいいつでも使える