アカツキ社内で行われているデザイン勉強会、配色編2の資料です

1. ソーシャルゲームデザイン
配色編 2 簡単色彩講座
はしもと ゆうすけ
Chief Product Designer at
Twitter: @yukke
FB : Yusuke Hashimoto
12年11月29日木曜日 1

2. Agenda 配色編 2
色の三属性
五役色、 三役色
便利な配色ツールの紹介
12年11月29日木曜日 2

3. 色の三属性 HSB
色相 Hue
彩度 Saturation
明度 Brightness
12年11月29日木曜日 3

4. 色相 Hue
色相環
色合い
色自体に様々な効果。
暖かさ、食欲、活気を生む暖色(オレンジ、赤、黄)
クールになる(青)
印象を大きく変えられる要素です
12年11月29日木曜日 4

5. 色相 Hue の上手な使い方例
補色
赤系のマゼンタと補色の緑を使い目立たせている
赤系の特徴である食欲を増進させる狙いがある
12年11月29日木曜日 5

6. 彩度 Saturation
鮮やかさ
くすみ
トーン
渋いトーン(和風のもの)、明るいトーン(POP)
12年11月29日木曜日 6

7. 彩度 Saturation
彩度が高いほうが活気があるイメージ(上)
彩度が低いと落ち着きのあるイメージ (下)
12年11月29日木曜日 7

8. 明度 Brightness
軽快 白
明るさ
明るい色は軽快な印象
暗い色は重い印象 重い 黒
12年11月29日木曜日 8

9. 色にはこの3つの大事な要
素があることを忘れないで
12年11月29日木曜日 9

10. 五役色と 三役色
色の使い方のテンプレート
五役色、三役色を使うと色の組み合わせのルールが決
まり、まとまったデザインになります
12年11月29日木曜日 10

11. 五役色
主役色(メインの色)
脇役色(引き立て色、 補色が多い)
支配色(背景色)
融合色(なじませ色)
アクセント色(差し色 変化が少ないときに使うと良い)
12年11月29日木曜日 11

12. 三役色
ベースカラー(背景など、ほぼ支配色)
メインカラー(テーマ色、主役色 ペルソナ4でいう黄)
アクセントカラー(差し色)
12年11月29日木曜日 12

13. 三役色の目安
ベースカラー メインカラー アクセントカラー
70% 25% 5%
※ 参考 センスのいらない配色講座
http://www.slideshare.net/marippe/ss-9003317
12年11月29日木曜日 13

14. 便利なツール 1
PainterWheel
http://nerdchallenge.com/lenwhite/LenWhite.com/
LenWhite.com/LenWhite.com.html
補色、彩度などを直感
的に理解できるツール
12年11月29日木曜日 14

15. 便利なツール 2
Adobe Kuler
https://kuler.adobe.com/
他のユーザーが作った色相の
パターンを参考にできるツー
ル
12年11月29日木曜日 15