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
370
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.4k
Faster Mobile Websites
deanohume
307
31k
GraphQLとの向き合い方2022年版
quramy
46
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
RailsConf 2023
tenderlove
30
1.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fireside Chat
paigeccino
37
3.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Balancing Empowerment & Direction
lara
1
350
Agile that works and the tools we love
rasmusluckow
329
21k
Transcript
みやすいデザインに するための基礎知識 いっさん
自己紹介 • マネーフォワード株式会社 フロントエンドエンジニア • 2019年2月までフリュー株式会社に所属 • 色彩検定をとったり、趣味でデザインやお絵かきしたり • いろんな方々のミサワアイコンつくった人
いっさん @883_issan
はじめに • 業務系システムは顧客が長時間使う • 顧客の仕事の効率に直結する みやすくすることはとても重要!
みえやすいとは?
みえやすい定義 • 視認性(しにんせい) • 可読性(かどくせい) • 明視性(めいしせい) • 誘目性(ゆうもくせい) •
識別性(しきべつせい)
視認性(しにんせい)
視認性(しにんせい) • みやすいかどうか • 明度差できまる
明度とは
視認性の例
良い例
悪い例
可読性(かどくせい)
可読性 • 文字や数字・記号の意味の理解のしやすさのこと • 可読性を高めるには、背景と文字の彩度差を大きくする とよい
彩度とは
可読性の例
良い例
悪い例
視認性と可読性の違い 見やすさは視認性、読みやすさは可読性 視認性は、明度差に注意! 可読性は、彩度に注意!
ツールが用意されている
明視性(めいしせい)
明視性(めいしせい) • 図形が伝える意味の理解のしやすさのこと • 明視性の高さが要求されるのは、ピクトグラムなど、絵 や図形で何らかの情報を示したり、注意を促したりする 場面
明視性の例
明視性の改善例
誘目性(ゆうもくせい)
誘目性(ゆうもくせい) • 人目を引きつける度合いのこと • 背景が「黒」だと「黄」、背景が「白」だと「赤」が誘目性の 高い配色
誘目性の例
識別性(しきべつせい)
識別性(しきべつせい) • 複数の対象の中での区別・認識のしやすさのこと • 赤「暖かい」、青は「冷たい」、緑は「穏やか」などの印象 を利用する
識別性の例
識別性の例
識別性の例
まとめ • 視認性・・・明度差に配慮して見やすく • 可読性・・・彩度に配慮して読みやすく • 明視性・・・誰がみてもわかりやすいものを使う • 誘目性・・・注意を引きつけたいときは赤か黄色 •
識別性・・・色をつけて見分けやく
ご清聴ありがとうございました!