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

41104bf685ee28d9c760ef29db690e5b?s=47 ymrl
November 16, 2019

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

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

41104bf685ee28d9c760ef29db690e5b?s=128

ymrl

November 16, 2019
Tweet

Transcript

  1. 2.

    freee 株式会社 17 番目の社員。freee では 2014 年
 から Web フロントエンドを中心に何でもやってきた。


    
 freee の UI を良くするためにデザインシステム “Vibes” を勝 手に作りはじめ、本気でやりきるために UX チームに異動、現 在は UI エンジニアを自称しています。
 
 
 山本 伶 @ymrl
 Engineer
 2
  2. 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営業日で発 行。創業時でも本人確認書類だけで審査 可能。

  3. 7.

    7 freee のエンジニア・デザイナー
 • エンジニア
 ◦ 必要に応じて何でもやる。フロントエンドとサーバーサイドの区別もない
 • デザイナー
 ◦

    “UX” のデザイナーとして調査・分析から評価、 UI デザインまでやる
 ➔ 少ない人数でも次々とサービスを開発できる人たち
 ◆ 立ち上げ期に「とにかく動く」ものを高速に大量に作れる布陣

  4. 8.

    8 freeeのWebフロントエンド開発スタイル
 • UI デザインは主にデザイナーが行い、画面モックをエンジニアに渡す
 ◦ Sketch を使って freee っぽい画面(の画像)を作る


    • HTML/CSS/JavaScript コーディングは、ほぼ全部エンジニアが担当
 ◦ エンジニアにサーバーサイド/フロントエンドの区別はないので
 フロントエンドに不慣れなエンジニアでもやる

  5. 9.

    9 freee が直面していた現実
 • デザイナーごとに作る画面モックの UI の差異が大きくなっていった
 • フロントに不慣れな人も実装するので、画面モックと実装にも差が産まれる
 •

    画面モックを再現するのにCSSが足りておらず、毎回書く(コピペする)
 • CSSの配置や書き方の指針がなく、stylesheetsディレクトリがカオスに
 ➔ 見た目が揃っていなかったり、同じ見た目でも違う挙動をするUIが大量発生
 ➔ それっぽいCSSを毎回探したり書いたりコピペしたりしていて生産性も低下

  6. 11.

    11 AG 部
 • チームやプロジェクトの枠を越え freee 共通の UI 基盤を作っていく「部」
 •

    社内で Web フロントエンドに一家言あるエンジニアとデザイナーで結成
 • 最初の頃は Hack Day のネタとして作りはじめた
 ◦ 10% の工数を好きなことに使ってよいという(当時の)チーム内ルール

  7. 15.

    15 vibes とは
 • Atomic Designによる設計(当初は)
 • Sketchライブラリ と CSS

    / React Component実装
 • 統一されたブランドイメージ、ユーザビリティ、アクセシビリティを担保

  8. 16.

    16 Vibes が目指すもの
 • 高品質で統一感のある UI を爆速で実装できること
 ◦ デザイナーが「 freee

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

  9. 22.

    22 アクセシビリティ
 • アクセシビリティのための仕組みづくり
 ◦ 社内用のアクセシビリティガイドラインの定義
 ◦ アクセシビリティチェック項目の定義
 ◦ eslint-plugin-jsx-a11y

    や @storybook/addon-a11y の導入
 • デザインシステムの開発に障害当事者にも参加してもらう
 ◦ ヒアリングやコンポーネントの挙動についての議論
 ◦ 実装したコンポーネントの動作チェック、改善方法の相談

  10. 27.

    27 アクセシビリティチェック内容の定義
 各フェーズにおいて誰が誰向けに何をチェックすれば良いのかを定義した
 誰向けに 見えにくい(色覚) 見えにくい(弱視) 見えない (スクリーンリーダー使用) 上肢障害 (晴眼・キーボード操作)

    誰が 何を 製作者 第三者 製作者 第三者 製作者 第三者 製作者 第三者 デザイナー パーツ コントラスト チェッカー 具体的な画面 色覚シミュレー ション 社内当事者に よるチェック モックを拡大・ 反転してチェッ ク エンジニア パーツ (各OSでの確 認) lintツールに よるチェック 社内当事者に よるチェック キーボード挙 動のガイドライ ンを満たすか チェック キーボード挙 動のガイドライ ンを満たすか チェック
  11. 32.

    32 Vibes ペアプロ
 • 最初に Vibes 化の対象にしたチームは誰もフロントエンドに詳しなかった
 • フロントエンド技術のキャッチアップも兼ねて AG

    部メンバーがペアプロ
 • 数回のペアプロ + コードレビューで自力でフロントエンドを作れるチームに
 ➔ フロントエンドに強くないエンジニアでも Vibes なら高速に実装できる
 という構想のモデルケースとなった

  12. 34.

    34 ほかのチームも使うようになって課題が見えてくる
 • 実装時の意図通りに Vibes コンポーネントが使われない
 ◦ 見た目が近いからという理由で、想定していない使われ方をしてしまう
 ◦ Sketch

    の上で実装を無視したリサイズをしてしまう
 • コンポーネント自体が無かったり、機能不足があったときに改善できない
 ◦ Pull Request を投げず、似て非なるものを別に実装されてしまう
 ◦ Vibes 導入を機能不足を理由に渋られてしまう
 ➔ 作るだけでなく、上手く使ってもらうコミュニケーションをする必要がある

  13. 42.

    42

  14. 43.
  15. 45.

    45 freee の目指しているものと、 Vibes が目指すもの
 • 「ビジネスを強くスマートに育てられるプラットフォーム」
 ◦ 高品質なプロダクトを高速にリリースしていける必要がある
 •

    「アイデアやパッションやスキルがあればだれでも」
 ◦ どんなユーザーでも排除せず、誰でも使えるものを作る必要がある
 • 「ムーブメントで世界を変える」
 ◦ freee が提供する価値を世界に伝えられるUIである必要がある

  16. 53.

    53 freee が Vibes を作るのは
 • freee が作っているのは世界を変えるプラットフォームだから
 ◦ 最適な

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

  17. 55.

    55 「世界を変えるデザイン」
 • 原題「残り 90% の人々のためのデザイン」
 ◦ 世界の 10% の豊かな人々向けではなく、


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

    56 「世界を変えるためのデザインシステム」
 • freee がやろうとしているのは世界を変えること
 ◦ アイデアやパッションやスキルがあれば、世界の主役になれる
 ◦ スモールビジネスでも、ビジネスを強くスマートに育てることができる
 ◦

    誰もが排除されることなく、ビジネスの世界で活躍することができる
 • これらを実現するためにデザインシステム Vibes を作っていく
 ◦ スモールビジネスを支えるプラットフォームを作る人たちを支える
 ◦ Vibes を通して開発体験と UI 開発プロセス自体をデザインしていく