Slide 1
Slide 1 text
ツールでチーム開発をハッピーに
- DESIGN COLLABORATION -
DMM.com Designer / Director
根本 ⼤地
Slide 2
Slide 2 text
nemoto daichi
dnemoto10
⾃⼰紹介 2
DMM.com Designer / Director
“近年は中期的な施策推進を通じたグロース、デザイン価値の可視化に注⼒“
エンターテインメント本部 デザイン部
根本 ⼤地
Slide 3
Slide 3 text
本⽇のトーク内容
ツールを介して
エンジニアや事業と
コラボレーションした
プロセスについて。
3
Slide 4
Slide 4 text
それぞれが抱えている課題感は?!
なんかイケてない..
Design Business
Engineer Design Business
Engineer
→
→
→
→
4
Slide 5
Slide 5 text
開発課題の発⾒と洗い出し
- Quality / Cost -
Slide 6
Slide 6 text
課題を分類すると
対話して⾒つかった抽象的な課題
品質
悪い
品質
悪い
コスト
⾼い
コスト
⾼い
Design Business
Engineer
→
→
6
Slide 7
Slide 7 text
原因は
些細な変更/修正弱い
ユーザー定義と効果解析不⾜
ソース管理が複雑化
開発⼯数の増⼤
開発投資の効果に疑問
環境維持コストに疑問
品質
悪い
コスト
⾼い
→
→
1. 1.
2. 2.
3. 3.
7
Slide 8
Slide 8 text
課題を分類すると
品質
悪い
コスト
⾼い
→
解決するには
品質
悪い
コスト
⾼い
→
→
実装との整合性が⾼い
ルールの整備
開発物/環境の再整備が
利益貢献できる提案
Design Business
Engineer
8
Slide 9
Slide 9 text
プロジェクトの全体像
調査 サイト分析 ブランディング ペルソナ作成
実装 / その後
プロトタイプ
作成
ユーザー
テスト ツール選定 / ルール設計
→
→
→ →
→ →
→
9
Slide 10
Slide 10 text
Empathize
Define Prototype
Design
Ideate Test
Development
ユーザ理解
共感
課題定義
明確化 形にする
アイディア
Workflow
People
Tools
Governance
テスト
実装
→
→
→
→
→
→
→
→
ツールの選定について
- Tools × Workflow × People × Governance -
Slide 11
Slide 11 text
tools
特性や機能/使⽤感など、実際に触れて体験してみる
11
Slide 12
Slide 12 text
Workflow
ツールを介して、精度の⾼いコミュニケーションを
- 各⼯程とその「間」-
Empathize
Define Prototype
Design
Ideate Test
Development
ユーザ理解
共感
課題定義
明確化
テスト
実装
形にする
アイディア
→
→
→
→
→
→
→
→
12
Slide 13
Slide 13 text
People
情報の抽象度を下げた対話から、共通認識を持てるか
- ⼈ -
→
→
Engineer
Designer
Business
13
Slide 14
Slide 14 text
Governance
メンバー全員
扱えるか
思考プロセス
の統⼀
組織/チーム体制
規模/期間
課題解決
できるか
-⽬的と⼿段が逆になっていないか
-解決⼿段として役割を果たせるか
-エンジニアも
デザインツールを触れるか
-運⽤できるか
-何をする為にどんな物を
どのように利⽤するのか
-開発 / 運⽤phaseの⼈数
-サブスクリプション問題
14
Slide 15
Slide 15 text
Sketch / Abstract
→
Befor After
15
Slide 16
Slide 16 text
ルール設計
Sketch × DesignSystem / Guideline
Slide 17
Slide 17 text
Sketch × Abstract
社内で導⼊事例があった
プラグインが豊富
Ver.管理、作業ログが可視化
コンポーネント設計との相性◎
シンボルやオーバーライド
17
Slide 18
Slide 18 text
DesignSystem
- Sketch × AtomicDesign -
精度/認識を統⼀
コンポーネント
思考プロセス / 認識を統⼀ → 対話できる「共通⾔語」
実装側と認識を合わせた
命名規則
粒度
18
Slide 19
Slide 19 text
DesignGuideline
品質 & 制作環境の整備 → 意思疎通の精度UP
構造を
理解できるか
規模感/機能
誰でも
運⽤/参照できるか
- DesignGuideline -
19
Slide 20
Slide 20 text
Business
Engineer
Designer
→
→
→
→
→
→
導⼊後の変化
- ONE TEAM -
Slide 21
Slide 21 text
変化/効果
の向上
品質
⼀貫性 変更に強い
汎⽤性⾼い設計
機能や画⾯ごとに作業
分担が可能に
コンポーネント粒度/
認識の統⼀/Ver.管理
Design
Engineer
21
Slide 22
Slide 22 text
変化/効果
の納得感向上
コスト
作業効率 開発投資の効果
環境維持コスト
Business
Design
デザインが意思決定の
速度をアップ
精度の⾼いレビューと
投資対効果の解析
22
Slide 23
Slide 23 text
まとめ
デザインツールは
その⼀翼を担ってくれました
ステークホルダーの
本質的な課題に着⽬し対策
する事が重要。
- チームがコラボレーションするには -
Business
Engineer
Designer
→
→
→
→
→
→
23
Slide 24
Slide 24 text
DESIGN COLLABORATION
独りよがりではなく
チーム全員で、
多⾓的な視点での
DESIGNアプローチを！
- ONE TEAM -
DESIGN
ツール
プロセス
概念 思考 環境/体制
期間
指標
売上/費⽤
ユーザー
案件規模
→
Business
→
Engineer
→
Designer ガイドライン
24
Slide 25
Slide 25 text
ご静聴ありがとうございました!
ビジネス / エンジニアの
ゴールをデザイナーが繋ぎ
コラボレーションを⽣み出した事例でした。
以上 25