イラストの色選びはナチュラルハーモニーを意識しようって話

2020年6月7日に開催された「なごやデザイナーLT会 Vol.3.5」で発表した資料のうちの1つです。

Transcript

1. イラストの色選びは ナチュラルハーモニーを 意識しようって話 なごデLT会 vol.3
2. PCがMacで昼ごはんがマックで ファンデがMACです。 Incrementsのデザイナーです。 主にQiita Jobsの開発をしています。 綿貫 佳祐 @xrxoxcxox
3. 自前でイラストを用意する機会 ありますよね？
4. 自前でイラストを用意する機会、ありますよね？ フラットなイラスト ちゃんと描いてる（？）イラスト
5. 自前でイラストを用意する機会、ありますよね？ - 自分は色選びを感覚でやると大抵破綻する - ので、理屈で覚えた - 割と汎用的に使える - それがナチュラルハーモニー
6. そもそも ナチュラル ハーモニー って何？
7. そもそもナチュラルハーモニーって何？ - りんごがあるとして - 光が当たってる場所は黄色っぽい - 光が当たってない場所は紫っぽい - 葉っぱがあるとして - 光が当たってる場所は黄緑っぽい - 光が当たってない場所は青緑っぽい - 光側は黄色く、陰側は青い配色
8. そもそもナチュラルハーモニーって何？
9. そもそもナチュラルハーモニーって何？ 明るい 暗い
10. 具体的に どう選ぶの？
11. 具体的にどう選ぶの？ - 箱に色をつけていきます - ピンクい箱だとしましょう
12. 具体的にどう選ぶの？ - ベースの色を選びます
13. 具体的にどう選ぶの？ - 光側の面 - 色相を黄色に振る - 明度を上げる - 彩度を少し下げる
14. 具体的にどう選ぶの？ - 陰側の面 - 色相を青（紫）に振る - 明度を下げる - 彩度を下げる
15. 明度だけの変化でも 良くない？
16. 明度だけの変化でも良くない？ ナチュラルハーモニーに沿ったもの 明度だけ変化させたもの
17. 明度だけの変化でも良くない？ - それぞれの面の明度の数値は同じ - 違いは色相と彩度 - 明度だけの変化だと - 光の面は若干濁った色になる - 陰の面は鮮やか過ぎる
18. まとめ
19. まとめ - 単に明度を変えるだけでなく - 光側は黄色に - 陰側は青（紫）に - そして彩度も調整する - ナチュラルハーモニーは自然光っぽく見える - ということで、だいたいいつでも使える