SlideShare una empresa de Scribd logo
1 de 39
色彩センスのいらない配色講座 色は理論的に説明できる
目次 ,[object Object],[object Object],[object Object],[object Object]
自己紹介 ,[object Object],[object Object],[object Object],[object Object],[object Object],marippe_
色ってなんなの? 死ぬの?
色には「3属性」がある ,[object Object],[object Object],[object Object]
色相とは ,[object Object]
色の3原色 ,[object Object],RGB ( ディスプレイなどの場合 ) CMY ( 塗料などの場合 ) 赤・青・緑 青 ( シアン ) ・赤 ( マゼンタ ) ・黄
明度とは ,[object Object],明度が低い 明度が高い
色相によって明度は違う ,[object Object]
明度を目で見るコツ ,[object Object],http://www.gatag.net/02/06/2009/170000.html Photo by belgianchocolate
彩度とは ,[object Object],彩度が低い 彩度が高い
有彩色・無彩色 ,[object Object],無彩色 有彩色
つまり、色とは ,[object Object],「色相」「明度」「彩度」の3属性で言い表し、選ぶことができるもの
色についてさらに詳しくは ,[object Object]
色を簡単に決める方法
使う色は3色をベースにする ,[object Object],ベースカラー :70% メインカラー :25% アクセントカラー :5%
3色ベースのデザイン例 大塚製薬 POCARI SWEAT stevia 日本製紙クレシア scottie 新生銀行 パワード定期プラス ポスター AEON WAON 公式サイト http://www.waon.com/ 日産 エコカー:モコ http://www2.nissan.co.jp/EVENT/TAX/MOCO/ VISA ロゴタイプ
まずメインカラーを選ぶ ,[object Object],この部分
選び方 ,[object Object],明度が高いと文字が読めない 明度が低いと読めて使いやすい
選び方 ,[object Object],[object Object],[object Object],[object Object],[object Object]
ベースカラーを選ぶ ,[object Object],この部分
選び方 ,[object Object],発光しすぎな色は目が痛い 明度が低いと暗くなる
選び方 ,[object Object],明度の高い無彩色・濁色 メインカラーの明度を上げた色 白 グレー 薄い茶色 メインカラー メインカラー メインカラー ベースカラー ベースカラー ベースカラー
アクセントカラーを選ぶ ,[object Object],この部分
選び方 ,[object Object]
実際にやってみよう ,[object Object],メインカラー ベースカラー アクセントカラー メイン アクセント
実際にやってみよう ポカリスエット web サイト http://pocarisweat.jp/ ライフカード  web サイト http://www.lifecard.co.jp/ VISA  ロゴタイプ
実際にやってみよう ,[object Object],メインカラー ベースカラー アクセントカラー メイン アクセント
実際にやってみよう modx web サイト http://modx.com/ デザイン表札 .com  表札デザイン http://www.designhyousatsu.com/style.html
4色目以降について ,[object Object],http://free-photo.gatag.net/2011/03/13/170000.html Photo by Tambako the Jaguar
カラーの分割 ,[object Object],メインカラーの分割 アクセントカラーの分割 分割 分割
分割の仕方 ,[object Object],「 色相 」が同じで「 トーン 」が違う色 「 トーン 」が同じで「 色相 」が違う色 もしくは
トーンとは ,[object Object],[object Object],彩度 明度 ※ 図は日本色研  web サイトより転載 http://www.sikiken.co.jp/pccs/pccs04.html
カラー分割の例 ,[object Object],Cacoo web サイト https://cacoo.com/ この部分
カラー分割の例 ,[object Object],WAON web サイト http://www.waon.net/ この部分
色面の比率に注意 ,[object Object]
最後に
色はこれが全てじゃない ,[object Object],[object Object]
ありがとうございました! Photo by sueety

Más contenido relacionado

La actualidad más candente

見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版MOCKS | Yuta Morishige
 
「速」を落とさないコードレビュー
「速」を落とさないコードレビュー「速」を落とさないコードレビュー
「速」を落とさないコードレビューTakafumi ONAKA
 
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」Michiyo Fukada
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回Yoshiki Hayama
 
プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11智治 長沢
 
超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方MOCKS | Yuta Morishige
 
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716Dai Murata
 
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。toshihiro ichitani
 
つたわるスライド
つたわるスライドつたわるスライド
つたわるスライドKazuyoshi Goto
 
エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得Reimi Kuramochi Chiba
 
プレゼンの技術
プレゼンの技術プレゼンの技術
プレゼンの技術心 谷本
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなKentaro Matsui
 
時代遅れと言われようとMdaフレームワークの紹介
時代遅れと言われようとMdaフレームワークの紹介時代遅れと言われようとMdaフレームワークの紹介
時代遅れと言われようとMdaフレームワークの紹介MaxNeetGames
 
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話Yusuke Hisatsu
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうToshiaki Sasaki
 
誰でも見やすいパワーポイントを作るための パワーポイントバイブル
誰でも見やすいパワーポイントを作るための パワーポイントバイブル誰でも見やすいパワーポイントを作るための パワーポイントバイブル
誰でも見やすいパワーポイントを作るための パワーポイントバイブルJun Akizaki
 
スマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイントスマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイントTetsuya Kimura
 
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込むYoshiki Hayama
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !Naoki Kanazawa
 
先端技術とメディア表現1 #FTMA15
先端技術とメディア表現1 #FTMA15先端技術とメディア表現1 #FTMA15
先端技術とメディア表現1 #FTMA15Yoichi Ochiai
 

La actualidad más candente (20)

見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
 
「速」を落とさないコードレビュー
「速」を落とさないコードレビュー「速」を落とさないコードレビュー
「速」を落とさないコードレビュー
 
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
 
プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11
 
超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方
 
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
 
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
 
つたわるスライド
つたわるスライドつたわるスライド
つたわるスライド
 
エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得
 
プレゼンの技術
プレゼンの技術プレゼンの技術
プレゼンの技術
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
時代遅れと言われようとMdaフレームワークの紹介
時代遅れと言われようとMdaフレームワークの紹介時代遅れと言われようとMdaフレームワークの紹介
時代遅れと言われようとMdaフレームワークの紹介
 
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
誰でも見やすいパワーポイントを作るための パワーポイントバイブル
誰でも見やすいパワーポイントを作るための パワーポイントバイブル誰でも見やすいパワーポイントを作るための パワーポイントバイブル
誰でも見やすいパワーポイントを作るための パワーポイントバイブル
 
スマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイントスマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイント
 
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
 
先端技術とメディア表現1 #FTMA15
先端技術とメディア表現1 #FTMA15先端技術とメディア表現1 #FTMA15
先端技術とメディア表現1 #FTMA15
 

Destacado

魅せるPowerPointビジネスプレゼン【実践編】 
魅せるPowerPointビジネスプレゼン【実践編】 魅せるPowerPointビジネスプレゼン【実践編】 
魅せるPowerPointビジネスプレゼン【実践編】 schoowebcampus
 
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2Shoe-g Ueyama
 
綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニック綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニックManabu Uekusa
 
伝わるプレゼンをする方法
伝わるプレゼンをする方法伝わるプレゼンをする方法
伝わるプレゼンをする方法Hideaki Miyake
 
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティングWo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティングthinkjam.Inc.
 
コンテンツをディレクションするということ
コンテンツをディレクションするということコンテンツをディレクションするということ
コンテンツをディレクションするということYoshihiro Kanematsu
 
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書Daisuke Miyazaki
 
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようSasaki Kouhei
 
インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事Koki Kaku
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインHiroyuki Makishita
 
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマデザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマYasunobu Ikeda
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司schoowebcampus
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインToshihiko Yamakami
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道schoowebcampus
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン力也 伊原
 

Destacado (20)

魅せるPowerPointビジネスプレゼン【実践編】 
魅せるPowerPointビジネスプレゼン【実践編】 魅せるPowerPointビジネスプレゼン【実践編】 
魅せるPowerPointビジネスプレゼン【実践編】 
 
プレゼンテーションの考え方20140628
プレゼンテーションの考え方20140628プレゼンテーションの考え方20140628
プレゼンテーションの考え方20140628
 
プレゼンの基本
プレゼンの基本プレゼンの基本
プレゼンの基本
 
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
 
良いプレゼン 良いスライド
良いプレゼン 良いスライド良いプレゼン 良いスライド
良いプレゼン 良いスライド
 
綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニック綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニック
 
伝わるプレゼンをする方法
伝わるプレゼンをする方法伝わるプレゼンをする方法
伝わるプレゼンをする方法
 
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティングWo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
Wo! vol.23 米Coca-Colaサイトにみるコンテンツ・マーケティング
 
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
 
コンテンツ作りの三原則
コンテンツ作りの三原則コンテンツ作りの三原則
コンテンツ作りの三原則
 
コンテンツをディレクションするということ
コンテンツをディレクションするということコンテンツをディレクションするということ
コンテンツをディレクションするということ
 
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書
 
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
 
インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事インターネット広告代理店の「制作ディレクション」というお仕事
インターネット広告代理店の「制作ディレクション」というお仕事
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマデザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 

Similar a 色彩センスのいらない配色講座

色彩学入門
色彩学入門色彩学入門
色彩学入門ueda247
 
Random 110828031841-phpapp02
Random 110828031841-phpapp02Random 110828031841-phpapp02
Random 110828031841-phpapp02Tsuyoshi Nakamura
 
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)schoowebcampus
 
How to use color scheme
 How to use color scheme How to use color scheme
How to use color schemesagalabo
 

Similar a 色彩センスのいらない配色講座 (6)

色彩学入門
色彩学入門色彩学入門
色彩学入門
 
Random 110828031841-phpapp02
Random 110828031841-phpapp02Random 110828031841-phpapp02
Random 110828031841-phpapp02
 
Yellow
YellowYellow
Yellow
 
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
 
How to use color scheme
 How to use color scheme How to use color scheme
How to use color scheme
 
パーソナルカラー入門
パーソナルカラー入門パーソナルカラー入門
パーソナルカラー入門
 

色彩センスのいらない配色講座