広告管理ツールのプロダクト刷新・改善 #yjbonfire

広告管理ツールの プロダクト刷新・改善 2020年8⽉11⽇ ⼩川 健史 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. Bonfire Frontend #6

アジェンダ • ⾃⼰紹介 • プロダクト刷新の歩み • プロダクト改善に向けて Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2

⾃⼰紹介 ⼩川 健史 @takogawa815 • 2008年新卒⼊社、2012年 より広告管理ツールに関わる。 • 趣味はギター、最近は1歳児 の⼦育てに奮闘中。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 3

プロダクト刷新の歩み Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

広告管理ツールとは︖ • 主にB向けを対象としたツールになる ので、⼀般の⽅には馴染みがないかと 思います。 • 広告主が広告を⼊稿したり、費⽤を⼊ ⾦したり、効果を測定するレポートを 作成したりするツールです。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 5

プロダクト刷新の歩み • プロダクトの広告商品も含めた リニューアルが動き出し、 そのタイミングに合わせて管理ツール のUIも⼀新させるPJが始動しました。 • 2018年冬頃からフルスクラッチで⼀ から開発しています。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 6

旧UIと新UI Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 旧UI 7

旧UIと新UI Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 新UI 8

ウォーターフォールからスクラムへ • PJを進めるにあたって、 ⼤きなポイントになった１つが スクラムの採⽤でした。 • それまでの開発ではウォーターフォールが主 軸となっていて、よくある話だと思いますが、 リリース⽇は決まっているけど、仕様はなか なか決まらず、現場にしわ寄せが来てしまう パターンが多かった印象です。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 9

スクラムチーム • PJにメインで関わるデザイナーとフロン トエンドエンジニアは、PJ内でスクラム チームを組んで、開発を進めています。 • 当初は1チームでしたが、今現在は5チー ムになり、関わっている⼈数も40⼈前後 となっています。 （すごく増えました・・︕） Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 10

主にやっているイベント • スプリントプランニング このスプリントで何をゴールに開発を進めるのか を明確にする • レトロスペクティブ チーム内で振り返りをして、改善すべき点につい て考える • デイリースクラム（朝会） 昨⽇やったこと・今⽇やることを共有、困ってい ることを相談する Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 11

主にやっているイベント • バックログリファインメント プロダクトバックログに積まれているス トーリー（タスク）を精査し、優先度を 決める • スプリントレビュー スプリント内の成果物をPJメンバー全員 に共有 コメントがあれば対応を検討する Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 12

スプリントの期間 • 開発初期は1スプリント1週間で進めて いましたが、予想以上にスクラムイベ ントに時間がかかってしまうため、 現在は1スプリント2週間で進めていま す。 • 現在、46スプリント⽬です…︕ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 13

主に使っている技術・設計思想など • React • Redux • re-ducks • TypeScript Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. • AtomicDesign • formik • yup • immer • Prettier 14

気付き︓⼩さく作ることの⼤切さ • 開発初期はなかなかスピードが上がらなかった時 期がありました。 • ⼤規模な刷新だったため、エンジニア視点で考え ると⼀つの⼩さなコンポーネントを作るだけで あっても、 「将来的にはこんな可能性があるのでは︖汎⽤的 に作らないと」や 「ある程度しっかりした設計の元に進めていかな いと、後戻り出来なくなる」 といった不安がありました。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 15

気付き︓⼩さく作ることの⼤切さ • 当時、スクラムについて教えを請いていた⽅から いただいたアドバイスが、 「将来のことは考えず、そのとき分かっている範 囲で最⼩限の物を作る」 というものでした。 • もし、⼀つのコンポーネントを作って流⽤できな い場⾯が出てきてしまったら、そのときにリファ クタすればいい。 安⼼してリファクタできるように出来るだけシン プルに作っておくのが⼤切。（テストも…︕） Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 16

気付き︓スクラムイベントの⼤切さ • ウォーターフォールで開発していたと きと⽐較して、MTGの時間は伸びてい るとは思うのですが、その分、 開発が巻き戻ったりするような機会は 減ったのかなという印象 を持っています。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 17

気付き︓スクラムイベントの⼤切さ • プランニングやリファインメントと いったMTGの時間を⼗分に確保するこ とによって、 「何をゴールにどのタスクから着⼿し ないといけないんだっけ︖」 をPJメンバー全員で話せているの良い ことだと思っています。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 18

課題︓プルリクエストのレビューコスト • 開発初期はPRのレビューコストが⾼く、 スピードが上がらない時期もありました。 • これだけ⼤⼈数のPJになると、すべての PRを全員が確認することは困難なので、 開発者2⼈にランダムでアサインされ、 Approve貰ったらOKというルールで運 ⽤しています。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 19

課題︓プルリクエストのレビューコスト • lintなどで細かなコードの書き⽅は統⼀し、 それでも⾃動化出来ないようなルールは 開発者向けドキュメントにまとめていま す。 • それでも、常時30前後のPRがオープンし ていて、レビューが遅れてしまうことも あり、引き続きやり⽅を模索する必要は あります。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 20

プロダクト改善に向けて Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

Analyticsツールでの解析 • 社内で提供されている内製のAnalyticsツー ルを⽤いて、 ツール全体の細かな操作ログを取得、分析し ています。 • 作成・適⽤などの操作に対して割り当てられ ているイベントは約400個。 （onClickに合わせて発⽕） • ページとの掛け合わせで取得できるログは もっと多いです。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 22

チーム⽬標の指標として • 取得できるデータを元に、 チームでの⽬標でもある、 ・ユーザーアクションの軽減 ・アンケート満⾜度 がどれだけ達成できているかを 確認するのにも役⽴てています。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 23

アンケート機能 • 2020年1⽉より、ツール上にアンケー トを表⽰させて、満⾜度や簡単なコメ ントを⼊⼒できるようにしました。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 24

アンケート機能 • コメントには、 • 動作が遅い • ⾒にくい • などの意⾒が多くが上がっていたので、 何か出来る施策はないか検討し、 バックログに追加、優先度を付けて対 応を進めています。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 25

アンケート機能 • また、ポジティブな意⾒もまとめて振り 返れるようにしています。 • 開発者として、 • 使いやすくなった • 新機能が便利 • といったコメントがあるととても嬉しく なり、モチベーション維持にも繋がりま す。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 26

事例︓ローディング時のお知らせ機能 • 細かな改善を進めていく中で、ユーザー が気付いていない便利機能をお知らせす る⽅法はないかと考え、 ローディング時にお知らせを表⽰させる 施策を実施しました。 • （この時点では他にも案があったのです が、この案が進めやすかったため。） Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 27

事例︓ローディング時のお知らせ機能 お知らせ表⽰時 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 通常時 28

事例︓ローディング時のお知らせ機能 • 開発途中から、 「ローディング時の時間が短すぎたら ⾒れないんじゃないか︖」という懸念 が出ていたので、 ローディングが表⽰されている時間を 計測できるようにイベントを設定した ところ、中央値が0.7秒でした。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 29

事例︓ローディング時のお知らせ機能 • もっと⻑く表⽰されているユーザーも いるとは思いますが、0.7秒だと⼀瞬 すぎて分からないのではないか。 • 意図的にお知らせ表⽰時に1秒〜2秒程 度待つ案なども出ましたが、⼀旦この 機能は外し、別の⽅法でお知らせを検 討する形に⽅向を切り替えました。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 30

事例︓ローディング時のお知らせ機能 • 細かくリリースを続けていって、 計測できるデータを元に柔軟に⽅向性 を変えていけるのは、よいことだと思 います。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 31

改善機能リリース後の数値確認 • 先ほどの事例に限らず、 リリースしている改善機能にはイベント を設定して、数値を追えるようにし、 PJメンバー全員で週⼀のペースで確認し ています。 • 開発者として、⾃分が作った機能がどれ ぐらい使われているのか、役に⽴ってい るのかが知れるのはいいことです。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 32

まとめ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.

まとめ • 約1年半におよぶ広告管理ツールのプ ロダクト刷新・改善について紹介しま した。 • まだまだPJは続いていくので、引き続 きがんばっていきます︕ • ご静聴ありがとうございました。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 34