• Save
色彩センスのいらない配色講座
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,145,506 views

BP study #46

BP study #46

Statistics

Views

Total Views
1,145,506
Views on SlideShare
566,637
Embed Views
578,869

Actions

Likes
1,096
Downloads
0
Comments
35

334 Embeds 578,869

http://oekakigakusyuu.blog97.fc2.com 124619
http://blog.livedoor.jp 87309
http://e0166.blog89.fc2.com 80260
http://www.find-job.net 56042
http://creive.me 44493
http://plus.find-job.net 25657
http://handywebdesign.net 24742
http://www.lifehacker.jp 19693
http://kachibito.net 16232
http://weboook.blog22.fc2.com 13012
http://gaialotlab.seesaa.net 11972
https://twitter.com 9836
http://rejasupotaro.github.io 8534
http://oekakiantena.blog.fc2.com 6529
http://piyon.hatenablog.com 5275
http://nanapi.jp 5018
http://3dnchu.jimdo.com 3033
http://www.yusukenagata.com 2616
http://kattenatv.blogspot.jp 2292
http://bikkuri.me 2071
http://webdesignclass.blog.fc2.com 1777
http://control.blog.fc2.com 1767
http://blog.norimen.com 1067
http://heartruptcy.blog.fc2.com 1065
http://twitter.com 991
http://sleepdesign.hatenablog.com 870
http://w3q.jp 849
http://www.dcom-jp.net 804
https://twimg0-a.akamaihd.net 784
http://geno-web.jugem.jp 747
http://tuyaken.com 586
http://yotsuba-d.com 576
http://blog.kzfmix.com 545
http://blogs.dion.ne.jp 535
http://a0.twimg.com 504
http://kattenatv.blogspot.com 482
https://bozuman.cybozu.com 477
https://si0.twimg.com 472
http://u-labo.org 468
http://www.coromos.com 444
http://kogane1107.hatenablog.com 436
http://threem-design.com 427
http://www.advertimes.com 409
http://192.168.1.160 408
http://mattintosh.blog.so-net.ne.jp 403
http://tanzendesign.com 399
http://dev-info.tose.co.jp 398
http://akiueo.hatenablog.com 380
http://kswg.net 368
http://labo.so-ra.co.jp 314
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 35 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • RGBとCMYの解釈が間違ってます。
    色相環で補色を薦めてしまうとアクセシビリティで
    困る人が出てきます。
    Are you sure you want to
    Your message goes here
    Processing…
  • 素敵です!
    Are you sure you want to
    Your message goes here
    Processing…
  • 面白い。わかりやすい。
    Are you sure you want to
    Your message goes here
    Processing…
  • これは分かりやすい。Good!
    Are you sure you want to
    Your message goes here
    Processing…
  • とても分かりやすかったです。お金も払わず学ばせていただいて、ありがたいです。ありがとうございました。
    Are you sure you want to
    Your message goes here
    Processing…

110 of 35

Post Comment
Edit your comment

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

    • 色彩センスのいらない配色講座 色は理論的に説明できる
    • 目次
      • 自己紹介
      • 色ってなんなの?
      • 色を簡単に決める方法
      • 最後に
    • 自己紹介
      • 職業:デザイナー
      • 物心ついたときには絵を描くのが好きだった
      • そのままの勢いで某美大某デザイン科に進学
      • 社会に出たらデザインの話が通じなさすぎて悶絶
      • そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている
      marippe_
    • 色ってなんなの? 死ぬの?
    • 色には「3属性」がある
      • 色相
      • 明度
      • 彩度
    • 色相とは
      • 色相:赤・青・黄・緑…などの「色み」のこと
    • 色の3原色
      • この3色だけでほぼ全ての色が作れます。
      RGB ( ディスプレイなどの場合 ) CMY ( 塗料などの場合 ) 赤・青・緑 青 ( シアン ) ・赤 ( マゼンタ ) ・黄
    • 明度とは
      • 明度:色の「明るさ」のこと
      明度が低い 明度が高い
    • 色相によって明度は違う
      • 色みを持つ色を白黒にすると明度がわかる
    • 明度を目で見るコツ
      • 薄目で見ると明度がわかりやすい!
      http://www.gatag.net/02/06/2009/170000.html Photo by belgianchocolate
    • 彩度とは
      • 彩度:色の「鮮やかさ」のこと
      彩度が低い 彩度が高い
    • 有彩色・無彩色
      • 彩度がない色を無彩色、彩度が少しでもある色を有彩色といいます。
      無彩色 有彩色
    • つまり、色とは
      • なんかセンスがある奴が感覚的に選ぶもの
      「色相」「明度」「彩度」の3属性で言い表し、選ぶことができるもの
    • 色についてさらに詳しくは
      • ぐぐれ
    • 色を簡単に決める方法
    • 使う色は3色をベースにする
      • 3色を 70 % :25 % :5 %くらいの比率にする方法があります。
      ベースカラー :70% メインカラー :25% アクセントカラー :5%
    • 3色ベースのデザイン例 大塚製薬 POCARI SWEAT stevia 日本製紙クレシア scottie 新生銀行 パワード定期プラス ポスター AEON WAON 公式サイト http://www.waon.com/ 日産 エコカー:モコ http://www2.nissan.co.jp/EVENT/TAX/MOCO/ VISA ロゴタイプ
    • まずメインカラーを選ぶ
      • メインカラーは、色をつけようとしている対象のテーマとなる色です。
      この部分
    • 選び方
      • メインカラーは、ある程度「明度の低い」色が扱いやすいと思います。
      明度が高いと文字が読めない 明度が低いと読めて使いやすい
    • 選び方
      • あとは、イメージや好みや戦略で決めたらいいんじゃないでしょうか!
      • ターゲットユーザーが好きそうな色
      • 競合と被らない色
      • クリックされやすい色
      • 俺は緑が好きなんだ!
    • ベースカラーを選ぶ
      • ベースカラーは、背景など広い色面を彩る色です。
      この部分
    • 選び方
      • 背景などになる色なので、白や薄い(明度が高い)色が扱いやすいと思います。
      発光しすぎな色は目が痛い 明度が低いと暗くなる
    • 選び方
      • 無彩色もしくはメインカラーの明度を上げた色をベースカラーにしてしまうのが早いと思います。
      明度の高い無彩色・濁色 メインカラーの明度を上げた色 白 グレー 薄い茶色 メインカラー メインカラー メインカラー ベースカラー ベースカラー ベースカラー
    • アクセントカラーを選ぶ
      • 少ない色面でアクセントを出すカラーです。
      この部分
    • 選び方
      • メインカラーから離れた色相にすると鮮やかになります。
    • 実際にやってみよう
      • メインカラー青の場合
      メインカラー ベースカラー アクセントカラー メイン アクセント
    • 実際にやってみよう ポカリスエット web サイト http://pocarisweat.jp/ ライフカード web サイト http://www.lifecard.co.jp/ VISA  ロゴタイプ
    • 実際にやってみよう
      • メインカラー緑の場合
      メインカラー ベースカラー アクセントカラー メイン アクセント
    • 実際にやってみよう modx web サイト http://modx.com/ デザイン表札 .com 表札デザイン http://www.designhyousatsu.com/style.html
    • 4色目以降について
      • あくまでベースが3色なのであって、きっちり3色では色が足りなくなると思います。
      http://free-photo.gatag.net/2011/03/13/170000.html Photo by Tambako the Jaguar
    • カラーの分割
      • カラーを「分割」するという考え方があります。
      メインカラーの分割 アクセントカラーの分割 分割 分割
    • 分割の仕方
      • 分割するのはいいとして、何色を足せばいいわけ?
      「 色相 」が同じで「 トーン 」が違う色 「 トーン 」が同じで「 色相 」が違う色 もしくは
    • トーンとは
      • 明度と彩度の複合概念。
      • 同じ色相でも明暗・強弱などの違いがあり、それをトーンと言います。
      彩度 明度 ※ 図は日本色研 web サイトより転載 http://www.sikiken.co.jp/pccs/pccs04.html
    • カラー分割の例
      • 「色相」が同じで違う「トーン」の色
      Cacoo web サイト https://cacoo.com/ この部分
    • カラー分割の例
      • 「トーン」が同じで違う「色相」の色をさらに分割
      WAON web サイト http://www.waon.net/ この部分
    • 色面の比率に注意
      • 色を追加したときに、メインカラーの比率、アクセントカラーの比率が増えすぎるとバランスが崩れてしまいます。
    • 最後に
    • 色はこれが全てじゃない
      • 今回お話したのはあくまで一手法です。
      • 「色の比率」や「色相の距離」、「トーン」などを意識してデザインを見てみると、いろんなが配色方法が発見できるかもしれません。
    • ありがとうございました! Photo by sueety