Framgia × LOUPE Study #4

1. 色
頭を使わないスライド作り
で悩む時間を減らそう
Framgia × LOUPE Study #4
2015.09.28 @yamasy1549
企業ロゴに学ぶ

2. スライド作成の悩みどころ
・内容
・タイトル
・デザイン

3. スライド作成の悩みどころ
・内容
・タイトル
・デザイン
・フォント
・写真
・配色  今日はここ

4. 身近にみる「いい感じの配色」
・企業 / サービスのロゴ
・この配色をそのまま使えば
・いい感じに整うのでは…？

5. 持論
ロゴは…
・デザイナさんが作っている（ことが多い）
→ 色も考えられて作られている
・見慣れているものは配色に違和感がない
→ 親近感 UP
→「どこかで見たことあるような…」




6. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.

7. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
https://about.twitter.com/ja/company/brand-assets
#55acee
#66757f
#292f33

8. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
#292f33
#66757f
#ccd6dd
#55acee
https://about.twitter.com/ja/company/brand-assets

9. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.

10. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
#aebcd3
#3a5897
https://www.facebookbrand.com

11. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
https://www.facebookbrand.com
#3b5998
#afbdd4

12. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.

13. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
https://slack.com/brand-guidelines
#5a3a56
#85d3e0
#e22170
#ecb639
#78972c

14. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
https://slack.com/brand-guidelines
#5a3a56
#85d3e0
#e22170
#ecb639

15. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.

16. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
http://framgia.co.jp
#e74c3c
#ef8001
#000000

17. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.

18. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
http://lo-upe.com
#000000
#24b34e

19. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.

20. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
http://www.family.co.jp
#1b9331
#007eb5

21. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
https://qiita.com
#59bb0c
#458ac5

22. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.

23. Lorem ipsum dolor sit amet
consectetur adipiscing elit. Aenean dignissim,
metus non vehicula egestas, sapien tellus aliquet erat,
eu tincidunt urna mi nec odio. Vestibulum sodales,
est et volutpat eleifend, magna orci interdum nisi,
semper pharetra orci sapien ac nunc.
Proin non sem a tellus congue sollicitudin.
In hac habitasse platea dictumst. Nunc magna leo,
tincidunt ac pharetra a, faucibus dignissim neque.
#ea0000
#ffc300
http://www.aboutmcdonalds.com

24. まとめ
企業 / サービスのロゴ（サイトも！）を見て
スライドを作ると、うまくいくかもしれない
brand guide があったりするので
そこを見ると色とか細かく書いてある
ノンストレスなスライド作成ライフを！！