December/14th/2015 Slide study session

1. 配色の使い方

2. 「色」とは
色相
明度 彩度
色
3つの属性を持つ

3. 「色」とは
色相
赤・青・緑・黄・紫…のように
区別される色合い
色相環

4. 「色」とは
明度
色相の明るさ
高いほど白に近づく
低いほど黒に近づく
高
低

5. 「色」とは
彩度
色相の鮮やかさ
高いほど元の色相に近づく
低いほどくすむ
グレースケールは
無彩色と呼ばれる
無
無
無彩色
高
低
有彩色

6. 色の使い分け
悪い例
こんな感じに様々な色を使い過ぎると・・・
ごちゃごちゃしていて見難くなる
注目する場所がわからない
背景に文字が溶けて見えない
読めない！

7. 色の使い分け
悪い例
こんな感じに様々な色を使い過ぎると・・・
ごちゃごちゃしていて見難くなる
注目する場所がわからない
背景に文字が溶けて見えない
見たくない！

8. 色の使い分け
色は3色程度で
背景色:70%
メインカラー:25%
アクセントカラー:5%

9. 色の使い分け
メインカラー
テーマの中心となる色
このスライドでは…青
好みで選んで良い
ターゲットが好きそう…
他の人と被らなさそう…
注目されやすそう…
おまえが好きだ！
など

10. 色の使い分け
背景色(ベースカラー)
広い範囲で塗られる
このスライドでは…白
注意点は2つ

11. 背景色
発光する色はNG！
まぶしい・・・

12. 背景色
メインカラーと明度が相対になるように選ぶ
文字 文字
文字 文字

13. 背景色
無彩色や明度が高い色が扱いやすい
メインカラーの明度を上げても良いかも
文字 文字
文字 文字

14. 色の使い分け
アクセントカラー
注目させたい部分の色
このスライドでは…橙色

15. アクセントカラー
選び方
色相環で
できるだけ反対側の
色相から選ぶ

16. 3色じゃ足りない！
そんな時は明度または彩度を変えてみる

17. 3色じゃ足りない！
そんな時は明度または彩度を変えてみる

18. 3色じゃ足りない！
そんな時は明度または彩度を変えてみる

19. 3色じゃ足りない！
色のバランスを崩すのはNG！

20. 3色じゃ足りない！
色のバランスを崩すのはNG！

21. まとめ
• スライド全体の配色は
色相 明度 彩度
の関係を考えて選ぶ
• 同じ内容のスライドでも配色次第で
見やすさが上がる
• 色々組み合わせて新しい配色を見つけてみよう