SlideShare a Scribd company logo
1 of 95
Download to read offline
ノンデザイナーのための配色理論
わたくし


            おばら つかさ

            渋谷で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

「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことかYoshiki Hayama
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版MOCKS | Yuta Morishige
 
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさYoshiki Hayama
 
色彩学入門
色彩学入門色彩学入門
色彩学入門ueda247
 
プレゼンの技術
プレゼンの技術プレゼンの技術
プレゼンの技術心 谷本
 
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つけるあなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つけるYoshiki Hayama
 
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716Dai Murata
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザインMasayuki Uetani
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司schoowebcampus
 
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜Yuudai Tachibana
 
ドワンゴの新卒エンジニアが 新規サービスを立ち上げるまで
ドワンゴの新卒エンジニアが新規サービスを立ち上げるまでドワンゴの新卒エンジニアが新規サービスを立ち上げるまで
ドワンゴの新卒エンジニアが 新規サービスを立ち上げるまでKazunari Kida
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインRoy Kim
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうToshiaki Sasaki
 
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチYoshiki Hayama
 
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現Unity Technologies Japan K.K.
 
つたわるスライド
つたわるスライドつたわるスライド
つたわるスライドKazuyoshi Goto
 
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回Yoshiki Hayama
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! Akiko Ohtsuka
 
上司が信用できない会社の内部統制~第32回WebSig会議「便利さと、怖さと、心強さと〜戦う会社のための社内セキュリティ 2013年のスタンダードとは?!...
上司が信用できない会社の内部統制~第32回WebSig会議「便利さと、怖さと、心強さと〜戦う会社のための社内セキュリティ 2013年のスタンダードとは?!...上司が信用できない会社の内部統制~第32回WebSig会議「便利さと、怖さと、心強さと〜戦う会社のための社内セキュリティ 2013年のスタンダードとは?!...
上司が信用できない会社の内部統制~第32回WebSig会議「便利さと、怖さと、心強さと〜戦う会社のための社内セキュリティ 2013年のスタンダードとは?!...WebSig24/7
 
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!Yoshiki Hayama
 

What's hot (20)

「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
 
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
 
色彩学入門
色彩学入門色彩学入門
色彩学入門
 
プレゼンの技術
プレゼンの技術プレゼンの技術
プレゼンの技術
 
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つけるあなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
 
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
 
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
 
ドワンゴの新卒エンジニアが 新規サービスを立ち上げるまで
ドワンゴの新卒エンジニアが新規サービスを立ち上げるまでドワンゴの新卒エンジニアが新規サービスを立ち上げるまで
ドワンゴの新卒エンジニアが 新規サービスを立ち上げるまで
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
「のどが渇いた」というユーザーに何を出す? ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
 
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
 
つたわるスライド
つたわるスライドつたわるスライド
つたわるスライド
 
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
 
上司が信用できない会社の内部統制~第32回WebSig会議「便利さと、怖さと、心強さと〜戦う会社のための社内セキュリティ 2013年のスタンダードとは?!...
上司が信用できない会社の内部統制~第32回WebSig会議「便利さと、怖さと、心強さと〜戦う会社のための社内セキュリティ 2013年のスタンダードとは?!...上司が信用できない会社の内部統制~第32回WebSig会議「便利さと、怖さと、心強さと〜戦う会社のための社内セキュリティ 2013年のスタンダードとは?!...
上司が信用できない会社の内部統制~第32回WebSig会議「便利さと、怖さと、心強さと〜戦う会社のための社内セキュリティ 2013年のスタンダードとは?!...
 
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
 

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.
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】MOCKS | Yuta Morishige
 
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書Daisuke Miyazaki
 
コンテンツをディレクションするということ
コンテンツをディレクションするということコンテンツをディレクションするということ
コンテンツをディレクションするということYoshihiro Kanematsu
 
インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事Koki Kaku
 
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2Shoe-g Ueyama
 
株式会社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
 
リスティング広告の為のデータフィード勉強会
リスティング広告の為のデータフィード勉強会リスティング広告の為のデータフィード勉強会
リスティング広告の為のデータフィード勉強会Keiji Abe
 
データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介pLucky
 

Viewers also liked (20)

Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティングWo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
 
コンテンツ作りの三原則
コンテンツ作りの三原則コンテンツ作りの三原則
コンテンツ作りの三原則
 
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
 
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書
 
コンテンツをディレクションするということ
コンテンツをディレクションするということコンテンツをディレクションするということ
コンテンツをディレクションするということ
 
インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事
 
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
 
株式会社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(更新版)
 
リスティング広告の為のデータフィード勉強会
リスティング広告の為のデータフィード勉強会リスティング広告の為のデータフィード勉強会
リスティング広告の為のデータフィード勉強会
 
データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介データドリブン経営のメトリクス分析 AARRR!モデルの紹介
データドリブン経営のメトリクス分析 AARRR!モデルの紹介
 

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

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