スクラムによる広告管理ツールの刷新と改善 #yjtc / YJTC21 B-4

398 Views

January 22, 21

#yjtc #Page1 #情報なし #空のスライド #不明 #データ不足

スライド概要

Yahoo!広告ではプロダクトの統合も含めたリニューアルを進めています。
本セッションでは、リニューアルの概要および広告管理ツールの刷新を進めるにあたり、ユーザーへ必要な機能を素早く届けるためにスクラムを取り入れた背景や気付きをご紹介します。
また、プロダクトの改善をどういった流れで進めているか実際の事例も含めてお話しします。

Yahoo! JAPAN Tech Conference 2021 は2021年1月22日に開催しました。
https://techconference.yahoo.co.jp/2021/

Yahoo!デベロッパーネットワーク

@ydnjp

スライド一覧

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

またはPlayer版

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

（ダウンロード不可）

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

Yahoo!デベロッパーネットワーク 193.8K

ゼロから始める転移学習

Yahoo!デベロッパーネットワーク 92.3K

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

idcon fidcon

Yahoo!デベロッパーネットワーク 82.6K

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

openid openid_tokyo

Yahoo!デベロッパーネットワーク 65.5K

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

devsumi

Yahoo!デベロッパーネットワーク 43.3K

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

ml_kubernetes

Yahoo!デベロッパーネットワーク 33.7K

各ページのテキスト

Yahoo!広告について Yahoo!広告について（リニューアル前） Yahoo! JAPANが提供する広告プロダクトは従来このような形で、・Yahoo!プレミアム広告・Yahoo!ディスプレイアドネットワーク・スポンサードサーチに分かれていました。 Yahoo!プレミアム広告予約型 Yahoo!ディスプレイアドネットワーク運用型 Yahoo! プロモーション広告スポンサードサーチ ©2021 Yahoo Japan Corporation All rights reserved.

Yahoo!広告について Yahoo!広告について（リニューアル前） Yahoo! JAPANが提供する広告プロダクトは従来このような形で、・Yahoo!プレミアム広告・Yahoo!ディスプレイアドネットワーク・スポンサードサーチに分かれていました。そのため、ユーザーは別々の管理ツールから入稿する必要がありました。 Yahoo!プレミアム広告予約型 Yahoo!ディスプレイアドネットワーク運用型 Yahoo! プロモーション広告スポンサードサーチ ©2021 Yahoo Japan Corporation All rights reserved.

10.

11.

12.

Yahoo!広告についてリニューアルのポイント3：最適な配信アルゴリズム今までディスプレイ広告は、サイト誘導を中心に配信されていましたが、配信アルゴリズムを刷新することにより、広告の目的に合わせた配信が可能となり、広告効果を最大化しています。動画再生サイト誘導アプリ訴求ブランド認知ディスプレイ広告コンバージョン商品リスト訴求 ©2021 Yahoo Japan Corporation All rights reserved.

13.

14.

15.

刷新PJについてプロダクト刷新の歩み冒頭に紹介した通り、複数に分かれていたプロダクトを統合する大型案件が動き出し、その中で広告管理ツールのUIも一新させるプロジェクトが始動しました。 2018年冬頃：開発着手 2019年夏頃：β版として一部ユーザーに公開現在はすべてのユーザーが利用できるようになっています。 ©2021 Yahoo Japan Corporation All rights reserved.

16.

17.

18.

19.

20.

21.

22.

刷新PJについてスクラムチーム PJに関わるデザイナーとフロントエンドエンジニアは、ライン組織とは別に、PJ内でスクラムチームを組んで開発を進めています。開発初期は1チーム体制でしたが、現在は5チーム体制となり、開発に携わっているメンバーも40人以上となりました。ライティング（校正）や品質チェック（QA）のメンバーも加わっていて、 Yahoo! JAPAN社内でもかなり大規模な開発となっています。 ©2021 Yahoo Japan Corporation All rights reserved.

23.

24.

25.

26.

刷新PJについてスプリントの期間 Day1 スプリントプランニング2 レトロスペクティブ Day2 デイリースクラム Day3 デイリースクラム改善バックログリファインメント Day4 デイリースクラムバグ/リファクタリファインメント Day5 デイリースクラム Day6 デイリースクラム中間レビュー Day7 デイリースクラムバックログリファインメント Day8 デイリースクラム数値確認・改善バックログリファインメント Day9 デイリースクラムバグ/リファクタリファインメント Day10 スプリントレビューリファインメントプランニング1 ©2021 Yahoo Japan Corporation All rights reserved.

27.

刷新PJについて主にフロントエンドで使っている技術・設計思想クライアントサイド・React ・Redux (re-ducks) ・TypeScript ・Atomic Design サーバサイド（BFF）・Node.js フロントエンドクライアントサイド React サーバサイド (BFF) Node.js バックエンドバックエンドA バックエンドB バックエンドC ©2021 Yahoo Japan Corporation All rights reserved.

28.

29.

刷新PJについて TypeScriptの導入旧UIでもReactやReduxは採用していたのですが、新UIに刷新するにあたって、TypeScriptを新たに導入しました。旧UIでリファクタリングなどを実施する際に、コードの影響範囲が追いきれず予期せぬ箇所に変更が加わってしまったケースがあったためです。 PJに参加するメンバーも多く、学習コストや開発スピードなども考慮した上で慎重に判断する必要がありました。 ©2021 Yahoo Japan Corporation All rights reserved.

30.

31.

32.

刷新PJについて Atomic Designの導入広告管理ツールはフォームなどのパーツ群を組み合わせて入稿用のページを作成することが多く、旧UIでは複数人で開発をしていると同じようなパーツを作ってしまうケースがありました。新UIではUIの統一感を担保するためにも、 Atomic Design（コンポーネント単位で定義していくUIデザイン手法）に沿ってパーツを用意し開発を進めています。 ©2021 Yahoo Japan Corporation All rights reserved.

33.

34.

35.

スクラムを実践して感じたこと小さく作ることの大切さ開発初期はなかなかスピードが上がらない時期がありました。大規模な刷新だったため、エンジニア視点で考えると、一つのコンポーネントを作るだけでも、「将来的にはこんな可能性があるかな？汎用的にしないといけないかも…」「設計をちゃんとしておかないと、後戻りできなくなるかも…」といった不安がありました。 ©2021 Yahoo Japan Corporation All rights reserved.

36.

37.

スクラムを実践して感じたこと小さく作ることの大切さ当時、スクラムを導入するにあたってサポートいただいていた方から、「将来のことは考えず、そのとき分かっている範囲で最小限の物を作る」というアドバイスを貰いました。もし、一つのコンポーネントを作って流用できない状況が出てきたら、そのときにリファクタすればいい。安心してリファクタできるように、シンプルに作っておくことが大切です。 ©2021 Yahoo Japan Corporation All rights reserved.

38.

39.

スクラムを実践して感じたことイベントの大切さスクラムを導入する前と比較して、プランニングやリファインメントなどのイベントにかかる時間は増えて、MTG自体の時間は増加したと思うのですが、開発が巻き戻ったりする機会は減ったという印象を持っています。課題に対して、PM/デザイナー/エンジニアで把握できる範囲は違うので、タスクの優先順位やゴールを定期的に認識合わせできていることが、プラスに働いていると感じます。 ©2021 Yahoo Japan Corporation All rights reserved.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

広告管理ツールの改善改善事例：ローディング時のお知らせ機能アンケート機能などのコメントを見ていたところ、「テーブルの横幅を調整できるようにして欲しい」など、既に実装できているのにユーザーが気付いていない機能がありました。細かな機能をお知らせできる方法はないかと検討し、初回ローディング時にお知らせを表示させる施策を実施しました。 ©2021 Yahoo Japan Corporation All rights reserved.

53.

54.

55.

広告管理ツールの改善改善事例：ローディング時のお知らせ機能開発を進めていく中で「ローディング自体の時間が短すぎたら見られないんじゃないか？」という懸念が出てきました。そのため、ローディングが表示されている時間を計測できるようにイベントを設定したのですが、中央値が0.7秒でした。中央値なので、もっと長く表示されているユーザーもいるはずですが、一旦この機能は取り下げ、別の方法でお知らせを検討する方向に切り替えました。 ©2021 Yahoo Japan Corporation All rights reserved.

56.

57.

58.

広告管理ツールの改善改善リリースの頻度 1スプリント2週間で開発した成果物を、次のスプリント内で試験を実施しリリースするサイクルを回しています。旧UIでは改善タスクは不定期にリリースしていたのですが、サイクルが決まっているので定常的にユーザーへ届けることができています。より早くユーザーに機能を届けるため、スプリント内でできる範囲にタスクを分割することを心がけています。 ©2021 Yahoo Japan Corporation All rights reserved.

59.

60.

61.

62.