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

by ymrl

Slide 1

Slide 1 text

freee 株式会社  世界を変えるためのデザインシステム  2019.11.16 @ymrl

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

01 freee株式会社の紹介  3 Section

Slide 4

Slide 4 text

freee 株式会社 

Slide 5

Slide 5 text

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営業日で発行。創業時でも本人確認書類だけで審査可能。 

Slide 6

Slide 6 text

02 デザインシステムを  勝手に作り始めるまで  6 Section

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

03 Vibesの概要  13 Section

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

27 アクセシビリティチェック内容の定義  各フェーズにおいて誰が誰向けに何をチェックすれば良いのかを定義した  誰向けに見えにくい（色覚）見えにくい（弱視）見えない（スクリーンリーダー使用）上肢障害（晴眼・キーボード操作）誰が何を製作者第三者製作者第三者製作者第三者製作者第三者デザイナーパーツコントラストチェッカー具体的な画面色覚シミュレーション社内当事者によるチェックモックを拡大・反転してチェックエンジニアパーツ（各OSでの確認） lintツールによるチェック社内当事者によるチェックキーボード挙動のガイドラインを満たすかチェックキーボード挙動のガイドラインを満たすかチェック

Slide 28

Slide 28 text

04 デザインシステムを運用してみて  28 Section

Slide 29

Slide 29 text

29 勝手に作り始めた Vibes が会社のプロジェクトに  ● もともとは自分たちの中の狭い範囲の業務改善のために作りはじめたが、  会社全体で開発生産性の問題意識があり、正式に会社のプロジェクトに  ● 段階的に freee の UI を Vibes を使ったものに置き換えていく方針となった  ● AG 部メンバーが Vibes に使える工数も大幅に増加した 

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

05 デザインシステムの実装を通して  39 Section

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

freee 株式会社 

Slide 42

Slide 42 text

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

46 freee のリブランディング  ロゴやトーン＆マナーが、 freee のミッションやフィロソフィーを表現できるよう、  統一感のあるものに定義しなおされた  「freeeのリブランディングを支えた、デザイナーが事業に伴走する姿勢」 https://note.designing.jp/n/nfe7c550edfc5

Slide 47

Slide 47 text

47 バックオフィス用アプリケーション独特のUI  複雑に作り込まれた入力ボックスなどがアプリケーションのあちこちに必要になる 

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

55 「世界を変えるデザイン」  ● 原題「残り 90% の人々のためのデザイン」  ○ 世界の 10% の豊かな人々向けではなく、  残り90% の人々の問題を解決するデザイン  ● 彼らの生活を改善していけるような製品を作る  ○ 安価な灌漑用ポンプで農業の収入を増やせる  ○ 転がせるタンクで水汲みの負担を軽減する  ○ 現地のもので作れて、売ってお金にできる燃料  ○ 途上国の子ども向けの安価なラップトップ PC  「世界を変えるデザイン」シンシア・スミス著（英治出版 2009年）

Slide 56

Slide 56 text

56 「世界を変えるためのデザインシステム」  ● freee がやろうとしているのは世界を変えること  ○ アイデアやパッションやスキルがあれば、世界の主役になれる  ○ スモールビジネスでも、ビジネスを強くスマートに育てることができる  ○ 誰もが排除されることなく、ビジネスの世界で活躍することができる  ● これらを実現するためにデザインシステム Vibes を作っていく  ○ スモールビジネスを支えるプラットフォームを作る人たちを支える  ○ Vibes を通して開発体験と UI 開発プロセス自体をデザインしていく 

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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