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
Carelyのダッシュボードで カラーユニバーサルデザイン設計を試みた話
Search
ShotaKugawa_Meijin
February 28, 2022
Design
1
660
Carelyのダッシュボードで カラーユニバーサルデザイン設計を試みた話
ShotaKugawa_Meijin
February 28, 2022
Tweet
Share
More Decks by ShotaKugawa_Meijin
See All by ShotaKugawa_Meijin
Similarities Between Building Construction and Software Design Systems
shotakugawa_meijin
0
640
Other Decks in Design
See All in Design
オープンデータを利用して色々なものを作った話
hjmkth
1
110
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
670
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
400
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
3.9k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
500
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
270
AI動画生成ガチャ紹介
piyo7
1
110
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
170
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
640
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
Cards | Storyboards
giofortuna_story
0
280
Saudade typeface
tiagoporto
0
320
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
86
4.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Optimizing for Happiness
mojombo
379
70k
Navigating Team Friction
lara
187
15k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building Applications with DynamoDB
mza
95
6.5k
Transcript
©iCARE Co., Ltd All rights reserved Carelyのダッシュボードで カラーユニバーサルデザイン設計を試 みた話 2022/02/22(Tue)
株式会社iCARE 開発部 デザイナー 久川 尚太 (産業保健の高橋名人 @zouzei8to10) < theme >
©iCARE Co., Ltd All rights reserved Introduction 人事担当者が選ぶ No.1健康管理システム 製品ページ
©iCARE Co., Ltd All rights reserved Introduction 人事担当者が選ぶ No.1健康管理システム
©iCARE Co., Ltd All rights reserved Q.カラーユニバーサルデザインとは? A.多くの人が等しく情報を認識できる配色を用いたデザイン • 色の見え方には個人差があり、人によっては一部の色の組み合わせが区
別しにくくいことで不便さを感じるケースがある • 色覚の多様性に配慮して、より多くの人に利用しやすい製品や環境、サー ビス、情報を提供するという考え方を「カラーユニバーサルデザイン」と呼 ぶ。
©iCARE Co., Ltd All rights reserved カラーユニバーサルデザインの例 分別ゴミ箱 地下鉄の路線図 チョーク
©iCARE Co., Ltd All rights reserved カラーユニバーサルデザインの例 slackのアクセシビリティ設定
©iCARE Co., Ltd All rights reserved Carelyの面談ダッシュボード機能
©iCARE Co., Ltd All rights reserved Carelyの面談ダッシュボード機能 面談理由の「最大数」に合わせて20色指定
©iCARE Co., Ltd All rights reserved Carelyの面談ダッシュボード機能 差分がわかりにくい可能性のある色の組み合わせ 面談理由の「最大数」に合わせて20色指定
©iCARE Co., Ltd All rights reserved 色覚多様性ユーザーの見え方 主に色覚多様性ユーザーは3種類いて 1. 「1(P)型2色覚」
2. 「2(D)型色覚」 3. 「3(T)型色覚」 の見え方があります。
©iCARE Co., Ltd All rights reserved 色覚多様性ユーザーの見え方 主に色覚多様性ユーザーは3種類いて 1. 「1(P)型2色覚」
2. 「2(D)型色覚」 3. 「3(T)型色覚」 の見え方があります。 まずは、 • 日本人男性の20人に1人(5%) • 日本人女性の500人に1人(0.2%) いるといわれているP型、D型色覚を持つ人に 対応したカラーパターンを目指すことにしまし た。
©iCARE Co., Ltd All rights reserved 現状のカラーパレット
©iCARE Co., Ltd All rights reserved ブラウザの拡張機能でシミュレーションすると
©iCARE Co., Ltd All rights reserved P型の見え方 シュミレーション D型の見え方 シュミレーション
ブラウザの拡張機能でシミュレーションすると
©iCARE Co., Ltd All rights reserved 参考となるカラーパレットを探す 引用)https://jfly.uni-koeln.de/colorset/CUD_color_set_GuideBook_2018.pdf カラーユニバーサルデザイン推奨配色セット
ガイドブック 第2版
©iCARE Co., Ltd All rights reserved 再設計したカラーパレット
©iCARE Co., Ltd All rights reserved 再設計したカラーパレット ① ① ②
② ② 設計趣意 1) メインカラーに近い色は隣あうカラーで色相をズラして配置 することで統一性はあっても見分けられる色に 2) アクセントカラーに近い色は隣合う色が明度の差を持つよう に配置する
©iCARE Co., Ltd All rights reserved Carelyでの適用範囲 P型の見え方 シュミレーション D型の見え方
シュミレーション
©iCARE Co., Ltd All rights reserved まとめ カラーユニバーサルデザインを意識した視認性の高いデザインは、 全ての人にとって普遍的な価値のあるデザイン
©iCARE Co., Ltd All rights reserved ご清聴ありがとうございました! \ We're Hiring👍
/ https://herp.careers/v1/icare 👇応募はこちら(HERP) https://note.icare-carely.co.jp/ 👇公式noteはこちら