Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
みやすいデザインに するための基礎知識
Search
KyotoUI
April 18, 2019
0
390
みやすいデザインに するための基礎知識
KyotoUI
April 18, 2019
Tweet
Share
More Decks by KyotoUI
See All by KyotoUI
視覚言語とUI
kyotoui
1
350
Featured
See All Featured
Atom: Resistance is Futile
akmur
261
25k
Clear Off the Table
cherdarchuk
91
320k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Faster Mobile Websites
deanohume
304
30k
Web Components: a chance to create the future
zenorocha
310
42k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Done Done
chrislema
181
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.3k
Optimizing for Happiness
mojombo
375
69k
Transcript
みやすいデザインに するための基礎知識 いっさん
自己紹介 • マネーフォワード株式会社 フロントエンドエンジニア • 2019年2月までフリュー株式会社に所属 • 色彩検定をとったり、趣味でデザインやお絵かきしたり • いろんな方々のミサワアイコンつくった人
いっさん @883_issan
はじめに • 業務系システムは顧客が長時間使う • 顧客の仕事の効率に直結する みやすくすることはとても重要!
みえやすいとは?
みえやすい定義 • 視認性(しにんせい) • 可読性(かどくせい) • 明視性(めいしせい) • 誘目性(ゆうもくせい) •
識別性(しきべつせい)
視認性(しにんせい)
視認性(しにんせい) • みやすいかどうか • 明度差できまる
明度とは
視認性の例
良い例
悪い例
可読性(かどくせい)
可読性 • 文字や数字・記号の意味の理解のしやすさのこと • 可読性を高めるには、背景と文字の彩度差を大きくする とよい
彩度とは
可読性の例
良い例
悪い例
視認性と可読性の違い 見やすさは視認性、読みやすさは可読性 視認性は、明度差に注意! 可読性は、彩度に注意!
ツールが用意されている
明視性(めいしせい)
明視性(めいしせい) • 図形が伝える意味の理解のしやすさのこと • 明視性の高さが要求されるのは、ピクトグラムなど、絵 や図形で何らかの情報を示したり、注意を促したりする 場面
明視性の例
明視性の改善例
誘目性(ゆうもくせい)
誘目性(ゆうもくせい) • 人目を引きつける度合いのこと • 背景が「黒」だと「黄」、背景が「白」だと「赤」が誘目性の 高い配色
誘目性の例
識別性(しきべつせい)
識別性(しきべつせい) • 複数の対象の中での区別・認識のしやすさのこと • 赤「暖かい」、青は「冷たい」、緑は「穏やか」などの印象 を利用する
識別性の例
識別性の例
識別性の例
まとめ • 視認性・・・明度差に配慮して見やすく • 可読性・・・彩度に配慮して読みやすく • 明視性・・・誰がみてもわかりやすいものを使う • 誘目性・・・注意を引きつけたいときは赤か黄色 •
識別性・・・色をつけて見分けやく
ご清聴ありがとうございました!