富山デザイン勉強会-配色が怖くなくなる_知識と理屈で考える配色.pdf

Transcript

1. スピーカーɿ吉川圭太 （DERA-DESIGN） 「配色が怖くなくなる ！知識と理屈で考える配色」 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
2. と、 いう本が ありますがʜʜ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
3. 配 色 ! 配色が苦手と いう人も多い D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
4. 配 色 ! それは感覚的に配色を しているのかもしれません D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
5. 配 色 ! 知識と理屈があれば もう配色には困らない D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
6. 配 色 ! と、 いうことで 今日は色の勉強をします D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
7. COLOR 色の基本 CAPTER 01 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
8. CAPTER 01 色の基本 色相・彩度・明度 色相 (Hue) 彩度 (Saturation) 明度 (Brightness) D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
9. CAPTER 01 色の基本 マンセル表色系 情報を整理して見やすく デザインの見どころにも なります。 作成の難易度は 高めです。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
10. CAPTER 01 色の基本 色相環 情報を整理して見やすく デザインの見どころにも なります。 作成の難易度は 高めです。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
11. CAPTER 01 色の基本 色のイメージ 原色は特別な意味がない限り避けた方 がベターです。 少し彩度を落とした中間色を使うこと でスタイリッシュなデザインになりま す。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
12. 興奮させる色、 SELEや値引きなど安さのア ピールに有効。 また強い注意を促す色なの で警告などでも使用します。 赤 【Red】 情熱ɾ危険ɾ 愛 ɾ 勝利 ɾ活気 CAPTER 01 色の基本 色のイメージ 日本人の好きな色で一番多いのが青色で す。 ボタンなどよりはデザインの全体の ベースカラー向きの色です。 青 【Blue】 鎮静ɾ 平和ɾ 知性ɾ不安 ɾ信頼 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
13. 若さやエコというイメージがありリクルー トや CSR 活動などに使われる。 ボタンに使 うと安心して押せるイメージがあります。 緑 【Green】 安全ɾ自然ɾ 若さ ɾ 癒し ɾ新鮮 CAPTER 01 色の基本 色のイメージ 注意としてよく使われます。 マーカーのよ うなデザインで文章の下に引くこともあ ります。 青と相性がいい色です。 黄 【Yellow】 明朗ɹ陽気ɾ希望 ɾ注意 ɾ危険 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
14. マイナスのイメージが少ない色。 何でもそ つなくこなす色です。 陽の色なのでクール なデザインには向かない。 緑と相性がいい。 オレンジ 【Orange】 暖かい ɾ 健康ɾ 元気 ɾ陽気 ɾ傲慢 CAPTER 01 色の基本 色のイメージ マイナスのイメージが多い色です。 また女 性的なイメージもあるので使い所を選び ます。 高貴を表す意味もあります。 紫 【Purple】 高貴ɾ 伝統ɾ 神秘ɾ不吉 ɾ下品 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
15. 緑と組み合わせると自然をイメージが強 くなります。 モノトーンと合わせると堅実 のイメージが強くなります。 茶 【Brown】 地味ɾ堅実ɾ 自然 ɾ 頑固 ɾ渋い CAPTER 01 色の基本 色のイメージ どの色とも相性がよいバイプレーヤー。 クールなデザインでは主役にもなれる。 灰 色の使い方でデザインがよくなる。 グレー 【Gray】 クールɾ 上品ɾ信頼 ɾ 陰気ɾ憂鬱 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
16. 余白としてよく使う色です。 背景色として も基本は白が使われます。 差し色としては 使えません。 特殊な場合以外、ボタンなど 白 【WHITE】 清潔ɾ無限・正義・無垢・空虚 真っ黒よりも、黒に近い灰色の方が使いや すい。 しかし、 ハイコンのデザインは極めて クールです。 黒 【Black】 上質・威厳・死・高級・絶望 CAPTER 01 色の基本 色のイメージ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
17. ベースカラーにはまずあり得ない、差し色 として使うのが吉。 特色以外、デザイン上 ではグラデーションの一種として使うこ 金 【Gold】 成功ɾ勝利ɾ 貴重 ɾ 豪華 ɾ才能 金よりも上品な高級感がある、ヘアライン を入れると金属感が強くなる。 明るくする と高級感が、 暗くすると重厚感がでる。 銀 【SILVER】 知性ɾ 無機質ɾ 品質ɾ洗練ɾ機械 CAPTER 01 色の基本 色のイメージ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
18. CAPTER 01 色の基本 色のイメージ イメージを 言葉に変換する D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
19. $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 01 色の基本 1 1BMF -:( -JHIU
    HSBZJTI ( (SBZJTI %,( %BSL
    (SBZJTI # #SJHIU 4' 4PGU % %VMM %, %BSL 7 7JWJE -5 -JHIU 4 4USPOH %1 %FFQ 色のトーン 色のトーンとは、明度と彩度 の組み合わせによって生まれ る色の雰囲気のことです。 同じ色でも、トーンが変わる と印象が大きく変わります。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
20. $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 01 色の基本 色のコントラスト D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
21. OLOR SCHEM 配色 CAPTER 02 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
22. ME ベースカラー 70％ メインカラー 25％ アクセントカラー 5％ アクセントカラー 5％ メインカラー 12.5％+12.5％ ベースカラー 70％ $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 02 配色 色の比率 　 3色の場合 4色の場合 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
23. $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 02 配色 同一色の配色① （ドミナントカラー配色） 同一色で明度と彩度を 変えて配色する。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
24. $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 02 配色 同系色の配色 （アナロガス配色） 色相の近い色だけで配 色する。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
25. $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 02 配色 補色の配色① （ダイアード配色） 色相環の対角線の色で 配色する。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
26. $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 02 配色 補色の配色② （スプリットコンプリメンタリー配色） 色相環の対角線の色と 同系色で配色する。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
27. $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 02 配色 トライアド配色 色相環で正三角形の位 置にある三色を使って 配色する。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
28. $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 02 配色 テトラード配色 ペンタード配色やヘクサード配色もある 色相環で四角形の位置 にある色を組み合わせ て配色する。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
29. $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 02 配色 ペンタード配色・ヘクサード配色 ５色もしくは ３色 + 白黒 ４色もしくは ３色 + 白黒 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
30. TIPS 配色のコツ CAPTER 03 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
31. 色相かトーンを合わせると失 敗しにくい。 ただし、緑と黄は 気をつける。 黄と緑はトーンが 同じでも、視覚的にあってない ように見えることがあります。 $"15&3
    
    ৭࠼ͷ৺ཧ CAPTER 03 配色のコツ 色相かトーンを合わせる D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
32. 数値を信用しすぎない 目は騙されやすいです。 数値上は同じ色でも違う 色に見えてしまう。 CAPTER 03 配色のコツ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
33. $"15&3
    
    ৭࠼ͷ৺ཧ 色の見え方の違い CAPTER 03 配色のコツ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
34. CAPTER 03 配色のコツ $"15&3
    
    ৭࠼ͷ৺ཧ 色の見え方の違い D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
35. 1 1BMF -:( -JHIU
    HSBZJTI ( (SBZJTI %,( %BSL
    (SBZJTI # #SJHIU 4' 4PGU % %VMM %, %BSL 7 7JWJE -5 -JHIU 4 4USPOH %1 %FFQ 中間色を使う 原色は特別な意味がない限り 避けた方がベターです。 少し彩度を落とした中間色を 使うことでスタイリッシュな デザインになります。 CAPTER 03 配色のコツ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
36. グレーを使う CAPTER 03 配色のコツ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
37. カラーピッカーのコツ CAPTER 03 配色のコツ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
38. TOOL 配色補助ツール CAPTER 04 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
39. HUE/360 http://hue360.herokuapp.com/ CAPTER 04 配色補助ツール D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
40. COOLORS https://coolors.co/ CAPTER 04 配色補助ツール D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
41. NIPPON COOLORS http://nipponcolors.com/ CAPTER 04 配色補助ツール D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
42. ColorZilla https://www.colorzilla.com/ja/ CAPTER 04 配色補助ツール D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
43. Adobe Color https://color.adobe.com/ja/ CAPTER 04 配色補助ツール D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
44. OTHER その他 CAPTER 05 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
45. CAPTER 05 その他 $"15&3
    
    ৭࠼ͷ৺ཧ ボタンの色は何色が良い？ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
46. CAPTER 05 その他 ボタンの色は何色が良い？ Firefoxの 実験では D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
47. カテゴリー01 カテゴリー02 カテゴリー03 カテゴリー04 カテゴリー05 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来 る。とかくに人の世は住みにくい。意地を通せば窮屈だ。 とかくに人の世は住みにくい。 どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。山路を登りながら、 こう考えた。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。智に働 けば角が立つ。 とかくに人の世は住みにくい。山路を登りながら、こう考えた。とかくに人の世は住みにくい。住みにくさが 高じると、安い所へ引き越したくなる。住みにくさが高じると、安い所へ引き越したくなる。情に棹させば流 される。 意地を通せば窮屈だ。住みにくさが高じると、安い所へ引き越したくなる。意地を通せば窮屈だ。 とかくに人の世は住みにくい。とかくに人の世は住みにくい。住みにくさが高じると タイトル 見出し リンクリンクリンクリンクリンクリンクリンクリンクリンク カテゴリー01 カテゴリー02 カテゴリー03 カテゴリー04 カテゴリー05 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来 る。とかくに人の世は住みにくい。意地を通せば窮屈だ。 とかくに人の世は住みにくい。 どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。山路を登りながら、 こう考えた。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。智に働 けば角が立つ。 とかくに人の世は住みにくい。山路を登りながら、こう考えた。とかくに人の世は住みにくい。住みにくさが 高じると、安い所へ引き越したくなる。住みにくさが高じると、安い所へ引き越したくなる。情に棹させば流 される。 意地を通せば窮屈だ。住みにくさが高じると、安い所へ引き越したくなる。意地を通せば窮屈だ。 とかくに人の世は住みにくい。とかくに人の世は住みにくい。住みにくさが高じると タイトル 見出し リンクリンクリンクリンクリンクリンクリンクリンクリンク CAPTER 05 その他 ボタンの色は何色が良い？ コントラストが重要 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
48. ɹCPEZ
    \ ɹɹXFCLJUpMUFS
    HSBZTDBMF   ɹɹNTpMUFS
    HSBZTDBMF   ɹɹpMUFS
    HSBZTDBMF  
    ɹ^ CAPTER 05 その他 ボタンの色は何色が良い？ グレースケールにして目立っていれば OK D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
49. 同一色相のグラデーションの場合 差を大きくつけないほうがデザインでは使いやすい。 CAPTER 05 その他 グラデーションの使い方 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
50. 色相を変えたグラデーションは、 境目の色に注意する 色の組み合わせによって濁って見えることがある CAPTER 05 その他 グラデーションの使い方 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
51. CAPTER 05 その他 グラデーションの使い方 そういう場合は 間にもう一色はさむときれいになる D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
52. CAPTER 05 その他 人によって色の見え方が違う D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
53. CAPTER 05 その他 人によって色の見え方が違う 色は全ての人に同じように 見えているわけではありま せん。 色だけで全てを表現し ないようにする。 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
54. CAPTER 05 その他 人によって色の見え方が違う D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
55. CAPTER 05 その他 人によって色の見え方が違う https://www.gizmodo.jp/2024/06/mattel-uno-colorblind-accessible.html D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
56. REASON 配色が失敗する理由 CAPTER 06 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
57. カテゴリー01 カテゴリー02 カテゴリー03 カテゴリー04 カテゴリー05 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来 る。とかくに人の世は住みにくい。意地を通せば窮屈だ。 とかくに人の世は住みにくい。 どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。山路を登りながら、 こう考えた。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。智に働 けば角が立つ。 とかくに人の世は住みにくい。山路を登りながら、こう考えた。とかくに人の世は住みにくい。住みにくさが 高じると、安い所へ引き越したくなる。住みにくさが高じると、安い所へ引き越したくなる。情に棹させば流 される。 意地を通せば窮屈だ。住みにくさが高じると、安い所へ引き越したくなる。意地を通せば窮屈だ。 とかくに人の世は住みにくい。とかくに人の世は住みにくい。住みにくさが高じると リンクリンクリンクリンクリンクリンクリンクリンクリンク タイトル 見出し D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
58. カテゴリー01 カテゴリー02 カテゴリー03 カテゴリー04 カテゴリー05 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来 る。とかくに人の世は住みにくい。意地を通せば窮屈だ。 とかくに人の世は住みにくい。 どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。山路を登りながら、 こう考えた。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。智に働 けば角が立つ。 とかくに人の世は住みにくい。山路を登りながら、こう考えた。とかくに人の世は住みにくい。住みにくさが 高じると、安い所へ引き越したくなる。住みにくさが高じると、安い所へ引き越したくなる。情に棹させば流 される。 意地を通せば窮屈だ。住みにくさが高じると、安い所へ引き越したくなる。意地を通せば窮屈だ。 とかくに人の世は住みにくい。とかくに人の世は住みにくい。住みにくさが高じると リンクリンクリンクリンクリンクリンクリンクリンクリンク タイトル 見出し こんな配色をすることは ないと思いますが ʜʜ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
59. CAPTER 06 配色が失敗する理由 最初の一色が重要 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
60. CAPTER 06 配色が失敗する理由 色を使いすぎない D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
61. CAPTER 06 配色が失敗する理由 色のイメージとターゲット D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
62. CAPTER 06 配色が失敗する理由 実は情報設計ができていない D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p
63. ◦ 色について知ることが一歩目 ◦ 知識と理屈で自信をつける ◦ 配色補助ツールを使う方法もある ◦ 基本を守って難しい配色をしない ◦ 実は配色のせいではないことも まとめ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p