マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム

2 1 パターンレベルを進める理由 2 パターンレベルの提供価値 3 開発プロセスの変化⽬次

freeeと以前のデザインシステム

freeeについて 4

5 Mission スモールビジネスを、世界の主役に。 freeeは「スモールビジネスを、世界の主役に。」をミッションに掲げ、統合型経営プラットフォームを開発‧提供し、だれもが⾃由に⾃然体で経営できる環境をつくっていきます。起業やビジネスを育てていくことを、もっと魅⼒的で気軽な⾏為に。個⼈事業や中⼩企業などのスモールビジネスに携わるすべての⼈が、じぶんらしく⾃信をもって経営できるように。⼤胆にスピード感をもってアイデアを具現化できるスモールビジネスは、今までにない多様な価値観や⽣き⽅、新しいイノベーションを⽣み出す起爆剤だと私たちは考えています。スモールビジネ
スが⼤企業を刺激し、社会をさらにオモシロク、世の中全体をより良くする流れを後押ししていきます。

6 ユーザーネットワーク取引の効率化‧活性化を実現統合型クラウドERP スマートで適切なアクションを実現オープンプラットフォーム多様なビジネス‧経営ニーズに対応 1 2 3
電子稟議  プロジェクト  マネジメント  経費精算  債権債務  管理  人事労務  契約  固定資産  請求管理  会計  販売管理  Vision 統合型経営プラットフォーム

7 組織規模デザイナー 50  ⼈以上エンジニア 500  ⼈以上

以前のデザインシステム 8

10 リソース React Figma Storybook ガイドライン＋

11 コンポーネントレベルの提供価値 • コンポーネントの再利⽤ • デザインライブラリと実装の⼀致開発⽣産性⼀貫性‧品質 •
⾒た⽬と挙動が揃う • a11yの担保ブランド体現 • design tokenを反映 • イラストの組み込み

コンポーネントレベルのデザインシステムの課題

13 電子稟議  プロジェクト  マネジメント  経費精算  債権債務  管理  人事労務  契約  固定資産 
請求管理  会計  販売管理  Visionの実現に求められること統合型クラウドERP スマートで適切なアクションを実現⼀貫性新しい製品に対する学習コストを最⼩限に抑え、効率的に業務を進めることができる開発⽣産性‧品質新規プロダクトの⽴ち上げの速さと品質を両⽴既存プロダクトも運⽤し進化させていく

14 1. コンポーネントの“使われ⽅”が揃わない 2. コンポーネントの“組み合わせ⽅”が揃わない 3. “実装難易度の⾼い機能の提供”が困難 4. “アクセシビリティの担保”のコスト 5.
“レスポンシブ対応”のコストコンポーネントの提供だけでは満たせない、主なポイント

15 • コンポーネントはオプションを含み、⽤途に応じた使い分けが求められる • デザイナーやエンジニアの理解が揃わないと、挙動の不⼀致に繋がる loading表⽰の使い分けコンポーネントの“使われ⽅”が揃わない

16 様々なプレビュー表⽰が混在 • コンポーネントを組み合わせて成り⽴つ機能が多く存在する • 担当するチームによって、組み合わせ⽅に違いが出やすい • 実装時期による、新旧での差も出てくる
コンポーネントの“組み合わせ⽅”が揃わない

17 split-view • 状態管理や挙動の複雑性により、実装⼯数が多くかかる • ユーザーに提供したい価値だとしても、⼯数の関係上諦めてしまうこともある • 実装されたとしても、品質が伴いにくい
“実装難易度の⾼い機能の提供”が困難

18 コンポーネント使い⽅や組み合わせ⽅次第で満たされないケースも多い • ⼤きい⽂字に⾒出し⽤のコンポーネントが使われてしまう • タッチデバイスやキーボード操作では成り⽴たない機能になってしまう •
キーボードショートカットを⽤意しても、ユーザーがOFFにできない “アクセシビリティの担保”のコスト

19 • 画⾯単位でのレスポンシブ対応は個々のチームに任せられる • 検討‧実装コストが⼤きい • 主要ユーザーがdesktop利⽤なため、対応しない判断も多くなる “レスポンシブ対応”のコスト

20 ⼀貫性新しい製品に対する学習コストを最⼩限に抑え、効率的に業務を進めることができる開発⽣産性‧品質⼀貫性 - 機能やレイアウトが揃わず、新旧も混在 - 学習コスト⾼く、業務効率も下がる
開発⽣産性‧品質 - コンポーネントの組み合わせから実装、品質を保つコスト⾼ - スピードや機能性が上がりにくいコンポーネントでは⾜りない Visionに求められるプロダクトの⽴ち上げの速さと品質を両⽴既存プロダクトも運⽤し進化させていくギャップ

パターンレベルのデザインシステムでの解決

22 1. コンポーネントの“使われ⽅”が揃わない 2. コンポーネントの“組み合わせ⽅”が揃わない 3. “実装難易度の⾼い機能の提供”が困難 4. “アクセシビリティの担保”のコスト 5.
“レスポンシブ対応”のコストコンポーネントで満たせない問題を起こさないよう構造で解決したい

23 粒度コンポーネント Atoms, Molecules Organisms, Templates パターン

24 担保する範囲コンポーネントコンポーネント毎の挙動‧品質を担保機能ロジック‧レイアウト内包するコンポーネントの挙動や品質を担保パターン

パターンの利⽤⽅法 25

どのように成り⽴たせるか

種類の選択 table bordered-list

機能の有無を指定検索条件の保存‧⾃由⽂字検索は不要

内容や並びを決める tableの値‧並び順ソート候補‧並び順

パターンで担保されること 30

各粒度で、レイアウト‧機能ロジック‧挙動等を担保

レスポンシブ表⽰例:パターンで担保され、１から設計する必要がない loading表⽰フィルタ操作

1. コンポーネントの“使われ⽅”が揃わない 2. コンポーネントの“組み合わせ⽅”が揃わない 3. “実装難易度の⾼い機能の提供”が困難 4. “アクセシビリティの担保”のコスト 5. “レスポンシブ対応”のコスト
コンポーネントで満たせない 1. コンポーネントの“使われ⽅”が揃う 2. コンポーネントの“組み合わせ⽅”が揃う 3. “実装難易度の⾼い機能の提供”が簡単 4. “アクセシビリティの担保”を含む 5. “レスポンシブ対応”を含むパターンで満たす

Figmaと実装への反映 34

35 Figma: Variants‧Component Propertiesを切り替え、パターンを再現

36 実装: パターンを即実装可能

パターンレベルの提供価値 37

38 パターンレベルの提供価値 • 機能ロジック • レイアウト • 状態や挙動⼀貫性開発⽣産性‧品質
• パターンを即実装可能 • a11y等の品質も伴う • QAコストなど削減メンテナンス性 • パターン単位で更新 • 新旧が混在しない

開発プロセスの変化

40 パターンの定義 “ある「状況」で、繰り返し発⽣する「問題」に対して、再利⽤できる「解決策」”

41 split-view table 状況と問題によって適するUIは異なる

どうやって状況‧問題と UI（解決策）を対応させるか 42

きっかけ⾏動結果ユーザー特性業務の捉え⽅

きっかけ⾏動結果ユーザー特性例：申請の承認 - ⽉末に申請が溜まる - 依頼を受ける -
上⻑ - 習熟度⾼ - 未承認な申請を承認 - 繰り返し⾏う該当の⽉の全ての申請が承認済みとなる

状況問題きっかけと得たい結果のための「⾏動」＊ユースケース＝「きっかけ」と得たい「結果」のコンテキスト＊ユースケースが⽣じる状況＝パターンの定義との対応

きっかけ⾏動結果ユーザー特性例：申請の承認 - 上⻑ - 習熟度⾼ -
未承認な申請を承認 - 繰り返し⾏う該当の⽉の全ての申請が承認済みとなる「きっかけ」と得たい「結果」のための「⾏動」（ユースケース）を満たすUI（解決策）を選択する - ⽉末に申請が溜まる - 依頼を受ける

例：申請の承認ステータスが明確反復作業の効率性

パターンは再利⽤できる〇〇な状況の反復作業向けパターン業務 A 業務 B 業務 C
…

プロセスがどう変わるか 49

⼤まかなプロセスと変化リサーチ従来要求定義 UI設計実装 QA

⼤まかなプロセスと変化リサーチ従来要求定義 UI設計実装 QA リサーチパターン有り
要求定義 UI 設計実装 QA 短縮 • パターンの利⽤によって、全体のプロセスが短縮 • 課題の探索や、施策を増やす、パターンを増やすなど、価値提供の増加に繋がる

まとめ

53 電子稟議  プロジェクト  マネジメント  経費精算  債権債務  管理  人事労務  契約  固定資産 
請求管理  会計  販売管理  統合型クラウドERP PJ PJ PJ パターンレベルデザインシステム提供価値の増加⼀貫性向上⼀貫性開発⽣産性 ‧品質メンテナンス性 PJの⽣産性向上価値への注⼒ …

マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム

マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム

More Decks by fkady

Other Decks in Design

Featured

Transcript