Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Carelyのダッシュボードで カラーユニバーサルデザイン設計を試みた話

9347fe838093bda2909399174501f24a?s=47 ShotaKugawa_Meijin
February 28, 2022
Design
1
230

Carelyのダッシュボードで カラーユニバーサルデザイン設計を試みた話

9347fe838093bda2909399174501f24a?s=128

ShotaKugawa_Meijin

February 28, 2022
Tweet

More Decks by ShotaKugawa_Meijin

See All by ShotaKugawa_Meijin
Similarities Between Building Construction and Software Design Systems
9347fe838093bda2909399174501f24a?s=48 shotakugawa_meijin
0
220

Other Decks in Design

See All in Design
Google UX Design Certificate 受講してみた
959952e60a7a7fca6c0e0338b0de8642?s=48 oquloo
1
660
NCDC_UXSession_CJM20220427
6e51a472cea0c9d058d830eca153cb0f?s=48 ncdc
0
150
なみなみかみっ
A7ef843f33014b2a8e11fd2b22e70684?s=48 naminamikami2021
1
240
dnd board
E07eafb41f4c23afbf5ca3fe1aa83b75?s=48 emmamsketches
0
140
My Yahoo Refresh Overview
Dc9d3d8370a9655046689bfb5a8c086d?s=48 xuechunwu
0
320
Meep
2dd96d0fb363cbdc029639bf0e8452a9?s=48 vincentwu
PRO
1
280
The Party! - Story Sequence
77b4173a70942a13969b84335c2e7695?s=48 diablicos_
0
140
Fairy Unfortunate Storyboard
651ba278ef44f5fe1f14e9f25fd63baf?s=48 livamoah
1
150
Cat Beast
5c0e90ac5b3e37d84a9c5386c39db81e?s=48 hbosnian
1
400
サービス設計12箇条で紐解く「サービスデザイン思考」
40638b9e3a098313234f358d35103735?s=48 y150saya
0
390
ユーザー体験を支える_freeeのデザインシステム活用.pdf
7dac484138925ba3e0b6f52932bdba56?s=48 fkady
1
430
リサーチ文化を組織に埋め込むために実践したこと
0c6fc884dd8b5a4e584feb6a1b615a47?s=48 hiranotomoki
4
1.9k

Featured

See All Featured
Product Roadmaps are Hard
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
34
6.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.3k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
209
39k
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
34k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
21k
The Brand Is Dead. Long Live the Brand.
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
46
2.7k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
280k
Typedesign – Prime Four
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
33
1.3k
Mobile First: as difficult as doing things right
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
213
7.5k
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
61
10k

Transcript

  1. ©iCARE Co., Ltd All rights reserved Carelyのダッシュボードで
 カラーユニバーサルデザイン設計を試 みた話
 2022/02/22(Tue)

    株式会社iCARE 開発部 デザイナー 久川 尚太 (産業保健の高橋名人 @zouzei8to10) < theme >


  2. ©iCARE Co., Ltd All rights reserved Introduction 人事担当者が選ぶ No.1健康管理システム
 製品ページ


  3. ©iCARE Co., Ltd All rights reserved Introduction 人事担当者が選ぶ
 No.1健康管理システム


  4. ©iCARE Co., Ltd All rights reserved Q.カラーユニバーサルデザインとは？ A.多くの人が等しく情報を認識できる配色を用いたデザイン • 色の見え方には個人差があり、人によっては一部の色の組み合わせが区

    別しにくくいことで不便さを感じるケースがある • 色覚の多様性に配慮して、より多くの人に利用しやすい製品や環境、サー ビス、情報を提供するという考え方を「カラーユニバーサルデザイン」と呼 ぶ。

  5. ©iCARE Co., Ltd All rights reserved カラーユニバーサルデザインの例 分別ゴミ箱
 地下鉄の路線図
 チョーク


  6. ©iCARE Co., Ltd All rights reserved カラーユニバーサルデザインの例 slackのアクセシビリティ設定 


  7. ©iCARE Co., Ltd All rights reserved Carelyの面談ダッシュボード機能

  8. ©iCARE Co., Ltd All rights reserved Carelyの面談ダッシュボード機能 面談理由の「最大数」に合わせて20色指定


  9. ©iCARE Co., Ltd All rights reserved Carelyの面談ダッシュボード機能 差分がわかりにくい可能性のある色の組み合わせ 
 面談理由の「最大数」に合わせて20色指定


  10. ©iCARE Co., Ltd All rights reserved 色覚多様性ユーザーの見え方 主に色覚多様性ユーザーは3種類いて 1. 「1（P）型2色覚」

    2. 「2（D）型色覚」 3. 「3（T)型色覚」 の見え方があります。

  11. ©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型色覚を持つ人に 対応したカラーパターンを目指すことにしまし た。


  12. ©iCARE Co., Ltd All rights reserved 現状のカラーパレット

  13. ©iCARE Co., Ltd All rights reserved ブラウザの拡張機能でシミュレーションすると

  14. ©iCARE Co., Ltd All rights reserved P型の見え方
 シュミレーション
 D型の見え方
 シュミレーション


    ブラウザの拡張機能でシミュレーションすると

  15. ©iCARE Co., Ltd All rights reserved 参考となるカラーパレットを探す 引用)https://jfly.uni-koeln.de/colorset/CUD_color_set_GuideBook_2018.pdf 
 カラーユニバーサルデザイン推奨配色セット

    ガイドブック 第２版


  16. ©iCARE Co., Ltd All rights reserved 再設計したカラーパレット

  17. ©iCARE Co., Ltd All rights reserved 再設計したカラーパレット ①
 ①
 ②


    ②
 ②
 設計趣意
 1) メインカラーに近い色は隣あうカラーで色相をズラして配置 することで統一性はあっても見分けられる色に 
 2) アクセントカラーに近い色は隣合う色が明度の差を持つよう に配置する


  18. ©iCARE Co., Ltd All rights reserved Carelyでの適用範囲 P型の見え方
 シュミレーション
 D型の見え方


    シュミレーション


  19. ©iCARE Co., Ltd All rights reserved まとめ カラーユニバーサルデザインを意識した視認性の高いデザインは、 全ての人にとって普遍的な価値のあるデザイン

  20. ©iCARE Co., Ltd All rights reserved ご清聴ありがとうございました！
 \ We're Hiring👍

    / https://herp.careers/v1/icare 👇応募はこちら(HERP) https://note.icare-carely.co.jp/ 👇公式noteはこちら