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
これだけは押さえておこう、UIのカラー設計基礎知識
Search
nobo
September 28, 2020
Design
0
190
これだけは押さえておこう、UIのカラー設計基礎知識
社内LT用に作成した資料です。
nobo
September 28, 2020
Tweet
Share
More Decks by nobo
See All by nobo
Flutterアプリ「YUMENAVI」をデザインしました
nobonobopurin
1
600
Other Decks in Design
See All in Design
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
630
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.4k
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1k
最速[要出典]アクセシビリティチェック
magi1125
2
150
実利の世界で、表現者である
kiyou77
2
320
(第1回) アーキテクト・テックリード育成講座
masakaya
0
130
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
500
Night Shift (beginning sequence)
cpineda57
0
950
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
590
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
500
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
15
7k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
2.4k
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
A Philosophy of Restraint
colly
203
16k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
A designer walks into a library…
pauljervisheath
205
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Become a Pro
speakerdeck
PRO
26
5.1k
GraphQLとの向き合い方2022年版
quramy
44
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Transcript
UI Designer Pixels チェ・ウナ 28 September 2020 Yumemi UI Designer
Lightning Talks #1 これだけは押さえておこう、 UIのカラー設計基礎知識 ©︎ Yumemi, Inc.
チェ・ウナ UI Designer Pixels 2019.04 株式会社ゆめみ入社 ・自社新卒採用サイトデザイン担当 ・金融アプリビジュアルデザイン担当 ・エンタメ企業新サービズUIデザイン担当 ・飲食/家電メーカーアプリダークモード担当
・電子決済アプリUIデザイン・イラスト担当 などなど ミニマリスト インタラクションデザイン デザインシステム 情報設計 グラフィックデザイン Webアクセシビリティ BX 猫 Kドル CITY POP カフェ ピザ 映画 1 ©︎Yumemi, Inc.
Contents これだけは押さえておこう、UIのカラー設計基礎知識 2 1 自然界の法則を理解しよう 3 p 2 視覚的階層を意識しよう 10
p 2 意味を持つ名前を付けよう 17 p 3 コントラスト比を確認しよう 25 p ©︎ Yumemi, Inc.
1 自 然 界 の 法 則 を 理 解
し よ う
これだけは押さえておこう、UIのカラー設計基礎知識 自然界の法則を理解しよう 1 4 一貫性のある世界を作るために、 実世界の基本的な性質をデザインに取り入れる 一貫性がないと、ユーザーにとっては 非常にストレスフルで、心理的エネルギーを消耗
sこれだけは押さえておこう、UIのカラー設計基礎知識 自然界の法則を理解しよう 1 5
自然界の法則を理解しよう 1 sこれだけは押さえておこう、UIのカラー設計基礎知識 6 明度が異なる 影が異なる ©︎Yumemi, Inc.
自然界の法則を理解しよう 1 sこれだけは押さえておこう、UIのカラー設計基礎知識 7 0 0 8 8 16 16
©︎Yumemi, Inc.
自然界の法則を理解しよう 1 sこれだけは押さえておこう、UIのカラー設計基礎知識 8 iOS Android Mobile UI Illustration Light
Dark ©︎Yumemi, Inc.
自然界の法則を理解しよう 1 sこれだけは押さえておこう、UIのカラー設計基礎知識 9 Material DesignGuidelines HIG (Dark Mode) ©︎Yumemi,
Inc.
2 視覚的階層を意識しよう
sこれだけは押さえておこう、UIのカラー設計基礎知識 視覚的階層を意識しよう 2 11 ©︎Yumemi, Inc.
sこれだけは押さえておこう、UIのカラー設計基礎知識 視覚的階層を意識しよう 2 12 UI要素を視覚的階層で表現するための手段 (タイポグラフィと組み合わせるとより効果的) コンテンツの優先順位を視覚的に表現することを意味 カラー 視覚的階層 ©︎Yumemi,
Inc.
sこれだけは押さえておこう、UIのカラー設計基礎知識 視覚的階層を意識しよう 2 ©︎Yumemi, Inc. 13
視覚的階層を意識しよう 2 色相 Hue 明度 Value 彩度 Chroma 色調 Tone
sこれだけは押さえておこう、UIのカラー設計基礎知識 ©︎Yumemi, Inc. 14
2019.06 2020.09 ©︎ Yumemi, Inc. 15 sこれだけは押さえておこう、UIのカラー設計基礎知識
視覚的階層を意識しよう 2 sこれだけは押さえておこう、UIのカラー設計基礎知識 ©︎Yumemi, Inc. 16 60 - 30 -
10 ルール 60%をメイン色 / 30%補助色 / 10%をアクセントカラー カラーやタイポグラフィを使ってコンテンツに優先順位をつける グレースケールに彩度を足すなどして、主要カラーとトーンを合わせた淡い色を使用 真っ黒・真っ白の取り扱い注意 #000000と#FFFFFFはコントラスト比が高すぎるのでユーザーの眼が疲れてしまう 赤はエラー・緑は成功・黄色は警告 赤・緑・黄色が表す「状態」の解釈は世界共通
3 意 味 を 持 つ 名 前 を 付
け よ う
意味を持つ名前を付けよう 3 ©︎Yumemi, Inc. 18 sこれだけは押さえておこう、UIのカラー設計基礎知識
意味を持つ名前を付けよう 3 色に意味を持つ名前をつけると... ©︎Yumemi, Inc. 19 sこれだけは押さえておこう、UIのカラー設計基礎知識
デザイナー 意味を持つ名前を付けよう 3 ©︎Yumemi, Inc. 役割ごとに定義されてるから、色変更などの管理がしやすい! 複数人作業する際、一貫したスタイルのUI作れる! 20 エンジニア sこれだけは押さえておこう、UIのカラー設計基礎知識
1.抽象的な名前(色名と色調) 2.直接的な名前(機能・役割名) ex. base / blue400 / yumemiblack ex. bg_primary
/ separate_contents / txt_link 意味を持つ名前を付けよう 3 ©︎Yumemi, Inc. メリット メリット いろんな箇所で使い回せる どこで使われたがすぐにわかるので管理しやすい デメリット デメリット 後からカラーが増えると名付けが難しい 初期のセッティングに時間がかかる 21 sこれだけは押さえておこう、UIのカラー設計基礎知識
意味を持つ名前を付けよう 3 ©︎Yumemi, Inc. 実際どうしてる? 1+2を合わせて名前を付けてる この色どこで使う?色の役割さえ共有できていれば、 「名前」自体は、どう付けても良いかなと... 22 sこれだけは押さえておこう、UIのカラー設計基礎知識
意味を持つ名前を付けよう 3 ©︎Yumemi, Inc. 実際どうしてる? 23 BACKGROUND BASE separate FILL
BRAND COLOR Secondary Tertiary Primary Light Dull Dark Bright Pale Deep sこれだけは押さえておこう、UIのカラー設計基礎知識
意味を持つ名前を付けよう 3 YDK(Yumemi Design Kit)参考 @s_jeon @e_choi ©︎Yumemi, Inc. 24
sこれだけは押さえておこう、UIのカラー設計基礎知識
4 コ ン ト ラ ス ト 比 を 確
認 し よ う
製品のアクセシビリティを改善すると、低視力、失明、聴覚障害、認知障害、運動障害、または状況障害(腕 の骨折など)を含むすべてのユーザーの使いやすさが向上します。 Webアクセシビリティ = 情報やサービスへのアクセスのしやすさ = 誰もが利用できること コントラスト比を確認しよう 4
©︎Yumemi, Inc. 26 sこれだけは押さえておこう、UIのカラー設計基礎知識
コントラスト比を確認しよう 4 ©︎Yumemi, Inc. デザイニングWebアクセシビリティ: アクセシブルな設計やコンテンツ制作のアプローチ 27 sこれだけは押さえておこう、UIのカラー設計基礎知識
コントラスト比を確認しよう 4 ©︎Yumemi, Inc. 総務省が発表したWebアクセシビリティにおける推奨基準 4.5 : 1 3 :
1 大きなテキスト 小さなテキスト 総務省が発表しているWebアクセシビリティにおける「みんなの公共サイト運用 ガイドライン(2016年版)」でも、公的機関に対してレベルAA対応を推奨、企 業サイトではA、もしくはAAの一部に準拠することが一般的。 28 *Bold体ならテキストが小さくても 3:1以上でOK 以上 以上
https://web.landgarage.co.jp/2018/08/24/websitenosirokuro/ https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html https://www.studio-umi.jp/blog/185/549 https://material.io/design https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/ 29
ご清聴ありがとうございました 30