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

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

freeeについて 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

パターンの利⽤⽅法 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

種類の選択 table bordered-list

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Figmaと実装への反映 34

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

開発プロセスの変化

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

まとめ

Slide 53

Slide 53 text

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