freeeが挑戦するインクルーシブデザイン ― UXリサーチとアクセシビリティの交点とは？

2020年2月5日に開催されたイベント「freeeが挑戦するインクルーシブデザイン ― UXリサーチとアクセシビリティの交点とは？」での登壇で使用したスライドです。
https://popinsight.connpass.com/event/160880/

Transcript

1. freee 株式会社
 freeeが挑戦するインクルーシブデザイン
 2020.02.05
2. デザイン会社ビジネス・アーキテクツで13年勤務したのち、 
 2017年10月にfreeeに参加。 
 UXデザイナー、プロダクトマネジャーを経て、 
 現在はデザインリサーチチームのマネジャーとして活動。 
 
 HCD-Net 評議委員、および認定人間中心設計専門家。 
 ウェブアクセシビリティ基盤委員会（WAIC）WG委員。 
 
 著書に『デザイニングWebアクセシビリティ』、 
 監訳書に『コーディングWebアクセシビリティ』、 
 『インクルーシブHTML + CSS & JavaScript』がある。 
 Rikiya Ihara @magi1125 伊原 力也
 デザインリサーチチームマネジャー 
 UXデザイナー

3. Mission 使命 スモールビジネスを、
 世界の主役に。
 生産年齢人口が劇的に減少し、慢性的な人手不足 となる日本で労働生産性向上は緊急の課題となって います freeeは「人工知能」と「統合基幹業務システム」をク ラウド技術を活用し、業務効率化のサポートを続け ることで、中堅中小企業のバックオフィス業務効率化 を目指しています
4. Products 製品・サービス 1/2 中小企業の経理業務を効率化。 帳簿や決算書作成・請求業務に対応。リアルタイムに数字を把握できる 給与計算や労務管理を大幅に効率化。 給与明細作成や年末調整、入社手続きから勤怠管理まで対応 税務申告書作成業務を効率化。 法人税・消費税・法定調書・申請届出や電子申告にも対応
5. Products 製品・サービス 2/2 低コストでマイナンバーの収集から保管、利用、破棄までが クラウド上で完結 画面に沿って入力するだけで、会社設立に必要なすべての書類を 5分で作成できる無料サービス 個人事業の開業手続きが無料、簡単、最速。 ガイドに沿って質問に答えるだけで書類作成が完了 Webで申し込みでき、最短 4営業日で発行。 創業時でも本人確認書類だけで審査可能
6. 6 利用事業所数累計
 
 100万
 
 
 2014.3 2015.3 2016.3 2017.3 2018.3 800,000 600,000 300,000 65,000 1,000,000 1,000,000
7. 会計・給与共に法人シェアNo.1
 ※1 2017年9月　BCN調べ ※2 2016年3月　MM総研調べ * 2017年8月より、クラウド給与計算ソフト freeeは、機能を強化し、新たに 「人事労務 freee」というサービス名に変更しました。 　
 クラウド給与ソフト 
 市場
 40% クラウド会計ソフト 
 市場
 35.2%※1 ※2
10. 語の定義

11. • 多くの状況でアクセスできるかどうかの度合い
 • アクセシビリティの向上とは、障害者高齢者を含めた幅広いユーザーに
 利用方法の選択肢を提供し、使える状況を広げる取り組みを指す
 • ウェブアクセシビリティという文脈では、ガイドラインに則り、
 達成基準を満たしていく活動を指すことが多い
 アクセシビリティ
 11
13. インクルーシブデザイン
 13 • いままでデザインプロセスから除外されていた人たちと
 共同でデザインを行うという思想やプロセス
 • 社会モデルにおける障害こそがイノベーションの宝庫である
 • 多様な人が活動できる社会にするほうが経済合理性がある
 • その課題に対する解は、結果的に多くの人の問題解決にもつながる

14. インクルーシブデザイン
 14
16. インクルーシブな設計思想
 16 • アクセシビリティについて、ガイドラインを満たす
 というレベルを超えて、実際のユーザーの体験も
 踏まえて設計していこうという考え方
 • 3年前ちょっと前ぐらいからウェブ業界で言われ始めた
 • 実際のユーザーでユーザビリティテストしていく
 ことなどもスコープに含んでいる

17. インクルーシブ デザイン ≒ ターゲットと 企画 アクセシビリティ ≒ ガイドラインに基 づく品質 インクルーシブな 設計思想 アクセシビリティとインクルーシブデザイン

18. インクルーシブ デザイン ≒ ターゲットと 企画 アクセシビリティ ≒ ガイドラインに基 づく品質 インクルーシブな 設計思想 freeeの歩み

19. freeeの歩み
 19 1. ビジョンとの接続と可能性の提示
 2. 品質としてのアクセシビリティの興り
 3. リードユーザーとデザインシステムに取り組む
 4. インクルーシブデザインの興りとUXリサーチの結果
 5. これから

20. ビジョンとの接続と
 可能性の提示

21. 21 スモールビジネスに携わるすべての人が 創造的な活動にフォーカスできるよう
22. 22 中根 雅文さん • 慶応SFC 政策・メディア 研究科特任助教 • エンジニア • 全盲
23. 伊敷 政英さん • ウェブアクセシビリ ティ基盤委員会 副委員長 • エンジニア • 弱視（ロービジョン）
24. 24 　最近、使えるようになったらいいなと 思うものはありますか？
27. 当時話したこと
 freeeをアクセシブルにする
 ユーザーが増え、課金が増える
 働ける人が増え、税収も増える
 他社も真似して、働き方改革が進む
 ロビー活動がしやすくなる
 国策に関わっていく
 freeeが日本を変える
 マジダイバーシティ国家到来

28. 品質としての
 アクセシビリティの興り

29. デザイナーとエンジニアにアプローチ

30. 簡易ガイドラインとか

31. チェックドキュメントとか

32. 研修で触れてもらったり

33. エンジニアやデザイナーによる対応がはじまる

34. エンジニアやデザイナーによる対応がはじまる
 ReactのJSXのアクセシビリティを lintするeslint plugin。 Airbnb React/JSX Style Guideでも 使われている。 あと、刺しません。
35. エンジニアやデザイナーによる対応がはじまる

36. エンジニアやデザイナーによる対応がはじまる

38. プロダクトにぼちぼち反映され始める

39. プロダクトにぼちぼち反映され始める

40. インクルーシブ デザイン ≒ ターゲットと 企画 アクセシビリティ ≒ ガイドラインに基 づく品質 インクルーシブな 設計思想 freeeの歩み

41. リードユーザーと
 デザインシステムに取り組む

42. 中根さんの入社

43. 中根さんの属性
 • フルスタックエンジニア
 • アクセシビリティスペシャリスト
 • 視覚障害当事者（全盲）
 • 個人事業主として長年 freee を活用

44. 中根さんの属性
 • フルスタックエンジニア
 • アクセシビリティスペシャリスト
 • 視覚障害当事者（全盲）
 • 個人事業主として長年 freee を活用
 • freee従業員として freee を活用 ←NEW! 

45. 中根さんが実際にfreeeを使う意味
 1. アクセシビリティの必要性が具体化される
 2. プロダクトへの直接的な価値が見出される
 3. 障害当事者が活躍できる職場の在り方に繋がる

46. 46 全盲メンバーにとって freee って働きやすいですか？
 • 人事労務freeeの給与明細がWebやスマホアプリで見られるので
 給与明細を誰かに読んでもらう必要がない
 • 自社サービスだけでなく、ありとあらゆる業務がペーパーレス化されて いて色々なものがWebにあるので困ることが少ない
 freee が成長していくことでこういう世界になっていってほしい
 中根 雅文 
 (@ma10)

47. 47 デザインシステム 「vibes」
 服部昇大「日ポン語ラップの美ー子ちゃん 徳之島編」
 https://twitter.com/hattorixxx/status/917720911914004481

48. デザインシステムの推進

49. デザインシステムの推進

50. 50 当事者を巻き込んで開発する
 • 社内で働く全盲のエンジニア = スクリーンリーダーのスペシャリストが
 コンポーネントの挙動を確認したり修正したりしている
 • 社内にいる色弱の当事者による UI のレビュー会を実施
 中根 雅文 
 (@ma10)
 野澤 幸男 
 (@nyanchan2013)
 色弱当事者のみなさん

51. ユーザー＆開発者＆障害当事者である人と作ること
 1. 「自分にとって」ここが使えないと致命的
 2. 「自分にとって」そもそもこの機能はもっとこうなっていたほうがいい
 3. 「freeeを使っているなかで言うと」
 情報設計の方針はこうあるべき、コンポーネントはこうあるべき
 4. 「freeeの目指す先で言うと」
 デザインシステムはこうあるべきなのではないか

52. インクルーシブ デザイン ≒ ターゲットと 企画 アクセシビリティ ≒ ガイドラインに基 づく品質 インクルーシブな 設計思想 ≒ デザインシステム freeeの歩み

53. インクルーシブデザインの興りと
 UXリサーチの結果

54. 品質→思想→ターゲットの拡大
 • そのデザインシステムに触れることで
 新規プロダクトを初めからアクセシブルにしようという動きが出始めた
 • なぜならその製品はきっと「最初から中根さんや野澤さんが
 freee社内や個人事業主として使うことになるから」
 • いやむしろ使ってもらって、
 その実績を持って社外のユーザーにも活用してもらいたい

55. インクルーシブ デザイン ≒ ターゲットと 企画 アクセシビリティ ≒ ガイドラインに基 づく品質 freeeの歩み
 インクルーシブな 設計思想 ≒ デザインシステム
57. 当時話したこと
 freeeをアクセシブルにする
 ユーザーが増え、課金が増える
 働ける人が増え、税収も増える
 他社も真似して、働き方改革が進む
 ロビー活動がしやすくなる
 国策に関わっていく
 freeeが日本を変える
 マジダイバーシティ国家到来

58. それってホントに狙えるの？→UXリサーチの開始
 • 対象ドメインに対するデスクリサーチ（既存資料の確認）
 • ドメインエキスパート
 （当事者団体、就労支援施設、PC教室）にインタビュー
 • 障害当事者が集まるイベントでの情報交換
 • ユーザー候補（≒視覚障害当事者）にインタビュー
 • 実際のfreeeユーザーにインタビュー

59. 取り組んだこと：広報

60. 取り組んだこと：広報

61. 取り組んだこと：対応の明示、名刺に点字

63. 現在の仮説
 • 利用してもらえる状況は確実にあり、まずそれを押さえるのは重要
 • しかし、一社の取り組みでは多くのユーザーには価値が届きにくい
 • スクリーンリーダー側と、それで使えるSaaS群とで協働していく必要あり
 • つまり就労環境のエコシステムの取り組みが必要
 • それを障害当事者や、就労支援をする団体に伝えていくことが必要

64. これから

65. インクルーシブ デザイン ≒ ターゲットと 企画 アクセシビリティ ≒ ガイドラインに基 づく品質 freeeのいま
 インクルーシブな 設計思想 ≒ デザインシステム
66. インクルーシブ デザイン ≒ ターゲットと 企画 アクセシビリティ ≒ ガイドラインに基 づく品質 freeeのこれから
 インクルーシブな 設計思想 ≒ デザインシステム
67. インクルーシブ デザイン ≒ ターゲットと 企画 アクセシビリティ ≒ ガイドラインに基 づく品質 freeeのこれから
 インクルーシブな 設計思想 ≒ デザインシステム
68. 就労環境のインクルーシブデザイン（※個人の想い）
 インクルーシブ デザイン ≒ ターゲットと 企画
69. インクルーシブなUXリサーチで難しかったこと
 • はじめは人づての紹介に頼ることになる
 • 法人のユーザー候補に出会うのに難儀
 • 実際のfreeeユーザーに出会うのに難儀

71. ポップインサイト＋サニーバンクでユーザーにリーチ

72. 案件のご相談を
 お待ちしております！

73. freeeの挑戦は続く!

74. プロダクトカンパニーとして
 品質を土台に、企画との両面から、ビジネスへの貢献を見出す
 経済合理性のある形で、インクルーシブな社会の実現に取り組む

75. スモールビジネスを、
 世界の主役に。