SlideShare uma empresa 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

Mais conteúdo relacionado

Mais procurados

なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
Dai Murata
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
 
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
Yoshiki Hayama
 

Mais procurados (20)

なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
 
10,000DAUまで 成長させたグロースハック事例
10,000DAUまで 成長させたグロースハック事例10,000DAUまで 成長させたグロースハック事例
10,000DAUまで 成長させたグロースハック事例
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
 
色彩学入門
色彩学入門色彩学入門
色彩学入門
 
つたわるスライド
つたわるスライドつたわるスライド
つたわるスライド
 
プレゼン初心者にありがちなアンチパターン
プレゼン初心者にありがちなアンチパターンプレゼン初心者にありがちなアンチパターン
プレゼン初心者にありがちなアンチパターン
 
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
 
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedeeしょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
 
プレゼンの技術
プレゼンの技術プレゼンの技術
プレゼンの技術
 
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
 
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
 
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
 
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
 
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
 
プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
 

Destaque

Destaque (20)

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

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