Successfully reported this slideshow.

とある色の決め方

138

Share

Loading in …3
×
1 of 30
1 of 30

とある色の決め方

138

Share

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

とある色の決め方

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

Editor's Notes

  • \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
  • ×