Movatterモバイル変換


[0]ホーム

URL:


Uploaded bywebcampusschoo
102,638 views

Webデザインのための配色セオリー

schoo WEB-campushttp://schoo.jp/class/236

Webデザイナーのための配色セオリー伊達千代2013/10/413年10月4日金曜日
自己紹介伊達千代(だてちよ)グラフィックデザイナー/ライター電子製品メーカーデザイン室勤務を経て独立株式会社TART DESIGN OFFICE代表13年10月4日金曜日
配色のセオリーとは13年10月4日金曜日
問題1この色を人に伝えたいとき、どの表現を選びますか?下から選んでください。1. 空気の澄んだ田舎で見る夕焼けの赤2. 鮮やかで人目を惹き、情熱を感じさせる赤3. #F44053またはR:249/G:89/B:1014. やや橙よりの赤彩度/高、明度/低め13年10月4日金曜日
配色とは無限とも言える「色」の中から「色」を探し出す作業13年10月4日金曜日
配色で多い問題センスが悪いといい配色はできない?色を選ぶ判断基準はどこにある?他の作業者やクライアントとどうやってイメージを共有する?セオリーを知って効果的で、効率的で、自信の持てる配色を!13年10月4日金曜日
配色のセオリーとは色の持つ、あるいは色と色の組み合わせによって起きる普遍的な「効果」色を選ぶ際の基準(効率)配色を裏付ける言葉と説得力(プロとしての責任を果たす)13年10月4日金曜日
プロとして配色に責任を持つことなぜその「色」なのか説明できるその色によってどんな効果が生まれるかを計算し、配色による利益をもたらす効率のよい配色を行う裏付け・調査(確認作業)をする13年10月4日金曜日
授業概要正確な色の表現色の属性/色の名前色の持つ働きと機能色の持つイメージ/誰もが見やすい配色/調和のとれた配色/強調のための配色配色の実践配色トレーニング/便利なツール/イメージマップ13年10月4日金曜日
正確な色の表現13年10月4日金曜日
色を表す言葉(属性・色相)色相色相が近い・遠い(離れている)補色13年10月4日金曜日
色を表す言葉(属性・明度)明度明度が高い明度が低い明るい暗い13年10月4日金曜日
色を表す言葉(属性・彩度)彩度彩度が高い彩度が低い鮮やか鈍い純色無彩色13年10月4日金曜日
色を表す言葉(属性・彩度と明度)純色無彩色高明度低低 彩度 高13年10月4日金曜日
A BC D色を三属性で表してみよう13年10月4日金曜日
13年10月4日金曜日
色の名前の例(名称・自然・文化)とき(鴇)色つつじ(躑躅)色紅海老茶こうじ(柑子)色中黄(ちゅうき)若竹色白群(びゃくぐん)露草色しょうぶ(菖蒲)色チャイニーズレッドシーグリーンナイルブルーウイスタリアローズレッドパールグレイ13年10月4日金曜日
色の名前を知るhttp://www.colordic.org/w/13年10月4日金曜日
問題2色と名前との組み合わせを正しくつないでください1. 鶸色(ひわいろ)2. 金茶(きんちゃ)3. 煤竹色(すすたけいろ)ABC13年10月4日金曜日
色の働きと機能13年10月4日金曜日
色の働きと機能気持ちが前向きになる暖かく感じる食欲を増進させる集中力を高める血圧を下げる食欲を減退させる疲れをいやす鎮静作用、緊張緩和作用穏やかな気持ちになる集中力を発揮させる記憶力を高める注意を促す清潔な印象軽く見える純粋さを感じる気持ちを引き締める暗い気持ちになる重く見える赤青緑黄白黒13年10月4日金曜日
色の働きと機能13年10月4日金曜日
色の働きと機能13年10月4日金曜日
色の働きと機能RBGYRGRPBYGYPPB暖色寒色13年10月4日金曜日
問題3どちらの色の組み合わせの方が見やすいですか?また、その理由も答えてくださいA           B13年10月4日金曜日
視認性13年10月4日金曜日
視認性http://www.verticalgardendesign.com/13年10月4日金曜日
視認性配色を考える上でもっとも重要視認性を決めるのは「明度差」強調したい順に明度差がつくように配色をするユニバーサルの観点においても重要13年10月4日金曜日
誘目性13年10月4日金曜日
誘目性http://www.sullivannyc.com/13年10月4日金曜日
誘目性誘目性の高い色は、赤∼黄色の彩度の高い色色を組み合わせる際に明度差をつけることで、より誘目性は高まる13年10月4日金曜日
進出色・後退色http://www.established1986.com/#/Home13年10月4日金曜日
進出色・後退色http://www.moozedesign.com/13年10月4日金曜日
進出色・後退色寒色系の色や彩度・明度の低い色は奥に下がって見え、暖色系の色や彩度・明度の高い色は手前に飛び出して見える目立たせたい部分と、他との差を付けたい場合に有効なセオリー13年10月4日金曜日
配色の手順イメージ調和メリハリ13年10月4日金曜日
調和のとれた配色とは色相/彩度を える色相をバランスよく組み合わせるトーンを える無彩色の活用色数を絞る13年10月4日金曜日
色相/彩度の統一http://www.hyundai-veloster.eu/13年10月4日金曜日
色相配色13年10月4日金曜日
色相配色http://www.sturdy-style.com/13年10月4日金曜日
トーン配色ビビッドストロングダルグレイッシュブライトライトペールライトグレイッシュベリーペールディープダークダークグレイッシュhttp://www.sikiken.co.jp/pccs/pccs04.html参考:日本色研事業株式会社13年10月4日金曜日
トーン配色http://www.rolanddg.co.jp/metallicworld/13年10月4日金曜日
無彩色の活用13年10月4日金曜日
無彩色の活用http://www.apple.com/jp/13年10月4日金曜日
色数をしぼるhttp://www.kazepro.com/13年10月4日金曜日
問題4見本のデザインで調和のとれた配色のために使われている手法は?13年10月4日金曜日
配色の手順イメージ調和メリハリ13年10月4日金曜日
UIと配色http://www.apple.com/jp/13年10月4日金曜日
カラーイメージの定着http://www.daichi.or.jp/13年10月4日金曜日
グローバルカラー・パーソナルカラー配色には、その「場」にふさわしい色の使い方があるよりグローバルな観点が求められるもの(公共性・アクセシビリティ・UI)にとっての「色」は、優先度が低い「色」は、パーソナルなもの13年10月4日金曜日
強調のためのセオリー対比13年10月4日金曜日
明度対比13年10月4日金曜日
色相対比http://www.windowsphone.com/en-us13年10月4日金曜日
彩度対比http://craftingtype.com/13年10月4日金曜日
面積対比13年10月4日金曜日
問題5見本のデザインで強調のために使われている配色手法は?13年10月4日金曜日
配色の実践13年10月4日金曜日
配色の手順イメージ調和メリハリ13年10月4日金曜日
配色のトレーニングとは?13年10月4日金曜日
イメージの言語化例:スイーツのような甘い配色最近流行の、カラフルに着色されたカップケーキのような配色甘いものは快楽でもあり、背徳的でもある。どこかに辛味も?13年10月4日金曜日
イメージの言語化13年10月4日金曜日
イメージの言語化13年10月4日金曜日
イメージスケールあどけない子供らしいユーモラスなたのしいポップなカジュアルなにぎやかな強烈な行動的なエネルギッシュなたくましい野性的な豪華なぜいたくな魅惑的な温厚なくつろいだ家庭的なのんびりした甘美な ロマンチックな清麗なうるおいのある新鮮な洗練されたスマートな知的な風流なエレガントな気品のある女らしい清潔なさわやかな青春の若々しい明快なスピーディなモダンな合理的な緻密なおごそかな風格のある本格的な貫録のある伝統的な味わい深いダンディな真面目な優雅なやすらいだあどけない子供らしいユーモラスなたのしいポップなカジュアルなにぎやかな温厚なくつろいだ家庭的なのんびりした甘美な ロマンチックな清麗なうるおいのある新鮮な洗練されたスマートなエレガントな気品のある女らしい清潔なさわやかな青春の若々しい明快な優雅なやすらいだhttp://www.ncd-ri.co.jp/参考:日本カラーデザイン研究所13年10月4日金曜日
問題6見本のデザインの配色イメージを自分なりに「言葉」で表してくださいhttp://www.benitos-hat.com/13年10月4日金曜日
イメージマップ13年10月4日金曜日
イメージマップ13年10月4日金曜日
Kulerhttps://kuler.adobe.com/13年10月4日金曜日
まとめ「色」を言葉で表すことの重要性「説得力」のための配色セオリーイメージの具体化、調和と強調の循環配色スキルは磨くほど高くなる13年10月4日金曜日
プロとして配色に責任を持つなぜその「色」なのか(理由)その色によってどんな効果が生まれているのか(メリット)プロらしさ(説得力)裏付け(調査)13年10月4日金曜日
任意のWebサイト(紙でもディスプレイなどでもOK)の色のイメージを言語化課題/配色の分析をしてみよう13年10月4日金曜日
質疑応答13年10月4日金曜日
END13年10月4日金曜日

Recommended

KEY
ノンデザイナーのための配色理論
PPT
色彩センスのいらない配色講座
PPT
色で失敗しない為に 〜理論に基づく配色フロー〜
PPT
Anatolikoi laoi
PPTX
ελληνορωμαικός πολιτισμός
DOCX
ΑΡΧΑΙΑ ΕΛΛΗΝΙΚΑ
PDF
Ασκήσεις στα συνηρημένα ρήματα Β΄τάξης
PPTX
Κοινή Διακήρυξη Καθολικών-Ορθοδόξων (2006)
PPTX
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
PDF
DXとデザイン思考 -実践にみる、DX推進におけるデザインの有用性と可能性-
PPTX
Ελληνική λαϊκή μουσική
PDF
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
PDF
これからはじめるサービスデザイン
PDF
色彩学入門
PPT
ΑΡΕΙΟΣ ΠΟΤΗΡ - Harry Potter in ancient greek
PDF
θουκυδίδης κεφ 74_1-3
PDF
ΕΠΑΝΑΛΗΨΗ ΓΡΑΜΜΑΤΙΚΗΣ - ΑΡΧΑΙΑ ΕΛΛΗΝΙΚΑ
PDF
10,000DAUまで 成長させたグロースハック事例
PPTX
1.4 ΤΟ ΜΥΣΤΗΡΙΟ ΤΟΥ ΤΡΙΑΔΙΚΟΥ ΘΕΟΥ
ODP
Α ΓΥΜΝΑΣΙΟΥ, ΜΑΘΗΜΑ 19, ΤΟ ΔΗΜΟΚΡΑΤΙΚΟ ΠΟΛΙΤΕΥΜΑ ΣΤΑΘΕΡΟΠΟΙΕΙΤΑΙ - Ο ΠΕΡΙΚΛΗΣ
PDF
Υποτακτική έγκλιση στην Ενεργητική και Μέση Φωνή. Αρχαία Ελληνική Γλώσσα. Επα...
PPTX
Λογοτεχνία Α' Λυκείου
PPT
κυριακη προσευχη
 
PDF
ΜΕΛΛΟΝΤΑΣ ΚΑΙ ΑΟΡΙΣΤΟΣ ΕΝΡΙΝΟΛΗΚΤΩΝ ΚΑΙ ΥΓΡΟΛΗΚΤΩΝ ΡΗΜΑΤΩΝ
DOC
Εθνική ομοψυχία
PPTX
04. artisocレシピブック open streetmapから道路情報を取得しよう
PPT
Παρουσίαση του υλικού "Μαθαίνω για την Ευρωπαϊκή Ένωση"
PDF
UXデザイン概論 2019
PDF
デザインに正解はないけれど
PDF
配色を楽にするコミュニケーション

More Related Content

KEY
ノンデザイナーのための配色理論
PPT
色彩センスのいらない配色講座
PPT
色で失敗しない為に 〜理論に基づく配色フロー〜
PPT
Anatolikoi laoi
PPTX
ελληνορωμαικός πολιτισμός
DOCX
ΑΡΧΑΙΑ ΕΛΛΗΝΙΚΑ
PDF
Ασκήσεις στα συνηρημένα ρήματα Β΄τάξης
PPTX
Κοινή Διακήρυξη Καθολικών-Ορθοδόξων (2006)
ノンデザイナーのための配色理論
色彩センスのいらない配色講座
色で失敗しない為に 〜理論に基づく配色フロー〜
Anatolikoi laoi
ελληνορωμαικός πολιτισμός
ΑΡΧΑΙΑ ΕΛΛΗΝΙΚΑ
Ασκήσεις στα συνηρημένα ρήματα Β΄τάξης
Κοινή Διακήρυξη Καθολικών-Ορθοδόξων (2006)

What's hot

PPTX
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
PDF
DXとデザイン思考 -実践にみる、DX推進におけるデザインの有用性と可能性-
PPTX
Ελληνική λαϊκή μουσική
PDF
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
PDF
これからはじめるサービスデザイン
PDF
色彩学入門
PPT
ΑΡΕΙΟΣ ΠΟΤΗΡ - Harry Potter in ancient greek
PDF
θουκυδίδης κεφ 74_1-3
PDF
ΕΠΑΝΑΛΗΨΗ ΓΡΑΜΜΑΤΙΚΗΣ - ΑΡΧΑΙΑ ΕΛΛΗΝΙΚΑ
PDF
10,000DAUまで 成長させたグロースハック事例
PPTX
1.4 ΤΟ ΜΥΣΤΗΡΙΟ ΤΟΥ ΤΡΙΑΔΙΚΟΥ ΘΕΟΥ
ODP
Α ΓΥΜΝΑΣΙΟΥ, ΜΑΘΗΜΑ 19, ΤΟ ΔΗΜΟΚΡΑΤΙΚΟ ΠΟΛΙΤΕΥΜΑ ΣΤΑΘΕΡΟΠΟΙΕΙΤΑΙ - Ο ΠΕΡΙΚΛΗΣ
PDF
Υποτακτική έγκλιση στην Ενεργητική και Μέση Φωνή. Αρχαία Ελληνική Γλώσσα. Επα...
PPTX
Λογοτεχνία Α' Λυκείου
PPT
κυριακη προσευχη
 
PDF
ΜΕΛΛΟΝΤΑΣ ΚΑΙ ΑΟΡΙΣΤΟΣ ΕΝΡΙΝΟΛΗΚΤΩΝ ΚΑΙ ΥΓΡΟΛΗΚΤΩΝ ΡΗΜΑΤΩΝ
DOC
Εθνική ομοψυχία
PPTX
04. artisocレシピブック open streetmapから道路情報を取得しよう
PPT
Παρουσίαση του υλικού "Μαθαίνω για την Ευρωπαϊκή Ένωση"
PDF
UXデザイン概論 2019
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
DXとデザイン思考 -実践にみる、DX推進におけるデザインの有用性と可能性-
Ελληνική λαϊκή μουσική
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
これからはじめるサービスデザイン
色彩学入門
ΑΡΕΙΟΣ ΠΟΤΗΡ - Harry Potter in ancient greek
θουκυδίδης κεφ 74_1-3
ΕΠΑΝΑΛΗΨΗ ΓΡΑΜΜΑΤΙΚΗΣ - ΑΡΧΑΙΑ ΕΛΛΗΝΙΚΑ
10,000DAUまで 成長させたグロースハック事例
1.4 ΤΟ ΜΥΣΤΗΡΙΟ ΤΟΥ ΤΡΙΑΔΙΚΟΥ ΘΕΟΥ
Α ΓΥΜΝΑΣΙΟΥ, ΜΑΘΗΜΑ 19, ΤΟ ΔΗΜΟΚΡΑΤΙΚΟ ΠΟΛΙΤΕΥΜΑ ΣΤΑΘΕΡΟΠΟΙΕΙΤΑΙ - Ο ΠΕΡΙΚΛΗΣ
Υποτακτική έγκλιση στην Ενεργητική και Μέση Φωνή. Αρχαία Ελληνική Γλώσσα. Επα...
Λογοτεχνία Α' Λυκείου
κυριακη προσευχη
 
ΜΕΛΛΟΝΤΑΣ ΚΑΙ ΑΟΡΙΣΤΟΣ ΕΝΡΙΝΟΛΗΚΤΩΝ ΚΑΙ ΥΓΡΟΛΗΚΤΩΝ ΡΗΜΑΤΩΝ
Εθνική ομοψυχία
04. artisocレシピブック open streetmapから道路情報を取得しよう
Παρουσίαση του υλικού "Μαθαίνω για την Ευρωπαϊκή Ένωση"
UXデザイン概論 2019

Similar to Webデザインのための配色セオリー

PDF
デザインに正解はないけれど
PDF
配色を楽にするコミュニケーション
PDF
ソーシャルゲームデザイン配色編2
KEY
Random 110828031841-phpapp02
PDF
心を惹きつけるウェブ配色デザイン講座
PDF
知っておきたい配色に関する掟とコツ 先生:大里 浩二
PDF
1019 design point
PDF
【Schoo web campus】webデザインの基礎 1限目
PDF
Lp14 komori
PPTX
色のお話
PDF
デベロッパーも 知ってると便利 デザインの基本
KEY
とある色の決め方
PDF
【サイト運営初心者向け】心を惹きつけるサイトカラーデザイン講座
PDF
Adobe Fireworks CS6 使いこなしテクニック
PDF
20180425 GOJAS Meetup Spring Special - KotomiTanaka
PPTX
色で伝えるイメージ
PDF
ウェブにおける配色のデザイン
PDF
デザイナー未満のためのFireworksで作るWebバナー広告のポイント
PDF
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
デザインに正解はないけれど
配色を楽にするコミュニケーション
ソーシャルゲームデザイン配色編2
Random 110828031841-phpapp02
心を惹きつけるウェブ配色デザイン講座
知っておきたい配色に関する掟とコツ 先生:大里 浩二
1019 design point
【Schoo web campus】webデザインの基礎 1限目
Lp14 komori
色のお話
デベロッパーも 知ってると便利 デザインの基本
とある色の決め方
【サイト運営初心者向け】心を惹きつけるサイトカラーデザイン講座
Adobe Fireworks CS6 使いこなしテクニック
20180425 GOJAS Meetup Spring Special - KotomiTanaka
色で伝えるイメージ
ウェブにおける配色のデザイン
デザイナー未満のためのFireworksで作るWebバナー広告のポイント
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)

More from webcampusschoo

PDF
再放送キャンペーン0103
PDF
再放送キャンペーン 1231
PDF
再放送キャンペーン 123
PDF
再放送キャンペーン 1229
PDF
再放送キャンペーン1228
PDF
再放送キャンペーン1227
PDF
PDF
PDF
再放送キャンペーン1225
PDF
再放送キャンペーン1224
PDF
1223 再放送
PDF
Webサイトのライブデザイン&コーディング実演授業!
PDF
これからはじめるWebプロジェクトマネジメント
PDF
ホームルーム12月_2
PDF
schoo WEB-campus ホームルーム12月
PDF
デザイナー・コーダーのための黒い画面入門
PDF
表現別、PhotoshopとIllustratorの使い
PDF
1119 高倉さま fixfix
PDF
株式会社LIGを事例に学ぶ、実践的アクセス解析
PDF
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
再放送キャンペーン0103
再放送キャンペーン 1231
再放送キャンペーン 123
再放送キャンペーン 1229
再放送キャンペーン1228
再放送キャンペーン1227
再放送キャンペーン1225
再放送キャンペーン1224
1223 再放送
Webサイトのライブデザイン&コーディング実演授業!
これからはじめるWebプロジェクトマネジメント
ホームルーム12月_2
schoo WEB-campus ホームルーム12月
デザイナー・コーダーのための黒い画面入門
表現別、PhotoshopとIllustratorの使い
1119 高倉さま fixfix
株式会社LIGを事例に学ぶ、実践的アクセス解析
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ

Webデザインのための配色セオリー


[8]ページ先頭

©2009-2025 Movatter.jp