Weitere ähnliche Inhalte
Ähnlich wie デザインに正解はないけれど (7)
デザインに正解はないけれど
- 4. 本日のガイドライン
• はじめに
• 目的
• 配置に関するデザイン心理学
– ゲシュタルト心理学
• 色に関するデザイン
– 色選びにやりがちな失敗
– 色について
– 色を決める方法
– 人間が思う色のイメージ
– 色の組み合わせ
• おわりに
2015/10/4
4
- 7. はじめに
• デザインとは(辞書より)
• 1 建築・工業製品・服飾・商業美術などの分野で、実用面などを考慮して造
形作品を意匠すること。「都市を―する」「制服を―する」「インテリア―」
2 図案や模様を考案すること。また、そのもの。「家具に―を施す」「商標
を―する」
3 目的をもって具体的に立案・設計すること。「快適な生活を―する」
• デザインには,美術・芸術的な側面と,実用的な側面がある
– スライドの内容比率としては 2 : 8 になるように頑張ります
• 美術・芸術的な部分はセンスと技術が大半を占めるが
実用的な部分は知識と,反復練習でいい感じになる
COPYRIGHT
7
- 8. 目的
• 色や質感などの「デザイン」がプロダクトの第一印象に影響を与える
– 一般ユーザは,物を買うとき機能以上にデザインを優先する
– 機能は実装されてあって当たり前という考え方
– つまり機能が優れていても,デザインが悪ければ使ってもらえない
• ソフトウェアでは質感などが伝え難いため,色や配置,文字や動きで表現する
• 今回はデザインを考えるうえで知っていると役立つことを中心に
– いわゆる整ったデザインを目指します.
• 整ったデザインとは
– シンプルで伝わるデザイン
– 目的や製作者の意図が一目でわかる
– 使ってみたいと思わせるデザイン
図1 整ったデザインの例 [1]
8
[1] 考える。 http://webcre8.jp/think/meaning-all-design.html より
- 10. 取り扱わないもの
• 技術が必要なデザイン
– イラスト
– 動画
– 筆書系
– 動きのある高度なWEBデザイン
• センスが必要なデザイン
– 芸術的なデザイン
– イラスト
– メッセージ性のあるデザイン
10
• 整ったデザインを作ることを目標としているため
• 今回のスライドでは以下のようなものは取り扱いません
- 22. ゲシュタルト心理学まとめ
• 近いこと
• 似ていること
• 連続していること
• 囲まれていること
• 一緒に動いていること
• などのルールに従っているものを人はグループだと認識する
• 当たり前だけどこの当たり前をきちんと守っていないデザインは世の
中に溢れています
• いわゆるBADデザインってやつです
COPYRIGHT
22
- 25. 混色系
• この三色だけでほぼ全ての色が作れる
• Red 40%とか Blue 144とか #ff1488とか
• RGB CMYK XYZ などがこれに当たる
• 混色系は数学的に扱いやすいため機械が使うのに向いている
• (詳しい説明はGoogleで)
COPYRIGHT
25
※ Kとはブラックのこと
- 41. 60 – 30 – 10 Rule
• 60%のベースカラー
• 30%のメインと相対的な目を引く色
• 10%のアクセントカラー
• スーツの色比率がよく例に出される
• もちろんWebサイトやアプリでも
• 伝統的な様式美が存在する
COPYRIGHT
41
- 42. 70 – 25 – 5 Rule
• 70%のベースカラー
• 25%のメインと相対的な目を引く色
• 5%のアクセントカラー
• 60-30-10Ruleと考えのもとは同じで比率が違う
• 近代的でモダンなデザインの場合はこちらを使う場合が多い
COPYRIGHT
42
- 44. メインカラーの選び方
• イメージや,戦略から
• クリックされやすい色
• 競合相手と被らないように
• ターゲットユーザが好きそうな色を
– 例えば,中二病の中高生がターゲットなら
ベースカラー:黒
メインカラー:白
アクセントカラー:赤
– 癒しを全面的に出していくなら
• ベースカラー:青
• メインカラー:白
• アクセントカラー:ピンク,黄色
COPYRIGHT
44
- 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