YJTC18 B-3 作りっぱなしで終わらない、大規模業務ツール刷新の進め方

>100 Views

January 29, 18

#スライド

スライド概要

Yahoo! JAPAN Tech Conference 2018 B-3 セッションのスライドです。

profile-image
スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで
user-img Yahoo!デベロッパーネットワーク 194.1K
slide-thumbnail

ゼロから始める転移学習
user-img Yahoo!デベロッパーネットワーク 92.3K
slide-thumbnail

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon
idcon fidcon
user-img Yahoo!デベロッパーネットワーク 82.9K
slide-thumbnail

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo
openid openid_tokyo
user-img Yahoo!デベロッパーネットワーク 65.6K
slide-thumbnail

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤
devsumi
user-img Yahoo!デベロッパーネットワーク 43.5K
slide-thumbnail

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes
ml_kubernetes
user-img Yahoo!デベロッパーネットワーク 33.7K
各ページのテキスト
1.

作りっぱなしで終わらない 大規模業務ツール刷新の進め方 新 日出海 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

2.

新 日出海（あたらし ひでみ） 2013年4月にエンジニアとして新卒入社 マーケティングソリューションカンパニー 広告フロントエンド開発部 テクニカルデザイン1 広告に関連する管理ツールのフロントエンド開発を担当 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

3.

今回、話すこと Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

4.

大規模な刷新案件で発生しがちな問題に対して、意識している3つのこと 1. コミュニケーションを最大限に効率化 2. ユーザーにとって価値のあるプロダクトを届ける 3. プロダクトにデザイン的負債をためない Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

5.

大規模な刷新案件で発生しがちな問題 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

6.

チーム間コミュニケーションが上手くいかなかった Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

7.

タスク管理方法が統一されていない状況 デザイナーチーム Excel クライアントチーム Confluence APIチーム GitHub Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

8.

タスク管理方法が統一されていない状況 デザイナーチーム Excel クライアントチーム Confluence APIチーム GitHub PMが全体の進捗を把握できない Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

9.

タスク管理方法が統一されていない状況 デザイナーチーム Excel クライアントチーム Confluence APIチーム GitHub PMが全体の進捗を把握できない お互いの状況を把握できず手戻り発生 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

10.

刷新の妥当性がリリースされるまでわからなかった Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

11.

典型的な開発フロー 要件定義 画面設計 デザイン 開発実装 リリース Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

12.

典型的な開発フロー 要件定義 画面設計 デザイン 開発実装 リリース リリースされるまで、刷新が間違っているかどうか判断ができない Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

13.

典型的な開発フロー 要件定義 画面設計 デザイン 開発実装 リリース リリースされるまで、刷新が間違っているかどうか判断ができない 全部作ってから間違いに気付くのでは遅すぎる Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

14.

時間の経過と共にデザインの統一性が失われた Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

15.

デザインのルールがない状態 ルールがない状態で複数人がデザイン・開発を行うとどうなるか Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

16.

デザインのルールがない状態 ルールがない状態で複数人がデザイン・開発を行うとどうなるか 全体を見たときにまったく統一性のないプロダクトになってしまう ページ毎にフォントサイズが異なる 同じ機能なはずなのに画面によってボタンのラベルや色が異なる Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

17.

デザインのルールがない状態 ルールがない状態で複数人がデザイン・開発を行うとどうなるか 全体を見たときにまったく統一性のないプロダクトになってしまう ページ毎にフォントサイズが異なる 同じ機能なはずなのに画面によってボタンのラベルや色が異なる プロダクトにデザイン的負債が蓄積されていく状態 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

18.

チーム間コミュニケーションが上手くいかなかった 刷新の妥当性がリリースされるまでわからなかった 時間の経過と共にデザインの統一性が失われた Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

19.

これらの問題を乗り越えられなかった結果 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

20.

リリース前 コミュニケーションが円滑に進まないためにプロジェクトが炎上 リリース時 ユーザーにとって価値のないプロダクトがリリースされてしまう リリース後 変更を加えるたびにデザイン的負債が増大していく Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

21.

そして何度も繰り返される「刷新」プロジェクト Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

22.

この問題にどう立ち向かっているか Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

23.

1. コミュニケーションを最大限に効率化 2. ユーザーにとって価値のあるプロダクトを届ける 3. プロダクトにデザイン的負債をためない Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

24.

1. コミュニケーションを最大限に効率化 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

25.

コミュニケーションの起点を全てGitHubに集約 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

26.

コミュニケーションの起点を全てGitHubに集約 -client JavaScript 6 Updated 6 minutes ago -server JavaScript 2 1 Updated 7 hours ago -design Updated 6 days ago Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

27.

コミュニケーションの起点を全てGitHubに集約 -client JavaScript 6 Updated 6 minutes ago -server JavaScript 2 1 Updated 7 hours ago -design Updated 6 days ago Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

28.

コミュニケーションの起点を全てGitHubに集約 -client JavaScript 6 Updated 6 minutes ago -server JavaScript 2 1 Updated 7 hours ago -design デザイン関連のファイルもGitHubで管理 Updated 6 days ago Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

29.

LabelsによるIssueの振り分け タスクの種類 Type: Breaking Change Type: Bug Type: Feature Type: Maintenance Type: Question Type: Refactoring 優先度 Priority: Critical Priority: High Priority: Low Priority: Medium 担当チーム Team: Design Team: FE Team: PM Team: UI Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

30.

OrganizationのProjectsで一括管理 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

31.

OrganizationのProjectsで一括管理 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

32.

Issue上であらゆるやり取りを行う状態 開発に関するタスク管理 デザインレビュー、ユーザーテストの計画 要件定義に関する議論・質問 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

33.

2. ユーザーにとって価値のあるプロダクトを届ける Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

34.

ユーザーテストを実施して仮説検証を行う 必要最低限の実装で何度もリリースを行う Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

35.

ユーザーテストを実施して仮説検証を行う 要件定義 画面設計 デザイン 開発実装 リリース Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

36.

ユーザーテストを実施して仮説検証を行う 要件定義 画面設計 デザイン 開発実装 リリース 仮説検証のための ユーザーテスト Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

37.

ユーザーテストを実施して仮説検証を行う 要件定義 画面設計 デザイン 開発実装 リリース 仮説検証のための ユーザーテスト ユーザーにとって価値の無いものは実装しても意味がない Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

38.

必要最低限の実装で何度もリリースを行う 要件定義 画面設計 デザイン 開発実装 リリース 仮説検証のための ユーザーテスト Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

39.

必要最低限の実装で何度もリリースを行う 必要最低限 のものだけ 要件定義 画面設計 デザイン 開発実装 リリース 仮説検証のための ユーザーテスト Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

40.

必要最低限の実装で何度もリリースを行う 必要最低限 のものだけ 要件定義 画面設計 デザイン 開発実装 リリース & 検証 仮説検証のための ユーザーテスト Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

41.

必要最低限の実装で何度もリリースを行う 必要最低限 のものだけ 要件定義 画面設計 デザイン 開発実装 リリース & 検証 仮説検証のための ユーザーテスト このプロセスをN回繰り返す Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

42.

3. プロダクトにデザイン的負債をためない Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

43.

必要最低限のデザインシステムを構築 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

44.

デザインシステム Google Material Design System Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

45.

デザインシステム Google Material Design System コンポーネント集、デザイン原則、アクセシビリティ、モーション、色、… Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

46.

デザインシステム Google Material Design System コンポーネント集、デザイン原則、アクセシビリティ、モーション、色、… 広く知られているデザインシステムには同様のものが揃っている Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

47.

デザインシステムがプロダクトにもたらすもの デザインや語彙の一貫性の担保 一貫性があることによる開発者およびユーザー理解の補助 開発・デザインのプロセス効率化 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

48.

デザインシステムがプロダクトにもたらすもの デザインや語彙の一貫性の担保 一貫性があることによる理解の補助 開発・デザインのプロセス効率化 これらを実現するために、デザインシステムの全てのを揃える必要があるのか Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

49.

必要最低限のデザインシステム 必要最低限のデザインシステム ≠ Google Material Design Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

50.

必要最低限のデザインシステム 必要最低限のデザインシステム ≠ Google Material Design いま、プロダクトの開発に必要な分だけあれば良い 数種類の色、フォントサイズ いくつかのコンポーネント Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

51.

必要最低限のデザインシステム 必要最低限のデザインシステム ≠ Google Material Design いま、プロダクトの開発に必要な分だけあれば良い 数種類の色、フォントサイズ いくつかのコンポーネント 「プロダクトとデザインがコードで紐付いた状態」であれば良い Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

52.

Design System Manager Button/Primary Button/Pulldown Button/Pulldown+Icon Colors alert alpha Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

53.

Design System Manager Color prefix color Font prefix font :root { /* Colors: */ // alert --color-alert-error: #fef0f0; --color-alert-info: #e4e9f0; --color-alert-success: #e8f7e6; --color-alert-warning: #fbf7d5; --color-status-error: #f04134; --color-status-info: #00569b; --color-status-success: #5ca552; --color-status-warning: #f6b600; Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

54.

振り返り Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

55.

チーム間コミュニケーションが上手くいかない 刷新の妥当性がリリースされるまでわからない 時間の経過と共にデザインの統一性が失われる Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

56.

コミュニケーションを最大限に効率化 ユーザーにとって価値のあるプロダクトを届ける プロダクトにデザイン的負債をためない Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

57.

コミュニケーションを最大限に効率化 コミュニケーションの起点を全てGitHubに集約 ユーザーにとって価値のあるプロダクトを届ける ユーザーテストを実施して仮説検証を行う 必要最低限の実装で複数回リリースを行う プロダクトにデザイン的負債をためない 必要最低限のデザインシステムを構築 Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

58.

ご清聴ありがとうございました Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.

59.

Copyright© 2018 Yahoo Japan Corporation. All Rights Reserved.