Slide 1
Slide 1 text
Garoon x Accessibility
Slide 2
Slide 2 text
自己紹介
▌河内山（コウチヤマ）
⚫サイボウズ グローバル開発本部 デザイングループ
⚫2006年中途入社
⚫入社以来ずっとUX/UIデザイン部署
⚫ほとんどのサイボウズ製品に絡む
⚫2011年から Garoon 担当 @kochitaku
Slide 3
Slide 3 text
目次
▌Garoonの紹介（軽め）
▌Garoonのアクセシビリティ対応の歴史
▌職能別活動紹介（デザイナー/PG/QA）
河内山 杉山 小関
Slide 4
Slide 4 text
Garoon（ガルーン）について
▌中堅・大規模組織向けグループウェア
▌2002年～
▌オンプレミス / クラウド
▌4,800社以上 / 200万ユーザー以上
▌中央省庁における導入実績あり
Slide 5
Slide 5 text
アクセシビリティ対応の歴史
*PC用WEB画面
Slide 6
Slide 6 text
4年前
ゴールが良くわからない、
とてつもなく大変そう
大事なのはわかるけど…
Slide 7
Slide 7 text
現在
ゴールと
やるべきことが
わかってきた!
チームで試行錯誤で
進めていこう!
Slide 8
Slide 8 text
現在
Garoon
アクセシビリティ
ギルド
Slide 9
Slide 9 text
ギルドができるまで
▌会社のビジョンとのつながりを提唱（by 小林さん）
“ 多くの人が製品を通してチームワークに参加するために
アクセシビリティ対応は大事 ”
▼
▌社内で心動かされるメンバーが急増
▼
▌Garoon担当だったデザイナー/PGで結成。後にQA参加
Slide 10
Slide 10 text
ギルド活動
▌ゴールの設定
⚫Garoonユーザーがチームにアクセスできると自信をもって言える。
⚫アクセシビリティ対応状況を宣言している。
▌時間を決めてその場で活動
⚫宿題なし。他タスク都合で後回しになりがちなため
⚫1h/2w
⚫WCAG2.0 読み合わせ
⚫スクリーンリーダー、拡大表示で製品を使う
▌勉強会・ワークショップ参加
⚫社内勉強会
⚫全盲、弱視の方に製品を触ってもらう
Slide 11
Slide 11 text
ギルド活動
▌アクセシビリティチェックリスト
⚫WCAG2.0網羅は厳しいため、
最低限を精査して製品に関する部分だけに絞る
⚫開発メンバーがより
理解しやすい文言に置き換え
⚫仮運用スタート
Slide 12
Slide 12 text
ギルド活動
▌要件化へのアピール
⚫PM(Product Manager)にアクセシビリティの啓蒙
⚫製品価値向上に紐づける
⚫ 導入検討時のプラス材料
⚫ ブランドイメージアップ
⚫ インクルーシブデザイン（モダンな思考）
★祝★要件化
Slide 13
Slide 13 text
ギルド活動
▌進め方プラン
⚫各 Ver で n% アクセシビリティ改善要件を入れる
XXX
XX
X
XX
X XX
X
XX
X
XX
X
XX
X
XX
X
XX
X
XX
X
XX
X
要件
Slide 14
Slide 14 text
プランが。。。
XXX
XXX
XXX
XXX
XXX
XXX
XXX
XXX
XXX
XXX
XXX
XXX
XXX
XXX
XXX
XXX
XX
X
XXX
XXX
要件
XXX
XX
X
XXX
XXX
Slide 15
Slide 15 text
ギルド活動
▌最新の進め方
⚫新規要件で触れるところはアクセシビリティも考慮
XXX
XX
X
XXX
XXX
XX
X
XX
X
XX
X
XX
X
XX
X
要件
XXX
XX
X
粛
々
粛
々
Slide 16
Slide 16 text
ギルド活動 所感
▌1人は厳しい。仲間を見つける
▌心が動くポイント
⚫社会貢献・正義感
⚫ビジョンとの関係性
⚫製品価値向上
⚫好奇心
▌試行錯誤
▌歩みを止めない
先は長いよ！
Slide 17
Slide 17 text
続きまして デザイナー編
Slide 18
Slide 18 text
デザイナーの立ち位置
PM Designer
UX/UIデザイン
PG
QA
UX/UIデザイン
html/css/image
UI不具合
Slide 19
Slide 19 text
主なデザイナーのチェック
▌マウス/キーボード/タッチデバイスで操作できる
⚫×例：D&Dのみだとキーボードで操作できない
▌スクリーンリーダーで情報が把握できる
⚫×例：アイコンのみの部分に補足情報がない
▌色のみで情報を伝えない
▌文字と背景色のコントラスト比を確保する
▌ブラウザで200%拡大でも操作できる
Slide 20
Slide 20 text
新デザイン化とアクセシビリティ
2018
Slide 21
Slide 21 text
新デザイン化とアクセシビリティ
▌軸
⚫トレンド（見た目・操作・効果）
⚫社内他製品との親和性
⚫アクセシビリティ
Slide 22
Slide 22 text
新デザイン化とアクセシビリティ
▌ビジュアルの変更
⚫色
⚫ コントラスト比考慮
⚫アイコン
⚫ 絵柄の単純化
⚫ 拡大考慮。PNG → SVG
Slide 23
Slide 23 text
デザイナー編 所感
▌まずはキーボードのみでスクリーンリーダーで操作してみる
⚫WAI-ARIAタグがどのように有用かがわかる
⚫いろいろわかる
⚫Win：NVDA / Mac：Voice Over
▌ビジュアルの変更は進めやすい
⚫ロジックへの影響が少ない
⚫デザイナーのみで進めやすい
Slide 24
Slide 24 text
最後に
▌アクセシビリティ対応を日常にしたい
⚫特別扱いしない
⚫ブラウザチェックのように
⚫歯を磨くように
Slide 25
Slide 25 text
Thanks
:)