Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

kintoneとカラーユニバーサルデザイン

487 views

Published on

2017年11月9日開催のイベント「Web・アプリとカラーユニバーサルデザイン」サイボウズの事例紹介です。
https://connpass.com/event/69566/

Published in: Design
  • Be the first to comment

  • Be the first to like this

kintoneとカラーユニバーサルデザイン

  1. 1. kintoneとカラーユニバーサルデザイン サイボウズ株式会社 ⼩林⼤輔
  2. 2. ⾃⼰紹介 ▌ ⼩林⼤輔 @sukoyakarizumu ▌ サイボウズ株式会社 新卒6年⽬ ▌ Webサービス「kintone」プログラマー ▌ 兼 デザイングループ アクセシビリティ担当
  3. 3. kintone ▌チームで使うアプリを簡単に作れるサービス lGoogleフォーム+スプレッドシートのもっとすごいやつ lドラッグ&ドロップで簡単にフォームとデータベースを作成 lコミュニケーション機能も充実 ▌国内外 5,000 以上のチームを⽀援
  4. 4. おはなしすること 1. kintoneとCUD 2. これまでのデザイン&アクセシビリティ 3. CUDのためにサイボウズができること
  5. 5. 1. kintoneとCUD
  6. 6. 検証⽅法 ▌Spectrum(⾊覚をシミュレーションするChrome拡張)を 使ってkintoneを操作
  7. 7. 強調になっていない⾊(1) 強調のための⾚⾊が埋もれてしまう場合がある
  8. 8. 強調になっていない⾊(2) 強調のための⾚⾊が埋もれてしまう場合がある
  9. 9. ユーザが選択できる⾊ ユーザに⾊を選ばせるなら、⾒やすいパレットを⽤意すべき
  10. 10. ユーザが書いた⽂章が意図どおり伝わるか?
  11. 11. 代替⼿段があるデザイン≠⾒分けやすいデザイン(1) ⽂字や記号で情報を伝達することと⾒やすいこととは別
  12. 12. 代替⼿段があるデザイン≠⾒分けやすいデザイン(2) ⽂字や記号で情報を伝達することと⾒やすいこととは別
  13. 13. 2. これまでの デザイン&アクセシビリティ
  14. 14. デザインとアクセシビリティの黎明期 ▌デザイナーが上流を担当しない ▌デザインガイドラインが存在しない ▌アクセシビリティはノーガード
  15. 15. デザイングループのミッション Planning & Design アイデアを素早く形にする Accessibility & Global 世界中のすべての⼈に チームワークを届ける
  16. 16. ▌ ユーザビリティテスト @⽇本 / US ユーザビリティテスト @日本 / US
  17. 17. ▌ ヒアリング×ワークショップ ヒアリング ワークショップ
  18. 18. ▌ プロトタイピング プロトタイピング
  19. 19. 面前デザイン
  20. 20. アクセシビリティ勉強会 ▌参加メンバー約20⼈ • プログラマー • デザイナー • プロダクトマネージャー • ドキュメントライター ▌ 輪講形式で章ごとに発表
  21. 21. リードユーザーによるユーザビリティテスト
  22. 22. アクセシビリティガイドラインを作成 最低限気をつけてほしいルールを明⽂化してチーム共有 1.⾒出し 2.キーボード操作 3.画像と代替テキスト 4.感覚⾮依存 5.リサイズ 6.動きのあるコンテンツ
  23. 23. ガイドラインの「⾊」に関する項⽬ 感覚⾮依存 • 配置のみに依存した表現がない • 形/⼤きさのみに依存した表現がない • ⾊のみに依存した表現がない (モノクロしても同じ内容が認識できる)
  24. 24. 3. CUDのために サイボウズができること
  25. 25. ⾊の収集と再検討 ▌ アプリの規模が⼤きく、⼀気にリニューアルは困難 ▌ 現在使われている⾊を洗い出してガイドライン化 ⾊の収集 ⾊の再選択 ⾊の修正 CUD コントラスト⽐
  26. 26. CUDに関する社内啓蒙 ▌ アクセシビリティの啓蒙活動でCUDについて紹介する p開発部内のアクセシビリティ勉強会 p新⼈教育 ▌ 体験ツールを使ってもらう ▌ 注意を払うべき典型的なデザインや陥りがちなミスを伝える
  27. 27. まとめ ▌ kintoneにはCUDに関する様々な課題がありそう ▌ アクセシビリティと同じくCUDに関しても 社内啓蒙とガイドライン化を進めます
  28. 28. おわり

×