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

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

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

9347fe838093bda2909399174501f24a?s=128

ShotaKugawa_Meijin

February 28, 2022
Tweet

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 
 カラーユニバーサルデザイン推奨配色セット

    ガイドブック 第2版

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