フロントエンドカンファレンス福岡 #fec_fukuoka での登壇資料です https://frontend-conf.fukuoka.jp/
freee 株式会社 世界を変えるためのデザインシステム 2019.11.16@ymrl
View Slide
freee 株式会社 17 番目の社員。freee では 2014 年 から Web フロントエンドを中心に何でもやってきた。 freee の UI を良くするためにデザインシステム “Vibes” を勝手に作りはじめ、本気でやりきるために UX チームに異動、現在は UI エンジニアを自称しています。 山本 伶@ymrl Engineer 2
01 freee株式会社の紹介 3Section
freee 株式会社
5About 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営業日で発行。創業時でも本人確認書類だけで審査可能。
02 デザインシステムを 勝手に作り始めるまで 6Section
7freee のエンジニア・デザイナー ● エンジニア ○ 必要に応じて何でもやる。フロントエンドとサーバーサイドの区別もない ● デザイナー ○ “UX” のデザイナーとして調査・分析から評価、 UI デザインまでやる ➔ 少ない人数でも次々とサービスを開発できる人たち ◆ 立ち上げ期に「とにかく動く」ものを高速に大量に作れる布陣
8freeeのWebフロントエンド開発スタイル ● UI デザインは主にデザイナーが行い、画面モックをエンジニアに渡す ○ Sketch を使って freee っぽい画面（の画像）を作る ● HTML/CSS/JavaScript コーディングは、ほぼ全部エンジニアが担当 ○ エンジニアにサーバーサイド/フロントエンドの区別はないので フロントエンドに不慣れなエンジニアでもやる
9freee が直面していた現実 ● デザイナーごとに作る画面モックの UI の差異が大きくなっていった ● フロントに不慣れな人も実装するので、画面モックと実装にも差が産まれる ● 画面モックを再現するのにCSSが足りておらず、毎回書く（コピペする） ● CSSの配置や書き方の指針がなく、stylesheetsディレクトリがカオスに ➔ 見た目が揃っていなかったり、同じ見た目でも違う挙動をするUIが大量発生 ➔ それっぽいCSSを毎回探したり書いたりコピペしたりしていて生産性も低下
10これらの問題解消のためのチーム、AG 部の誕生 group_inou / HEART (single mix) https://www.youtube.com/watch?v=w_os8HqfxHc
11AG 部 ● チームやプロジェクトの枠を越え freee 共通の UI 基盤を作っていく「部」 ● 社内で Web フロントエンドに一家言あるエンジニアとデザイナーで結成 ● 最初の頃は Hack Day のネタとして作りはじめた ○ 10% の工数を好きなことに使ってよいという（当時の）チーム内ルール
12デザインシステム 「vibes」 服部昇大「日ポン語ラップの美ー子ちゃん 徳之島編」 https://twitter.com/hattorixxx/status/917720911914004481
03 Vibesの概要 13Section
14vibes とは 服部昇大「日ポン語ラップの美ー子ちゃん 徳之島編」 https://twitter.com/hattorixxx/status/917720911914004481
15vibes とは ● Atomic Designによる設計（当初は） ● Sketchライブラリ と CSS / React Component実装 ● 統一されたブランドイメージ、ユーザビリティ、アクセシビリティを担保
16Vibes が目指すもの ● 高品質で統一感のある UI を爆速で実装できること ○ デザイナーが「 freee らしい統一された UI 」をすぐに作れる ○ エンジニアが CSS を書かずにデザイナーの作った UI を再現できる ○ Web アプリケーションの複雑な挙動のコンポーネントが簡単に使える ● デザイナーとエンジニアに同じものを提供し、両者の共通言語となる ● 特別な対応をしなくてもアクセシビリティが高い実装を作ることができる
17勝手に作りはじめた 自分たちの作る部分だけででも使えればいいや
18Atomic Design DeNA DESIGN BLOG「Atomic Design を分かったつもりになる」 https://design.dena.com/design/atomic-design-を分かったつもりになる/ UIを化学物質に見立て、組み合わせによってデザインしていく考え方 （ Vibes では上手くいかなくなって有耶無耶になってきている）
19SketchライブラリとCSSとReactコンポーネント デザイナー向けのSketchライブラリとエンジニア向けの実装をそれぞれ提供する
20Sketchライブラリ UIコンポーネントがシンボル化されていて、これらを組み合わせてUIを作る
21Storybook Sketchライブラリと同じ内容のコンポーネントカタログをStorybookで構築 挙動やコンポーネントの使い方を確認することができる
22アクセシビリティ ● アクセシビリティのための仕組みづくり ○ 社内用のアクセシビリティガイドラインの定義 ○ アクセシビリティチェック項目の定義 ○ eslint-plugin-jsx-a11y や @storybook/addon-a11y の導入 ● デザインシステムの開発に障害当事者にも参加してもらう ○ ヒアリングやコンポーネントの挙動についての議論 ○ 実装したコンポーネントの動作チェック、改善方法の相談
23eslint-plugin-jsx-a11y ReactのJSXに対してアクセシビリティ観点のlintをしてくれる
24@storybook/addon-a11y Storybookの内容についてアクセシビリティチェックを自動でかけてくれる
25カラーパレットの調整 カラーパレットが WCAG の基準を満たすよう、 Google SpreadSheet でコントラスト比の計算シートを作って調整
26当事者を巻き込んで開発する ● 社内で働く全盲のエンジニア = スクリーンリーダーのスペシャリストが コンポーネントの挙動を確認したり修正したりしている ● 社内にいる色弱の当事者による UI のレビュー会を実施 中根 雅文 (@ma10) 野澤 幸男 (@nyanchan2013) 色弱当事者のみなさん
27アクセシビリティチェック内容の定義 各フェーズにおいて誰が誰向けに何をチェックすれば良いのかを定義した 誰向けに見えにくい（色覚） 見えにくい（弱視）見えない（スクリーンリーダー使用）上肢障害（晴眼・キーボード操作）誰が 何を 製作者 第三者 製作者 第三者 製作者 第三者 製作者 第三者デザイナーパーツコントラストチェッカー具体的な画面色覚シミュレーション社内当事者によるチェックモックを拡大・反転してチェックエンジニア パーツ（各OSでの確認）lintツールによるチェック社内当事者によるチェックキーボード挙動のガイドラインを満たすかチェックキーボード挙動のガイドラインを満たすかチェック
04 デザインシステムを運用してみて 28Section
29勝手に作り始めた Vibes が会社のプロジェクトに ● もともとは自分たちの中の狭い範囲の業務改善のために作りはじめたが、 会社全体で開発生産性の問題意識があり、正式に会社のプロジェクトに ● 段階的に freee の UI を Vibes を使ったものに置き換えていく方針となった ● AG 部メンバーが Vibes に使える工数も大幅に増加した
30UXチームに異動した デザインシステムを本腰入れてやりたくなったので異動希望を出して異動した 社内 SNS に転職エントリも投稿した
31Vibes が注入されはじめる プロダクト内で入れやすいところから Vibes 化がはじまる
32Vibes ペアプロ ● 最初に Vibes 化の対象にしたチームは誰もフロントエンドに詳しなかった ● フロントエンド技術のキャッチアップも兼ねて AG 部メンバーがペアプロ ● 数回のペアプロ + コードレビューで自力でフロントエンドを作れるチームに ➔ フロントエンドに強くないエンジニアでも Vibes なら高速に実装できる という構想のモデルケースとなった
33Vibes をご利用になったお客様の声 ● フロントエンドのコーディングで迷いがなくなった ● 表示のやり方などを考えなくていいのでサービスのドメインに集中できた ● CSSをほとんど書かずに実装できた。入社してから書かずに済んでいる。 ● 小さいレベルのコンポーネントを自分たちで用意しなくて良いのが助かる
34ほかのチームも使うようになって課題が見えてくる ● 実装時の意図通りに Vibes コンポーネントが使われない ○ 見た目が近いからという理由で、想定していない使われ方をしてしまう ○ Sketch の上で実装を無視したリサイズをしてしまう ● コンポーネント自体が無かったり、機能不足があったときに改善できない ○ Pull Request を投げず、似て非なるものを別に実装されてしまう ○ Vibes 導入を機能不足を理由に渋られてしまう ➔ 作るだけでなく、上手く使ってもらうコミュニケーションをする必要がある
35Vibes の設計思想を文章化する 「 Vibes を使う前に」というタイトルで社内 Kibela に共有 Vibes を導入しそうな人を見つけ次第、URL を送りつけて読んでもらう
36デザイナーに Vibes の実装を認識してもらう React 未経験のデザイナーにいきなり React を書いてもらうワークショップ 途中で挫折しにくいよう、コマンドの打ち方から丁寧に説明する
37Issue を立てやすくする リポジトリの .github/ISSUE_TEMPLATE.md を丁寧にする 「問題があったらとにかく Issue を立てて！」が機能するようにする
38Slack でエゴサーチして絡んでいく Slack で Vibes 関係の話をしている人にとにかく絡む キーワード通知を設定したうえで、入ってないチャンネルの発言は定期的に検索
05 デザインシステムの実装を通して 39Section
40デザインシステムを自分たちで構築する意味は？ めんどくさいし、 Material Design とかを使えばいいんじゃない？
42
44デザインシステムを自分たちで構築する意味は？ 会社のビジョンを実現するために デザインシステムを作っている
45freee の目指しているものと、 Vibes が目指すもの ● 「ビジネスを強くスマートに育てられるプラットフォーム」 ○ 高品質なプロダクトを高速にリリースしていける必要がある ● 「アイデアやパッションやスキルがあればだれでも」 ○ どんなユーザーでも排除せず、誰でも使えるものを作る必要がある ● 「ムーブメントで世界を変える」 ○ freee が提供する価値を世界に伝えられるUIである必要がある
46freee のリブランディング ロゴやトーン＆マナーが、 freee のミッションやフィロソフィーを表現できるよう、 統一感のあるものに定義しなおされた 「freeeのリブランディングを支えた、デザイナーが事業に伴走する姿勢」https://note.designing.jp/n/nfe7c550edfc5
47バックオフィス用アプリケーション独特のUI 複雑に作り込まれた入力ボックスなどがアプリケーションのあちこちに必要になる
48UI/UXガイドライン「Groove」 画面構成や基本原則を定義している
49全盲メンバーにとって freee って働きやすいですか？ ● 人事労務freeeの給与明細がWebやスマホアプリで見られるので 給与明細を誰かに読んでもらう必要がない ● 自社サービスだけでなく、ありとあらゆる業務がペーパーレス化されていて色々なものがWebにあるので困ることが少ない freee が成長していくことでこういう世界になっていってほしい 中根 雅文 (@ma10)
50色弱（色覚異常） 日本人男性の20人に1人は色弱（色覚異常）がある 滋賀医科大学 眼科学口座「色覚異常者の色の見え方」 http://www.shiga-med.ac.jp/~hqophth/farbe/miekata.html
51中小企業ほど高齢者比率が高い 中小企業白書2016 https://www.chusho.meti.go.jp/pamflet/hakusyo/H28/PDF/h28_pdf_mokujityuu.html
52法定雇用率 従業員45.5人以上の企業では2.2%以上の障害者雇用が義務 厚生労働省 https://www.mhlw.go.jp/stf/seisakunitsuite/bunya/koyou_roudou/koyou/shougaisha/04.html
53freee が Vibes を作るのは ● freee が作っているのは世界を変えるプラットフォームだから ○ 最適な UI をもつ高品質なサービスを高速に開発できなければいけない ○ 誰でも使えるサービスになっていなければならない ○ 一貫したブランドイメージをきちんと伝えることができなければならない ● 他のデザインシステムを流用したりすると、どこかで犠牲を払う必要がある ○ UI の最適化を諦めたり、どれを選べば最適なのかを毎回探す必要がある ○ アクセシビリティの対応状況がデザインシステムに依存してしまう ○ ブランドイメージを UI で伝えることができなくなる
54デザインシステムを自分たちで構築する意味は？ 会社のビジョンを実現するために デザインシステムを作っている
55「世界を変えるデザイン」 ● 原題「残り 90% の人々のためのデザイン」 ○ 世界の 10% の豊かな人々向けではなく、 残り90% の人々の問題を解決するデザイン ● 彼らの生活を改善していけるような製品を作る ○ 安価な灌漑用ポンプで農業の収入を増やせる ○ 転がせるタンクで水汲みの負担を軽減する ○ 現地のもので作れて、売ってお金にできる燃料 ○ 途上国の子ども向けの安価なラップトップ PC 「世界を変えるデザイン」シンシア・スミス著（英治出版 2009年）
56「世界を変えるためのデザインシステム」 ● freee がやろうとしているのは世界を変えること ○ アイデアやパッションやスキルがあれば、世界の主役になれる ○ スモールビジネスでも、ビジネスを強くスマートに育てることができる ○ 誰もが排除されることなく、ビジネスの世界で活躍することができる ● これらを実現するためにデザインシステム Vibes を作っていく ○ スモールビジネスを支えるプラットフォームを作る人たちを支える ○ Vibes を通して開発体験と UI 開発プロセス自体をデザインしていく
57あなたが世界を変えるところを見たい ● 何らかの形で世界に変革を起こすことを目標としている会社は多いはず ● そこにいるあなたはデザイナーやエンジニアとして関わっているのでは？ ● 私はあなたが世界を変えるところを見たい
スモールビジネスを、 世界の主役に。
ymrl
oracle4engineer
uzulla
arthur1
sbtechnight
harukasakihara
carta_engineering
yoshinagaiwnl
doradora09
fixstars
k1low
quramy
hursman
lemiorhan
smashingmag
rmw
edds
addyosmani
searls
afnizarnur
michaelherold
eitanlees
danielanewman