Pro Yearly is on sale from $80 to $50! »

20181128_Garoonチームのアクセシビリティ_デザイナー編 / 20181128 Accessibility Garoon

Dbe3bc2c72aa0b8175561b3a948a80fb?s=47 Daisuke Kobayashi
November 28, 2018

20181128_Garoonチームのアクセシビリティ_デザイナー編 / 20181128 Accessibility Garoon

UXCafe: チームで取り組む!サイボウズのアクセシビリティ
トーク1: Garoonチームのアクセシビリティ
デザイナー編

イベントページ: https://cybozu.connpass.com/event/106185/

Dbe3bc2c72aa0b8175561b3a948a80fb?s=128

Daisuke Kobayashi

November 28, 2018
Tweet

Transcript

  1. Garoon x Accessibility

  2. 自己紹介 ▌河内山(コウチヤマ) ⚫サイボウズ グローバル開発本部 デザイングループ ⚫2006年中途入社 ⚫入社以来ずっとUX/UIデザイン部署 ⚫ほとんどのサイボウズ製品に絡む ⚫2011年から Garoon

    担当 @kochitaku
  3. 目次 ▌Garoonの紹介(軽め) ▌Garoonのアクセシビリティ対応の歴史 ▌職能別活動紹介(デザイナー/PG/QA) 河内山 杉山 小関

  4. Garoon(ガルーン)について ▌中堅・大規模組織向けグループウェア ▌2002年~ ▌オンプレミス / クラウド ▌4,800社以上 / 200万ユーザー以上 ▌中央省庁における導入実績あり

  5. アクセシビリティ対応の歴史 *PC用WEB画面

  6. 4年前 ゴールが良くわからない、 とてつもなく大変そう 大事なのはわかるけど…

  7. 現在 ゴールと やるべきことが わかってきた! チームで試行錯誤で 進めていこう!

  8. 現在 Garoon アクセシビリティ ギルド

  9. ギルドができるまで ▌会社のビジョンとのつながりを提唱(by 小林さん) “ 多くの人が製品を通してチームワークに参加するために アクセシビリティ対応は大事 ” ▼ ▌社内で心動かされるメンバーが急増 ▼

    ▌Garoon担当だったデザイナー/PGで結成。後にQA参加
  10. ギルド活動 ▌ゴールの設定 ⚫Garoonユーザーがチームにアクセスできると自信をもって言える。 ⚫アクセシビリティ対応状況を宣言している。 ▌時間を決めてその場で活動 ⚫宿題なし。他タスク都合で後回しになりがちなため ⚫1h/2w ⚫WCAG2.0 読み合わせ ⚫スクリーンリーダー、拡大表示で製品を使う

    ▌勉強会・ワークショップ参加 ⚫社内勉強会 ⚫全盲、弱視の方に製品を触ってもらう
  11. ギルド活動 ▌アクセシビリティチェックリスト ⚫WCAG2.0網羅は厳しいため、 最低限を精査して製品に関する部分だけに絞る ⚫開発メンバーがより 理解しやすい文言に置き換え ⚫仮運用スタート

  12. ギルド活動 ▌要件化へのアピール ⚫PM(Product Manager)にアクセシビリティの啓蒙 ⚫製品価値向上に紐づける ⚫ 導入検討時のプラス材料 ⚫ ブランドイメージアップ ⚫

    インクルーシブデザイン(モダンな思考) ★祝★要件化
  13. ギルド活動 ▌進め方プラン ⚫各 Ver で n% アクセシビリティ改善要件を入れる XXX XX X

    XX X XX X XX X XX X XX X XX X XX X XX X XX X 要件
  14. プランが。。。 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
  15. ギルド活動 ▌最新の進め方 ⚫新規要件で触れるところはアクセシビリティも考慮 XXX XX X XXX XXX XX X

    XX X XX X XX X XX X 要件 XXX XX X 粛 々 粛 々
  16. ギルド活動 所感 ▌1人は厳しい。仲間を見つける ▌心が動くポイント ⚫社会貢献・正義感 ⚫ビジョンとの関係性 ⚫製品価値向上 ⚫好奇心 ▌試行錯誤 ▌歩みを止めない

    先は長いよ!
  17. 続きまして デザイナー編

  18. デザイナーの立ち位置 PM Designer UX/UIデザイン PG QA UX/UIデザイン html/css/image UI不具合

  19. 主なデザイナーのチェック ▌マウス/キーボード/タッチデバイスで操作できる ⚫×例:D&Dのみだとキーボードで操作できない ▌スクリーンリーダーで情報が把握できる ⚫×例:アイコンのみの部分に補足情報がない ▌色のみで情報を伝えない ▌文字と背景色のコントラスト比を確保する ▌ブラウザで200%拡大でも操作できる

  20. 新デザイン化とアクセシビリティ 2018

  21. 新デザイン化とアクセシビリティ ▌軸 ⚫トレンド(見た目・操作・効果) ⚫社内他製品との親和性 ⚫アクセシビリティ

  22. 新デザイン化とアクセシビリティ ▌ビジュアルの変更 ⚫色 ⚫ コントラスト比考慮 ⚫アイコン ⚫ 絵柄の単純化 ⚫ 拡大考慮。PNG

    → SVG
  23. デザイナー編 所感 ▌まずはキーボードのみでスクリーンリーダーで操作してみる ⚫WAI-ARIAタグがどのように有用かがわかる ⚫いろいろわかる ⚫Win:NVDA / Mac:Voice Over ▌ビジュアルの変更は進めやすい

    ⚫ロジックへの影響が少ない ⚫デザイナーのみで進めやすい
  24. 最後に ▌アクセシビリティ対応を日常にしたい ⚫特別扱いしない ⚫ブラウザチェックのように ⚫歯を磨くように

  25. Thanks :)