- DESIGN COLLABORATION - ツールでチーム開発をハッピーに

20191030_Sketch Tokyo 2019
DMM.com 根本大地　デザイナー/ディレクター

「ツールを介して、エンジニアや事業とコラボレーションしたプロセス」についてお話させていただきました。

チーム内で思考プロセスを統一をする手段はツールに加えて、デザインガイドやデザインシステムなどの方法論がありますが、重要なのはプロダクトやチームにとって最適な方法を、対話を通して模索・検討し、共通言語を構築していく事。その手段としてツールやデザイン設計などの方法論を、チームやプロダクトに沿った形で活用する事。

サービス開発の現場では、デザイナーの独りよがりではなく、これまで以上に「チーム全員で多角的な視点でのDESIGNアプローチ」が必要です。
デザイナーはユーザーだけでなく、チームの開発環境や社内ステークホルダーが抱えている課題にも着目し、「エンジニアリングとデザインとのコラボレーション」をより解像度あげていきましょう！

■イベントURL
https://chot-design.connpass.com/event/146361/
https://sketchtokyo.studio.design

#SketchTokyo

Transcript

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