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

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はこちら