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

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

Daisuke Kobayashi
November 28, 2018

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

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

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

Daisuke Kobayashi

November 28, 2018
Tweet

More Decks by Daisuke Kobayashi

Other Decks in Design

Transcript

  1. Garoon x Accessibility

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ▌社内で心動かされるメンバーが急増

    ▌Garoon担当だったデザイナー/PGで結成。後にQA参加

    View Slide

  10. ギルド活動
    ▌ゴールの設定
    ⚫Garoonユーザーがチームにアクセスできると自信をもって言える。
    ⚫アクセシビリティ対応状況を宣言している。
    ▌時間を決めてその場で活動
    ⚫宿題なし。他タスク都合で後回しになりがちなため
    ⚫1h/2w
    ⚫WCAG2.0 読み合わせ
    ⚫スクリーンリーダー、拡大表示で製品を使う
    ▌勉強会・ワークショップ参加
    ⚫社内勉強会
    ⚫全盲、弱視の方に製品を触ってもらう

    View Slide

  11. ギルド活動
    ▌アクセシビリティチェックリスト
    ⚫WCAG2.0網羅は厳しいため、
    最低限を精査して製品に関する部分だけに絞る
    ⚫開発メンバーがより
    理解しやすい文言に置き換え
    ⚫仮運用スタート

    View Slide

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

    View Slide

  13. ギルド活動
    ▌進め方プラン
    ⚫各 Ver で n% アクセシビリティ改善要件を入れる
    XXX
    XX
    X
    XX
    X XX
    X
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    要件

    View Slide

  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

    View Slide

  15. ギルド活動
    ▌最新の進め方
    ⚫新規要件で触れるところはアクセシビリティも考慮
    XXX
    XX
    X
    XXX
    XXX
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    XX
    X
    要件
    XXX
    XX
    X




    View Slide

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

    View Slide

  17. 続きまして デザイナー編

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. 最後に
    ▌アクセシビリティ対応を日常にしたい
    ⚫特別扱いしない
    ⚫ブラウザチェックのように
    ⚫歯を磨くように

    View Slide

  25. Thanks
    :)

    View Slide