freeeが挑戦するインクルーシブデザイン ― UXリサーチとアクセシビリティの交点とは？

by Rikiya Ihara / magi

Slide 1

Slide 1 text

freee 株式会社  freeeが挑戦するインクルーシブデザイン  2020.02.05

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Mission 使命スモールビジネスを、  世界の主役に。  生産年齢人口が劇的に減少し、慢性的な人手不足となる日本で労働生産性向上は緊急の課題となっています freeeは「人工知能」と「統合基幹業務システム」をクラウド技術を活用し、業務効率化のサポートを続けることで、中堅中小企業のバックオフィス業務効率化を目指しています

Slide 4

Slide 4 text

Products 製品・サービス 1/2 中小企業の経理業務を効率化。帳簿や決算書作成・請求業務に対応。リアルタイムに数字を把握できる給与計算や労務管理を大幅に効率化。給与明細作成や年末調整、入社手続きから勤怠管理まで対応税務申告書作成業務を効率化。法人税・消費税・法定調書・申請届出や電子申告にも対応

Slide 5

Slide 5 text

Products 製品・サービス 2/2 低コストでマイナンバーの収集から保管、利用、破棄までがクラウド上で完結画面に沿って入力するだけで、会社設立に必要なすべての書類を 5分で作成できる無料サービス個人事業の開業手続きが無料、簡単、最速。ガイドに沿って質問に答えるだけで書類作成が完了 Webで申し込みでき、最短 4営業日で発行。創業時でも本人確認書類だけで審査可能

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

会計・給与共に法人シェアNo.1  ※1 2017年9月　BCN調べ ※2 2016年3月　MM総研調べ * 2017年8月より、クラウド給与計算ソフト freeeは、機能を強化し、新たに「人事労務 freee」というサービス名に変更しました。　  クラウド給与ソフト   市場  40% クラウド会計ソフト   市場  35.2%※1 ※2

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

語の定義 

Slide 11

Slide 11 text

● 多くの状況でアクセスできるかどうかの度合い  ● アクセシビリティの向上とは、障害者高齢者を含めた幅広いユーザーに  利用方法の選択肢を提供し、使える状況を広げる取り組みを指す  ● ウェブアクセシビリティという文脈では、ガイドラインに則り、  達成基準を満たしていく活動を指すことが多い  アクセシビリティ  11

Slide 12

Slide 12 text

Slide 13

Slide 13 text

インクルーシブデザイン  13 ● いままでデザインプロセスから除外されていた人たちと  共同でデザインを行うという思想やプロセス  ● 社会モデルにおける障害こそがイノベーションの宝庫である  ● 多様な人が活動できる社会にするほうが経済合理性がある  ● その課題に対する解は、結果的に多くの人の問題解決にもつながる 

Slide 14

Slide 14 text

インクルーシブデザイン  14

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 スモールビジネスに携わるすべての人が創造的な活動にフォーカスできるよう

Slide 22

Slide 22 text

22 中根雅文さん ● 慶応SFC 政策・メディア研究科特任助教 ● エンジニア ● 全盲

Slide 23

Slide 23 text

伊敷政英さん ● ウェブアクセシビリティ基盤委員会副委員長 ● エンジニア ● 弱視（ロービジョン）

Slide 24

Slide 24 text

24 　最近、使えるようになったらいいなと思うものはありますか？

Slide 25

Slide 25 text

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

当時話したこと  freeeをアクセシブルにする  ユーザーが増え、課金が増える  働ける人が増え、税収も増える  他社も真似して、働き方改革が進む  ロビー活動がしやすくなる  国策に関わっていく  freeeが日本を変える  マジダイバーシティ国家到来 

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

簡易ガイドラインとか 

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

研修で触れてもらったり 

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

中根さんの入社 

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

デザインシステムの推進 

Slide 49

Slide 49 text

デザインシステムの推進 

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

取り組んだこと：広報 

Slide 60

Slide 60 text

取り組んだこと：広報 

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

これから 

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Slide 68

Slide 68 text

就労環境のインクルーシブデザイン（※個人の想い）  インクルーシブデザイン ≒ ターゲットと企画

Slide 69

Slide 69 text

インクルーシブなUXリサーチで難しかったこと  ● はじめは人づての紹介に頼ることになる  ● 法人のユーザー候補に出会うのに難儀  ● 実際のfreeeユーザーに出会うのに難儀 

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

freeeの挑戦は続く! 

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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