とある色の決め方

190,852 views

Published on

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

Published in: Design
0 Comments
137 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
190,852
On SlideShare
0
From Embeds
0
Number of Embeds
161,582
Actions
Shares
0
Downloads
0
Comments
0
Likes
137
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • とある色の決め方

    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)から色 をとるといいかも

    ×