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
400
みやすいデザインに するための基礎知識
KyotoUI
April 18, 2019
Tweet
Share
More Decks by KyotoUI
See All by KyotoUI
視覚言語とUI
kyotoui
1
360
Featured
See All Featured
Fireside Chat
paigeccino
37
3.3k
Building an army of robots
kneath
304
45k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
15
1.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
The Pragmatic Product Professional
lauravandoore
33
6.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Embracing the Ebb and Flow
colly
84
4.6k
How STYLIGHT went responsive
nonsquared
99
5.4k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Transcript
みやすいデザインに するための基礎知識 いっさん
自己紹介 • マネーフォワード株式会社 フロントエンドエンジニア • 2019年2月までフリュー株式会社に所属 • 色彩検定をとったり、趣味でデザインやお絵かきしたり • いろんな方々のミサワアイコンつくった人
いっさん @883_issan
はじめに • 業務系システムは顧客が長時間使う • 顧客の仕事の効率に直結する みやすくすることはとても重要!
みえやすいとは?
みえやすい定義 • 視認性(しにんせい) • 可読性(かどくせい) • 明視性(めいしせい) • 誘目性(ゆうもくせい) •
識別性(しきべつせい)
視認性(しにんせい)
視認性(しにんせい) • みやすいかどうか • 明度差できまる
明度とは
視認性の例
良い例
悪い例
可読性(かどくせい)
可読性 • 文字や数字・記号の意味の理解のしやすさのこと • 可読性を高めるには、背景と文字の彩度差を大きくする とよい
彩度とは
可読性の例
良い例
悪い例
視認性と可読性の違い 見やすさは視認性、読みやすさは可読性 視認性は、明度差に注意! 可読性は、彩度に注意!
ツールが用意されている
明視性(めいしせい)
明視性(めいしせい) • 図形が伝える意味の理解のしやすさのこと • 明視性の高さが要求されるのは、ピクトグラムなど、絵 や図形で何らかの情報を示したり、注意を促したりする 場面
明視性の例
明視性の改善例
誘目性(ゆうもくせい)
誘目性(ゆうもくせい) • 人目を引きつける度合いのこと • 背景が「黒」だと「黄」、背景が「白」だと「赤」が誘目性の 高い配色
誘目性の例
識別性(しきべつせい)
識別性(しきべつせい) • 複数の対象の中での区別・認識のしやすさのこと • 赤「暖かい」、青は「冷たい」、緑は「穏やか」などの印象 を利用する
識別性の例
識別性の例
識別性の例
まとめ • 視認性・・・明度差に配慮して見やすく • 可読性・・・彩度に配慮して読みやすく • 明視性・・・誰がみてもわかりやすいものを使う • 誘目性・・・注意を引きつけたいときは赤か黄色 •
識別性・・・色をつけて見分けやく
ご清聴ありがとうございました!