freeeのアクセシビリティの取り組みの紹介

情報アクセシビリティ推進シンポジウム での登壇資料です

Transcript

1. 　 freeeのアクセシビリティの取り組み

2. 2 会社情報
 Company Profile
 会社名
 freee株式会社（フリー株式会社）
 
 設立年月
 2012年7月
 
 従業員数
 572人（2021年6月末時点）
 
 本社住所
 東京都品川区西五反田2-8-1 五反田ファーストビル 9F
 
 支社・営業所
 中部支社、関西支社、九州支社、京都営業所、広島営業所
 
 子会社
 freee finance lab 株式会社（freee株式会社100%出資子会社）
 freee biz 株式会社（freee株式会社100%出資子会社）
 株式会社サイトビジット（freee株式会社70%出資子会社）
 Likha-iT Inc（freee株式会社100%出資子会社）

3. 3 使命
 Mission
 スモールビジネスを、
 世界の主役に。
 freeeは「スモールビジネスを、世界の主役に。」をミッションに掲げ、統合型 経営プラットフォームを開発・提供し、だれもが自由に自然体で経営できる 環境をつくっていきます。
 起業やビジネスを育てていくことを、もっと魅力的で気軽な行為に。個人事 業や中小企業などのスモールビジネスに携わるすべての人が、じぶんらしく 自信をもって経営できるように。
 大胆にスピード感をもってアイデアを具現化できるスモールビジネスは、今 までにない多様な価値観や生き方、新しいイノベーションを生み出す起爆剤 だと私たちは考えています。スモールビジネスが大企業を刺激し、社会をさ らにオモシロク、世の中全体をより良くする流れを後押ししていきます。（freee ブランドムービー）

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

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

6. 6 なぜfreeeはアクセシビリティーに取り組むのか
 
 freeeのビジョン
 だれもが自由に経営できる
 統合型経営プラットフォーム。
 
 統合型経営プラットフォームはみんなで使うもの。 
 だれもが自由に自然体で使える プロダクトを作っていきたい。 

7. 7 2018年以降、毎年年末にその年に取り組んできた内容をブログ記事として紹介しています。
 2017年ごろからアクセシビリティに取り組んできた
 https://developers.freee.co.jp/entry/freee-a11y-2018 https://developers.freee.co.jp/entry/freee-a11y-2019 https://developers.freee.co.jp/entry/freee-a11y-2020 https://note.com/magi1125/n/ncc519a490f6c
8. 8 アクセシビリティを推進する体制
 • プロダクトデザイン部内の「デザイン基盤チーム」が推進役
 ◦ メンバーのうち1名は視覚障害の当事者でもある
 • アクセシビリティ推進役としてのデザイン基盤の役割
 ◦ ガイドラインやチェックリストの整備
 ◦ アクセシビリティを担保できる開発体制の整備・サポート
 ◦ デザインシステム “Vibes” によるアクセシビリティサポート
 ◦ アクセシビリティ研修や相談会の開催

9. 9 freeeアクセシビリティー・ガイドラインの制定
 • WCAG (Web Content Accessibility Guidelines) をもとに、
 独自のガイドラインを作成
 ◦ 達成されるべき項目に絞って MUST と SHOULD に振り直した
 ◦ 対象となるコンテンツごとにカテゴリを分けた
 ◦ 現場で理解しやすいよう書き方を改めた
 • https://a11y-guidelines.freee.co.jp/

10. 10 アクセシビリティー・チェックリストの整備
 • freee社内のプロダクト開発体制にあわせて、
 デザイナー用・エンジニア用・QA用のチェックリストを作成
 • それぞれの開発フェーズでチェックできるようにすることで、
 問題を早い段階で発見・修正できるようにしている
 • https://a11y-guidelines.freee.co.jp/checks/index.html 
 デザイナー
 エンジニア
 QA
 デザインの
 アクセシビリティ チェック
 コードの
 アクセシビリティ チェック
 プロダクトの
 アクセシビリティ チェック

11. 11 チェックシートの管理
 • 社内では、チェックシートをGoogle Formから生成するようにしている
 ◦ いつでも最新のチェックリストが使われるようになる
 （古いシートがコピーされ使い回されるのを防ぎたい）
 ◦ いつ誰がチェックシートを作っているのか把握できる
 • 社内で使われたチェックシートはデザイン基盤メンバーでレビューする
 ◦ わかりにくい場所、NGになりがちな場所を発見するため
 ◦ サポートが必要そうな人・チームを発見するため
 • レビューの結果から、チェックリストやガイドライン、社内資料、
 デザインシステムなどを改善するアクションを取っている

12. 12 デザインシステムによるアクセシビリティのサポート
 • 社内のデザインシステムとしてUIコンポーネント集 “Vibes” を内製
 • なるべくアクセシビリティが担保されるような設計・実装になっている
 ◦ 全員がアクセシビリティを念頭において開発するのは不可能
 ◦ 「何も考えずに作っても平均点くらいを狙える」を目指す
 ◦ チェックでNGになりやすい部分をVibesに取り込んでいく
 ◦ コンポーネント自体のほか、サンプルコードでもカバー
 • UIの一貫性や開発生産性を高めることも、Vibes の目的
 ◦ アクセシビリティ以外の利点もあり、積極的に使ってもらいやすい

13. 13 アクセシビリティ研修の実施
 • 開発職向けだけでなく、すべての職種の新入社員に研修を実施
 ◦ 現在は入社時に45分、開発職には加えて2時間の研修を実施
 • プロダクト開発に関するものだけでなく、freee社内での生活で
 気をつけてもらうべきことを、入社直後に伝える
 • 開発職向けには、スクリーンリーダーやキーボードによる操作の体験や
 技術的な解説をして、アクセシブルな開発のやり方を紹介
 • https://developers.freee.co.jp/entry/a11y-training 

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