世界を変えるための デザインシステム （アクセシビリティ編）

Webアクセシビリティの学校 オンライン特別授業（2020/11/28）
https://a11yschool.doorkeeper.jp/events/112894

オリジナルはGoogle Slidesにあります
https://docs.google.com/presentation/d/1-HzrgiOeNth_Xjo5K_JcGeKu87TpJiA5z9V9eMVQirg/edit?usp=sharing

Transcript

1. 世界を変えるための デザインシステム （アクセシビリティ編） Web アクセシビリティの学校 オンライン特別授業 @ymrl
2. 自己紹介 • 山本 伶 (@ymrl) • 本名より ymrl （やまある）と呼ばれていることのほうが多いです • 2014.01 - 2019.06 freee 株式会社 ソフトウェアエンジニア • 2020.07- 現在 freee 株式会社 UX デザイナー • エンジニアから見るとデザイナー寄りの仕事を、 デザイナーから見るとエンジニア寄りの仕事をしています
3. 今日お話しすること • Web アクセシビリティに取り組むことの難しさ • freee でのアクセシビリティの取り組みの事例 ◦ デザインシステム Vibes ◦ 独自のガイドライン ◦ アクセシビリティチェックの体制 • 世界を変えるということ
4. ここまでのセッション、どうでした？ • 明日から仕事に活かせそうですか？ • 同僚にオススメして、一緒にやれそうですか？ • 上司や取引先に話をしたら、どんな反応をされそうですか？
5. アクセシビリティは大事だよね、だけど…… • それやったら、どれくらいお客さん増えるの？ • ぜんぶ君に任せちゃっていいんだよね？ • 何から手を出せばいいのかよくわからないんだよね。
6. 「Webアクセシビリティ難しすぎる問題」 https://zenn.dev/ymrl/articles/ec72de6f18fe04a28127
7. Webアクセシビリティ難しすぎる問題 • 「誰のため」が難しい ◦ Web が使えなくて困っている人になかなか出会うことがない ◦ コストが増えてメリットが小さいように思われてしまう ◦ いまいち納得できないままダメ出しをされて、つらい • 「何をする」が難しい ◦ 扱われる問題や解決手法がデザインとテクノロジーに跨っている ◦ アクセシビリティに関する情報の体系が分業の体制とズレている ◦ 専門外・職域外の知識や行動が必要となってしまう
8. Webアクセシビリティは誰のため？ • スクリーンリーダーの話をすると、視覚障害者のためのものと思われがち ◦ 目の見えない人ってあんまり見かけないし、ウチとは関係ないや ◦ 私はコーディングには関わらないし、関係ないや • マーケティング対象として障害者が認識されないので、優先度が落ちがち ◦ 工数が増えたのと釣り合うくらいユーザー増えるの？ ◦ 使うのを断念してしまったユーザーの姿が見えづらい 結果として関心を持ちづらい、持っていても軽視されてしまう
9. Webアクセシビリティは誰がやる？ • 専門領域や職域を越えるのは難しい ◦ 企画、ビジュアルデザイン、 HTML 、 JavaScript 、 すべてに関係する ▪ これらは大抵どこかで区切って分業されている ◦ Web アクセシビリティ関係の情報はたいてい横断的で、学習もしづらい • 1 人ですべてをやるのは難しい ◦ 1 つのページを直しているうちに同僚がページを 5 個増やしてしまう 特定の人やチームや職種で取り組むのではなく、組織全体で取り組む必要
10. みんなで理解して、みんなでやる • 具体的な特定の誰かのためではなく、抽象的な品質として考える ◦ 顧客の中には一時的・恒久的な障害を持つ人が含まれる可能性がある ◦ よく考えられたガイドラインに従うことで最低限のラインを守る ◦ 実現されるべきアクセシビリティの水準について合意を形成する • 実際の業務フロー、分業体制にあわせたやり方を整備する ◦ デザイナー・エンジニア・テスター向けに別々のものを用意する ◦ 普通にやっていれば自然とある程度良い状態になるような仕組みを作る
11. freee株式会社での事例
12. 12 スモールビジネス向けに統合型クラウドERPを提供 請求書 | 経費精算 | 決算書 | 予実管理 | 内部統制
 統合型クラウド(1)会計ソフト
 統合型クラウド人事労務ソフト 2013年3月～ 日本のクラウド市場 シェアNo.1 (2) 2014年10月～ 日本のクラウド市場 シェアNo.1 (3) 勤怠管理 | 入退社管理 | 給与計算 | 年末調整
 マイナンバー管理
 その他サービス
 会社設立 開業 税務申告 マイナンバー管理 クレジットカード フリーカード
 12 プロジェクト 管理 注: 1. クラウドサービス:ソフトウェアやハードウェアを所有することなく、ユーザーがインターネットを経由してITシステムにアクセスを行えるサービス 2. 株式会社BCN「クラウド会計ソフトを導入している従業員数300名未満の企業又は個人事業主へのWeb調査(2017年9月実施、2017年10月公表))」（N=418） 3. クラウド給与計算ソフトの市場シェア:株式会社MM総研「日本におけるクラウド給与計算ソフトの利用状況調査に関するWeb調査(2016年3月実施)」（N=4,168）
13. freee株式会社 • 2012 年 7 月創業、 2019 年 12 月東証マザーズ上場 • スモールビジネス向けバックオフィス SaaS を提供 • 2014 年に入社してから、会社の規模が正社員だけでも約 25 倍（ 20 人弱→ 500 人弱） 2014 年の写真 2019 年の写真
14. freeeのアクセシビリティ改善のはじまり • 2017 年ごろ、アクセシビリティ「やっていき勢」が登場 ◦ 伊原さん (@magi1125) 、中根さん (@ma10) の入社 ◦ モバイルアプリや年末調整などの機能のアクセシビリティ改善が実現 ◦ 「当事者が使えない」が可視化され、細かな改善が随所に入りはじめる • しかし、ある程度より先になかなか進めなかった ◦ アクセシビリティは大事という認識はあるが、アクションを取りづらい ◦ 実際のアクションに移すことができた有志の、片手間での活動になってしまった
15. freeeのエンジニア・デザイナー • 会社が成長しても「スタートアップっぽさ」を大事にしている ◦ 安定や稼ぐことが全てではなくビジョンやミッションを重視する人たち ◦ 会社の成長に投資することを優先とした経営方針 • UX デザイナー + フルスタックエンジニア ◦ デザイナーは調査・分析から UI デザインまで何でもやる ◦ エンジニアはサーバーサイドからフロントエンドまで何でもやる ◦ 最小の人数で「とにかく動く」ものを最速で作れる布陣
16. freeeで起きていた問題 • UI 専業デザイナー・フロントエンド専業エンジニアの不在 ◦ デザイナーごとの UI のバラつきが大きい ◦ エンジニアがそれを再現して作る UI のバラつきがさらに大きい • UI の見た目だけでなく、実装や挙動もバラついてしまう ◦ CSS がコピペに次ぐコピペで、 stylesheets ディレクトリがカオス ◦ 似たような見た目だけど違う挙動をするコンポーネントたち ◦ これら 1 つ 1 つにアクセシビリティの対応を入れていくのも大変 デザインとエンジニアの間に谷があり、これがアクセシビリティにも影響
17. デザインシステム “Vibes” 服部昇大「日ポン語ラップの美ー子ちゃん 徳之島編」
 https://twitter.com/hattorixxx/status/917720911914004481

18. デザインシステム Vibes による解決 • デザイナーには Sketch シンボル、エンジニアには React コンポーネントとして 共通の UI コンポーネント集を提供する • 開発効率向上の効果が大きく、現場から好意的に受け入れられた ◦ デザイナーは 0 から起こさず、 Vibes の UI を組み合わせて画面を設計 ◦ エンジニアは面倒な HTML や CSS の作業から開放される • 開発効率の向上だけでなく、 UI の品質を向上させるのが狙い ◦ ブランドイメージ、ユーザビリティ、アクセシビリティの担保
19. Vibes ってこんな感じ Sketchコンポーネント集
 Storybook
 （Reactによる実装のカタログ+ドキュメント）

20. 簡単に画面が作れる
21. ほむほむ理論 • Vibes を作りはじめるとき、居酒屋ででっち上げた理論 • スタートアップは少なくとも 3 回以上、同じものを何度も作る ◦ 創業期にとにかく動くプロトタイプを作る ◦ 軌道に乗ってきたとき、少しマシなものを作る ◦ 本当にマスに売るために、高品質なものを作る • 3 週目以降の作り直しを効率よく高品質にやるための Vibes ◦ 「魔法少女まどか☆マギカ」の暁美ほむらが元ネタ 「魔法少女まどか☆マギカ」Blu-ray 5巻
 https://www.amazon.co.jp/dp/B004RCJJFE/

22. Vibesのアクセシビリティ • アクセシビリティをなにも考えずに画面を作っても、落第点にはならない ◦ コントラスト比を意識して、カラーパレットの色をかなり限定 ◦ 実装が難しいものが Vibes 内に隠蔽され、間違いにくいようになっている ▪ メニューの開閉、キーボード操作、モーダルダイアログ • しかし銀の弾丸とは言えない ◦ どうしてもコンポーネントに内包できないものも色々とある ◦ プロダクト側で使いたいコンポーネントが Vibes に無い場合、個別に作っている ▪ Vibes がプロダクトの可能性を狭めるわけにいかず、禁止していない
23. アクセシビリティのガイドライン • WCAG (Web Content Accessibility Guidelines) というガイドラインがある ◦ さまざまな問題を考慮してあるので、これに従ってれば大体オッケー • しかし WCAG は難しすぎる ◦ 抽象的に書かれていて、何をどうすればいいのかよくわからない ◦ A, AA, AAA のどこまでやればいいのかわからない • そこで、 freee が満たすべきアクセシビリティの基準として、 WCAG をベースにした独自にガイドラインを制定した
24. freeeアクセシビリティー・ガイドライン https://a11y-guidelines.freee.co.jp/
25. ガイドライン一般公開時のブログ https://developers.freee.co.jp/entry/a11y-guidelines-202004.0
26. アクセシビリティのチェック体制を作る • 開発され続けている Web アプリケーションのアクセシビリティ評価は大変 ◦ 画面の数がただでさえ多い、すごいスピードで変わったり増えたりする ◦ 巨大なアプリの外部機関による評価は非常に大変で、コストもかかる • 開発しながらチェックできるチェックリストを作った ◦ 実際の作業フローにあわせ、デザイナー用、エンジニア用、 QA 用を準備
27. チェックリスト https://a11y-guidelines.freee.co.jp/checks/checklist.html 
 社内ではGoogleスプレッドシートで提供されている

28. 開発フローにあわせたチェック • チェック対象を「デザイン」「コード」「プロダクト」に分けることで、 何を確認するのかをそれぞれの職域向けの表現で説明できるようになった ◦ チェックリストを Google Form で生成するようにして、職域にあわせて チェック項目をフィルタリング済みのスプレッドシートが生成される • リリース前の QA の手順に組み込むことで、アクセシビリティを仕組み化した ◦ デザイナーやエンジニアが気をつけていなくてもチェックされる ◦ QA チームがアクセシビリティの視点を開発チームに広めてくれていそう
29. アクセシビリティの道はまだまだこれから • 仕組みの整備ができて、ようやくスタートラインに立てたと思っている ◦ Vibes によって問題が起こりにくくなる土台ができた ◦ ガイドラインができて、何をどこまでやるべきか明確になった ◦ チェック体制ができて、問題の有無を確認できるようになった • それでもまだ足りない部分がある ◦ 既存画面の不具合をどうやって直していくべきか ◦ 文化としてアクセシビリティに取り組んでいくために何をするべきか
30. 世界を変えるということ
31. freee 株式会社

32. 会社の掲げているミッションやビジョン • freee （ https://corp.freee.co.jp/mission/ ） ◦ スモールビジネスを、世界の主役に。 ◦ アイデアやパッションやスキルがあれば だれでも、 ビジネスを強くスマートに育てられるプラットフォーム • Chatwork （ https://corp.chatwork.com/ja/ ） ◦ 働くをもっと楽しく、創造的に ◦ すべての人に、一歩先の働き方を
33. 世界を変えるデザイン 「世界を変えるデザイン」シンシア・スミス著（英治出版 2009年）
34. 世界を変えるデザインのためのデザイン • すべての人に届くようなデザインができれば、世界を変えられる • 世界を変えようとしている会社のための、仕組みやチーム作り ◦ 組織に合わせたデザインシステム、アクセシビリティの仕組み作り ◦ アクセシビリティをみんなでやっていくためのチーム作り • あなたの会社は世界を変えようとしていますか？そのためのデザインとは？ ◦ あなたが世界を変えるところを見たい
35. まとめ • Web アクセシビリティは難しい ◦ 難しいので組織全体で取り組んだり、仕組みで解決していく必要がある • freee の場合 ◦ UI コンポーネント集を整備して、開発効率と品質を上げる ◦ 独自ガイドラインやチェック体制を、組織にフィットするように作る • 世界を変えるためのデザイン ◦ 世界を変えるために、アクセシビリティも含めたデザインをしていく ◦ では、あなたの会社の場合は？