webサイトやスマホアプリなどの色の決め方について。 60-30-10Ruleの話。 Kulerで色の基本について説明。 こんなふうにアクセントの色が決められるよね、っていうスライドです。 ----- 以前に社内LTで行ったスライドの改変です。

1. とある色の決め方
yumi ishizaki

2. 60-30-10 Rule
• インテリアとかファッション業界でよく使われてるルール
• 「色の割合」と「色の数」がポイント

3. スーツ
左の人の
スーツ＋ワイシャツ＋ネクタイ
http://www.flickr.com/photos/matthew/1093613150/

4. 例：インテリア
http://www.flickr.com/photos/
http://www.flickr.com/photos/reiner/331728294/
57275427@N05/6616615901/
↑
4色以上使いたい場合はちょっとだけの割合を使う

5. webサイト・スマホアプリでも使えるかも!?
一画面を60-30-10 Ruleで
デザイン！

6. じゃあナニ色にしたらいいの？
Kuler 使うと便利です！
http://kuler.adobe.com/ Photoshopの
エクステンション
トップ→create

7. 例えばこんなサイトのアクセント色
入会ボタン
何色に
しよう！？
• ロゴの色は決まってる
• あとはグレー系で作って欲し
いっぽい依頼があったり

8. Kuler でボタンの色を探してみよう
まずは基本色
ロゴの色を基本色（Base Color）と
Photoshopの
して探してみよう エクステンション

9. Kuler を使って色の基本を勉強
「色相」について
ぐるぐるレインボ∼∼∼
色相の輪
• 色相
• ぐるぐるレインボーーーー

10. Kuler を使って色の基本を勉強
「彩度」について
鮮やか
まぶしい
落ち着いてる
シブい
より白黒に近い
色味がなくなる
彩度
• 彩度
• 円の中心に行けば行くほど、色味が薄くなり（例えば
「赤」なら「赤っぽさ」が無くなり）、白黒に近くな
る。
• 円の外側の方が色鮮やかで、まぶしい色。

11. Kuler を使って色の基本を勉強
「明度」について
明るい
暗い
黒っぽい
明度
• 明度
• 上の方は明るい。
• 下の方は暗い。黒っぽい。

12. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
近い色相を 同じ色相で いわゆる三角形の
選んでみる 明度・色彩を変更

13. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
近い色相を 同じ色相で いわゆる三角形の
選んでみる 明度・色彩を変更

14. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
近い色相を 同じ色相で いわゆる三角形の
選んでみる 明度・色彩を変更

15. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
近い色相を 同じ色相で いわゆる三角形の
選んでみる 明度・色彩を変更

16. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
近い色相を 同じ色相で いわゆる三角形の
選んでみる 明度・色彩を変更

17. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
近い色相を 同じ色相で いわゆる三角形の
選んでみる 明度・色彩を変更

18. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
近い色相を 同じ色相で いわゆる三角形の
選んでみる 明度・色彩を変更

19. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
近い色相を 同じ色相で いわゆる三角形の
選んでみる 明度・色彩を変更

20. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
近い色相を 同じ色相で いわゆる三角形の
選んでみる 明度・色彩を変更

21. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
近い色相を 同じ色相で いわゆる三角形の
選んでみる 明度・色彩を変更

22. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
いわゆる反対の 合わせ技！？ 明度を変更

23. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
いわゆる反対の 合わせ技！？ 明度を変更

24. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
いわゆる反対の 合わせ技！？ 明度を変更

25. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
いわゆる反対の 合わせ技！？ 明度を変更

26. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
いわゆる反対の 合わせ技！？ 明度を変更

27. Kuler でボタンの色を探してみよう
配色ルール（Select a Rule）を試す
いわゆる反対の 合わせ技！？ 明度を変更

28. Kuler でボタンの色を探してみよう
Ruleは使わず自由にやってみる時のコツ
• 「近い色相」「近い彩度」「近い明度」から選ぶと、変な配色にはなりにくい！
• または「色相だけ変更」「彩度だけ変更」「明度だけ変更」と、変更する所を限定する
彩度だけ変更して選ぶ
明度だけ変更して選ぶ
色相だけ変更して選ぶ

29. Kuler で拾った色で試しにボタン作ってみる
メリハリ鮮やか系 メリハリ同系色系 ナチュラルテイスト ナチュラルぴり辛
派手な感じ できるだけ青 しぶめ エコっぽい

30. まとめ
• 一画面 60-30-10 Rule は使える
• 2色が決まっていれば、残り1色決めるのはKulerで行えば簡
単ですね
• 同系色でまとめたい時は、色相ドミナント
（Monochromatic）、濃淡（Shades）から色を取る
• メリハリが欲しい時は、トライアド（Triad）、 補色配色
（Complementary）、組み合わせ（Compound）から色
をとるといいかも