1. kintoneとカラーユニバーサルデザイン
サイボウズ株式会社 ⼩林⼤輔

2. ⾃⼰紹介
▌ ⼩林⼤輔 @sukoyakarizumu
▌ サイボウズ株式会社 新卒6年⽬
▌ Webサービス「kintone」プログラマー
▌ 兼 デザイングループ アクセシビリティ担当

3. kintone
▌チームで使うアプリを簡単に作れるサービス
lGoogleフォーム+スプレッドシートのもっとすごいやつ
lドラッグ＆ドロップで簡単にフォームとデータベースを作成
lコミュニケーション機能も充実
▌国内外 5,000 以上のチームを⽀援

4. おはなしすること
1. kintoneとCUD
2. これまでのデザイン&アクセシビリティ
3. CUDのためにサイボウズができること

5. 1. kintoneとCUD

6. 検証⽅法
▌Spectrum(⾊覚をシミュレーションするChrome拡張)を
使ってkintoneを操作

7. 強調になっていない⾊(1)
強調のための⾚⾊が埋もれてしまう場合がある

8. 強調になっていない⾊(2)
強調のための⾚⾊が埋もれてしまう場合がある

9. ユーザが選択できる⾊
ユーザに⾊を選ばせるなら、⾒やすいパレットを⽤意すべき

10. ユーザが書いた⽂章が意図どおり伝わるか？

11. 代替⼿段があるデザイン≠⾒分けやすいデザイン(1)
⽂字や記号で情報を伝達することと⾒やすいこととは別

12. 代替⼿段があるデザイン≠⾒分けやすいデザイン(2)
⽂字や記号で情報を伝達することと⾒やすいこととは別

13. 2. これまでの
デザイン&アクセシビリティ

14. デザインとアクセシビリティの黎明期
▌デザイナーが上流を担当しない
▌デザインガイドラインが存在しない
▌アクセシビリティはノーガード

15. デザイングループのミッション
Planning &
Design
アイデアを素早く形にする
Accessibility &
Global
世界中のすべての⼈に
チームワークを届ける

16. ▌ ユーザビリティテスト @⽇本 / US
ユーザビリティテスト @日本 / US

17. ▌ ヒアリング×ワークショップ
ヒアリング ワークショップ

18. ▌ プロトタイピング
プロトタイピング

19. 面前デザイン

20. アクセシビリティ勉強会
▌参加メンバー約20⼈
• プログラマー
• デザイナー
• プロダクトマネージャー
• ドキュメントライター
▌ 輪講形式で章ごとに発表

21. リードユーザーによるユーザビリティテスト

22. アクセシビリティガイドラインを作成
最低限気をつけてほしいルールを明⽂化してチーム共有
1.⾒出し
2.キーボード操作
3.画像と代替テキスト
4.感覚⾮依存
5.リサイズ
6.動きのあるコンテンツ

23. ガイドラインの「⾊」に関する項⽬
感覚⾮依存
• 配置のみに依存した表現がない
• 形/⼤きさのみに依存した表現がない
• ⾊のみに依存した表現がない
(モノクロしても同じ内容が認識できる)

24. 3. CUDのために
サイボウズができること

25. ⾊の収集と再検討
▌ アプリの規模が⼤きく、⼀気にリニューアルは困難
▌ 現在使われている⾊を洗い出してガイドライン化
⾊の収集 ⾊の再選択 ⾊の修正
CUD
コントラスト⽐

26. CUDに関する社内啓蒙
▌ アクセシビリティの啓蒙活動でCUDについて紹介する
p開発部内のアクセシビリティ勉強会
p新⼈教育
▌ 体験ツールを使ってもらう
▌ 注意を払うべき典型的なデザインや陥りがちなミスを伝える

27. まとめ
▌ kintoneにはCUDに関する様々な課題がありそう
▌ アクセシビリティと同じくCUDに関しても
社内啓蒙とガイドライン化を進めます

28. おわり