Download as KEY, PPTX
Recommended
More Related Content
What's hot
Viewers also liked
Similar to ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
- 2.わたくし おばら つかさ 渋谷でSAUCER（ソーサー）という名前でフリー@saucerjp のデザイナをしています。 紙媒体からデザイン業界に入り、ずーっと紙 のデザインだけをしていましたが、ここ5, 6年 はWeb媒体の仕事が随分と増えています。 現在では特に紙、Webの区別なくデザインの 仕事をしています。
- 3.
- 4.
- 5.
- 6.
- 7.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.#fffとかの16進や、255, 255, 255のような10進？ それとも、既存のカラーパレットなどから？
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.混色系 （こんしょくけい）（color mixingsystem） と 顕色系（けんしょくけい）（color appearance system）
- 21.混色系（こんしょくけい）（color mixing system）・混色は、色や光の三原色を混ぜあわせて表現されたもの・Red50% とか Blue 255とか・RGBやCMY、XYZなどがこれにあたる・混色系は数学的に扱いやすいので機械が使うのに向いている R C B G M Y
- 22.
- 23.顕色系（けんしょくけい）（color appearance system）・顕色は人間の知覚に近いかたちで色を配置したもの・色相(hue)、彩度 (chroma)、明度 (value, brightness)で表現される・マンセルやPCCS表色系など・人間の知覚に近いので色の組み合わせを想像しやすい
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 39.
- 40.
- 42.
- 44.
- 46.こんな感じで選びやすいし、 考えやすい
- 47.
- 48.
- 49.
- 50.それは、「RGB色空間」これはPC使って色を選ぶ人には ほぼ不可避なトラップ （RGB空間の説明は割愛）
- 51.だって、ほとんどのツールはRGB色空間を基準に作られているから… （RGB空間の説明省略！）
- 52.
- 53.
- 54.
- 55.
- 56.ってことは、見かけ的にはそれっぽい選択はするのだけど、結局はRGB色空間だったりする （詳しい説明は割愛！）
- 57.何が問題って、RGB色空間は可視光の空間なので、 色域が広く、かなり彩度が高い 放っておくと彩度の高い配色になりやすい また、高彩度の配色は難易度が高い （細かい説明、割愛）
- 58.「なんか俺が選ぶとパキパキな色になる」 の原因はここにあった
- 59.
- 60.ただ、RGB色空間では色が選べないのかって言うと そうではないです 調和のとれた配色への難易度があがるってだけ
- 61.
- 62.顕色系（けんしょくけい）（color appearance system）・顕色は人間の知覚に近いかたちで色を配置したもの・色相(hue)、彩度 (chroma)、明度 (value, brightness)で表現される・マンセルやPCCS表色系など・人間の知覚に近いので色の組み合わせを想像しやすい
- 63.
- 64.
- 65.
- 66.それは、マンセル色空間の彩度は 顔料（物体色）をベースとしているためRGBのような加法混色ではなく、減法混色となり、 必然的に彩度が程よく抑えられているから （マンセル色空間の詳細は割愛！）
- 67.
- 68.とりあえず「なぜ色選びを失敗するのか」のまとめ ・10進や16進で考えない ・RGB色空間は彩度が高まりやすい ・色相、彩度、明度で考えよう ・彩度に気をつけよう
- 69.
- 70.
- 71.
- 72.
- 73.今回はムーン&スペンサーの色彩調和論をざっくり紹介
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.「理論を自分で実践するのは無理ゲー」 なのでマンセルとM&S理論を組み込んだ配色アプリを作ったので、それをポチポチすることにしました
- 81.
- 82.
- 83.
- 84.調和配色アプリ「HUE360」http://hue360.herokuapp.com Chrome か Firefox あたりでお願いします
- 85.
- 86.
- 87.
- 88.
- 89.類似調和：ふたつの色相差が25∼43 の類似を使った配色法 色の違いもわかり、強すぎない。ソフト。
- 90.対比調和：いわゆる補色。180 方向の対比を使った配色法 派手。主調が強い。失敗すると目が痛い
- 91.スプリットコメンタリー：基準色とその補色の類似色を使った配色法 色味が分散するのでカラフル
- 92.
- 93.とは言え、この選び方にこだわる必要はないです 適当にポチポチしてみて 自分なりの配色を発見してみてください
- 94.
- 95.
Editor's Notes
- #2 \n
- #3 \n
- #4 Ruby関連の方が多いのじゃないかと勝手に決めつけて…宣伝しますね\n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 すでに配色されたものを選ぶとかありますが、今回は無かった事にしますね。\n\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
- #29 \n
- #30 色相、彩度、明度って聞いたこと無いって人のほうが少ないと思いますが…\n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 わがままですねー\n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 だと僕は思っています\n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 さっき出てきた顕色系\n
- #64 \n
- #65 \n
- #66 \n
- #67 当時の顔料がどうのこうの\n
- #68 \n
- #69 マンセルはまた後で出てきますが、ここで一旦\n
- #70 \n
- #71 \n
- #72 \n
- #73 色々ありますが…\n
- #74 この配色理論は1944年にパリー・ムーンさんとドミナ・スペンサーさんがマンセル色空間を採用して、色の調和、不調和を計量的に図式化したもの\n
- #75 \n
- #76 \n
- #77 \n
- #78 うすうす気づいているかもしれませんが、\n
- #79 \n
- #80 ですよね、僕もそう思った。\n
- #81 \n
- #82 \n
- #83 \n
- #84 \n
- #85 マンセルの色相環再現の精度が高くないことを言う\n
- #86 \n
- #87 \n
- #88 \n
- #89 \n
- #90 \n
- #91 \n
- #92 \n
- #93 \n
- #94 \n
- #95 \n
- #96 \n