2018年3月13日にブレインパッドが開催した「エンジニア向け勉強会」の講演資料です。

1. エンジニア・デザイナー・プロダクトオーナー
が推進するプロトタイプドリブン開発
～プライベートDMP「Rtoaster」メジャーバージョンアップ事例～
株式会社ブレインパッド
2018.3.13
http://www.rtoaster.com

2. 自社製品 Rtoaster
メジャーバージョンアップ プロジェクト
上川 晃二朗
プロダクトオーナー
前 壮一郎
デザイナー
秋田 仁雅
エンジニア

3. Agenda
●何をしたか（プロジェクト概要）
●なぜやったのか（背景・目的）
●どうやったのか（進め方）

4. 何をしたのか？

5. の前に、、
Rtoasterて何？

6. ※DMP市場：ベンダー別売上金額シェア【2014年、2015年、2016年度実績】
出典：ITR「ITR Market View：メール／Webマーケティング市場2018」「ITR Market View：マーケティング管理市場2017」

8. 先日、Rtoasterユーザー会も開催（参加者200人以上！）
上川
企業のマーケター
のみなさま

9. ● 企業のマーケターが
● ”データ” に基づき
○ ユーザーを分析し
○ Web／App／Ad／Mail etc で
○レコメンデーション（ex.あなたにオススメ）
○ セグメンテーション／ターゲティング などなどによる
● 施策実行が可能な
●3年連続シェアNo.1(※) DMP(Data Management Platform)
Rtoasterとは http://www.rtoaster.com
※DMP市場：ベンダー別売上金額シェア【2014年、2015年、2016年度実績】
出典：ITR「ITR Market View：メール／Webマーケティング市場2018」「ITR Market View：マーケティング管理市場2017」

10. 何をしたのか？
（プロジェクト概要）

11. DMP「Rtoaster」の
メジャーバージョンアップ
Ver.4系→Ver.5.0へ

12. やったこと
・UIフルリニューアル
・別サービス(DeltaCube)統合
・機能追加（ユーザー分析etc）
Rtoaster史上最大(?)の
バージョンアップ
プロトタイプドリブン
な開発スタイルへ

13. なぜやったのか？
（背景・目的）

14. 過去のバージョンアップ
こんな
機能が
欲しい！
うちは
こんな
機能！
これ
作ってよ
● 営業やコンサルタントが
顧客から言われた要望
● 顧客から直接くる要望
を開発
できることは増え、
顧客からの評価は高い
けどちょっと使いにくいな、、、
使われない機能多いな、、、

15. ”個別の顧客”中心に機能開発
”ユーザー”を中心に考えよう

16. ”ユーザー”中心の発想へ
user
● ユーザーはどんなプロセスで
Rtoasterを利用しているか
● 導入や継続的利用、成果創出の”壁”になっているのは何か
● それを解決する改善（UI・機能etc）は何か
⇒ 個別の顧客要望ではなく、ユーザー全体の体験を設計

17. もっとわかりやすく、
もっとつかえるRtoasterへ！

18. どうやったのか？
（進め方）

19. 2016 2017 2018
Ver.5.0 メジャーバージョンアップ
並行して Ver.4.xx マイナーバージョンアップも
企画・構想 ロードマップ作成 仕様詳細化・設計・開発
企画・設計・開発・リリース
リリース
①夢あふれる
要件爆発期
②現実という
悪魔期
③救世主現る
プロトタイプの
芽生え期
④怒涛の
プロトタイプ・
ワーキング
グループ期

20. 夢あふれる要件爆発期01

21. ユーザーにとっての使いやすさわかりやすさ
”使える”機能を考えた結果

22. 追加機能やUI変更などの要件は爆発
（ありがち）
あれも
これも
こんなのはどうだ

23. 現実という悪魔期02

24. ●多すぎる要件、優先順位付けの甘さ
●追加機能やUI改善についての
PO⇔エンジニア間での認識合わせができない
メジャーバージョンアップの具体化は
なかなか進まず

25. とはいえ、良いものにしたい

26. 焦り
①・②は涙
（とビール）無しには
語れないので、
続きは懇親会で！

27. 救世主現る、
プロトタイプの芽生え期
03

28. プロトタイプ＆ワーキンググループ導入前の課題
色んな資料や
謎チケットの数々
プロダクトオーナー
デザイナー エンジニア
こんなん
やりたい！
・・・
ここは
どうする
あそこが
気になる
よくわか
んねーな

29. 課題① ミーティングが大人数すぎて空中戦になりがち
課題② 共通の理解が進むフォーマットがなかった

30. ！！
プロトタイプツールを使って、
画面のプロトタイプを作って認識合わせしようデザイナー
S
開発領域毎に少人数のワーキンググループで具体化していきましょう
！

31. 課題① ミーティングが大人数すぎて空中戦になりがち
⇒ 少人数WGで領域毎に具体化を進める
課題② 共通の理解が進むフォーマットがなかった
⇒ 画面プロトタイプで仕様の共通イメージを

32. プロト
タイプ
E D
PO
プロト
タイプ
E D
PO
ワーキンググループ内で
プロトタイプを軸に具体化・仕様検討（ほぼ毎日）
プロトタイプ→ワーキンググループ内での具体化→合意形成、というスタイルへ
関連メンバー全体でレビュー・合意形成（週次）

33. 怒涛のプロトタイプ・
ワーキンググループ期
04

34. PO
プロダクトオーナー
E
エンジニア
D
デザイナー
プロトタイプ
プロトタイプ・3者でのワーキンググループを中心とした開発

35. 実施したワーキンググループは
1年間で200回以上！

36. 実際の進め方

37. 要件出し
優先順位付け
アイデア出し・設計・開発
PO
D
PO・E・D
PO・E・D
PO・E・D
リリース
1 2
3
4
6
E・D
5
NG
OK
OK！
NG
ワーキング
グループ
ワーキング
グループ
ワーキング
グループ
プロトタイプ
(簡易)
プロトタイプ
(精緻)

38. 要件出し
優先順位付け
アイデア出し・設計・開発
PO
D
PO・E・D
PO・E・D
PO・E・D
リリース
1 2
3
4
6
E・D
5
ユーザー課題
機能・UI要件を
検討しWGへ
①をWGで説明
実現のための
アイデア出し
プロトタイプ作成
プロトタイプレビュー
・ユーザーテスト
UI・機能実装
ユーザーテスト
・レビュー
NG
OK
OK！
NG

39. ユーザー課題の詳細化・
優先順位付け・要件出し1

40. 施策検討に
役立つ機能
施策管理が
しやすくなる機能
・・・
・・・
・・・
課題の優先順位付け
課題深掘り
・必須要件出し
ワーキング
グループへ
共有
施策検討ができない
ユーザーがどんな人
か分からない
理解が深まる
データを可視化
ユーザーを表す以下
指標を可視化する
① XXX
② YYY
③ ZZZ
④ AAA
⑤ BBB

41. 実現内容のすり合わせ
・アイデア出し2

42. ①の内容を
ワーキンググループで共有
デザイナーは
プロトタイプ作成のため
エンジニアは機能実装のため
理解を深めつつ、
そもそもの実現可否や
実現のためのアイデア出しなど、
徹底的に共有＆議論

43. プロトタイプ作成3

44. 必須要件は
満たしてるか？
ユーザーが使えるか？
使いやすいか？
機能として
実装可能か？

45. プロトタイプレビュー＠WG
＆ユーザーテスト4

46. できました！(ﾄﾞﾔｧ

47. こんな機能で
代替できないかな？
E
PO
D
この機能むりっすね
作れてもバグの温床に…
ここはこうした方
がいいね
プロトタイプに落としてみると
方向転換した方が…優先順位を一旦下げよう…
そもそもの課題って
なんでしたっけ？
イメージしてた機能とは別手段でも
解決できるかも

48. 実ユーザーにも触ってもらいユーザーテスト
こういうシーンもあるか
らこんな導線もほしいな
説明が少なくて
ここわかんないな
既存の使い方だと
こうなんですけど・・・
ワイヤフレームレベル
だとイメージわかないなあ…

49. これだ！となるまで
プロトタイプ→レビューの繰り返し
（簡易なモノで提示することで意見出ししやすくする、
未然に失敗を防ぐ、といったメリットもあった）

50. 作成したプロトタイプは
1,000枚以上

51. 疲れて軽井沢に逃避したことも
軽井沢での合宿で猛烈な追い込みも！

52. 機能・UI実装5

53. プロトタイプを
設計書・仕様書としても
利用し機能・UI実装

54. ユーザーテスト・最終レビュー6

55. できました

56. E
PO
D
実装したらここ無理だったので
ここはこうしてます
いいすね！
実はここはこういう
デザインに変えたほうが
いいかもと思ってます
こんなデザインを
あててます

57. 実際に操作・設定することも可能な
プロトタイプでユーザーテスト
なるほどこれは便利！
ここは説明をこうして
ほしい
実際に設定してみたら
ここはこうした方が…

58. レビュー→修正→レビュー→・・・
改善に改善を重ね

59. GO！

60. 各機能毎に①～⑥を繰り返し

61. 2018.02.19
Rtoaster Ver.5.0 リリース

62. PO
プロダクトオーナー
E
エンジニア
D
デザイナー
プロトタイプ
プロトタイプを軸に協働することで、
エンジニア・デザイナーのアイデアも機能に反映できた
エンジニア・デザイナー・プロダクトオーナー
3者が同じ方向(＝ユーザー)をみて、同じ方向を目指せる
協力体制・フローもバージョンアップで構築できた
まとめ

63. ただし今回のバージョンアップは
スタートラインに立っただけ

64. と、いうことで
一緒にRtoasterを
もっと良くしてくれる人
募集！！
http://www.rtoaster.com
http://www.brainpad.co.jp/recruit/