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
290
イラストの色選びはナチュラルハーモニーを意識しようって話
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
390
ゆるデザトークのロゴを作った話
xrxoxcxox
1
120
実装まで視野に入れるならAtomic Designを辞めましょう
xrxoxcxox
1
270
良いUXを実現するために、まずはチーム内にデザインを浸透させている話
xrxoxcxox
3
220
Figma APIを使って活動履歴をグラフ化した話
xrxoxcxox
0
660
アプリケーションのインターフェースはOOUIにしようって話
xrxoxcxox
0
88
FigmaのAuto Layoutを活かしてUI Kitを作った話
xrxoxcxox
0
130
経営理念達成のためのデザイン
xrxoxcxox
0
36
私のおすすめのデザインガイドライン構築法
xrxoxcxox
0
51
Other Decks in Design
See All in Design
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
680
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
1
570
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
160
Dreamia
elsh
0
130
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
730
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
900
Breaking News on the Web
souvikdg
0
660
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
2.3k
202409_会社概要資料_Englishver.pdf
zakkerooni
0
170
デザイナー向け会社紹介資料(採用資料)
dreamarts
0
280
興味関心と組織とリサーチ #ResearchConf / 20240419
minamitary
1
180
ZOZO CDO Office Design
zozodevelopers
PRO
1
140
Featured
See All Featured
Visualization
eitanlees
142
15k
Optimizing for Happiness
mojombo
375
69k
How to Think Like a Performance Engineer
csswizardry
16
960
Typedesign – Prime Four
hannesfritz
39
2.3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
BBQ
matthewcrist
83
9.2k
A Modern Web Designer's Workflow
chriscoyier
691
190k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Facilitating Awesome Meetings
lara
49
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Transcript
イラストの色選びは ナチュラルハーモニーを 意識しようって話 なごデLT会 vol.3
PCがMacで昼ごはんがマックで ファンデがMACです。 Incrementsのデザイナーです。 主にQiita Jobsの開発をしています。 綿貫 佳祐 @xrxoxcxox
自前でイラストを用意する機会 ありますよね?
自前でイラストを用意する機会、ありますよね? フラットなイラスト ちゃんと描いてる(?)イラスト
自前でイラストを用意する機会、ありますよね? - 自分は色選びを感覚でやると大抵破綻する - ので、理屈で覚えた - 割と汎用的に使える - それがナチュラルハーモニー
そもそも ナチュラル ハーモニー って何?
そもそもナチュラルハーモニーって何? - りんごがあるとして - 光が当たってる場所は黄色っぽい - 光が当たってない場所は紫っぽい - 葉っぱがあるとして -
光が当たってる場所は黄緑っぽい - 光が当たってない場所は青緑っぽい - 光側は黄色く、陰側は青い配色
そもそもナチュラルハーモニーって何?
そもそもナチュラルハーモニーって何? 明るい 暗い
具体的に どう選ぶの?
具体的にどう選ぶの? - 箱に色をつけていきます - ピンクい箱だとしましょう
具体的にどう選ぶの? - ベースの色を選びます
具体的にどう選ぶの? - 光側の面 - 色相を黄色に振る - 明度を上げる - 彩度を少し下げる
具体的にどう選ぶの? - 陰側の面 - 色相を青(紫)に振る - 明度を下げる - 彩度を下げる
明度だけの変化でも 良くない?
明度だけの変化でも良くない? ナチュラルハーモニーに沿ったもの 明度だけ変化させたもの
明度だけの変化でも良くない? - それぞれの面の明度の数値は同じ - 違いは色相と彩度 - 明度だけの変化だと - 光の面は若干濁った色になる -
陰の面は鮮やか過ぎる
まとめ
まとめ - 単に明度を変えるだけでなく - 光側は黄色に - 陰側は青(紫)に - そして彩度も調整する -
ナチュラルハーモニーは自然光っぽく見える - ということで、だいたいいつでも使える