Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
Submit search
EN
Uploaded by
webcampusschoo
102,660 views
Webデザインのための配色セオリー
schoo WEB-campus http://schoo.jp/class/236
Business
◦
Read more
67
Save
Share
Embed
Embed presentation
1
/ 71
2
/ 71
3
/ 71
4
/ 71
5
/ 71
6
/ 71
7
/ 71
8
/ 71
9
/ 71
10
/ 71
11
/ 71
12
/ 71
13
/ 71
14
/ 71
15
/ 71
16
/ 71
17
/ 71
18
/ 71
19
/ 71
20
/ 71
21
/ 71
22
/ 71
23
/ 71
24
/ 71
25
/ 71
26
/ 71
27
/ 71
28
/ 71
29
/ 71
30
/ 71
31
/ 71
32
/ 71
33
/ 71
34
/ 71
35
/ 71
36
/ 71
37
/ 71
38
/ 71
39
/ 71
40
/ 71
41
/ 71
42
/ 71
43
/ 71
44
/ 71
45
/ 71
46
/ 71
47
/ 71
48
/ 71
49
/ 71
50
/ 71
51
/ 71
52
/ 71
53
/ 71
54
/ 71
55
/ 71
56
/ 71
57
/ 71
58
/ 71
59
/ 71
60
/ 71
61
/ 71
62
/ 71
63
/ 71
64
/ 71
65
/ 71
66
/ 71
67
/ 71
68
/ 71
69
/ 71
70
/ 71
71
/ 71
More Related Content
KEY
ノンデザイナーのための配色理論
by
tsukasa obara
PPT
色彩センスのいらない配色講座
by
Mariko Yamaguchi
PDF
理詰めスライド(色彩編)
by
Awoi Ebinuma
PPSX
Unidad 3 el color
by
Ilion Creativos │ Tu Pyme Digital
PDF
10,000DAUまで 成長させたグロースハック事例
by
Toshiki Chiba
PPT
Tipografia
by
Tania Gómez
PPTX
Pantone
by
Maria Gonzalez
PDF
Trabajo william morris. veronica sanchez riquelme
by
Onempresas
ノンデザイナーのための配色理論
by
tsukasa obara
色彩センスのいらない配色講座
by
Mariko Yamaguchi
理詰めスライド(色彩編)
by
Awoi Ebinuma
Unidad 3 el color
by
Ilion Creativos │ Tu Pyme Digital
10,000DAUまで 成長させたグロースハック事例
by
Toshiki Chiba
Tipografia
by
Tania Gómez
Pantone
by
Maria Gonzalez
Trabajo william morris. veronica sanchez riquelme
by
Onempresas
Similar to Webデザインのための配色セオリー
PDF
色彩学入門
by
ueda247
PDF
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
by
schoowebcampus
PDF
ソーシャルゲームデザイン配色編2
by
Yusuke Hashimoto
KEY
とある色の決め方
by
Yumi uniq Ishizaki
PDF
デザイナー未満のためのFireworksで作るWebバナー広告のポイント
by
Mori Kazue
PPTX
色のお話
by
tomo__tn
PDF
ウェブにおける配色のデザイン
by
恵子 牧
PDF
Adobe Fireworks CS6 使いこなしテクニック
by
Mori Kazue
PDF
【Schoo web campus】webデザインの基礎 1限目
by
schoowebcampus
PDF
心を惹きつけるウェブ配色デザイン講座
by
Color on
PDF
【サイト運営初心者向け】心を惹きつけるサイトカラーデザイン講座
by
Color on
PDF
デザインに正解はないけれど
by
ken pos
KEY
Random 110828031841-phpapp02
by
Tsuyoshi Nakamura
PDF
1019 design point
by
Yuko Taniguchi
PDF
20180425 GOJAS Meetup Spring Special - KotomiTanaka
by
Kotomi Tanaka
PDF
デベロッパーも 知ってると便利 デザインの基本
by
inaba178
PDF
知っておきたい配色に関する掟とコツ 先生:大里 浩二
by
schoowebcampus
PDF
配色を楽にするコミュニケーション
by
Kunio Sakamoto
PPTX
色で伝えるイメージ
by
yumi_chappy
PDF
Lp14 komori
by
masaaki komori
色彩学入門
by
ueda247
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
by
schoowebcampus
ソーシャルゲームデザイン配色編2
by
Yusuke Hashimoto
とある色の決め方
by
Yumi uniq Ishizaki
デザイナー未満のためのFireworksで作るWebバナー広告のポイント
by
Mori Kazue
色のお話
by
tomo__tn
ウェブにおける配色のデザイン
by
恵子 牧
Adobe Fireworks CS6 使いこなしテクニック
by
Mori Kazue
【Schoo web campus】webデザインの基礎 1限目
by
schoowebcampus
心を惹きつけるウェブ配色デザイン講座
by
Color on
【サイト運営初心者向け】心を惹きつけるサイトカラーデザイン講座
by
Color on
デザインに正解はないけれど
by
ken pos
Random 110828031841-phpapp02
by
Tsuyoshi Nakamura
1019 design point
by
Yuko Taniguchi
20180425 GOJAS Meetup Spring Special - KotomiTanaka
by
Kotomi Tanaka
デベロッパーも 知ってると便利 デザインの基本
by
inaba178
知っておきたい配色に関する掟とコツ 先生:大里 浩二
by
schoowebcampus
配色を楽にするコミュニケーション
by
Kunio Sakamoto
色で伝えるイメージ
by
yumi_chappy
Lp14 komori
by
masaaki komori
More from webcampusschoo
PDF
デザイナー・コーダーのための黒い画面入門
by
webcampusschoo
PDF
schoo WEB-campus ホームルーム12月
by
webcampusschoo
PDF
ホームルーム12月_2
by
webcampusschoo
PDF
表現別、PhotoshopとIllustratorの使い
by
webcampusschoo
PDF
再放送キャンペーン1225
by
webcampusschoo
PDF
1119 高倉さま fixfix
by
webcampusschoo
PDF
再放送キャンペーン1228
by
webcampusschoo
PDF
再放送キャンペーン 123
by
webcampusschoo
PDF
再放送キャンペーン 1231
by
webcampusschoo
PDF
Webサイトのライブデザイン&コーディング実演授業!
by
webcampusschoo
PDF
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
by
webcampusschoo
PDF
再放送キャンペーン0103
by
webcampusschoo
PDF
これからはじめるWebプロジェクトマネジメント
by
webcampusschoo
PDF
再放送キャンペーン1224
by
webcampusschoo
PDF
1226
by
webcampusschoo
PDF
再放送キャンペーン 1229
by
webcampusschoo
PDF
株式会社LIGを事例に学ぶ、実践的アクセス解析
by
webcampusschoo
PDF
1226
by
webcampusschoo
PDF
1223 再放送
by
webcampusschoo
PDF
再放送キャンペーン1227
by
webcampusschoo
デザイナー・コーダーのための黒い画面入門
by
webcampusschoo
schoo WEB-campus ホームルーム12月
by
webcampusschoo
ホームルーム12月_2
by
webcampusschoo
表現別、PhotoshopとIllustratorの使い
by
webcampusschoo
再放送キャンペーン1225
by
webcampusschoo
1119 高倉さま fixfix
by
webcampusschoo
再放送キャンペーン1228
by
webcampusschoo
再放送キャンペーン 123
by
webcampusschoo
再放送キャンペーン 1231
by
webcampusschoo
Webサイトのライブデザイン&コーディング実演授業!
by
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
by
webcampusschoo
再放送キャンペーン0103
by
webcampusschoo
これからはじめるWebプロジェクトマネジメント
by
webcampusschoo
再放送キャンペーン1224
by
webcampusschoo
1226
by
webcampusschoo
再放送キャンペーン 1229
by
webcampusschoo
株式会社LIGを事例に学ぶ、実践的アクセス解析
by
webcampusschoo
1226
by
webcampusschoo
1223 再放送
by
webcampusschoo
再放送キャンペーン1227
by
webcampusschoo
Recently uploaded
PDF
【ハレとケ】 ロボットプログラミング教室:ハレとケでロボットを一緒に学びませんか?
by
nogu66s
PDF
製造設備の突発停止の実態と対策 調査レポート_MENTENA.pdf<クラウド設備管理システムMENTENA>
by
YACHIYO Solutions Co., Ltd.
PDF
株式会社LET採用スライドjjjjjjjjjjjjjjjjjjjjjjjjjjj
by
hmatsuoka1
PDF
導入後の費用対効果の実例_MENTENA.pdf<クラウド設備管理システムMENTENA>
by
YACHIYO Solutions Co., Ltd.
PDF
2511_ インパクトレポート会社概要_雨風太陽v0.4
by
AmeKazeTaiyo
PDF
中途採用資料 株式会社LET採用情報資料 let.inc (1).pdf
by
hmatsuoka1
PDF
電気自動車用ケーブルアセンブリ、グローバルトップ20企業のランキングと市場シェア.pdf
by
jyuzou suzuya
PDF
【サイボウズ株式会社】会社説明資料2026(※2025年11月に公開しています)
by
Cybozu, Inc.
PPTX
2511_ インパクトレポート会社概要_雨風太陽
by
AmeKazeTaiyo
PDF
都市鉄道交通用直流主電源供給システム、グローバルトップ13企業のランキングと市場シェア.pdf
by
jyuzou suzuya
【ハレとケ】 ロボットプログラミング教室:ハレとケでロボットを一緒に学びませんか?
by
nogu66s
製造設備の突発停止の実態と対策 調査レポート_MENTENA.pdf<クラウド設備管理システムMENTENA>
by
YACHIYO Solutions Co., Ltd.
株式会社LET採用スライドjjjjjjjjjjjjjjjjjjjjjjjjjjj
by
hmatsuoka1
導入後の費用対効果の実例_MENTENA.pdf<クラウド設備管理システムMENTENA>
by
YACHIYO Solutions Co., Ltd.
2511_ インパクトレポート会社概要_雨風太陽v0.4
by
AmeKazeTaiyo
中途採用資料 株式会社LET採用情報資料 let.inc (1).pdf
by
hmatsuoka1
電気自動車用ケーブルアセンブリ、グローバルトップ20企業のランキングと市場シェア.pdf
by
jyuzou suzuya
【サイボウズ株式会社】会社説明資料2026(※2025年11月に公開しています)
by
Cybozu, Inc.
2511_ インパクトレポート会社概要_雨風太陽
by
AmeKazeTaiyo
都市鉄道交通用直流主電源供給システム、グローバルトップ13企業のランキングと市場シェア.pdf
by
jyuzou suzuya
Webデザインのための配色セオリー
1.
Webデザイナーのための 配色セオリー 伊達千代 2013/10/4 13年10月4日金曜日
2.
自己紹介 伊達千代(だてちよ) グラフィックデザイナー/ライター 電子製品メーカーデザイン室勤務を経て独立 株式会社TART DESIGN OFFICE代表 13年10月4日金曜日
3.
配色のセオリーとは 13年10月4日金曜日
4.
問題1 この色を人に伝えたいとき、 どの表現を選びますか? 下から選んでください。 1. 空気の澄んだ田舎で 見る夕焼けの赤 2. 鮮やかで人目を惹き、 情熱を感じさせる赤 3.
#F44053または R:249/G:89/B:101 4. やや橙よりの赤 彩度/高、明度/低め 13年10月4日金曜日
5.
配色とは 無限とも言える「色」の中から「色」を探し出す作業 13年10月4日金曜日
6.
配色で多い問題 センスが悪いといい配色はできない? 色を選ぶ判断基準はどこにある? 他の作業者やクライアントとどうやって イメージを共有する? セオリーを知って 効果的で、効率的で、自信の持てる配色を! 13年10月4日金曜日
7.
配色のセオリーとは 色の持つ、あるいは色と色の組み合わせ によって起きる普遍的な「効果」 色を選ぶ際の基準(効率) 配色を裏付ける言葉と説得力 (プロとしての責任を果たす) 13年10月4日金曜日
8.
プロとして配色に責任を持つこと なぜその「色」なのか説明できる その色によってどんな効果が生まれるか を計算し、配色による利益をもたらす 効率のよい配色を行う 裏付け・調査(確認作業)をする 13年10月4日金曜日
9.
授業概要 正確な色の表現 色の属性/色の名前 色の持つ働きと機能 色の持つイメージ/誰もが見やすい配色/調和のとれ た配色/強調のための配色 配色の実践 配色トレーニング/便利なツール/イメージマップ 13年10月4日金曜日
10.
正確な色の表現 13年10月4日金曜日
11.
色を表す言葉(属性・色相) 色相 色相が近い・遠い (離れている) 補色 13年10月4日金曜日
12.
色を表す言葉(属性・明度) 明度 明度が高い明度が低い 明るい暗い 13年10月4日金曜日
13.
色を表す言葉(属性・彩度) 彩度 彩度が高い彩度が低い 鮮やか鈍い 純色無彩色 13年10月4日金曜日
14.
色を表す言葉(属性・彩度と明度) 純色 無彩色 高 明度 低 低 彩度 高 13年10月4日金曜日
15.
A B C D 色を三属性で表してみよう 13年10月4日金曜日
16.
13年10月4日金曜日
17.
色の名前の例(名称・自然・文化) とき(鴇)色 つつじ(躑躅)色 紅海老茶 こうじ(柑子)色 中黄(ちゅうき) 若竹色 白群(びゃくぐん) 露草色 しょうぶ(菖蒲)色 チャイニーズレッド シーグリーン ナイルブルー ウイスタリア ローズレッド パールグレイ 13年10月4日金曜日
18.
色の名前を知る http://www.colordic.org/w/ 13年10月4日金曜日
19.
問題2 色と名前との組み合わせを 正しくつないでください 1. 鶸色(ひわいろ) 2. 金茶(きんちゃ) 3.
煤竹色(すすたけいろ) A B C 13年10月4日金曜日
20.
色の働きと機能 13年10月4日金曜日
21.
色の働きと機能 気持ちが前向きになる 暖かく感じる 食欲を増進させる 集中力を高める 血圧を下げる 食欲を減退させる 疲れをいやす 鎮静作用、緊張緩和作用 穏やかな気持ちになる 集中力を発揮させる 記憶力を高める 注意を促す 清潔な印象 軽く見える 純粋さを感じる 気持ちを引き締める 暗い気持ちになる 重く見える 赤 青 緑 黄 白 黒 13年10月4日金曜日
22.
色の働きと機能 13年10月4日金曜日
23.
色の働きと機能 13年10月4日金曜日
24.
色の働きと機能 R BG YR G RP B Y GY P PB 暖色 寒色 13年10月4日金曜日
25.
問題3 どちらの色の組み合わせの方が見やすいですか? また、その理由も答えてください A B 13年10月4日金曜日
26.
視認性 13年10月4日金曜日
27.
視認性 http://www.verticalgardendesign.com/ 13年10月4日金曜日
28.
視認性 配色を考える上でもっとも重要 視認性を決めるのは「明度差」 強調したい順に明度差がつくように配色 をする ユニバーサルの観点においても重要 13年10月4日金曜日
29.
誘目性 13年10月4日金曜日
30.
誘目性 http://www.sullivannyc.com/ 13年10月4日金曜日
31.
誘目性 誘目性の高い色は、赤∼黄色の彩度の高 い色 色を組み合わせる際に明度差をつけるこ とで、より誘目性は高まる 13年10月4日金曜日
32.
進出色・後退色 http://www.established1986.com/#/Home 13年10月4日金曜日
33.
進出色・後退色 http://www.moozedesign.com/ 13年10月4日金曜日
34.
進出色・後退色 寒色系の色や彩度・明度の低い色は奥に 下がって見え、暖色系の色や彩度・明度 の高い色は手前に飛び出して見える 目立たせたい部分と、他との差を付けた い場合に有効なセオリー 13年10月4日金曜日
35.
配色の手順 イメージ 調和メリハリ 13年10月4日金曜日
36.
調和のとれた配色とは 色相/彩度を える 色相をバランスよく組み合わせる トーンを える 無彩色の活用 色数を絞る 13年10月4日金曜日
37.
色相/彩度の統一 http://www.hyundai-veloster.eu/ 13年10月4日金曜日
38.
色相配色 13年10月4日金曜日
39.
色相配色 http://www.sturdy-style.com/ 13年10月4日金曜日
40.
トーン配色 ビビッドストロング ダルグレイッシュ ブライト ライト ペール ライト グレイッシュ ベリーペール ディープ ダーク ダーク グレイッシュ http://www.sikiken.co.jp/pccs/pccs04.html 参考:日本色研事業株式会社 13年10月4日金曜日
41.
トーン配色 http://www.rolanddg.co.jp/metallicworld/ 13年10月4日金曜日
42.
無彩色の活用 13年10月4日金曜日
43.
無彩色の活用 http://www.apple.com/jp/ 13年10月4日金曜日
44.
色数をしぼる http://www.kazepro.com/ 13年10月4日金曜日
45.
問題4 見本のデザインで調和のとれた配色の ために使われている手法は? 13年10月4日金曜日
46.
配色の手順 イメージ 調和メリハリ 13年10月4日金曜日
47.
UIと配色 http://www.apple.com/jp/ 13年10月4日金曜日
48.
カラーイメージの定着 http://www.daichi.or.jp/ 13年10月4日金曜日
49.
グローバルカラー・パーソナルカラー 配色には、その「場」にふさわしい色の 使い方がある よりグローバルな観点が求められるもの (公共性・アクセシビリティ・UI)にと っての「色」は、優先度が低い 「色」は、パーソナルなもの 13年10月4日金曜日
50.
強調のためのセオリー 対比 13年10月4日金曜日
51.
明度対比 13年10月4日金曜日
52.
色相対比 http://www.windowsphone.com/en-us 13年10月4日金曜日
53.
彩度対比 http://craftingtype.com/ 13年10月4日金曜日
54.
面積対比 13年10月4日金曜日
55.
問題5 見本のデザインで強調のため に使われている配色手法は? 13年10月4日金曜日
56.
配色の実践 13年10月4日金曜日
57.
配色の手順 イメージ 調和メリハリ 13年10月4日金曜日
58.
配色のトレーニングとは? 13年10月4日金曜日
59.
イメージの言語化 例:スイーツのような甘い配色 最近流行の、カラフルに着色された カップケーキのような配色 甘いものは快楽でもあり、背徳的 でもある。どこかに辛味も? 13年10月4日金曜日
60.
イメージの言語化 13年10月4日金曜日
61.
イメージの言語化 13年10月4日金曜日
62.
イメージスケール あどけない 子供らしい ユーモラスな たのしい ポップな カジュアルな にぎやかな 強烈な 行動的な エネルギッシュな たくましい 野性的な 豪華な ぜいたくな 魅惑的な 温厚な くつろいだ 家庭的な のんびりした 甘美な ロマンチックな 清麗な うるおいのある 新鮮な 洗練された スマートな 知的な 風流な エレガントな 気品のある 女らしい 清潔な さわやかな 青春の 若々しい 明快な スピーディな モダンな 合理的な 緻密な おごそかな 風格のある 本格的な 貫録のある 伝統的な 味わい深い ダンディな 真面目な 優雅な やすらいだ あどけない 子供らしい ユーモラスな たのしい ポップな カジュアルな にぎやかな 温厚な くつろいだ 家庭的な のんびりした 甘美な ロマンチックな 清麗な うるおいのある 新鮮な 洗練された スマートな エレガントな 気品のある 女らしい 清潔な さわやかな 青春の 若々しい 明快な 優雅な やすらいだ http://www.ncd-ri.co.jp/ 参考:日本カラーデザイン研究所 13年10月4日金曜日
63.
問題6 見本のデザインの配色イメージを 自分なりに「言葉」で表してください http://www.benitos-hat.com/ 13年10月4日金曜日
64.
イメージマップ 13年10月4日金曜日
65.
イメージマップ 13年10月4日金曜日
66.
Kuler https://kuler.adobe.com/ 13年10月4日金曜日
67.
まとめ 「色」を言葉で表すことの重要性 「説得力」のための配色セオリー イメージの具体化、調和と強調の循環 配色スキルは磨くほど高くなる 13年10月4日金曜日
68.
プロとして配色に責任を持つ なぜその「色」なのか(理由) その色によってどんな効果が生まれてい るのか(メリット) プロらしさ(説得力) 裏付け(調査) 13年10月4日金曜日
69.
任意のWebサイト(紙でもディスプレイ などでもOK)の色のイメージを言語化 課題/配色の分析をしてみよう 13年10月4日金曜日
70.
質疑応答 13年10月4日金曜日
71.
END 13年10月4日金曜日