Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
みやすいデザインに するための基礎知識
Search
KyotoUI
April 18, 2019
0
420
みやすいデザインに するための基礎知識
KyotoUI
April 18, 2019
Tweet
Share
More Decks by KyotoUI
See All by KyotoUI
視覚言語とUI
kyotoui
1
380
Featured
See All Featured
Producing Creativity
orderedlist
PRO
348
40k
The Pragmatic Product Professional
lauravandoore
37
7k
How to Think Like a Performance Engineer
csswizardry
28
2.3k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Writing Fast Ruby
sferik
630
62k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
RailsConf 2023
tenderlove
30
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
Agile that works and the tools we love
rasmusluckow
331
21k
Transcript
みやすいデザインに するための基礎知識 いっさん
自己紹介 • マネーフォワード株式会社 フロントエンドエンジニア • 2019年2月までフリュー株式会社に所属 • 色彩検定をとったり、趣味でデザインやお絵かきしたり • いろんな方々のミサワアイコンつくった人
いっさん @883_issan
はじめに • 業務系システムは顧客が長時間使う • 顧客の仕事の効率に直結する みやすくすることはとても重要!
みえやすいとは?
みえやすい定義 • 視認性(しにんせい) • 可読性(かどくせい) • 明視性(めいしせい) • 誘目性(ゆうもくせい) •
識別性(しきべつせい)
視認性(しにんせい)
視認性(しにんせい) • みやすいかどうか • 明度差できまる
明度とは
視認性の例
良い例
悪い例
可読性(かどくせい)
可読性 • 文字や数字・記号の意味の理解のしやすさのこと • 可読性を高めるには、背景と文字の彩度差を大きくする とよい
彩度とは
可読性の例
良い例
悪い例
視認性と可読性の違い 見やすさは視認性、読みやすさは可読性 視認性は、明度差に注意! 可読性は、彩度に注意!
ツールが用意されている
明視性(めいしせい)
明視性(めいしせい) • 図形が伝える意味の理解のしやすさのこと • 明視性の高さが要求されるのは、ピクトグラムなど、絵 や図形で何らかの情報を示したり、注意を促したりする 場面
明視性の例
明視性の改善例
誘目性(ゆうもくせい)
誘目性(ゆうもくせい) • 人目を引きつける度合いのこと • 背景が「黒」だと「黄」、背景が「白」だと「赤」が誘目性の 高い配色
誘目性の例
識別性(しきべつせい)
識別性(しきべつせい) • 複数の対象の中での区別・認識のしやすさのこと • 赤「暖かい」、青は「冷たい」、緑は「穏やか」などの印象 を利用する
識別性の例
識別性の例
識別性の例
まとめ • 視認性・・・明度差に配慮して見やすく • 可読性・・・彩度に配慮して読みやすく • 明視性・・・誰がみてもわかりやすいものを使う • 誘目性・・・注意を引きつけたいときは赤か黄色 •
識別性・・・色をつけて見分けやく
ご清聴ありがとうございました!