Tweet
Tweet

Slide 1

Slide 1 text

イラストの色選びは ナチュラルハーモニーを 意識しようって話 なごデLT会 vol.3

Slide 2

Slide 2 text

PCがMacで昼ごはんがマックで ファンデがMACです。 Incrementsのデザイナーです。 主にQiita Jobsの開発をしています。 綿貫 佳祐 @xrxoxcxox

Slide 3

Slide 3 text

自前でイラストを用意する機会 ありますよね？

Slide 4

Slide 4 text

自前でイラストを用意する機会、ありますよね？ フラットなイラスト ちゃんと描いてる（？）イラスト

Slide 5

Slide 5 text

自前でイラストを用意する機会、ありますよね？ - 自分は色選びを感覚でやると大抵破綻する - ので、理屈で覚えた - 割と汎用的に使える - それがナチュラルハーモニー

Slide 6

Slide 6 text

そもそも ナチュラル ハーモニー って何？

Slide 7

Slide 7 text

そもそもナチュラルハーモニーって何？ - りんごがあるとして - 光が当たってる場所は黄色っぽい - 光が当たってない場所は紫っぽい - 葉っぱがあるとして - 光が当たってる場所は黄緑っぽい - 光が当たってない場所は青緑っぽい - 光側は黄色く、陰側は青い配色

Slide 8

Slide 8 text

そもそもナチュラルハーモニーって何？

Slide 9

Slide 9 text

そもそもナチュラルハーモニーって何？ 明るい 暗い

Slide 10

Slide 10 text

具体的に どう選ぶの？

Slide 11

Slide 11 text

具体的にどう選ぶの？ - 箱に色をつけていきます - ピンクい箱だとしましょう

Slide 12

Slide 12 text

具体的にどう選ぶの？ - ベースの色を選びます

Slide 13

Slide 13 text

具体的にどう選ぶの？ - 光側の面 - 色相を黄色に振る - 明度を上げる - 彩度を少し下げる

Slide 14

Slide 14 text

具体的にどう選ぶの？ - 陰側の面 - 色相を青（紫）に振る - 明度を下げる - 彩度を下げる

Slide 15

Slide 15 text

明度だけの変化でも 良くない？

Slide 16

Slide 16 text

明度だけの変化でも良くない？ ナチュラルハーモニーに沿ったもの 明度だけ変化させたもの

Slide 17

Slide 17 text

明度だけの変化でも良くない？ - それぞれの面の明度の数値は同じ - 違いは色相と彩度 - 明度だけの変化だと - 光の面は若干濁った色になる - 陰の面は鮮やか過ぎる

Slide 18

Slide 18 text

まとめ

Slide 19

Slide 19 text

まとめ - 単に明度を変えるだけでなく - 光側は黄色に - 陰側は青（紫）に - そして彩度も調整する - ナチュラルハーモニーは自然光っぽく見える - ということで、だいたいいつでも使える