Submit Search
Upload
デザインに正解はないけれど
•
3 likes
•
1,386 views
K
ken pos
Follow
エンジニア向けに配色とか配置の基本についてまとめた資料になります.
Read less
Read more
Design
Report
Share
Report
Share
1 of 63
Download now
Download to read offline
Recommended
色彩学入門
色彩学入門
ueda247
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
理詰めスライド(色彩編)
理詰めスライド(色彩編)
Awoi Ebinuma
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
schoowebcampus
Webデザインのための配色セオリー
Webデザインのための配色セオリー
webcampusschoo
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
Recommended
色彩学入門
色彩学入門
ueda247
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
理詰めスライド(色彩編)
理詰めスライド(色彩編)
Awoi Ebinuma
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
schoowebcampus
Webデザインのための配色セオリー
Webデザインのための配色セオリー
webcampusschoo
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
Yuudai Tachibana
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
CGWORLD 2021 クリエイティブカンファレンス
CGWORLD 2021 クリエイティブカンファレンス
KLab Inc. Creative
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴
Yuudai Tachibana
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
Katsuhito Okada
はじめての欧文書体
はじめての欧文書体
Shohei Itoh
『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所
Tarumoto Tetsuya
ラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイント
Kairi Ishizuka
【GTMF2018TOKYO】ScriptableRenderPipelineでアプリに最適な描画をしよう
【GTMF2018TOKYO】ScriptableRenderPipelineでアプリに最適な描画をしよう
Unity Technologies Japan K.K.
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
VirtualTech Japan Inc./Begi.net Inc.
ビビッド・パワポ・オペーレーション Revision 2015
ビビッド・パワポ・オペーレーション Revision 2015
Masahito Zembutsu
超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方
MOCKS | Yuta Morishige
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
Yoshiki Hayama
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
Yoshiki Hayama
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
Yoshiki Hayama
プレゼンテーションの考え方20140628
プレゼンテーションの考え方20140628
Professional University of Information and Management for Innovation (情報経営イノベーション専門職大学)
第34回 WordBench神戸勉強会 デザイン教えて君 色のきほん
第34回 WordBench神戸勉強会 デザイン教えて君 色のきほん
Kimio Nakanishi
Random 110828031841-phpapp02
Random 110828031841-phpapp02
Tsuyoshi Nakamura
More Related Content
What's hot
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
Yuudai Tachibana
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
CGWORLD 2021 クリエイティブカンファレンス
CGWORLD 2021 クリエイティブカンファレンス
KLab Inc. Creative
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴
Yuudai Tachibana
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
Katsuhito Okada
はじめての欧文書体
はじめての欧文書体
Shohei Itoh
『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所
Tarumoto Tetsuya
ラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイント
Kairi Ishizuka
【GTMF2018TOKYO】ScriptableRenderPipelineでアプリに最適な描画をしよう
【GTMF2018TOKYO】ScriptableRenderPipelineでアプリに最適な描画をしよう
Unity Technologies Japan K.K.
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
VirtualTech Japan Inc./Begi.net Inc.
ビビッド・パワポ・オペーレーション Revision 2015
ビビッド・パワポ・オペーレーション Revision 2015
Masahito Zembutsu
超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方
MOCKS | Yuta Morishige
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
Yoshiki Hayama
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
Yoshiki Hayama
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
Yoshiki Hayama
プレゼンテーションの考え方20140628
プレゼンテーションの考え方20140628
Professional University of Information and Management for Innovation (情報経営イノベーション専門職大学)
What's hot
(20)
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
CGWORLD 2021 クリエイティブカンファレンス
CGWORLD 2021 クリエイティブカンファレンス
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
はじめての欧文書体
はじめての欧文書体
『マッピングエクスペリエンス』の 見所と勘所
『マッピングエクスペリエンス』の 見所と勘所
ラクしていい感じのスライドを作るための2つのポイント
ラクしていい感じのスライドを作るための2つのポイント
【GTMF2018TOKYO】ScriptableRenderPipelineでアプリに最適な描画をしよう
【GTMF2018TOKYO】ScriptableRenderPipelineでアプリに最適な描画をしよう
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
ビビッド・パワポ・オペーレーション Revision 2015
ビビッド・パワポ・オペーレーション Revision 2015
超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
プレゼンテーションの考え方20140628
プレゼンテーションの考え方20140628
Similar to デザインに正解はないけれど
第34回 WordBench神戸勉強会 デザイン教えて君 色のきほん
第34回 WordBench神戸勉強会 デザイン教えて君 色のきほん
Kimio Nakanishi
Random 110828031841-phpapp02
Random 110828031841-phpapp02
Tsuyoshi Nakamura
20171107 cwt kotomi_tanaka
20171107 cwt kotomi_tanaka
Kotomi Tanaka
デザイナー未満のためのFireworksで作るWebバナー広告のポイント
デザイナー未満のためのFireworksで作るWebバナー広告のポイント
Mori Kazue
自分ブランドをアピールする!ロゴの作り方 セミナー資料
自分ブランドをアピールする!ロゴの作り方 セミナー資料
尚 鈴木
Color Science for Games(JP)
Color Science for Games(JP)
Hajime Uchimura
日常の課題を解決するアイデアソン Ver2 web公開用
日常の課題を解決するアイデアソン Ver2 web公開用
Katsuhiro Suenami
Similar to デザインに正解はないけれど
(7)
第34回 WordBench神戸勉強会 デザイン教えて君 色のきほん
第34回 WordBench神戸勉強会 デザイン教えて君 色のきほん
Random 110828031841-phpapp02
Random 110828031841-phpapp02
20171107 cwt kotomi_tanaka
20171107 cwt kotomi_tanaka
デザイナー未満のためのFireworksで作るWebバナー広告のポイント
デザイナー未満のためのFireworksで作るWebバナー広告のポイント
自分ブランドをアピールする!ロゴの作り方 セミナー資料
自分ブランドをアピールする!ロゴの作り方 セミナー資料
Color Science for Games(JP)
Color Science for Games(JP)
日常の課題を解決するアイデアソン Ver2 web公開用
日常の課題を解決するアイデアソン Ver2 web公開用
デザインに正解はないけれど
1.
デザインについてあれこれ 発表者 ケンポス 開発者がアプリケーションを作る際知っておきたい「色」と「空間」
2.
サブタイトルがしれっと変わってますね^^ 細かいことは置いといて進めましょうね COPYRIGHT BAD UIから色々考えたかったのですが,ちょっ とそこまで行くのに前提知識といいますか結構な 量があったので残念です…
3.
LTの進め方 • スライドは全部で60枚ぐらいあります • でもほとんど図なのでそんなにかからないと思いますのでお付き合い ください •
疑問に思ったり感じたりしたことがあれば適当に話をぶった切って聞 いてください • とりあえず考えて答えるなりなんかします • かなり曖昧な部分もありますが各々の経験と常識に従って補完してく ださい COPYRIGHT 3
4.
本日のガイドライン • はじめに • 目的 •
配置に関するデザイン心理学 – ゲシュタルト心理学 • 色に関するデザイン – 色選びにやりがちな失敗 – 色について – 色を決める方法 – 人間が思う色のイメージ – 色の組み合わせ • おわりに 2015/10/4 4
5.
デザインとは何か? COPYRIGHT 5 皆さんは、デザインにどんな印象をもっていますか?
6.
Google先生さんの答え COPYRIGHT 6
7.
はじめに • デザインとは(辞書より) • 1
建築・工業製品・服飾・商業美術などの分野で、実用面などを考慮して造 形作品を意匠すること。「都市を―する」「制服を―する」「インテリア―」 2 図案や模様を考案すること。また、そのもの。「家具に―を施す」「商標 を―する」 3 目的をもって具体的に立案・設計すること。「快適な生活を―する」 • デザインには,美術・芸術的な側面と,実用的な側面がある – スライドの内容比率としては 2 : 8 になるように頑張ります • 美術・芸術的な部分はセンスと技術が大半を占めるが 実用的な部分は知識と,反復練習でいい感じになる COPYRIGHT 7
8.
目的 • 色や質感などの「デザイン」がプロダクトの第一印象に影響を与える – 一般ユーザは,物を買うとき機能以上にデザインを優先する –
機能は実装されてあって当たり前という考え方 – つまり機能が優れていても,デザインが悪ければ使ってもらえない • ソフトウェアでは質感などが伝え難いため,色や配置,文字や動きで表現する • 今回はデザインを考えるうえで知っていると役立つことを中心に – いわゆる整ったデザインを目指します. • 整ったデザインとは – シンプルで伝わるデザイン – 目的や製作者の意図が一目でわかる – 使ってみたいと思わせるデザイン 図1 整ったデザインの例 [1] 8 [1] 考える。 http://webcre8.jp/think/meaning-all-design.html より
9.
目的 • 色の特性について詳しく知り,やりすぎないデザインを目指す – うまく伝えられないが素人感が出てしまった サイトデザイン –
デザイン全体にまとまりがなく なんとも古臭い感じになってしまった • 配置を考えて分かりやすくデザインができるように目指す 9
10.
取り扱わないもの • 技術が必要なデザイン – イラスト –
動画 – 筆書系 – 動きのある高度なWEBデザイン • センスが必要なデザイン – 芸術的なデザイン – イラスト – メッセージ性のあるデザイン 10 • 整ったデザインを作ることを目標としているため • 今回のスライドでは以下のようなものは取り扱いません
11.
ゲシュタルト心理学 COPYRIGHT
12.
ゲシュタルト心理学 • ゲシュタルト – ひとまとまりの姿や形,現象という意味のドイツ語 –
「個々の集合ではなく全体として認知されるもの」という意味 – (ここでいう認知には,推理や判断,記憶や知覚も含まれる) • 人間がある集合をグループとして認知する仕組みのこと • 心理学の分野では「群化の法則」「体制化の法則」という • 難しいことは棚に上げて,とりあえず • グループ化に関する法則ということでいいと思います. COPYRIGHT 12
13.
グループ化の法則 • 近接の法則 • 類同の法則 •
良い連続の法則 • 閉合の法則 • 共通運命の法則 • 対称の法則 • 面積の法則 COPYRIGHT 13
14.
近接の法則 • 近接の法則は、近くにあるもの同士が同じグループだと認識されやす い COPYRIGHT 14
15.
類同の法則 • 類同の法則は、同じ色や、同じ形同士が同じグループだと認識されや すい COPYRIGHT 15
16.
良い連続の法則 • 図形はつながった形になりやすいと認識されやすい • 近接、類同、共通運命の法則から、切れ目がなくや突然変化しない図 形がよいものだと分かる。 COPYRIGHT 16
17.
閉合の法則 • 【】や()のように、閉じた形は同じグループだと認識されやすい。 • 】【
は同じグループと認識しづらい。 COPYRIGHT 17
18.
共通運命の法則 • 同じ方向に動くもの,同じ周期で点滅するなどが同じグループだと認 識されやすい • 共通運命の法則は,近接の法則や類同の法則よりも強く働く COPYRIGHT 18
19.
対称の法則 • 対称な図形は閉じた図として認識されやすい。 COPYRIGHT 19
20.
面積の法則 • 小さいものが図として、大きいものが背景として認識されやすい。 COPYRIGHT 20
21.
例 • ゲシュタルト心理学的に見てみると COPYRIGHT 21
22.
ゲシュタルト心理学まとめ • 近いこと • 似ていること •
連続していること • 囲まれていること • 一緒に動いていること • などのルールに従っているものを人はグループだと認識する • 当たり前だけどこの当たり前をきちんと守っていないデザインは世の 中に溢れています • いわゆるBADデザインってやつです COPYRIGHT 22
23.
色について COPYRIGHT
24.
色について • 人間が扱う場合と,機械が扱う場合では微妙に違う – 混色系,顕色系 •
この違いが配色を考える失敗しやすい部分になる • 三つの属性がある • 色相 • 明度 • 彩度 • 色によって,落ち着き,艶めき,情熱,楽しいといった印象が存在 COPYRIGHT 24
25.
混色系 • この三色だけでほぼ全ての色が作れる • Red
40%とか Blue 144とか #ff1488とか • RGB CMYK XYZ などがこれに当たる • 混色系は数学的に扱いやすいため機械が使うのに向いている • (詳しい説明はGoogleで) COPYRIGHT 25 ※ Kとはブラックのこと
26.
だから何? COPYRIGHT 26 混色系は,数値的に扱うことを前提なので 人間にとっては扱いずらい
27.
顕色系 • 人間の知覚に近い形で色を配置 • 色相,彩度,明度で表現 •
マンセルやPCCS表色系 • 人間の知覚に近いので色の組み合わせが想像しやすい COPYRIGHT 27 マンセル PCCS系
28.
色を考える COPYRIGHT 28 デザインといった美的な意味合いを含んだ 色の組み合わせを考えるんだから 人間が選びやすい方でやりたい
29.
人間にとって色とは COPYRIGHT 29 色相,明度,彩度のみ では色について少し説明します
30.
色相 • 赤,青,黄,緑…などの「色み」のこと • 色を一周360度の円で表現する •
これを体系的にまとめたのが色相環 • 色の可視光の波長に基づいて配置 • 色相にはそれぞれの色で人に与える印象や色のイメージがある • 暖色系(赤,黄等)の色は明るく見え,寒色系(青,紫)は暗く見え る COPYRIGHT 30
31.
色相 • 暖色系(赤,黄等)の色は明るく見え,寒色系(青,紫)は暗く見え る • 暖色系と寒色系の色の違いは立体感にも影響を与える COPYRIGHT 31
32.
明度 • 色の明るさを表す • 色相,彩度に比べて文字の読みやすさなどに影響を与えやすい. •
あいうえお • あいうえお COPYRIGHT 32
33.
明度 • 色みを持つ色によって明度が違う • 白黒にしてみると明度がわかる •
目を細めてみてみるといいかも COPYRIGHT 33
34.
明度 • 明度でも人に与える印象が変わる COPYRIGHT 34 – 低い: •
暗い • 重厚 • 高級感 • etc – 高い: • 明るい • 軽やか • ポップ • ラフ • etc
35.
彩度 • 色の鮮やかさ • 彩度があるものを有彩色,無いものを無彩色という •
数値が低いほど色がなくなり,無彩色に近づく(白,黒,グレー) COPYRIGHT 35
36.
彩度 • 色の彩度で変わる印象 – インパクト強さ –
色の与える印象の調整 彩度0だと,青色のもつ爽やかさが失われる例 COPYRIGHT 36
37.
明度と彩度の関係 COPYRIGHT 37 • トーン • 色の明度と彩度で変わる印象を表す –
ビビットカラーとベールカラーでは印象が違うよねって話
38.
色のイメージについて http://www.hp-stylelink.com/news/2013/07/20130708.php/#list02 COPYRIGHT 38 • 色相,明度,彩度を組み合わせることで色々な印象を与えることがで きる
39.
いよいよ,色の組み合わせについてです COPYRIGHT
40.
色の組み合わせの考え方 COPYRIGHT 40 • シュブルール – 類似する色は調和する
– 対比する色は調和する
41.
60 – 30
– 10 Rule • 60%のベースカラー • 30%のメインと相対的な目を引く色 • 10%のアクセントカラー • スーツの色比率がよく例に出される • もちろんWebサイトやアプリでも • 伝統的な様式美が存在する COPYRIGHT 41
42.
70 – 25
– 5 Rule • 70%のベースカラー • 25%のメインと相対的な目を引く色 • 5%のアクセントカラー • 60-30-10Ruleと考えのもとは同じで比率が違う • 近代的でモダンなデザインの場合はこちらを使う場合が多い COPYRIGHT 42
43.
メインカラーの選び方 • メインカラーは,ある程度「明度の低い色」が扱いやすい COPYRIGHT 43
44.
メインカラーの選び方 • イメージや,戦略から • クリックされやすい色 •
競合相手と被らないように • ターゲットユーザが好きそうな色を – 例えば,中二病の中高生がターゲットなら ベースカラー:黒 メインカラー:白 アクセントカラー:赤 – 癒しを全面的に出していくなら • ベースカラー:青 • メインカラー:白 • アクセントカラー:ピンク,黄色 COPYRIGHT 44
45.
ベースカラーを選び方 • ベースカラーは,背景など広い色面を彩る色 • 背景などになる色なので,白や明度の高い色が扱いやすい •
高級感や重厚感を出したい場合はあえて明度の低い黒や紫や茶色な どを使うとよいが,全体的に暗くなるため難しい COPYRIGHT 45
46.
ベースカラーの選び方 • 無彩色を使う • メインカラーの明度をあげた色を使う –
同系統の色の組み合わせは統一感があり美しい – 彩度を下げた色を使う手法もある COPYRIGHT 46
47.
アクセントカラーについて • メインカラーから離れた色相にすると鮮やかに • メインカラーの明度と正反対の明度にするのも効果的 •
もちろん彩度でも可 • 離れた色相というのは右のような 色相環でいうところの向かいに ある色を組み合わせるとよい 例: 5R なら 58G 10Y なら 10Pb COPYRIGHT 47
48.
3色じゃ表現できない COPYRIGHT 48 3色じゃ色が足りなくなるんだけど
49.
色を分割する • メインカラーやアクセントカラーを分割する – 追加する色は,「色相」同じで,「トーン」が違う色 –
「トーン」が同じで「色相」が違う色 – シェブルールに則って選ぶと大体安全 COPYRIGHT 49
50.
注意点 • 色を追加しすぎると,メインカラー,ベースカラー,アクセントカ ラーのバランスが崩れてしまう • あらゆる色を使うと色鮮やかといえば聞こえはいいが,汚いデザイ ンになってしまう恐れ •
世の中に溢れるサイトや広告などの色使いなどを見て考えてみてく ださい COPYRIGHT 50
51.
色で失敗する理由 COPYRIGHT 51 さて色について分かってきたんじゃないでしょうか? 色の最後で一つだけ
52.
色を選ぶうえでの罠 COPYRIGHT
53.
色で失敗する理由 COPYRIGHT 53 なぜ混色系から顕色系の話から色についての話をしたか? PCで使われているカラーピックツールの多くは RGB色空間基準に作られているからです
54.
色で失敗する理由 COPYRIGHT 54 さてRGB空間だったら何が問題なのか RGB色空間は可視光の空間なので 色域が広く,かなり彩度が高い 深く考えないでいると配色が 彩度の高いものになってします 高彩度の配色は難しいです 下品な色使いになりがち
55.
色で失敗する理由 COPYRIGHT 55 高彩色を使うのは難しい うまいデザインと比べると一目瞭然
56.
色で失敗する理由まとめ • RGB色空間は彩度が高くなりがち • 彩度には気を付ける •
色相,彩度,明度で色を考えよう • 彩度が高い難易度も高くなるという話 COPYRIGHT 56
57.
結局こんな理論分かっても面倒って人のために • 色を選ぶのに役立つサイトは沢山あります • 作るもののコンセプトやイメージカラーを考えたら利用すると良いか と •
Paletta - HSV Color palette for every Programmer http://paletta.mrk1869.com/ • Material UI | Material Design | Material UI Colors http://www.materialui.co/ • [HUE/360]The Color Schem Application • http://hue360.herokuapp.com/ COPYRIGHT 57
58.
みんなで考えてみたいサイトや物があればどうぞ COPYRIGHT
59.
終わりに • ゲシュタルト心理学 • 色の組み合わせ方とルール •
色の特性や性質 • ほんの少し工夫や意識することでデザインができる気がしてきました ね? • 怖がらないでとりあえず色々考えて作ってみましょう. COPYRIGHT 59
60.
知ってると役立つかもって知識 • レイアウトは基本大きなものから配置していく • 細かいところを作りこんでいくと全体のクオリティが上がる •
併置加法混色 – 小さな色点を高密度で並べることで起きる混色 – モザイクアートや点描画,織物などで用いられる – モザイクアートなど遠くから見ると一つの絵に見えるものなどはこれの応 用 COPYRIGHT 60
61.
参考文献 • [1]試験に出る色彩用語 http://colorterms.kisochishiki.com/ •
[2]COLOR NOTE http://www.sipec-square.net/~mt-home/students/miyazono/project/haishoku/page02.html • [3]バンクーバーのうぇぶ屋 http://webya.opdsgn.com/ • [4]ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド http://www.find-job.net/startup/slide-of-color-and-layout-scheme • [5]infoScoop開発ブログ https://www.infoscoop.org/blogjp/2013/11/21/convenient-design-tools- picked-by-non-designer/ • [6]Qiitaエンジニアのための配色まとめ http://qiita.com/maccotsan/items/d51c992a20385427e689 • [7]色彩センスのいらない配色講座 http://www.slideshare.net/marippe/ss-9003317 • [8]FUJI Xerox https://www.fujixerox.co.jp/support/howto/column/basicseminar1_1.html • [9]色カラー http://iro-color.com/dictionary/ • [10]DIGITA http://www.digitaprint.jp/label_tg_dtp5.php • [11]売れるサイトやLP構築のために絶対抑えておくべき色彩心理学の基礎 • http://bazubu.com/colorpsycology-4308.html • [12]色彩センスゼロでも大丈夫!簡単に行けてる配色にする方法 http://matome.naver.jp/odai/2133997827563533001?page=2 • 本スライドに使用した図や文章は以上のサイトから引用したものを多数使用しております • そしてそのほとんどが明記されていません.ごみカスですね. COPYRIGHT 61
62.
お疲れさまでした ご清聴ありがとうござ います COPYRIGHT
63.
付録:色のイメージ一覧 色 代表的な意味 赤 情熱、活発、積極的、外向性、興奮、勇 気、欲望、革命、力、勇敢、活気、注意 橙 友情、食欲、活力、行動、冒険、陽気、成 功、活動的、発展的、好意的、善意、安 定、幸福、太陽 黄 楽しい、元気、上昇志向、知性、好奇心、 洞察力、決断力、想像力、快活、協力 黄緑 若々しい、調和、知恵、勇気、希望、順応 緑 自然、安定、秩序、平和、健康、調和、地 球、静か、安全、安心、信頼、若者 青緑
カジュアル、洗練、冷静、治癒 青 清潔、冷静、安定、信頼、誠実、知恵、神 秘、調和、知性、落ち着き 紺 革新的、豊かさ、専門的、信頼、知識、法 則、論理 紫 気品、高貴、神秘的、想像 桃 可憐、好意、慈愛、愛情、尊敬、感謝、女 性的、絶妙、快活、幸福、友情、優しい 白 純白、清潔、高貴、洗練、平和、明快、献 身、単純 黒 高貴、神秘、洗練、不安、優雅 灰 調和・憂鬱・不安・過去・薄暗い・思い出 銀 冷たさ・金属・洗練・硬い・上品 金 成功・高級・富・頂点・輝き・豪華 COPYRIGHT 63
Download now