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
680
アプリケーションのインターフェースはOOUIにしようって話
xrxoxcxox
0
89
FigmaのAuto Layoutを活かしてUI Kitを作った話
xrxoxcxox
0
140
経営理念達成のためのデザイン
xrxoxcxox
0
39
私のおすすめのデザインガイドライン構築法
xrxoxcxox
0
51
Other Decks in Design
See All in Design
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
portfolio
amitnk
1
120
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
130
ZKK_001.pdf
nicholaspegu
0
830
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
320
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
330
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
330
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
13
5.8k
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
140
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
250
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
200
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
260
Featured
See All Featured
BBQ
matthewcrist
85
9.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Code Review Best Practice
trishagee
64
17k
Ruby is Unlike a Banana
tanoku
96
11k
Building Adaptive Systems
keathley
38
2.2k
Adopting Sorbet at Scale
ufuk
73
9k
How STYLIGHT went responsive
nonsquared
95
5.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How GitHub (no longer) Works
holman
311
140k
It's Worth the Effort
3n
183
27k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Transcript
イラストの色選びは ナチュラルハーモニーを 意識しようって話 なごデLT会 vol.3
PCがMacで昼ごはんがマックで ファンデがMACです。 Incrementsのデザイナーです。 主にQiita Jobsの開発をしています。 綿貫 佳祐 @xrxoxcxox
自前でイラストを用意する機会 ありますよね?
自前でイラストを用意する機会、ありますよね? フラットなイラスト ちゃんと描いてる(?)イラスト
自前でイラストを用意する機会、ありますよね? - 自分は色選びを感覚でやると大抵破綻する - ので、理屈で覚えた - 割と汎用的に使える - それがナチュラルハーモニー
そもそも ナチュラル ハーモニー って何?
そもそもナチュラルハーモニーって何? - りんごがあるとして - 光が当たってる場所は黄色っぽい - 光が当たってない場所は紫っぽい - 葉っぱがあるとして -
光が当たってる場所は黄緑っぽい - 光が当たってない場所は青緑っぽい - 光側は黄色く、陰側は青い配色
そもそもナチュラルハーモニーって何?
そもそもナチュラルハーモニーって何? 明るい 暗い
具体的に どう選ぶの?
具体的にどう選ぶの? - 箱に色をつけていきます - ピンクい箱だとしましょう
具体的にどう選ぶの? - ベースの色を選びます
具体的にどう選ぶの? - 光側の面 - 色相を黄色に振る - 明度を上げる - 彩度を少し下げる
具体的にどう選ぶの? - 陰側の面 - 色相を青(紫)に振る - 明度を下げる - 彩度を下げる
明度だけの変化でも 良くない?
明度だけの変化でも良くない? ナチュラルハーモニーに沿ったもの 明度だけ変化させたもの
明度だけの変化でも良くない? - それぞれの面の明度の数値は同じ - 違いは色相と彩度 - 明度だけの変化だと - 光の面は若干濁った色になる -
陰の面は鮮やか過ぎる
まとめ
まとめ - 単に明度を変えるだけでなく - 光側は黄色に - 陰側は青(紫)に - そして彩度も調整する -
ナチュラルハーモニーは自然光っぽく見える - ということで、だいたいいつでも使える