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
500
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
490
Other Decks in Design
See All in Design
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
320
Designing UIs without a UI designer
strongeron
0
110
Goodpatch Tour💙 / We are hiring!
goodpatch
28
690k
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
220
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
910
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
570
モデル・デザイン入門
akitsugu7935
0
460
今日から始めるDesignOpsのヒント
isaikaori
1
410
Web 組版の課題とその解法
yamatoiizuka
0
110
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
Featured
See All Featured
Fireside Chat
paigeccino
20
2.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
The Cult of Friendly URLs
andyhume
74
5.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Navigating Team Friction
lara
177
13k
Atom: Resistance is Futile
akmur
258
25k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
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はこちら