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
410
みやすいデザインに するための基礎知識
KyotoUI
April 18, 2019
Tweet
Share
More Decks by KyotoUI
See All by KyotoUI
視覚言語とUI
kyotoui
1
360
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Visualization
eitanlees
146
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Docker and Python
trallard
44
3.4k
Producing Creativity
orderedlist
PRO
346
40k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Transcript
みやすいデザインに するための基礎知識 いっさん
自己紹介 • マネーフォワード株式会社 フロントエンドエンジニア • 2019年2月までフリュー株式会社に所属 • 色彩検定をとったり、趣味でデザインやお絵かきしたり • いろんな方々のミサワアイコンつくった人
いっさん @883_issan
はじめに • 業務系システムは顧客が長時間使う • 顧客の仕事の効率に直結する みやすくすることはとても重要!
みえやすいとは?
みえやすい定義 • 視認性(しにんせい) • 可読性(かどくせい) • 明視性(めいしせい) • 誘目性(ゆうもくせい) •
識別性(しきべつせい)
視認性(しにんせい)
視認性(しにんせい) • みやすいかどうか • 明度差できまる
明度とは
視認性の例
良い例
悪い例
可読性(かどくせい)
可読性 • 文字や数字・記号の意味の理解のしやすさのこと • 可読性を高めるには、背景と文字の彩度差を大きくする とよい
彩度とは
可読性の例
良い例
悪い例
視認性と可読性の違い 見やすさは視認性、読みやすさは可読性 視認性は、明度差に注意! 可読性は、彩度に注意!
ツールが用意されている
明視性(めいしせい)
明視性(めいしせい) • 図形が伝える意味の理解のしやすさのこと • 明視性の高さが要求されるのは、ピクトグラムなど、絵 や図形で何らかの情報を示したり、注意を促したりする 場面
明視性の例
明視性の改善例
誘目性(ゆうもくせい)
誘目性(ゆうもくせい) • 人目を引きつける度合いのこと • 背景が「黒」だと「黄」、背景が「白」だと「赤」が誘目性の 高い配色
誘目性の例
識別性(しきべつせい)
識別性(しきべつせい) • 複数の対象の中での区別・認識のしやすさのこと • 赤「暖かい」、青は「冷たい」、緑は「穏やか」などの印象 を利用する
識別性の例
識別性の例
識別性の例
まとめ • 視認性・・・明度差に配慮して見やすく • 可読性・・・彩度に配慮して読みやすく • 明視性・・・誰がみてもわかりやすいものを使う • 誘目性・・・注意を引きつけたいときは赤か黄色 •
識別性・・・色をつけて見分けやく
ご清聴ありがとうございました!