2. わたくし
おばら つかさ
渋谷でSAUCER（ソーサー）という名前でフリー
@saucerjp
のデザイナをしています。
紙媒体からデザイン業界に入り、ずーっと紙
のデザインだけをしていましたが、ここ5, 6年
はWeb媒体の仕事が随分と増えています。
現在では特に紙、Webの区別なくデザインの
仕事をしています。

3. Ruby Kaja サイトのデザインとコーディングとか

4. Ruby Kaja に贈られるTシャツのデザインとかしました

5. 今日の献立
・なぜ色選びに失敗してしまうのか１
・人間の知覚に合った考え方って？
・なぜ色選びに失敗してしまうのか２
・配色理論の紹介
・配色理論を使った配色法

6. はじめに

7. こんな配色、
身に覚えはありませんか？

9. インターネットの世界では、
よく見掛ける景色です

10. 今日は、そんな状態からの卒業を目指します

11. こっからは解説ばかりで眠いです
眠くなっちゃた人は後半まで寝ていて大丈夫
重要なことは後半にでてきます

12. なぜ色選びに失敗してしまうのか 1

13. さて、普段、色を選ぶ時ってどうしてます？

14. #fffとかの16進や、255, 255, 255のような10進？
それとも、既存のカラーパレットなどから？

15. 実はこの時点で失敗に片足突っ込んでます

16. どの辺が？

17. 実は、この選び方だと
「調和のとれた色」が選びづらい

18. もうちょっと詳しく

19. 色を「数値や記号」で表す方法は2つあります

20. 混色系
（こんしょくけい）（color mixing system）
と
顕色系
（けんしょくけい）（color appearance system）

21. 混色系（こんしょくけい）（color mixing system）
・混色は、色や光の三原色を混ぜあわせて表現されたもの
・Red 50% とか 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. 色相 (hue)
・赤とか青とか黄といった色味の値
・一周360度の円で表す

32. 彩度 (chroma)
・色の鮮やかさの値
・数値が下がるほど色がなくなり白、黒、グレーに近づく
・０∼100％が一般的
・ゼロで無彩色（白、黒、グレー）
・#ff0（黄色）は結構な高彩度

33. 明度 (value, brightness)
・明るさの値
・数値が下がるほど黒に近づく
・０∼100％が一般的

34. 明るい赤とか暗い青とかそんな感じ

35. 洋服の色を選ぶときって、
3原色の組み合わせでは考えないですよね

36. やってみる

37. 赤系（色相）、眩しくなくて（彩度）、暗い色（明度）

39. 暗すぎたw

40. もうちょっと明るく（明度あげる）

42. もっと明るく！（さらに明度アップ）

44. やっぱ、そのままの明るさで、
青がいい（́・ω・｀）（色相変更）

46. こんな感じで選びやすいし、
考えやすい

47. ただし

48. なぜ色選びに失敗してしまうのか 2

49. 失敗の2が残っていた

50. それは、「RGB色空間」
これはPC使って色を選ぶ人には
ほぼ不可避なトラップ
（RGB空間の説明は割愛）

51. だって、ほとんどのツールはRGB色空間を
基準に作られているから…
（RGB空間の説明省略！）

52. さっき出てきた色相、彩度、明度…

53. 実はこれ、色相、彩度、明度ですが
「混色系」RGB色空間です

54. こいつの名前は、HSB(HSV)

55. HSB空間というのは、
RGB空間を非線形変換したもの

56. ってことは、
見かけ的にはそれっぽい選択はするのだけど、
結局はRGB色空間だったりする
（詳しい説明は割愛！）

57. 何が問題って、RGB色空間は可視光の空間なので、
色域が広く、かなり彩度が高い
放っておくと彩度の高い配色になりやすい
また、高彩度の配色は難易度が高い
（細かい説明、割愛）

58. 「なんか俺が選ぶと パキパキな色になる」
の原因はここにあった

59. RGBは彩度が高くなりやすいって
覚えておくだけでも、だいぶ違います

60. ただ、RGB色空間では色が選べないのかって言うと
そうではないです
調和のとれた配色への難易度があがるってだけ

61. RGB使わないとなると、どうすれば…

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. アプリを使う前に…
このアプリはマンセル色空間を正確に再現する目的で作ったも
のではないです。
「調和の取れた色選びを簡単にすること」を目的にしています。
現状だとマンセルとRGBの厳密な色変換・補完は僕には難しす
ぎてできないので、本来はXYZ空間を使い変換・補完するべき
所をHSB線形変換で割り切って考え、特に彩度・明度の部分は
歪んだ解釈で色相環に押し込んでいます。その部分の精度は今後
の課題です。
また、もとのマンセルの精度が低いのに連動して、M&S理論に
よって導き出される調和も厳密なものにはならず、だいたい合っ
ている程度かと思います。
あと、選んだ配色の保存機能なども、まだ実装されていませ
ん。最低限の機能として数値の画面出力はできます。

84. 調和配色アプリ「HUE360」
http://hue360.herokuapp.com
Chrome か Firefox あたりでお願いします

85. なんとなくアプリの使い方を理解した所で

86. マンセル色空間とM&S配色理論を使った配色法

87. メジャーな選び方を知るとさらに簡単に

88. 同一調和：同じ色相のみを使った配色法
調和は非常に取りやすい。その反面単調になりやすい

89. 類似調和：ふたつの色相差が25∼43 の類似を使った配色法
色の違いもわかり、強すぎない。ソフト。

90. 対比調和：いわゆる補色。180 方向の対比を使った配色法
派手。主調が強い。失敗すると目が痛い

91. スプリットコメンタリー：基準色とその補色の類似色を使った配色法
色味が分散するのでカラフル

92. やってみる

93. とは言え、この選び方にこだわる必要はないです
適当にポチポチしてみて
自分なりの配色を発見してみてください

94. 今回の説明とアプリで色選びが
少しでも簡単になったら嬉しいです

95. ありがとうございました