208 Views
August 18, 20
スライド概要
Bonfire Frontend #6 での登壇発表内容です。
イベントページ URL は こちらです。
https://yj-meetup.connpass.com/event/181363/
Bonfire Frontendは、ヤフー主催の「フロントエンド」にフォーカスした情報共有を定期的に行う勉強会/交流会イベントです。
様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会を目指します!
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
広告管理ツールの プロダクト刷新・改善 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を進めるにあたって、 ⼤きなポイントになった1つが スクラムの採⽤でした。 • それまでの開発ではウォーターフォールが主 軸となっていて、よくある話だと思いますが、 リリース⽇は決まっているけど、仕様はなか なか決まらず、現場にしわ寄せが来てしまう パターンが多かった印象です。 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