Download as PDF, PPTX
![目的
• 色や質感などの「デザイン」がプロダクトの第一印象に影響を与える
– 一般ユーザは，物を買うとき機能以上にデザインを優先する
– 機能は実装されてあって当たり前という考え方
– つまり機能が優れていても，デザインが悪ければ使ってもらえない
• ソフトウェアでは質感などが伝え難いため，色や配置，文字や動きで表現する
• 今回はデザインを考えるうえで知っていると役立つことを中心に
– いわゆる整ったデザインを目指します．
• 整ったデザインとは
– シンプルで伝わるデザイン
– 目的や製作者の意図が一目でわかる
– 使ってみたいと思わせるデザイン
図1 整ったデザインの例 [1]
8
[1] 考える。 http://webcre8.jp/think/meaning-all-design.html より](https://image.slidesharecdn.com/random-151122145058-lva1-app6891/85/slide-8-320.jpg)
![結局こんな理論分かっても面倒って人のために
• 色を選ぶのに役立つサイトは沢山あります
• 作るもののコンセプトやイメージカラーを考えたら利用すると良いか
と
• 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](https://image.slidesharecdn.com/random-151122145058-lva1-app6891/85/slide-57-320.jpg)
![参考文献
• [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](https://image.slidesharecdn.com/random-151122145058-lva1-app6891/85/slide-61-320.jpg)
デザインに正解はないけれど
- 1.
- 2.
- 3. LTの進め方 • スライドは全部で60枚ぐらいあります • でもほとんど図なのでそんなにかからないと思いますのでお付き合い ください •疑問に思ったり感じたりしたことがあれば適当に話をぶった切って聞 いてください • とりあえず考えて答えるなりなんかします • かなり曖昧な部分もありますが各々の経験と常識に従って補完してく ださい COPYRIGHT 3
- 4. 本日のガイドライン • はじめに • 目的 •配置に関するデザイン心理学 – ゲシュタルト心理学 • 色に関するデザイン – 色選びにやりがちな失敗 – 色について – 色を決める方法 – 人間が思う色のイメージ – 色の組み合わせ • おわりに 2015/10/4 4
- 5.
- 6.
- 7. はじめに • デザインとは（辞書より） • １建築・工業製品・服飾・商業美術などの分野で、実用面などを考慮して造 形作品を意匠すること。「都市を―する」「制服を―する」「インテリア―」 ２ 図案や模様を考案すること。また、そのもの。「家具に―を施す」「商標 を―する」 ３ 目的をもって具体的に立案・設計すること。「快適な生活を―する」 • デザインには，美術・芸術的な側面と，実用的な側面がある – スライドの内容比率としては 2 : 8 になるように頑張ります • 美術・芸術的な部分はセンスと技術が大半を占めるが 実用的な部分は知識と，反復練習でいい感じになる COPYRIGHT 7
- 8. 目的 • 色や質感などの「デザイン」がプロダクトの第一印象に影響を与える – 一般ユーザは，物を買うとき機能以上にデザインを優先する –機能は実装されてあって当たり前という考え方 – つまり機能が優れていても，デザインが悪ければ使ってもらえない • ソフトウェアでは質感などが伝え難いため，色や配置，文字や動きで表現する • 今回はデザインを考えるうえで知っていると役立つことを中心に – いわゆる整ったデザインを目指します． • 整ったデザインとは – シンプルで伝わるデザイン – 目的や製作者の意図が一目でわかる – 使ってみたいと思わせるデザイン 図1 整ったデザインの例 [1] 8 [1] 考える。 http://webcre8.jp/think/meaning-all-design.html より
- 9. 目的 • 色の特性について詳しく知り，やりすぎないデザインを目指す – うまく伝えられないが素人感が出てしまった サイトデザイン –デザイン全体にまとまりがなく なんとも古臭い感じになってしまった • 配置を考えて分かりやすくデザインができるように目指す 9
- 10. 取り扱わないもの • 技術が必要なデザイン – イラスト –動画 – 筆書系 – 動きのある高度なWEBデザイン • センスが必要なデザイン – 芸術的なデザイン – イラスト – メッセージ性のあるデザイン 10 • 整ったデザインを作ることを目標としているため • 今回のスライドでは以下のようなものは取り扱いません
- 11.
- 12. ゲシュタルト心理学 • ゲシュタルト – ひとまとまりの姿や形，現象という意味のドイツ語 –「個々の集合ではなく全体として認知されるもの」という意味 – （ここでいう認知には，推理や判断，記憶や知覚も含まれる） • 人間がある集合をグループとして認知する仕組みのこと • 心理学の分野では「群化の法則」「体制化の法則」という • 難しいことは棚に上げて，とりあえず • グループ化に関する法則ということでいいと思います． COPYRIGHT 12
- 13. グループ化の法則 • 近接の法則 • 類同の法則 •良い連続の法則 • 閉合の法則 • 共通運命の法則 • 対称の法則 • 面積の法則 COPYRIGHT 13
- 14.
- 15.
- 16.
- 17. 閉合の法則 • 【】や（）のように、閉じた形は同じグループだと認識されやすい。 • 】【は同じグループと認識しづらい。 COPYRIGHT 17
- 18.
- 19.
- 20.
- 21.
- 22. ゲシュタルト心理学まとめ • 近いこと • 似ていること •連続していること • 囲まれていること • 一緒に動いていること • などのルールに従っているものを人はグループだと認識する • 当たり前だけどこの当たり前をきちんと守っていないデザインは世の 中に溢れています • いわゆるBADデザインってやつです COPYRIGHT 22
- 23.
- 24. 色について • 人間が扱う場合と，機械が扱う場合では微妙に違う – 混色系，顕色系 •この違いが配色を考える失敗しやすい部分になる • 三つの属性がある • 色相 • 明度 • 彩度 • 色によって，落ち着き，艶めき，情熱，楽しいといった印象が存在 COPYRIGHT 24
- 25. 混色系 • この三色だけでほぼ全ての色が作れる • Red40%とか Blue 144とか #ff1488とか • RGB CMYK XYZ などがこれに当たる • 混色系は数学的に扱いやすいため機械が使うのに向いている • （詳しい説明はGoogleで） COPYRIGHT 25 ※ Kとはブラックのこと
- 26.
- 27. 顕色系 • 人間の知覚に近い形で色を配置 • 色相，彩度，明度で表現 •マンセルやPCCS表色系 • 人間の知覚に近いので色の組み合わせが想像しやすい COPYRIGHT 27 マンセル PCCS系
- 28.
- 29.
- 30. 色相 • 赤，青，黄，緑…などの「色み」のこと • 色を一周360度の円で表現する •これを体系的にまとめたのが色相環 • 色の可視光の波長に基づいて配置 • 色相にはそれぞれの色で人に与える印象や色のイメージがある • 暖色系（赤，黄等）の色は明るく見え，寒色系（青，紫）は暗く見え る COPYRIGHT 30
- 31.
- 32. 明度 • 色の明るさを表す • 色相，彩度に比べて文字の読みやすさなどに影響を与えやすい． •あいうえお • あいうえお COPYRIGHT 32
- 33. 明度 • 色みを持つ色によって明度が違う • 白黒にしてみると明度がわかる •目を細めてみてみるといいかも COPYRIGHT 33
- 34. 明度 • 明度でも人に与える印象が変わる COPYRIGHT 34 – 低い： •暗い • 重厚 • 高級感 • etc – 高い： • 明るい • 軽やか • ポップ • ラフ • etc
- 35. 彩度 • 色の鮮やかさ • 彩度があるものを有彩色，無いものを無彩色という •数値が低いほど色がなくなり，無彩色に近づく（白，黒，グレー） COPYRIGHT 35
- 36. 彩度 • 色の彩度で変わる印象 – インパクト強さ –色の与える印象の調整 彩度0だと，青色のもつ爽やかさが失われる例 COPYRIGHT 36
- 37. 明度と彩度の関係 COPYRIGHT 37 • トーン • 色の明度と彩度で変わる印象を表す –ビビットカラーとベールカラーでは印象が違うよねって話
- 38.
- 39.
- 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.
- 44. メインカラーの選び方 • イメージや，戦略から • クリックされやすい色 •競合相手と被らないように • ターゲットユーザが好きそうな色を – 例えば，中二病の中高生がターゲットなら ベースカラー：黒 メインカラー：白 アクセントカラー：赤 – 癒しを全面的に出していくなら • ベースカラー：青 • メインカラー：白 • アクセントカラー：ピンク，黄色 COPYRIGHT 44
- 45. ベースカラーを選び方 • ベースカラーは，背景など広い色面を彩る色 • 背景などになる色なので，白や明度の高い色が扱いやすい •高級感や重厚感を出したい場合はあえて明度の低い黒や紫や茶色な どを使うとよいが，全体的に暗くなるため難しい COPYRIGHT 45
- 46. ベースカラーの選び方 • 無彩色を使う • メインカラーの明度をあげた色を使う –同系統の色の組み合わせは統一感があり美しい – 彩度を下げた色を使う手法もある COPYRIGHT 46
- 47. アクセントカラーについて • メインカラーから離れた色相にすると鮮やかに • メインカラーの明度と正反対の明度にするのも効果的 •もちろん彩度でも可 • 離れた色相というのは右のような 色相環でいうところの向かいに ある色を組み合わせるとよい 例： 5R なら 58G 10Y なら 10Pb COPYRIGHT 47
- 48.
- 49. 色を分割する • メインカラーやアクセントカラーを分割する – 追加する色は，「色相」同じで，「トーン」が違う色 –「トーン」が同じで「色相」が違う色 – シェブルールに則って選ぶと大体安全 COPYRIGHT 49
- 50. 注意点 • 色を追加しすぎると，メインカラー，ベースカラー，アクセントカ ラーのバランスが崩れてしまう • あらゆる色を使うと色鮮やかといえば聞こえはいいが，汚いデザイ ンになってしまう恐れ •世の中に溢れるサイトや広告などの色使いなどを見て考えてみてく ださい COPYRIGHT 50
- 51.
- 52.
- 53.
- 54.
- 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.
- 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.
- 63. 付録：色のイメージ一覧 色 代表的な意味 赤 情熱、活発、積極的、外向性、興奮、勇 気、欲望、革命、力、勇敢、活気、注意 橙 友情、食欲、活力、行動、冒険、陽気、成 功、活動的、発展的、好意的、善意、安 定、幸福、太陽 黄 楽しい、元気、上昇志向、知性、好奇心、 洞察力、決断力、想像力、快活、協力 黄緑 若々しい、調和、知恵、勇気、希望、順応 緑 自然、安定、秩序、平和、健康、調和、地 球、静か、安全、安心、信頼、若者 青緑カジュアル、洗練、冷静、治癒 青 清潔、冷静、安定、信頼、誠実、知恵、神 秘、調和、知性、落ち着き 紺 革新的、豊かさ、専門的、信頼、知識、法 則、論理 紫 気品、高貴、神秘的、想像 桃 可憐、好意、慈愛、愛情、尊敬、感謝、女 性的、絶妙、快活、幸福、友情、優しい 白 純白、清潔、高貴、洗練、平和、明快、献 身、単純 黒 高貴、神秘、洗練、不安、優雅 灰 調和・憂鬱・不安・過去・薄暗い・思い出 銀 冷たさ・金属・洗練・硬い・上品 金 成功・高級・富・頂点・輝き・豪華 COPYRIGHT 63