---
title: 広告管理ツールのプロダクト刷新・改善 #yjbonfire
tags:  #yjbonfire  
author: [Yahoo!デベロッパーネットワーク](https://www.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/V4JQPDZQ7P.jpg?width=480
description: Bonfire Frontend #6 での登壇発表内容です。 イベントページ URL は こちらです。 https://yj-meetup.connpass.com/event/181363/ Bonfire Frontendは、ヤフー主催の「フロントエンド」にフォーカスした情報共有を定期的に行う勉強会/交流会イベントです。 様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会を目指します！
published: August 18, 20
canonical: https://www.docswell.com/s/ydnjp/KRMW35-2020-08-18-153726
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/V4JQPDZQ7P.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/DK74YZ3YJ1.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PLJ16R1N7G.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/8GJWW19MJ2.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/W4EZ5P9MJ3.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/KY769MK57V.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/5G75NZPGJ4.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/V9J25R6DJR.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/5DEYKD9M7M.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/2VJNR6L3E8.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GYE9ML4PJ3.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/5GE8LXQXJD.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/MLELL8XNER.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/54JMM6LQJW.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/ZPJRVPKKE9.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/NPEXZ3L5JX.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/63EK8YLRJD.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/4L73293GE5.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/V87DZG4NJG.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/4VJPD3MNJ8.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/L2EV149YJQ.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/Z57G21ZW7L.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/V4EQPDLQJP.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/DKJ4YZDYE1.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/PLE16RZNJG.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/8GEWW16ME2.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/W47Z5PYME3.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/KYJ69MD5JV.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/5GJ5NZ3GE4.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/4LE3296PJ5.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/V8EDZGV37G.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/4V7PD3VP78.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/L2JV14ZV7Q.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/Z5EG2141EL.jpg)

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