みやすいデザインに するための基礎知識

Transcript

1. みやすいデザインに するための基礎知識 いっさん
2. 自己紹介 • マネーフォワード株式会社 フロントエンドエンジニア • 2019年2月までフリュー株式会社に所属 • 色彩検定をとったり、趣味でデザインやお絵かきしたり • いろんな方々のミサワアイコンつくった人 いっさん @883_issan
3. はじめに • 業務系システムは顧客が長時間使う • 顧客の仕事の効率に直結する みやすくすることはとても重要！
4. みえやすいとは？
5. みえやすい定義 • 視認性（しにんせい） • 可読性（かどくせい） • 明視性（めいしせい） • 誘目性（ゆうもくせい） • 識別性（しきべつせい）
6. 視認性（しにんせい）
7. 視認性（しにんせい） • みやすいかどうか • 明度差できまる
8. 明度とは
9. 視認性の例
10. 良い例
11. 悪い例
12. 可読性（かどくせい）
13. 可読性 • 文字や数字・記号の意味の理解のしやすさのこと • 可読性を高めるには、背景と文字の彩度差を大きくする とよい
14. 彩度とは
15. 可読性の例
16. 良い例
17. 悪い例
18. 視認性と可読性の違い 見やすさは視認性、読みやすさは可読性 視認性は、明度差に注意！ 可読性は、彩度に注意！
19. ツールが用意されている
20. 明視性（めいしせい）
21. 明視性（めいしせい） • 図形が伝える意味の理解のしやすさのこと • 明視性の高さが要求されるのは、ピクトグラムなど、絵 や図形で何らかの情報を示したり、注意を促したりする 場面
22. 明視性の例
23. 明視性の改善例
24. 誘目性（ゆうもくせい）
25. 誘目性（ゆうもくせい） • 人目を引きつける度合いのこと • 背景が「黒」だと「黄」、背景が「白」だと「赤」が誘目性の 高い配色
26. 誘目性の例
27. 識別性（しきべつせい）
28. 識別性（しきべつせい） • 複数の対象の中での区別・認識のしやすさのこと • 赤「暖かい」、青は「冷たい」、緑は「穏やか」などの印象 を利用する
29. 識別性の例
30. 識別性の例
31. 識別性の例
32. まとめ • 視認性・・・明度差に配慮して見やすく • 可読性・・・彩度に配慮して読みやすく • 明視性・・・誰がみてもわかりやすいものを使う • 誘目性・・・注意を引きつけたいときは赤か黄色 • 識別性・・・色をつけて見分けやく
33. ご清聴ありがとうございました！