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

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

ymrl
November 28, 2020

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

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

ymrl

November 28, 2020
Tweet

More Decks by ymrl

Other Decks in Design

Transcript

  1. 自己紹介 • 山本 伶 (@ymrl) • 本名より ymrl (やまある)と呼ばれていることのほうが多いです •

    2014.01 - 2019.06 freee 株式会社 ソフトウェアエンジニア • 2020.07- 現在 freee 株式会社 UX デザイナー • エンジニアから見るとデザイナー寄りの仕事を、 デザイナーから見るとエンジニア寄りの仕事をしています
  2. Webアクセシビリティ難しすぎる問題 • 「誰のため」が難しい ◦ Web が使えなくて困っている人になかなか出会うことがない ◦ コストが増えてメリットが小さいように思われてしまう ◦ いまいち納得できないままダメ出しをされて、つらい

    • 「何をする」が難しい ◦ 扱われる問題や解決手法がデザインとテクノロジーに跨っている ◦ アクセシビリティに関する情報の体系が分業の体制とズレている ◦ 専門外・職域外の知識や行動が必要となってしまう
  3. Webアクセシビリティは誰がやる? • 専門領域や職域を越えるのは難しい ◦ 企画、ビジュアルデザイン、 HTML 、 JavaScript 、 すべてに関係する

    ▪ これらは大抵どこかで区切って分業されている ◦ Web アクセシビリティ関係の情報はたいてい横断的で、学習もしづらい • 1 人ですべてをやるのは難しい ◦ 1 つのページを直しているうちに同僚がページを 5 個増やしてしまう 特定の人やチームや職種で取り組むのではなく、組織全体で取り組む必要
  4. 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)
  5. freee株式会社 • 2012 年 7 月創業、 2019 年 12 月東証マザーズ上場

    • スモールビジネス向けバックオフィス SaaS を提供 • 2014 年に入社してから、会社の規模が正社員だけでも約 25 倍( 20 人弱→ 500 人弱) 2014 年の写真 2019 年の写真
  6. freeeのアクセシビリティ改善のはじまり • 2017 年ごろ、アクセシビリティ「やっていき勢」が登場 ◦ 伊原さん (@magi1125) 、中根さん (@ma10) の入社

    ◦ モバイルアプリや年末調整などの機能のアクセシビリティ改善が実現 ◦ 「当事者が使えない」が可視化され、細かな改善が随所に入りはじめる • しかし、ある程度より先になかなか進めなかった ◦ アクセシビリティは大事という認識はあるが、アクションを取りづらい ◦ 実際のアクションに移すことができた有志の、片手間での活動になってしまった
  7. freeeのエンジニア・デザイナー • 会社が成長しても「スタートアップっぽさ」を大事にしている ◦ 安定や稼ぐことが全てではなくビジョンやミッションを重視する人たち ◦ 会社の成長に投資することを優先とした経営方針 • UX デザイナー

    + フルスタックエンジニア ◦ デザイナーは調査・分析から UI デザインまで何でもやる ◦ エンジニアはサーバーサイドからフロントエンドまで何でもやる ◦ 最小の人数で「とにかく動く」ものを最速で作れる布陣
  8. freeeで起きていた問題 • UI 専業デザイナー・フロントエンド専業エンジニアの不在 ◦ デザイナーごとの UI のバラつきが大きい ◦ エンジニアがそれを再現して作る

    UI のバラつきがさらに大きい • UI の見た目だけでなく、実装や挙動もバラついてしまう ◦ CSS がコピペに次ぐコピペで、 stylesheets ディレクトリがカオス ◦ 似たような見た目だけど違う挙動をするコンポーネントたち ◦ これら 1 つ 1 つにアクセシビリティの対応を入れていくのも大変 デザインとエンジニアの間に谷があり、これがアクセシビリティにも影響
  9. デザインシステム Vibes による解決 • デザイナーには Sketch シンボル、エンジニアには React コンポーネントとして 共通の

    UI コンポーネント集を提供する • 開発効率向上の効果が大きく、現場から好意的に受け入れられた ◦ デザイナーは 0 から起こさず、 Vibes の UI を組み合わせて画面を設計 ◦ エンジニアは面倒な HTML や CSS の作業から開放される • 開発効率の向上だけでなく、 UI の品質を向上させるのが狙い ◦ ブランドイメージ、ユーザビリティ、アクセシビリティの担保
  10. ほむほむ理論 • Vibes を作りはじめるとき、居酒屋ででっち上げた理論 • スタートアップは少なくとも 3 回以上、同じものを何度も作る ◦ 創業期にとにかく動くプロトタイプを作る

    ◦ 軌道に乗ってきたとき、少しマシなものを作る ◦ 本当にマスに売るために、高品質なものを作る • 3 週目以降の作り直しを効率よく高品質にやるための Vibes ◦ 「魔法少女まどか☆マギカ」の暁美ほむらが元ネタ 「魔法少女まどか☆マギカ」Blu-ray 5巻
 https://www.amazon.co.jp/dp/B004RCJJFE/

  11. Vibesのアクセシビリティ • アクセシビリティをなにも考えずに画面を作っても、落第点にはならない ◦ コントラスト比を意識して、カラーパレットの色をかなり限定 ◦ 実装が難しいものが Vibes 内に隠蔽され、間違いにくいようになっている ▪

    メニューの開閉、キーボード操作、モーダルダイアログ • しかし銀の弾丸とは言えない ◦ どうしてもコンポーネントに内包できないものも色々とある ◦ プロダクト側で使いたいコンポーネントが Vibes に無い場合、個別に作っている ▪ Vibes がプロダクトの可能性を狭めるわけにいかず、禁止していない
  12. アクセシビリティのガイドライン • WCAG (Web Content Accessibility Guidelines) というガイドラインがある ◦ さまざまな問題を考慮してあるので、これに従ってれば大体オッケー

    • しかし WCAG は難しすぎる ◦ 抽象的に書かれていて、何をどうすればいいのかよくわからない ◦ A, AA, AAA のどこまでやればいいのかわからない • そこで、 freee が満たすべきアクセシビリティの基準として、 WCAG をベースにした独自にガイドラインを制定した
  13. 開発フローにあわせたチェック • チェック対象を「デザイン」「コード」「プロダクト」に分けることで、 何を確認するのかをそれぞれの職域向けの表現で説明できるようになった ◦ チェックリストを Google Form で生成するようにして、職域にあわせて チェック項目をフィルタリング済みのスプレッドシートが生成される

    • リリース前の QA の手順に組み込むことで、アクセシビリティを仕組み化した ◦ デザイナーやエンジニアが気をつけていなくてもチェックされる ◦ QA チームがアクセシビリティの視点を開発チームに広めてくれていそう
  14. 会社の掲げているミッションやビジョン • freee ( https://corp.freee.co.jp/mission/ ) ◦ スモールビジネスを、世界の主役に。 ◦ アイデアやパッションやスキルがあれば

    だれでも、 ビジネスを強くスマートに育てられるプラットフォーム • Chatwork ( https://corp.chatwork.com/ja/ ) ◦ 働くをもっと楽しく、創造的に ◦ すべての人に、一歩先の働き方を
  15. まとめ • Web アクセシビリティは難しい ◦ 難しいので組織全体で取り組んだり、仕組みで解決していく必要がある • freee の場合 ◦

    UI コンポーネント集を整備して、開発効率と品質を上げる ◦ 独自ガイドラインやチェック体制を、組織にフィットするように作る • 世界を変えるためのデザイン ◦ 世界を変えるために、アクセシビリティも含めたデザインをしていく ◦ では、あなたの会社の場合は?