Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
Search
fkady
April 25, 2024
Design
4
1.2k
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
2024年4月23日に行われた
Framework by Figma
での登壇資料です
fkady
April 25, 2024
Tweet
Share
More Decks by fkady
See All by fkady
ユーザー体験を支える_freeeのデザインシステム活用.pdf
fkady
2
25k
Other Decks in Design
See All in Design
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
410
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
110
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
1
210
Goodpatch Tour💙 / We are hiring!
goodpatch
31
780k
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
150
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
540
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
360
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1k
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
970
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
59k
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.4k
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.3k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
The Cost Of JavaScript in 2023
addyosmani
46
7.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
YesSQL, Process and Tooling at Scale
rocio
170
14k
GraphQLとの向き合い方2022年版
quramy
44
13k
Documentation Writing (for coders)
carmenintech
67
4.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
550
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Code Review Best Practice
trishagee
65
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
171
50k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Transcript
None
2 1 パターンレベルを進める理由 2 パターンレベルの提供価値 3 開発プロセスの変化 ⽬次
freeeと以前のデザインシステム
freeeについて 4
5 Mission スモールビジネスを、 世界の主役に。 freeeは「スモールビジネスを、世界の主役に。」をミッションに掲げ、統合型経営プラットフォー ムを開発‧提供し、だれもが⾃由に⾃然体で経営できる環境をつくっていきます。 起業やビジネスを育てていくことを、もっと魅⼒的で気軽な⾏為に。個⼈事業や中⼩企業などのス モールビジネスに携わるすべての⼈が、じぶんらしく⾃信をもって経営できるように。 ⼤胆にスピード感をもってアイデアを具現化できるスモールビジネスは、今までにない多様な価値 観や⽣き⽅、新しいイノベーションを⽣み出す起爆剤だと私たちは考えています。スモールビジネ
スが⼤企業を刺激し、社会をさらにオモシロク、世の中全体をより良くする流れを後押ししていき ます。
6 ユーザーネットワーク 取引の効率化‧活性化を実現 統合型クラウドERP スマートで適切なアクションを実現 オープンプラットフォーム 多様なビジネス‧経営ニーズに対応 1 2 3
電子稟議 プロジェクト マネジメント 経費精算 債権債務 管理 人事労務 契約 固定資産 請求管理 会計 販売管理 Vision 統合型経営プラットフォーム
7 組織規模 デザイナー 50 ⼈以上 エンジニア 500 ⼈以上
以前のデザインシステム 8
9
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
各粒度で、レイアウト‧機能ロジック‧挙動等を担保
レスポンシブ表⽰ 例:パターンで担保され、1から設計する必要がない 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の⽣産性向上 価値への注⼒ …