SlideShare a Scribd company logo
わたくし


            おばら つかさ

            渋谷でSAUCER(ソーサー)という名前でフリー
@saucerjp
            のデザイナをしています。

            紙媒体からデザイン業界に入り、ずーっと紙
            のデザインだけをしていましたが、ここ5, 6年
            はWeb媒体の仕事が随分と増えています。

            現在では特に紙、Webの区別なくデザインの
            仕事をしています。
Ruby Kaja サイトのデザインとコーディングとか
Ruby Kaja に贈られるTシャツのデザインとかしました
今日の献立


・なぜ色選びに失敗してしまうのか1
・人間の知覚に合った考え方って?
・なぜ色選びに失敗してしまうのか2
・配色理論の紹介
・配色理論を使った配色法
はじめに
こんな配色、
身に覚えはありませんか?
インターネットの世界では、
 よく見掛ける景色です
今日は、そんな状態からの卒業を目指します
こっからは解説ばかりで眠いです
眠くなっちゃた人は後半まで寝ていて大丈夫
  重要なことは後半にでてきます
なぜ色選びに失敗してしまうのか 1
さて、普段、色を選ぶ時ってどうしてます?
#fffとかの16進や、255, 255, 255のような10進?
  それとも、既存のカラーパレットなどから?
実はこの時点で失敗に片足突っ込んでます
どの辺が?
実は、この選び方だと
「調和のとれた色」が選びづらい
もうちょっと詳しく
色を「数値や記号」で表す方法は2つあります
混色系
 (こんしょくけい)(color mixing system)




               と

            顕色系
(けんしょくけい)(color appearance system)
混色系(こんしょくけい)(color mixing system)

・混色は、色や光の三原色を混ぜあわせて表現されたもの
・Red 50% とか Blue 255とか
・RGBやCMY、XYZなどがこれにあたる
・混色系は数学的に扱いやすいので機械が使うのに向いている




             R               C




         B       G       M       Y
要は、人間向きでは無いってこと
顕色系(けんしょくけい)(color appearance system)

・顕色は人間の知覚に近いかたちで色を配置したもの
・色相 (hue)、彩度 (chroma)、明度 (value, brightness)で表現される
・マンセルやPCCS表色系など
・人間の知覚に近いので色の組み合わせを想像しやすい
 こちらは、人間向き
で、さっき出てきた選びかたは全て混色系…
混色系は本来が機械的なものなので、
美的なものを選ぶのに向いていない…
美的な意味合いを含んだ配色をするなら、
 選びやすい方(顕色系)で考えたい
人間の知覚に合った考え方って?
色相、彩度、明度これだけ
もうちょっと詳しく
色相 (hue)

・赤とか青とか黄といった色味の値
・一周360度の円で表す
彩度 (chroma)

・色の鮮やかさの値
・数値が下がるほど色がなくなり白、黒、グレーに近づく
・0∼100%が一般的
・ゼロで無彩色(白、黒、グレー)
・#ff0(黄色)は結構な高彩度
明度 (value, brightness)

・明るさの値
・数値が下がるほど黒に近づく
・0∼100%が一般的
明るい赤とか暗い青とかそんな感じ
洋服の色を選ぶときって、
3原色の組み合わせでは考えないですよね
やってみる
赤系(色相)、眩しくなくて(彩度)、暗い色(明度)
暗すぎたw
もうちょっと明るく(明度あげる)
もっと明るく!(さらに明度アップ)
やっぱ、そのままの明るさで、
青がいい(́・ω・`)(色相変更)
こんな感じで選びやすいし、
    考えやすい
ただし
なぜ色選びに失敗してしまうのか 2
失敗の2が残っていた
それは、「RGB色空間」


これはPC使って色を選ぶ人には
  ほぼ不可避なトラップ
    (RGB空間の説明は割愛)
だって、ほとんどのツールはRGB色空間を
   基準に作られているから…
      (RGB空間の説明省略!)
さっき出てきた色相、彩度、明度…
実はこれ、色相、彩度、明度ですが
 「混色系」RGB色空間です
こいつの名前は、HSB(HSV)
HSB空間というのは、
RGB空間を非線形変換したもの
ってことは、
見かけ的にはそれっぽい選択はするのだけど、
   結局はRGB色空間だったりする
       (詳しい説明は割愛!)
何が問題って、RGB色空間は可視光の空間なので、
    色域が広く、かなり彩度が高い
  放っておくと彩度の高い配色になりやすい
   また、高彩度の配色は難易度が高い
         (細かい説明、割愛)
「なんか俺が選ぶと   パキパキな色になる」
      の原因はここにあった
RGBは彩度が高くなりやすいって
覚えておくだけでも、だいぶ違います
ただ、RGB色空間では色が選べないのかって言うと
       そうではないです
 調和のとれた配色への難易度があがるってだけ
RGB使わないとなると、どうすれば…
顕色系(けんしょくけい)(color appearance system)

・顕色は人間の知覚に近いかたちで色を配置したもの
・色相 (hue)、彩度 (chroma)、明度 (value, brightness)で表現される
・マンセルやPCCS表色系など
・人間の知覚に近いので色の組み合わせを想像しやすい
この色空間を使いましょうって事になります
今回はマンセル色空間を使う
なぜマンセルなのか?
それは、マンセル色空間の彩度は
  顔料(物体色)をベースとしているため
RGBのような加法混色ではなく、減法混色となり、
   必然的に彩度が程よく抑えられているから
       (マンセル色空間の詳細は割愛!)
要は「調和のとれた色が選びやすい」ってことです
とりあえず「なぜ色選びを失敗するのか」のまとめ


  ・10進や16進で考えない
  ・RGB色空間は彩度が高まりやすい
  ・色相、彩度、明度で考えよう
  ・彩度に気をつけよう
ここまでが、色を選び始めるまでの前段階
やっと配色理論の紹介
先人が作り上げた配色理論を活用しよう
・シュヴリュールの色彩調和論
・オストワルトの色彩調和論
・ムーン&スペンサーの色彩調和論
・ジャッドの色彩調和の原理
今回は
ムーン&スペンサーの色彩調和論
   をざっくり紹介
色相差の調和
明度差、彩度差の調和
色面積差による調和(スカラーモーメント)は省略
ていうのが、先人が考えた配色理論のひとつ
これを使って複数の色をチマチマと選ぶのだけど…
だいぶ無理ゲー感がただよってきました
全然ノンデザイナー向けじゃない
「理論を自分で実践するのは無理ゲー」
         なので
マンセルとM&S理論を組み込んだ配色アプリを
作ったので、それをポチポチすることにしました
これならノンデザイナー向け
はい。ここから後半です
アプリを使う前に…
このアプリはマンセル色空間を正確に再現する目的で作ったも
のではないです。

「調和の取れた色選びを簡単にすること」を目的にしています。

現状だとマンセルとRGBの厳密な色変換・補完は僕には難しす
ぎてできないので、本来はXYZ空間を使い変換・補完するべき
所をHSB線形変換で割り切って考え、特に彩度・明度の部分は
歪んだ解釈で色相環に押し込んでいます。その部分の精度は今後
の課題です。

また、もとのマンセルの精度が低いのに連動して、M&S理論に
よって導き出される調和も厳密なものにはならず、だいたい合っ
ている程度かと思います。

あと、選んだ配色の保存機能なども、まだ実装されていませ
ん。最低限の機能として数値の画面出力はできます。
調和配色アプリ「HUE360」


http://hue360.herokuapp.com

    Chrome か Firefox あたりでお願いします
なんとなくアプリの使い方を理解した所で
マンセル色空間とM&S配色理論を使った配色法
メジャーな選び方を知るとさらに簡単に
同一調和:同じ色相のみを使った配色法




調和は非常に取りやすい。その反面単調になりやすい
類似調和:ふたつの色相差が25∼43 の類似を使った配色法




    色の違いもわかり、強すぎない。ソフト。
対比調和:いわゆる補色。180 方向の対比を使った配色法




    派手。主調が強い。失敗すると目が痛い
スプリットコメンタリー:基準色とその補色の類似色を使った配色法




         色味が分散するのでカラフル
やってみる
とは言え、この選び方にこだわる必要はないです
     適当にポチポチしてみて
  自分なりの配色を発見してみてください
今回の説明とアプリで色選びが
少しでも簡単になったら嬉しいです
ありがとうございました

More Related Content

What's hot

伝わるプレゼンをする方法
伝わるプレゼンをする方法伝わるプレゼンをする方法
伝わるプレゼンをする方法
Hideaki Miyake
 
魅せるPowerPointビジネスプレゼン【入門編】先生:河合 浩之
魅せるPowerPointビジネスプレゼン【入門編】先生:河合 浩之魅せるPowerPointビジネスプレゼン【入門編】先生:河合 浩之
魅せるPowerPointビジネスプレゼン【入門編】先生:河合 浩之
schoowebcampus
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
Masahito Zembutsu
 
プレゼンの技術
プレゼンの技術プレゼンの技術
プレゼンの技術
心 谷本
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
 
プレゼンテーション用資料作成のプレゼンテーション資料
プレゼンテーション用資料作成のプレゼンテーション資料プレゼンテーション用資料作成のプレゼンテーション資料
プレゼンテーション用資料作成のプレゼンテーション資料
hiroshioda
 
プレゼン・ポスターで自分の研究を「伝える」 (How to do technical oral/poster presentation)
プレゼン・ポスターで自分の研究を「伝える」 (How to do technical oral/poster presentation)プレゼン・ポスターで自分の研究を「伝える」 (How to do technical oral/poster presentation)
プレゼン・ポスターで自分の研究を「伝える」 (How to do technical oral/poster presentation)
Toshihiko Yamasaki
 
色彩学入門
色彩学入門色彩学入門
色彩学入門
ueda247
 
あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?
Minoru Yokomichi
 
超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方
MOCKS | Yuta Morishige
 
デザインに正解はないけれど
デザインに正解はないけれどデザインに正解はないけれど
デザインに正解はないけれど
ken pos
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法Junichi Izumi
 
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
Michiyo Fukada
 
Webデザインのための配色セオリー
Webデザインのための配色セオリーWebデザインのための配色セオリー
Webデザインのための配色セオリー
webcampusschoo
 
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
Yoshiki Hayama
 
ラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイントラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイント
Kairi Ishizuka
 
ひたすら楽してスライド作成
ひたすら楽してスライド作成ひたすら楽してスライド作成
ひたすら楽してスライド作成
Masanori Morise
 
プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11
智治 長沢
 

What's hot (20)

伝わるプレゼンをする方法
伝わるプレゼンをする方法伝わるプレゼンをする方法
伝わるプレゼンをする方法
 
魅せるPowerPointビジネスプレゼン【入門編】先生:河合 浩之
魅せるPowerPointビジネスプレゼン【入門編】先生:河合 浩之魅せるPowerPointビジネスプレゼン【入門編】先生:河合 浩之
魅せるPowerPointビジネスプレゼン【入門編】先生:河合 浩之
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
 
プレゼンの技術
プレゼンの技術プレゼンの技術
プレゼンの技術
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
 
プレゼンテーション用資料作成のプレゼンテーション資料
プレゼンテーション用資料作成のプレゼンテーション資料プレゼンテーション用資料作成のプレゼンテーション資料
プレゼンテーション用資料作成のプレゼンテーション資料
 
プレゼン・ポスターで自分の研究を「伝える」 (How to do technical oral/poster presentation)
プレゼン・ポスターで自分の研究を「伝える」 (How to do technical oral/poster presentation)プレゼン・ポスターで自分の研究を「伝える」 (How to do technical oral/poster presentation)
プレゼン・ポスターで自分の研究を「伝える」 (How to do technical oral/poster presentation)
 
色彩学入門
色彩学入門色彩学入門
色彩学入門
 
あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?
 
超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方
 
デザインに正解はないけれど
デザインに正解はないけれどデザインに正解はないけれど
デザインに正解はないけれど
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
 
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
 
Webデザインのための配色セオリー
Webデザインのための配色セオリーWebデザインのための配色セオリー
Webデザインのための配色セオリー
 
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
 
ラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイントラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイント
 
ひたすら楽してスライド作成
ひたすら楽してスライド作成ひたすら楽してスライド作成
ひたすら楽してスライド作成
 
プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11
 

Viewers also liked

Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティングWo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
thinkjam.Inc.
 
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
コピーライターはせがわ てつじ
 
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書
Daisuke Miyazaki
 
コンテンツをディレクションするということ
コンテンツをディレクションするということコンテンツをディレクションするということ
コンテンツをディレクションするということ
Yoshihiro Kanematsu
 
インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事
Koki Kaku
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
 
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
Shoe-g Ueyama
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
 
株式会社LIGを事例に学ぶ、実践的アクセス解析
株式会社LIGを事例に学ぶ、実践的アクセス解析株式会社LIGを事例に学ぶ、実践的アクセス解析
株式会社LIGを事例に学ぶ、実践的アクセス解析
webcampusschoo
 
コンテンツ マーケティング革命
コンテンツ マーケティング革命コンテンツ マーケティング革命
コンテンツ マーケティング革命
Tactus Associates
 
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
tanakayoshikif-code
 
Sexyなリスティング広告プレイヤーになるために…
Sexyなリスティング広告プレイヤーになるために…Sexyなリスティング広告プレイヤーになるために…
Sexyなリスティング広告プレイヤーになるために…
Keiji Abe
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそうWataru OKAMOTO
 
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02INFOBAHN.inc(株式会社インフォバーン)
 
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザインユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
Masaya Ando
 
コンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬんコンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬんKenta Nakamura
 
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
take-it
 
クックパッドのグロースハックについて 20140218 ver1.1(更新版)
クックパッドのグロースハックについて 20140218 ver1.1(更新版)クックパッドのグロースハックについて 20140218 ver1.1(更新版)
クックパッドのグロースハックについて 20140218 ver1.1(更新版)
Kato Kyosuke
 

Viewers also liked (20)

Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティングWo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
 
コンテンツ作りの三原則
コンテンツ作りの三原則コンテンツ作りの三原則
コンテンツ作りの三原則
 
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
 
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書
 
コンテンツをディレクションするということ
コンテンツをディレクションするということコンテンツをディレクションするということ
コンテンツをディレクションするということ
 
インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
 
株式会社LIGを事例に学ぶ、実践的アクセス解析
株式会社LIGを事例に学ぶ、実践的アクセス解析株式会社LIGを事例に学ぶ、実践的アクセス解析
株式会社LIGを事例に学ぶ、実践的アクセス解析
 
コンテンツ マーケティング革命
コンテンツ マーケティング革命コンテンツ マーケティング革命
コンテンツ マーケティング革命
 
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
 
Sexyなリスティング広告プレイヤーになるために…
Sexyなリスティング広告プレイヤーになるために…Sexyなリスティング広告プレイヤーになるために…
Sexyなリスティング広告プレイヤーになるために…
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそう
 
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
 
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザインユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
 
コンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬんコンセプトの重要性についてうんぬん
コンセプトの重要性についてうんぬん
 
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
 
クックパッドのグロースハックについて 20140218 ver1.1(更新版)
クックパッドのグロースハックについて 20140218 ver1.1(更新版)クックパッドのグロースハックについて 20140218 ver1.1(更新版)
クックパッドのグロースハックについて 20140218 ver1.1(更新版)
 

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

Editor's Notes

  1. \n
  2. \n
  3. Ruby関連の方が多いのじゃないかと勝手に決めつけて…宣伝しますね\n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. すでに配色されたものを選ぶとかありますが、今回は無かった事にしますね。\n\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
  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. この配色理論は1944年にパリー・ムーンさんとドミナ・スペンサーさんがマンセル色空間を採用して、色の調和、不調和を計量的に図式化したもの\n
  74. \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