世界を変えるためのデザインシステム

フロントエンドカンファレンス福岡 #fec_fukuoka での登壇資料です
https://frontend-conf.fukuoka.jp/

Transcript

1. freee 株式会社
 世界を変えるためのデザインシステム
 2019.11.16 @ymrl
2. freee 株式会社 17 番目の社員。freee では 2014 年
 から Web フロントエンドを中心に何でもやってきた。
 
 freee の UI を良くするためにデザインシステム “Vibes” を勝 手に作りはじめ、本気でやりきるために UX チームに異動、現 在は UI エンジニアを自称しています。
 
 
 山本 伶 @ymrl
 Engineer
 2
3. 01 freee株式会社の紹介
 3 Section
4. freee 株式会社

5. 5 About Products
 ❂ 納税する
 ↗ 育てる
 ↻ 運営する 
 ✩ はじめる
 会社設立 freee
 開業 freee
 クラウド会計ソフト freee 
 人事労務 freee
 (マイナンバー管理 freee 含む) 
 クラウド申告 freee
 
 * 2017年8月より、クラウド給与計算ソフト freeeは、機能を強化し、「人事労務 freee」というサービス名に変更しました。
 スモールビジネスの創業からIPOまで一気通貫でサポートする7つのプロダクト 2013.3リリース
 2014.5リリース
 2015.6リリース
 中小企業の経理業務を効率 化。帳簿や決算書作成、請求 業務に対応。
 給与計算や年末調整、入社手 続きから勤怠管理まで労務労 務管理を大幅に効率化。
 会社設立に必要な書類を5分 で作成できる無料サービス。
 2016.10リリース 2015.9リリース 2017.1リリース 低コストでマイナンバーの収集、管 理、破棄までクラウド上で完結。
 個人事業の開業手続きが無料、簡 単、最速で完了する。
 税務申告書作成業務を効率化。 法人税・消費税・法定調書・申請 届出や電子申告にも対応。
 Webで申し込みでき、最短4営業日で発 行。創業時でも本人確認書類だけで審査 可能。

6. 02 デザインシステムを
 勝手に作り始めるまで
 6 Section
7. 7 freee のエンジニア・デザイナー
 • エンジニア
 ◦ 必要に応じて何でもやる。フロントエンドとサーバーサイドの区別もない
 • デザイナー
 ◦ “UX” のデザイナーとして調査・分析から評価、 UI デザインまでやる
 ➔ 少ない人数でも次々とサービスを開発できる人たち
 ◆ 立ち上げ期に「とにかく動く」ものを高速に大量に作れる布陣

8. 8 freeeのWebフロントエンド開発スタイル
 • UI デザインは主にデザイナーが行い、画面モックをエンジニアに渡す
 ◦ Sketch を使って freee っぽい画面（の画像）を作る
 • HTML/CSS/JavaScript コーディングは、ほぼ全部エンジニアが担当
 ◦ エンジニアにサーバーサイド/フロントエンドの区別はないので
 フロントエンドに不慣れなエンジニアでもやる

9. 9 freee が直面していた現実
 • デザイナーごとに作る画面モックの UI の差異が大きくなっていった
 • フロントに不慣れな人も実装するので、画面モックと実装にも差が産まれる
 • 画面モックを再現するのにCSSが足りておらず、毎回書く（コピペする）
 • CSSの配置や書き方の指針がなく、stylesheetsディレクトリがカオスに
 ➔ 見た目が揃っていなかったり、同じ見た目でも違う挙動をするUIが大量発生
 ➔ それっぽいCSSを毎回探したり書いたりコピペしたりしていて生産性も低下

10. 10 これらの問題解消のためのチーム、AG 部の誕生
 group_inou / HEART (single mix)
 https://www.youtube.com/watch?v=w_os8HqfxHc

11. 11 AG 部
 • チームやプロジェクトの枠を越え freee 共通の UI 基盤を作っていく「部」
 • 社内で Web フロントエンドに一家言あるエンジニアとデザイナーで結成
 • 最初の頃は Hack Day のネタとして作りはじめた
 ◦ 10% の工数を好きなことに使ってよいという（当時の）チーム内ルール

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

13. 03 Vibesの概要
 13 Section
14. 14 vibes とは
 服部昇大「日ポン語ラップの美ー子ちゃん 徳之島編」
 https://twitter.com/hattorixxx/status/917720911914004481

15. 15 vibes とは
 • Atomic Designによる設計（当初は）
 • Sketchライブラリ と CSS / React Component実装
 • 統一されたブランドイメージ、ユーザビリティ、アクセシビリティを担保

16. 16 Vibes が目指すもの
 • 高品質で統一感のある UI を爆速で実装できること
 ◦ デザイナーが「 freee らしい統一された UI 」をすぐに作れる
 ◦ エンジニアが CSS を書かずにデザイナーの作った UI を再現できる
 ◦ Web アプリケーションの複雑な挙動のコンポーネントが簡単に使える
 • デザイナーとエンジニアに同じものを提供し、両者の共通言語となる
 • 特別な対応をしなくてもアクセシビリティが高い実装を作ることができる

17. 17 勝手に作りはじめた
 自分たちの作る部分だけででも使えればいいや

18. 18 Atomic Design
 DeNA DESIGN BLOG「Atomic Design を分かったつもりになる」
 https://design.dena.com/design/atomic-design-を分かったつもりになる/
 UIを化学物質に見立て、組み合わせによってデザインしていく考え方
 （ Vibes では上手くいかなくなって有耶無耶になってきている）

19. 19 SketchライブラリとCSSとReactコンポーネント
 デザイナー向けのSketchライブラリとエンジニア向けの実装をそれぞれ提供する

20. 20 Sketchライブラリ
 UIコンポーネントがシンボル化されていて、これらを組み合わせてUIを作る

21. 21 Storybook
 Sketchライブラリと同じ内容のコンポーネントカタログをStorybookで構築
 挙動やコンポーネントの使い方を確認することができる

22. 22 アクセシビリティ
 • アクセシビリティのための仕組みづくり
 ◦ 社内用のアクセシビリティガイドラインの定義
 ◦ アクセシビリティチェック項目の定義
 ◦ eslint-plugin-jsx-a11y や @storybook/addon-a11y の導入
 • デザインシステムの開発に障害当事者にも参加してもらう
 ◦ ヒアリングやコンポーネントの挙動についての議論
 ◦ 実装したコンポーネントの動作チェック、改善方法の相談

23. 23 eslint-plugin-jsx-a11y
 ReactのJSXに対してアクセシビリティ観点のlintをしてくれる

24. 24 @storybook/addon-a11y
 Storybookの内容についてアクセシビリティチェックを自動でかけてくれる

25. 25 カラーパレットの調整
 カラーパレットが WCAG の基準を満たすよう、
 Google SpreadSheet でコントラスト比の計算シートを作って調整

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

27. 27 アクセシビリティチェック内容の定義
 各フェーズにおいて誰が誰向けに何をチェックすれば良いのかを定義した
 誰向けに 見えにくい（色覚） 見えにくい（弱視） 見えない （スクリーンリーダー使用） 上肢障害 （晴眼・キーボード操作） 誰が 何を 製作者 第三者 製作者 第三者 製作者 第三者 製作者 第三者 デザイナー パーツ コントラスト チェッカー 具体的な画面 色覚シミュレー ション 社内当事者に よるチェック モックを拡大・ 反転してチェッ ク エンジニア パーツ （各OSでの確 認） lintツールに よるチェック 社内当事者に よるチェック キーボード挙 動のガイドライ ンを満たすか チェック キーボード挙 動のガイドライ ンを満たすか チェック
28. 04 デザインシステムを運用してみて
 28 Section
29. 29 勝手に作り始めた Vibes が会社のプロジェクトに
 • もともとは自分たちの中の狭い範囲の業務改善のために作りはじめたが、
 会社全体で開発生産性の問題意識があり、正式に会社のプロジェクトに
 • 段階的に freee の UI を Vibes を使ったものに置き換えていく方針となった
 • AG 部メンバーが Vibes に使える工数も大幅に増加した

30. 30 UXチームに異動した
 デザインシステムを本腰入れてやりたくなったので異動希望を出して異動した
 社内 SNS に転職エントリも投稿した

31. 31 Vibes が注入されはじめる
 プロダクト内で入れやすいところから Vibes 化がはじまる

32. 32 Vibes ペアプロ
 • 最初に Vibes 化の対象にしたチームは誰もフロントエンドに詳しなかった
 • フロントエンド技術のキャッチアップも兼ねて AG 部メンバーがペアプロ
 • 数回のペアプロ + コードレビューで自力でフロントエンドを作れるチームに
 ➔ フロントエンドに強くないエンジニアでも Vibes なら高速に実装できる
 という構想のモデルケースとなった

33. 33 Vibes をご利用になったお客様の声
 • フロントエンドのコーディングで迷いがなくなった
 • 表示のやり方などを考えなくていいのでサービスのドメインに集中できた
 • CSSをほとんど書かずに実装できた。入社してから書かずに済んでいる。
 • 小さいレベルのコンポーネントを自分たちで用意しなくて良いのが助かる

34. 34 ほかのチームも使うようになって課題が見えてくる
 • 実装時の意図通りに Vibes コンポーネントが使われない
 ◦ 見た目が近いからという理由で、想定していない使われ方をしてしまう
 ◦ Sketch の上で実装を無視したリサイズをしてしまう
 • コンポーネント自体が無かったり、機能不足があったときに改善できない
 ◦ Pull Request を投げず、似て非なるものを別に実装されてしまう
 ◦ Vibes 導入を機能不足を理由に渋られてしまう
 ➔ 作るだけでなく、上手く使ってもらうコミュニケーションをする必要がある

35. 35 Vibes の設計思想を文章化する
 「 Vibes を使う前に」というタイトルで社内 Kibela に共有
 Vibes を導入しそうな人を見つけ次第、URL を送りつけて読んでもらう

36. 36 デザイナーに Vibes の実装を認識してもらう
 React 未経験のデザイナーにいきなり React を書いてもらうワークショップ
 途中で挫折しにくいよう、コマンドの打ち方から丁寧に説明する

37. 37 Issue を立てやすくする
 リポジトリの .github/ISSUE_TEMPLATE.md を丁寧にする
 「問題があったらとにかく Issue を立てて！」が機能するようにする

38. 38 Slack でエゴサーチして絡んでいく
 Slack で Vibes 関係の話をしている人にとにかく絡む
 キーワード通知を設定したうえで、入ってないチャンネルの発言は定期的に検索

39. 05 デザインシステムの実装を通して
 39 Section
40. 40 デザインシステムを自分たちで構築する意味は？
 めんどくさいし、 Material Design とかを使えばいいんじゃない？

41. freee 株式会社

44. 44 デザインシステムを自分たちで構築する意味は？
 会社のビジョンを実現するために
 デザインシステムを作っている

45. 45 freee の目指しているものと、 Vibes が目指すもの
 • 「ビジネスを強くスマートに育てられるプラットフォーム」
 ◦ 高品質なプロダクトを高速にリリースしていける必要がある
 • 「アイデアやパッションやスキルがあればだれでも」
 ◦ どんなユーザーでも排除せず、誰でも使えるものを作る必要がある
 • 「ムーブメントで世界を変える」
 ◦ freee が提供する価値を世界に伝えられるUIである必要がある

46. 46 freee のリブランディング
 ロゴやトーン＆マナーが、 freee のミッションやフィロソフィーを表現できるよう、
 統一感のあるものに定義しなおされた
 「freeeのリブランディングを支えた、デザイナーが事業に伴走する姿勢」 https://note.designing.jp/n/nfe7c550edfc5
47. 47 バックオフィス用アプリケーション独特のUI
 複雑に作り込まれた入力ボックスなどがアプリケーションのあちこちに必要になる

48. 48 UI/UXガイドライン「Groove」
 画面構成や基本原則を定義している

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

50. 50 色弱（色覚異常）
 日本人男性の20人に1人は色弱（色覚異常）がある
 滋賀医科大学 眼科学口座「色覚異常者の色の見え方」
 http://www.shiga-med.ac.jp/~hqophth/farbe/miekata.html

51. 51 中小企業ほど高齢者比率が高い
 中小企業白書2016
 https://www.chusho.meti.go.jp/pamflet/hakusyo/H28/PDF/h28_pdf_mokujityuu.html

52. 52 法定雇用率
 従業員45.5人以上の企業では2.2%以上の障害者雇用が義務
 厚生労働省
 https://www.mhlw.go.jp/stf/seisakunitsuite/bunya/koyou_roudou/koyou/shougaisha/04.html

53. 53 freee が Vibes を作るのは
 • freee が作っているのは世界を変えるプラットフォームだから
 ◦ 最適な UI をもつ高品質なサービスを高速に開発できなければいけない
 ◦ 誰でも使えるサービスになっていなければならない
 ◦ 一貫したブランドイメージをきちんと伝えることができなければならない
 • 他のデザインシステムを流用したりすると、どこかで犠牲を払う必要がある
 ◦ UI の最適化を諦めたり、どれを選べば最適なのかを毎回探す必要がある
 ◦ アクセシビリティの対応状況がデザインシステムに依存してしまう
 ◦ ブランドイメージを UI で伝えることができなくなる

54. 54 デザインシステムを自分たちで構築する意味は？
 会社のビジョンを実現するために
 デザインシステムを作っている

55. 55 「世界を変えるデザイン」
 • 原題「残り 90% の人々のためのデザイン」
 ◦ 世界の 10% の豊かな人々向けではなく、
 残り90% の人々の問題を解決するデザイン
 • 彼らの生活を改善していけるような製品を作る
 ◦ 安価な灌漑用ポンプで農業の収入を増やせる
 ◦ 転がせるタンクで水汲みの負担を軽減する
 ◦ 現地のもので作れて、売ってお金にできる燃料
 ◦ 途上国の子ども向けの安価なラップトップ PC
 「世界を変えるデザイン」シンシア・スミス著（英治出版 2009年）
56. 56 「世界を変えるためのデザインシステム」
 • freee がやろうとしているのは世界を変えること
 ◦ アイデアやパッションやスキルがあれば、世界の主役になれる
 ◦ スモールビジネスでも、ビジネスを強くスマートに育てることができる
 ◦ 誰もが排除されることなく、ビジネスの世界で活躍することができる
 • これらを実現するためにデザインシステム Vibes を作っていく
 ◦ スモールビジネスを支えるプラットフォームを作る人たちを支える
 ◦ Vibes を通して開発体験と UI 開発プロセス自体をデザインしていく

57. 57 あなたが世界を変えるところを見たい
 • 何らかの形で世界に変革を起こすことを目標としている会社は多いはず
 • そこにいるあなたはデザイナーやエンジニアとして関わっているのでは？
 • 私はあなたが世界を変えるところを見たい

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