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
310
イラストの色選びはナチュラルハーモニーを意識しようって話
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で変わること変わらないこと
xrxoxcxox
3
400
ゆるデザトークのロゴを作った話
xrxoxcxox
1
120
実装まで視野に入れるならAtomic Designを辞めましょう
xrxoxcxox
1
280
良いUXを実現するために、まずはチーム内にデザインを浸透させている話
xrxoxcxox
3
220
Figma APIを使って活動履歴をグラフ化した話
xrxoxcxox
0
690
アプリケーションのインターフェースはOOUIにしようって話
xrxoxcxox
0
90
FigmaのAuto Layoutを活かしてUI Kitを作った話
xrxoxcxox
0
140
経営理念達成のためのデザイン
xrxoxcxox
0
40
私のおすすめのデザインガイドライン構築法
xrxoxcxox
0
51
Other Decks in Design
See All in Design
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
300
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
410
Fleet Gas Station
joshtang
0
140
(第1回) アーキテクト・テックリード育成講座
masakaya
0
100
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
700
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
350
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
830
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
200
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
420
Dreamia
elsh
0
170
Design System for training program
mct
0
280
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
20
1.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Being A Developer After 40
akosma
86
590k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
880
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Why Our Code Smells
bkeepers
PRO
334
57k
Six Lessons from altMBA
skipperchong
27
3.5k
4 Signs Your Business is Dying
shpigford
180
21k
Transcript
イラストの色選びは ナチュラルハーモニーを 意識しようって話 なごデLT会 vol.3
PCがMacで昼ごはんがマックで ファンデがMACです。 Incrementsのデザイナーです。 主にQiita Jobsの開発をしています。 綿貫 佳祐 @xrxoxcxox
自前でイラストを用意する機会 ありますよね?
自前でイラストを用意する機会、ありますよね? フラットなイラスト ちゃんと描いてる(?)イラスト
自前でイラストを用意する機会、ありますよね? - 自分は色選びを感覚でやると大抵破綻する - ので、理屈で覚えた - 割と汎用的に使える - それがナチュラルハーモニー
そもそも ナチュラル ハーモニー って何?
そもそもナチュラルハーモニーって何? - りんごがあるとして - 光が当たってる場所は黄色っぽい - 光が当たってない場所は紫っぽい - 葉っぱがあるとして -
光が当たってる場所は黄緑っぽい - 光が当たってない場所は青緑っぽい - 光側は黄色く、陰側は青い配色
そもそもナチュラルハーモニーって何?
そもそもナチュラルハーモニーって何? 明るい 暗い
具体的に どう選ぶの?
具体的にどう選ぶの? - 箱に色をつけていきます - ピンクい箱だとしましょう
具体的にどう選ぶの? - ベースの色を選びます
具体的にどう選ぶの? - 光側の面 - 色相を黄色に振る - 明度を上げる - 彩度を少し下げる
具体的にどう選ぶの? - 陰側の面 - 色相を青(紫)に振る - 明度を下げる - 彩度を下げる
明度だけの変化でも 良くない?
明度だけの変化でも良くない? ナチュラルハーモニーに沿ったもの 明度だけ変化させたもの
明度だけの変化でも良くない? - それぞれの面の明度の数値は同じ - 違いは色相と彩度 - 明度だけの変化だと - 光の面は若干濁った色になる -
陰の面は鮮やか過ぎる
まとめ
まとめ - 単に明度を変えるだけでなく - 光側は黄色に - 陰側は青(紫)に - そして彩度も調整する -
ナチュラルハーモニーは自然光っぽく見える - ということで、だいたいいつでも使える