Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

とある色の決め方

201,154 views

Published on

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

Published in: Design
  • Be the first to comment

とある色の決め方

  1. 1. とある色の決め方 yumi ishizaki
  2. 2. 60-30-10 Rule• インテリアとかファッション業界でよく使われてるルール• 「色の割合」と「色の数」がポイント
  3. 3. スーツ 左の人の スーツ+ワイシャツ+ネクタイhttp://www.flickr.com/photos/matthew/1093613150/
  4. 4. 例:インテリア http://www.flickr.com/photos/http://www.flickr.com/photos/reiner/331728294/ 57275427@N05/6616615901/ ↑ 4色以上使いたい場合はちょっとだけの割合を使う
  5. 5. webサイト・スマホアプリでも使えるかも!?一画面を60-30-10 Ruleで デザイン!
  6. 6. じゃあナニ色にしたらいいの? Kuler 使うと便利です!http://kuler.adobe.com/ Photoshopの エクステンション トップ→create
  7. 7. 例えばこんなサイトのアクセント色 入会ボタン 何色に しよう!? • ロゴの色は決まってる • あとはグレー系で作って欲し いっぽい依頼があったり
  8. 8. Kuler でボタンの色を探してみよう まずは基本色ロゴの色を基本色(Base Color)と Photoshopの して探してみよう エクステンション
  9. 9. Kuler を使って色の基本を勉強 「色相」について ぐるぐるレインボ∼∼∼ 色相の輪 • 色相 • ぐるぐるレインボーーーー
  10. 10. Kuler を使って色の基本を勉強 「彩度」について 鮮やか まぶしい 落ち着いてる シブい より白黒に近い 色味がなくなる 彩度• 彩度 • 円の中心に行けば行くほど、色味が薄くなり(例えば 「赤」なら「赤っぽさ」が無くなり)、白黒に近くな る。 • 円の外側の方が色鮮やかで、まぶしい色。
  11. 11. Kuler を使って色の基本を勉強 「明度」について 明るい 暗い 黒っぽい 明度 • 明度 • 上の方は明るい。 • 下の方は暗い。黒っぽい。
  12. 12. Kuler でボタンの色を探してみよう配色ルール(Select a Rule)を試す近い色相を 同じ色相で いわゆる三角形の選んでみる 明度・色彩を変更
  13. 13. Kuler でボタンの色を探してみよう配色ルール(Select a Rule)を試す近い色相を 同じ色相で いわゆる三角形の選んでみる 明度・色彩を変更
  14. 14. Kuler でボタンの色を探してみよう配色ルール(Select a Rule)を試す近い色相を 同じ色相で いわゆる三角形の選んでみる 明度・色彩を変更
  15. 15. Kuler でボタンの色を探してみよう配色ルール(Select a Rule)を試す近い色相を 同じ色相で いわゆる三角形の選んでみる 明度・色彩を変更
  16. 16. Kuler でボタンの色を探してみよう配色ルール(Select a Rule)を試す近い色相を 同じ色相で いわゆる三角形の選んでみる 明度・色彩を変更
  17. 17. Kuler でボタンの色を探してみよう配色ルール(Select a Rule)を試す近い色相を 同じ色相で いわゆる三角形の選んでみる 明度・色彩を変更
  18. 18. Kuler でボタンの色を探してみよう配色ルール(Select a Rule)を試す近い色相を 同じ色相で いわゆる三角形の選んでみる 明度・色彩を変更
  19. 19. Kuler でボタンの色を探してみよう配色ルール(Select a Rule)を試す近い色相を 同じ色相で いわゆる三角形の選んでみる 明度・色彩を変更
  20. 20. Kuler でボタンの色を探してみよう配色ルール(Select a Rule)を試す近い色相を 同じ色相で いわゆる三角形の選んでみる 明度・色彩を変更
  21. 21. Kuler でボタンの色を探してみよう配色ルール(Select a Rule)を試す近い色相を 同じ色相で いわゆる三角形の選んでみる 明度・色彩を変更
  22. 22. Kuler でボタンの色を探してみよう 配色ルール(Select a Rule)を試すいわゆる反対の 合わせ技!? 明度を変更
  23. 23. Kuler でボタンの色を探してみよう 配色ルール(Select a Rule)を試すいわゆる反対の 合わせ技!? 明度を変更
  24. 24. Kuler でボタンの色を探してみよう 配色ルール(Select a Rule)を試すいわゆる反対の 合わせ技!? 明度を変更
  25. 25. Kuler でボタンの色を探してみよう 配色ルール(Select a Rule)を試すいわゆる反対の 合わせ技!? 明度を変更
  26. 26. Kuler でボタンの色を探してみよう 配色ルール(Select a Rule)を試すいわゆる反対の 合わせ技!? 明度を変更
  27. 27. Kuler でボタンの色を探してみよう 配色ルール(Select a Rule)を試すいわゆる反対の 合わせ技!? 明度を変更
  28. 28. Kuler でボタンの色を探してみようRuleは使わず自由にやってみる時のコツ• 「近い色相」「近い彩度」「近い明度」から選ぶと、変な配色にはなりにくい!• または「色相だけ変更」「彩度だけ変更」「明度だけ変更」と、変更する所を限定する 彩度だけ変更して選ぶ 明度だけ変更して選ぶ 色相だけ変更して選ぶ
  29. 29. Kuler で拾った色で試しにボタン作ってみるメリハリ鮮やか系 メリハリ同系色系 ナチュラルテイスト ナチュラルぴり辛 派手な感じ できるだけ青 しぶめ エコっぽい
  30. 30. まとめ• 一画面 60-30-10 Rule は使える• 2色が決まっていれば、残り1色決めるのはKulerで行えば簡 単ですね • 同系色でまとめたい時は、色相ドミナント (Monochromatic)、濃淡(Shades)から色を取る • メリハリが欲しい時は、トライアド(Triad)、 補色配色 (Complementary)、組み合わせ(Compound)から色 をとるといいかも

×