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
3
860
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
2024年4月23日に行われた
Framework by Figma
での登壇資料です
fkady
April 25, 2024
Tweet
Share
More Decks by fkady
See All by fkady
ユーザー体験を支える_freeeのデザインシステム活用.pdf
fkady
2
23k
Other Decks in Design
See All in Design
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
430
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
0
550
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.7k
root 会社紹介資料 / We are hiring.
root_recruit
1
12k
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
310
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2.2k
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
9.7k
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
440
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
190
3 Reasons Why I Got into Design
harukausui
1
140
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
490
Dreamia
elsh
0
120
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1365
200k
Teambox: Starting and Learning
jrom
131
8.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Documentation Writing (for coders)
carmenintech
65
4.3k
Agile that works and the tools we love
rasmusluckow
327
20k
What the flash - Photography Introduction
edds
67
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
In The Pink: A Labor of Love
frogandcode
139
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Gamification - CAS2011
davidbonilla
79
4.9k
What's in a price? How to price your products and services
michaelherold
241
11k
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の⽣産性向上 価値への注⼒ …