$30 off During Our Annual Pro Sale. View Details »

cookpadLive 短期間で行うサービス開発術

osadake212
October 30, 2019
1.8k

cookpadLive 短期間で行うサービス開発術

2019/10/30 に恵比寿ガーデンプレイスクックパッド社で行った「クックパッドはサービスの作り手を採用したいんです。〜クックパッド採用説明会 vol.2〜」の登壇資料です。
https://cookpad.connpass.com/event/149581/
CookpadTV 株式会社の若月・長田で、cookpadLive のサービスづくりの進め方を実例を踏まえながら紹介させていただきました。

osadake212

October 30, 2019
Tweet

Transcript

  1. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    cookpadLive
    短期間で行うサービス開発術
    クックパッド株式会社 メディアプロダクト開発部
    若月 啓聡・長田 卓哉

    View Slide

  2. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    自己紹介
    2

    View Slide

  3. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    若月 啓聡 Hiroaki WAKATSUKI
    2016年新卒入社
    CookpadTV株式会社 デザイナー
    UI/UX/印刷物など
    カセットテープコレクター
    Twitter: @puzzeljp
    3

    View Slide

  4. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    長田 卓哉 Takuya OSADA
    2015年10月入社
    CookpadTV株式会社 サーバーサイドエンジニア
    Rails / Golang
    サラリーマン
    GitHub: osadake212
    4

    View Slide

  5. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    cookpadLive アプリとは
    5

    View Slide

  6. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    チーム構成
    6
    ディレクター
    1人
    デザイナー
    1人
    撮影チーム
    入稿チーム
    キャスティングチーム
    レシピチーム
    エンジニア
    iOS 1人
    Android 2人
    サーバー 4人

    View Slide

  7. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    cookpadLive の機能開発のフロー
    7
    要件 仕様 設計・実装
    デザイン テスト リリース 分析 改善
    アイデア
    エンジニア
    プロダクトオーナー
    ディレクター
    デザイナー

    View Slide

  8. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    今日話すこと
    8
    デザイナーの動き方
    エンジニアの動き方
    取り外し可能なデザインの構築
    エンジニア視点のサービス開発

    View Slide

  9. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    今日話すこと
    9
    デザイナーの動き方
    エンジニアの動き方
    取り外し可能なデザインの構築
    エンジニア視点のサービス開発

    View Slide

  10. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    意識していたこと
    10
    「ユーザー体験」を損なわずに
    新しい体験を提供すること

    View Slide

  11. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    そのために
    11
    要件・仕様・デザインを
    一貫して取り組む

    View Slide

  12. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    行ったこと
    [概要整理] リニューアルをする目的・ワイヤーフレーム
    [仕様整理] 仕様シートを作成
    [デザイン] 仕様から取り外し可能なデザインに落としこむ
    [開発] 実装時に取り外し可能なデザインの対応
    12

    View Slide

  13. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    行ったこと
    [概要整理] リニューアルをする目的・ワイヤーフレーム
    [仕様整理] 仕様シートを作成
    [デザイン] 仕様から取り外し可能なデザインに落としこむ
    [開発] 実装時に取り外し可能なデザインの対応
    13

    View Slide

  14. 2019-10-30 cookpadLive 短期間で行うサービス開発術 14

    View Slide

  15. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    行ったこと
    [要件整理] リニューアルをする目的・ワイヤーフレーム
    [仕様整理] 仕様シートを作成
    [デザイン] 仕様から取り外し可能なデザインに落としこむ
    [開発] 実装時に取り外し可能なデザインの対応
    15

    View Slide

  16. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    行ったこと
    [概要整理] リニューアルをする目的
    [ワイヤーフレーム] リニューアル案を出す
    [仕様整理] 仕様シートを作成
    [デザイン] 仕様から取り外し可能なデザインに落としこむ
    [開発] 実装時に取り外し可能なデザインの対応
    16

    View Slide

  17. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    行ったこと
    [概要整理] リニューアルをする目的・ワイヤーフレーム
    [仕様整理] 仕様シートを作成
    [デザイン] 仕様から取り外し可能なデザインに落としこむ
    [開発] 実装時に取り外し可能なデザインの対応
    17

    View Slide

  18. 2019-10-30 cookpadLive 短期間で行うサービス開発術 18
    実装可能なデザイン
    理想のデザイン
    リリース可能なデザイン
    行ったこと
    理想のデザイン

    View Slide

  19. 2019-10-30 cookpadLive 短期間で行うサービス開発術 19

    View Slide

  20. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    行ったこと
    [概要整理] リニューアルをする目的・ワイヤーフレーム
    [仕様整理] 仕様シートを作成
    [デザイン] 仕様から取り外し可能なデザインに落としこむ
    [開発] 実装時に取り外し可能なデザインの対応
    20

    View Slide

  21. 2019-10-30 cookpadLive 短期間で行うサービス開発術 21

    View Slide

  22. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    ここまでのまとめ
    22
    デザイナーがビジネス要件(納期)も考慮し
    エンジニアがより高速に開発ができる
    取り組みをしている

    View Slide

  23. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    今日話すこと
    23
    デザイナーの動き方
    エンジニアの動き方
    取り外し可能なデザインの構築
    エンジニア視点のサービス開発

    View Slide

  24. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    まだ若い成長途中のサービスを開発するのに必要なこと
    24
    全員がサービスの成長に対して
    できることを実行する

    View Slide

  25. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    そのために
    25
    エンジニアが自分の役割を越えて
    行動する

    View Slide

  26. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    cookpadLive の機能開発のフロー
    26
    要件 仕様 設計・実装
    デザイン テスト リリース 分析 改善
    アイデア
    エンジニア
    プロダクトオーナー
    ディレクター
    デザイナー

    View Slide

  27. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    cookpadLive の機能開発のフロー
    27
    プロダクトオーナー
    ディレクター
    デザイナー
    要件 仕様 設計・実装
    デザイン テスト リリース 分析 改善
    アイデア
    エンジニア

    View Slide

  28. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    エンジニア視点のサービス開発
    28
    スタジオ観覧モード
    ライブ(通常配信)モード

    View Slide

  29. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    行ったこと
    29
    アイデアだし
    仕様・画面遷移の検討
    撮影オペレーションの検討

    View Slide

  30. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    行ったこと
    30
    アイデアだし
    仕様・画面遷移の検討
    撮影オペレーションの検討

    View Slide

  31. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    エンジニア視点のサービス開発
    31
    アイデアだし
    エンジニアならではの技術的な視点
    での提案
    週イチの情報共有の打ち合わせで
    アイデアを共有やデモを行う

    View Slide

  32. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    行ったこと
    32
    アイデアだし
    仕様・画面遷移の検討
    撮影オペレーションの検討

    View Slide

  33. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    仕様・画面遷移の検討
    要件から画面遷移とセットで仕様を検討
    ● ラフなデザインを書く
    工数を短縮したり、実装を簡単に
    するための仕様提案もできる
    ● WebView を使いどころ
    ● もちろん価値は損なわないように
    エンジニア視点のサービス開発
    33

    View Slide

  34. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    行ったこと
    34
    アイデアだし
    仕様・画面遷移の検討
    撮影オペレーションの検討

    View Slide

  35. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    エンジニア視点のサービス開発
    撮影オペレーションの検討
    ● スタジオ観覧モード用のカメラ選定
    ○ 360度カメラ or 広角カメラ
    ● 撮影方法検討
    ○ カメラの配置場所
    ○ 演者とスタッフの位置
    撮影チームとエンジニアが直接打ち合わせして決める
    35

    View Slide

  36. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    ここまでのまとめ
    36
    エンジニアが設計や実装だけではなく
    役割を越えてサービス開発に積極的に
    関わっている

    View Slide

  37. 2019-10-30 cookpadLive 短期間で行うサービス開発術 37
    その他の取り組み

    View Slide

  38. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    その他の取り組み
    38
    サービス開発を行うためのチーム
    数字を出す会・見る会 かんがえる会
    ● 昼会の延長で強制的に実施
    ● サービスの数字について全員で認識合わせ
    ● KGI・KPI 達成のための新しいアイデア
    ● 既存の導線の再検討
    ● ユーザー体験の整理
    ● etc...

    View Slide

  39. 2019-10-30 cookpadLive 短期間で行うサービス開発術 39
    まとめ

    View Slide

  40. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    まとめ
    40
    デザイナーの動き方
    エンジニアの動き方
    取り外し可能なデザインの構築
    エンジニア視点のサービス開発

    View Slide

  41. 2019-10-30 cookpadLive 短期間で行うサービス開発術
    We are hiring!
    41

    View Slide