とある色の決め方

Yumi uniq Ishizaki
Yumi uniq IshizakiDesigner at Panda graphics
とある色の決め方
  yumi ishizaki
60-30-10 Rule
• インテリアとかファッション業界でよく使われてるルール

• 「色の割合」と「色の数」がポイント
スーツ

                                                  左の人の
                                                  スーツ+ワイシャツ+ネクタイ




http://www.flickr.com/photos/matthew/1093613150/
例:インテリア




                                                        http://www.flickr.com/photos/
http://www.flickr.com/photos/reiner/331728294/
                                                        57275427@N05/6616615901/




                                                           ↑
                                                4色以上使いたい場合はちょっとだけの割合を使う
webサイト・スマホアプリでも使えるかも!?




一画面を60-30-10 Ruleで
      デザイン!
じゃあナニ色にしたらいいの?
           Kuler 使うと便利です!




http://kuler.adobe.com/   Photoshopの
                          エクステンション
      トップ→create
例えばこんなサイトのアクセント色

          入会ボタン
           何色に
          しよう!?



        • ロゴの色は決まってる

        • あとはグレー系で作って欲し
         いっぽい依頼があったり
Kuler でボタンの色を探してみよう
              まずは基本色
ロゴの色を基本色(Base Color)と
                        Photoshopの
     して探してみよう           エクステンション
Kuler を使って色の基本を勉強
      「色相」について


                    ぐるぐるレインボ∼∼∼




                          色相の輪




  •   色相

      •    ぐるぐるレインボーーーー
Kuler を使って色の基本を勉強
         「彩度」について
          鮮やか
          まぶしい



         落ち着いてる
          シブい
        より白黒に近い
        色味がなくなる



                 彩度
•   彩度

    •    円の中心に行けば行くほど、色味が薄くなり(例えば
         「赤」なら「赤っぽさ」が無くなり)、白黒に近くな
         る。

    •    円の外側の方が色鮮やかで、まぶしい色。
Kuler を使って色の基本を勉強
      「明度」について

                          明るい




                           暗い
                          黒っぽい




                          明度

  •   明度

      •    上の方は明るい。

      •    下の方は暗い。黒っぽい。
Kuler でボタンの色を探してみよう
配色ルール(Select a Rule)を試す




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




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




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




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




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




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




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




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




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




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




いわゆる反対の   合わせ技!?     明度を変更
Kuler でボタンの色を探してみよう
 配色ルール(Select a Rule)を試す




いわゆる反対の   合わせ技!?     明度を変更
Kuler でボタンの色を探してみよう
 配色ルール(Select a Rule)を試す




いわゆる反対の   合わせ技!?     明度を変更
Kuler でボタンの色を探してみよう
 配色ルール(Select a Rule)を試す




いわゆる反対の   合わせ技!?     明度を変更
Kuler でボタンの色を探してみよう
 配色ルール(Select a Rule)を試す




いわゆる反対の   合わせ技!?     明度を変更
Kuler でボタンの色を探してみよう
 配色ルール(Select a Rule)を試す




いわゆる反対の   合わせ技!?     明度を変更
Kuler でボタンの色を探してみよう
Ruleは使わず自由にやってみる時のコツ
•   「近い色相」「近い彩度」「近い明度」から選ぶと、変な配色にはなりにくい!


•   または「色相だけ変更」「彩度だけ変更」「明度だけ変更」と、変更する所を限定する


      彩度だけ変更して選ぶ




                                明度だけ変更して選ぶ




        色相だけ変更して選ぶ
Kuler で拾った色で試しにボタン作ってみる




メリハリ鮮やか系   メリハリ同系色系   ナチュラルテイスト   ナチュラルぴり辛
 派手な感じ     できるだけ青       しぶめ        エコっぽい
まとめ
• 一画面 60-30-10 Rule は使える

• 2色が決まっていれば、残り1色決めるのはKulerで行えば簡
  単ですね

  • 同系色でまとめたい時は、色相ドミナント
    (Monochromatic)、濃淡(Shades)から色を取る

  • メリハリが欲しい時は、トライアド(Triad)、 補色配色
    (Complementary)、組み合わせ(Compound)から色
    をとるといいかも
1 of 30

Recommended

色彩学入門 by
色彩学入門色彩学入門
色彩学入門ueda247
17.5K views25 slides
色彩センスのいらない配色講座 by
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座Mariko Yamaguchi
3M views39 slides
理詰めスライド(色彩編) by
理詰めスライド(色彩編)理詰めスライド(色彩編)
理詰めスライド(色彩編)Awoi Ebinuma
85K views47 slides
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編) by
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)schoowebcampus
3.7K views66 slides
ノンデザイナーのための配色理論 by
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論tsukasa obara
1.6M views95 slides
Texture by
TextureTexture
Texture東京北医療センター
3.5K views6 slides

More Related Content

More from Yumi uniq Ishizaki

スクラムする前に知って欲しいアジャイルさんっぽいこと by
スクラムする前に知って欲しいアジャイルさんっぽいことスクラムする前に知って欲しいアジャイルさんっぽいこと
スクラムする前に知って欲しいアジャイルさんっぽいことYumi uniq Ishizaki
423 views33 slides
デザイナーにGitは必要? by
デザイナーにGitは必要?デザイナーにGitは必要?
デザイナーにGitは必要?Yumi uniq Ishizaki
1.8K views35 slides
connpass design at BPStudy #88 by
connpass design at BPStudy #88connpass design at BPStudy #88
connpass design at BPStudy #88Yumi uniq Ishizaki
1.8K views55 slides
Pythonと出会ったデザイナーの話 #PyLadiesTokyo by
Pythonと出会ったデザイナーの話 #PyLadiesTokyoPythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyoYumi uniq Ishizaki
10.2K views46 slides
Oocssとかついでにsmacssとbemの話も by
Oocssとかついでにsmacssとbemの話もOocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話もYumi uniq Ishizaki
2.3K views29 slides
絵描きさんあるあるPhotoshop技 DIST3 by
絵描きさんあるあるPhotoshop技 DIST3絵描きさんあるあるPhotoshop技 DIST3
絵描きさんあるあるPhotoshop技 DIST3Yumi uniq Ishizaki
2.6K views22 slides

More from Yumi uniq Ishizaki(10)

スクラムする前に知って欲しいアジャイルさんっぽいこと by Yumi uniq Ishizaki
スクラムする前に知って欲しいアジャイルさんっぽいことスクラムする前に知って欲しいアジャイルさんっぽいこと
スクラムする前に知って欲しいアジャイルさんっぽいこと
Yumi uniq Ishizaki423 views
Pythonと出会ったデザイナーの話 #PyLadiesTokyo by Yumi uniq Ishizaki
Pythonと出会ったデザイナーの話 #PyLadiesTokyoPythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Yumi uniq Ishizaki10.2K views
Oocssとかついでにsmacssとbemの話も by Yumi uniq Ishizaki
Oocssとかついでにsmacssとbemの話もOocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki2.3K views
絵描きさんあるあるPhotoshop技 DIST3 by Yumi uniq Ishizaki
絵描きさんあるあるPhotoshop技 DIST3絵描きさんあるあるPhotoshop技 DIST3
絵描きさんあるあるPhotoshop技 DIST3
Yumi uniq Ishizaki2.6K views
真のレシポンシブって何だろう by Yumi uniq Ishizaki
真のレシポンシブって何だろう真のレシポンシブって何だろう
真のレシポンシブって何だろう
Yumi uniq Ishizaki1.4K views
とっさのデザイン〜ボタン編〜 by Yumi uniq Ishizaki
とっさのデザイン〜ボタン編〜とっさのデザイン〜ボタン編〜
とっさのデザイン〜ボタン編〜
Yumi uniq Ishizaki2.7K views
アイディア発想法とかモノ作りを初める前にやること by Yumi uniq Ishizaki
アイディア発想法とかモノ作りを初める前にやることアイディア発想法とかモノ作りを初める前にやること
アイディア発想法とかモノ作りを初める前にやること
Yumi uniq Ishizaki1.3K views

とある色の決め方

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n