• Like
ノンデザイナーのための配色理論
Upcoming SlideShare
Loading in...5
×

ノンデザイナーのための配色理論

  • 711,201 views
Uploaded on

 

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 私は、弱い色弱があるので、余計色にはこだわりがあります。
    Are you sure you want to
    Your message goes here
  • I just got paid $6784 working off my laptop this month. And if you think that's cool, my divorced friend has twin toddlers and made over $9k her first month. It feels so good making so much money when other people have to work for so much less. This is what I do, Buck6.com
    Are you sure you want to
    Your message goes here
  • 本当に素敵で、秀逸なスライドでした!

    こんな素晴らしいスライドに会えて、感動しました!ありがとうございます!
    Are you sure you want to
    Your message goes here
  • これは素敵。何も考えんでもプロっぽくなる。なんか配色するときは使おう。
    Are you sure you want to
    Your message goes here
  • 78ページ目が面白い。
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
711,201
On Slideshare
0
From Embeds
0
Number of Embeds
145

Actions

Shares
Downloads
2,436
Comments
5
Likes
990

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • Ruby関連の方が多いのじゃないかと勝手に決めつけて…宣伝しますね\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
  • \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
  • \n
  • \n
  • \n
  • \n
  • さっき出てきた顕色系\n
  • \n
  • \n
  • \n
  • 当時の顔料がどうのこうの\n
  • \n
  • マンセルはまた後で出てきますが、ここで一旦\n
  • \n
  • \n
  • \n
  • 色々ありますが…\n
  • この配色理論は1944年にパリー・ムーンさんとドミナ・スペンサーさんがマンセル色空間を採用して、色の調和、不調和を計量的に図式化したもの\n
  • \n
  • \n
  • \n
  • うすうす気づいているかもしれませんが、\n
  • \n
  • ですよね、僕もそう思った。\n
  • \n
  • \n
  • \n
  • \n
  • マンセルの色相環再現の精度が高くないことを言う\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. わたくし おばら つかさ 渋谷でSAUCER(ソーサー)という名前でフリー@saucerjp のデザイナをしています。 紙媒体からデザイン業界に入り、ずーっと紙 のデザインだけをしていましたが、ここ5, 6年 はWeb媒体の仕事が随分と増えています。 現在では特に紙、Webの区別なくデザインの 仕事をしています。
  • 2. Ruby Kaja サイトのデザインとコーディングとか
  • 3. Ruby Kaja に贈られるTシャツのデザインとかしました
  • 4. 今日の献立・なぜ色選びに失敗してしまうのか1・人間の知覚に合った考え方って?・なぜ色選びに失敗してしまうのか2・配色理論の紹介・配色理論を使った配色法
  • 5. はじめに
  • 6. こんな配色、身に覚えはありませんか?
  • 7. インターネットの世界では、 よく見掛ける景色です
  • 8. 今日は、そんな状態からの卒業を目指します
  • 9. こっからは解説ばかりで眠いです眠くなっちゃた人は後半まで寝ていて大丈夫 重要なことは後半にでてきます
  • 10. なぜ色選びに失敗してしまうのか 1
  • 11. さて、普段、色を選ぶ時ってどうしてます?
  • 12. #fffとかの16進や、255, 255, 255のような10進? それとも、既存のカラーパレットなどから?
  • 13. 実はこの時点で失敗に片足突っ込んでます
  • 14. どの辺が?
  • 15. 実は、この選び方だと「調和のとれた色」が選びづらい
  • 16. もうちょっと詳しく
  • 17. 色を「数値や記号」で表す方法は2つあります
  • 18. 混色系 (こんしょくけい)(color mixing system) と 顕色系(けんしょくけい)(color appearance system)
  • 19. 混色系(こんしょくけい)(color mixing system)・混色は、色や光の三原色を混ぜあわせて表現されたもの・Red 50% とか Blue 255とか・RGBやCMY、XYZなどがこれにあたる・混色系は数学的に扱いやすいので機械が使うのに向いている R C B G M Y
  • 20. 要は、人間向きでは無いってこと
  • 21. 顕色系(けんしょくけい)(color appearance system)・顕色は人間の知覚に近いかたちで色を配置したもの・色相 (hue)、彩度 (chroma)、明度 (value, brightness)で表現される・マンセルやPCCS表色系など・人間の知覚に近いので色の組み合わせを想像しやすい
  • 22.  こちらは、人間向き
  • 23. で、さっき出てきた選びかたは全て混色系…
  • 24. 混色系は本来が機械的なものなので、美的なものを選ぶのに向いていない…
  • 25. 美的な意味合いを含んだ配色をするなら、 選びやすい方(顕色系)で考えたい
  • 26. 人間の知覚に合った考え方って?
  • 27. 色相、彩度、明度これだけ
  • 28. もうちょっと詳しく
  • 29. 色相 (hue)・赤とか青とか黄といった色味の値・一周360度の円で表す
  • 30. 彩度 (chroma)・色の鮮やかさの値・数値が下がるほど色がなくなり白、黒、グレーに近づく・0∼100%が一般的・ゼロで無彩色(白、黒、グレー)・#ff0(黄色)は結構な高彩度
  • 31. 明度 (value, brightness)・明るさの値・数値が下がるほど黒に近づく・0∼100%が一般的
  • 32. 明るい赤とか暗い青とかそんな感じ
  • 33. 洋服の色を選ぶときって、3原色の組み合わせでは考えないですよね
  • 34. やってみる
  • 35. 赤系(色相)、眩しくなくて(彩度)、暗い色(明度)
  • 36. 暗すぎたw
  • 37. もうちょっと明るく(明度あげる)
  • 38. もっと明るく!(さらに明度アップ)
  • 39. やっぱ、そのままの明るさで、青がいい(́・ω・`)(色相変更)
  • 40. こんな感じで選びやすいし、 考えやすい
  • 41. ただし
  • 42. なぜ色選びに失敗してしまうのか 2
  • 43. 失敗の2が残っていた
  • 44. それは、「RGB色空間」これはPC使って色を選ぶ人には ほぼ不可避なトラップ (RGB空間の説明は割愛)
  • 45. だって、ほとんどのツールはRGB色空間を 基準に作られているから… (RGB空間の説明省略!)
  • 46. さっき出てきた色相、彩度、明度…
  • 47. 実はこれ、色相、彩度、明度ですが 「混色系」RGB色空間です
  • 48. こいつの名前は、HSB(HSV)
  • 49. HSB空間というのは、RGB空間を非線形変換したもの
  • 50. ってことは、見かけ的にはそれっぽい選択はするのだけど、 結局はRGB色空間だったりする (詳しい説明は割愛!)
  • 51. 何が問題って、RGB色空間は可視光の空間なので、 色域が広く、かなり彩度が高い 放っておくと彩度の高い配色になりやすい また、高彩度の配色は難易度が高い (細かい説明、割愛)
  • 52. 「なんか俺が選ぶと パキパキな色になる」 の原因はここにあった
  • 53. RGBは彩度が高くなりやすいって覚えておくだけでも、だいぶ違います
  • 54. ただ、RGB色空間では色が選べないのかって言うと そうではないです 調和のとれた配色への難易度があがるってだけ
  • 55. RGB使わないとなると、どうすれば…
  • 56. 顕色系(けんしょくけい)(color appearance system)・顕色は人間の知覚に近いかたちで色を配置したもの・色相 (hue)、彩度 (chroma)、明度 (value, brightness)で表現される・マンセルやPCCS表色系など・人間の知覚に近いので色の組み合わせを想像しやすい
  • 57. この色空間を使いましょうって事になります
  • 58. 今回はマンセル色空間を使う
  • 59. なぜマンセルなのか?
  • 60. それは、マンセル色空間の彩度は 顔料(物体色)をベースとしているためRGBのような加法混色ではなく、減法混色となり、 必然的に彩度が程よく抑えられているから (マンセル色空間の詳細は割愛!)
  • 61. 要は「調和のとれた色が選びやすい」ってことです
  • 62. とりあえず「なぜ色選びを失敗するのか」のまとめ ・10進や16進で考えない ・RGB色空間は彩度が高まりやすい ・色相、彩度、明度で考えよう ・彩度に気をつけよう
  • 63. ここまでが、色を選び始めるまでの前段階
  • 64. やっと配色理論の紹介
  • 65. 先人が作り上げた配色理論を活用しよう
  • 66. ・シュヴリュールの色彩調和論・オストワルトの色彩調和論・ムーン&スペンサーの色彩調和論・ジャッドの色彩調和の原理
  • 67. 今回はムーン&スペンサーの色彩調和論 をざっくり紹介
  • 68. 色相差の調和
  • 69. 明度差、彩度差の調和
  • 70. 色面積差による調和(スカラーモーメント)は省略
  • 71. ていうのが、先人が考えた配色理論のひとつこれを使って複数の色をチマチマと選ぶのだけど…
  • 72. だいぶ無理ゲー感がただよってきました
  • 73. 全然ノンデザイナー向けじゃない
  • 74. 「理論を自分で実践するのは無理ゲー」 なのでマンセルとM&S理論を組み込んだ配色アプリを作ったので、それをポチポチすることにしました
  • 75. これならノンデザイナー向け
  • 76. はい。ここから後半です
  • 77. アプリを使う前に…このアプリはマンセル色空間を正確に再現する目的で作ったものではないです。「調和の取れた色選びを簡単にすること」を目的にしています。現状だとマンセルとRGBの厳密な色変換・補完は僕には難しすぎてできないので、本来はXYZ空間を使い変換・補完するべき所をHSB線形変換で割り切って考え、特に彩度・明度の部分は歪んだ解釈で色相環に押し込んでいます。その部分の精度は今後の課題です。また、もとのマンセルの精度が低いのに連動して、M&S理論によって導き出される調和も厳密なものにはならず、だいたい合っている程度かと思います。あと、選んだ配色の保存機能なども、まだ実装されていません。最低限の機能として数値の画面出力はできます。
  • 78. 調和配色アプリ「HUE360」http://hue360.herokuapp.com Chrome か Firefox あたりでお願いします
  • 79. なんとなくアプリの使い方を理解した所で
  • 80. マンセル色空間とM&S配色理論を使った配色法
  • 81. メジャーな選び方を知るとさらに簡単に
  • 82. 同一調和:同じ色相のみを使った配色法調和は非常に取りやすい。その反面単調になりやすい
  • 83. 類似調和:ふたつの色相差が25∼43 の類似を使った配色法 色の違いもわかり、強すぎない。ソフト。
  • 84. 対比調和:いわゆる補色。180 方向の対比を使った配色法 派手。主調が強い。失敗すると目が痛い
  • 85. スプリットコメンタリー:基準色とその補色の類似色を使った配色法 色味が分散するのでカラフル
  • 86. やってみる
  • 87. とは言え、この選び方にこだわる必要はないです 適当にポチポチしてみて 自分なりの配色を発見してみてください
  • 88. 今回の説明とアプリで色選びが少しでも簡単になったら嬉しいです
  • 89. ありがとうございました