カラーミーショップのフリープランを提供開始。と開発の話

https://pepabo.connpass.com/event/231478/ で発表したものです

Transcript

1. カラーミーショップの フリープランを提供開始 と開発の話 牧野弘幸 / GMO PEPABO inc. 2021.12.09 Pepabo Tech Conference #18 1
2. 2 自己紹介 EC事業部　Colorme Customer Experience Team 2014年 中途入社 牧野 弘幸 Makino Hiroyuki 入社してから7年ずっとEC事業部。 外部サービスとの連携まわりの開発を主に担当。 ここ最近はショップオーナー（カラーミー契約者） の運用体 験と売上の向上を目指し奮闘中。 • 趣味 : 3Dアクションゲーム作り・xR・お絵かき • Twitter : @kumak1
3. 3 アジェンダ 1. サービスについて • フリープランとは 2. コードについて • 巨大アプリのコア機能に手をつける 3. リモートでの開発体制について • チームの出力を最大化するには
4. 4 1. セクションタイトル 1. サービスについて
5. フリープランとは 「ECをはじめてみたい。 　けれど売上の予測は立たないので、 　ランニングコストは抑えたい。」 をかなえる、 固定費の無いプラン。 5 サービスについて
6. 6 既存プラン（レギュラー） フリープラン どのくらいの売上になるかわからないので まずは無料ではじめて見たい方へ 月10万円以上の売上が見込めるので 決済手数料などのコストを抑えたい方へ サービスについて 管理画面 ショップページ 決済 　0円 6.6% + 30円 管理画面 ショップページ 決済 　3300円 / 月 3.45% 等
7. 7 既存プラン（レギュラー） フリープラン どのくらいの売上になるかわからないので まずは無料ではじめて見たい方へ 月10万円以上の売上が見込めるので 決済手数料などのコストを抑えたい方へ サービスについて 管理画面 ショップページ 決済 　0円 6.6% + 30円 管理画面 ショップページ 決済 　3300円 / 月 3.45% 等 フリープランから 既存プランへ変更可能 （事業規模に応じて）
8. 8 サービスについて 「ネットでショップを開く」がゴールではない 売上 = 来訪数 × 客単価 × 購入率 を最大化する ショップオーナー・サードパーティ・決済代行業者・関わる全ての人と成長 “ なめらかな成長を支援する”
9. 9 2. コードについて
10. コードについて 10 改修前のコード Controller View Model DB
11. コードについて 11 改修前のコード Controller View Model DB
12. コードについて 12 改修前のコード Controller View Model DB
13. コードについて 13 改修前のコード Controller View Model DB
14. コードについて 14 改修前のコード Controller View Model DB
15. コードについて 15 改修前のコード Controller View Model DB
16. コードについて 16 改修前のコード Controller View Model DB 現在プラン
17. コードについて 17 改修前のコード Controller View Model DB 現在プラン
18. コードについて 18 改修前のコード Controller View Model DB 現在プラン 利用可能な機能か？ 選択フォームの切替
19. コードについて 19 改修前のコード Controller View Model DB 現在プラン 利用可能な機能か？ 選択フォームの切替
20. コードについて 20 改修前のコード Controller Model DB 現在プラン 利用可能な機能か？ 選択フォームの切替 View
21. コードについて 21 改修前のコード Controller Model DB 現在プラン 利用可能な機能か？ 選択フォームの切替 View
22. コードについて 22 改修前のコード Controller Model DB 現在プラン 利用可能な機能か？ 選択フォームの切替 View Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller Controller
23. コードについて 23 改修前のコード Controller Model DB プラン情報 利用可能な機能か？ 選択フォームの切替 View Controller Controller 分岐処理が画面の数だけ増えると・・ • 「どのプランがどの機能を使えるか」を確認しにくい • 「機能追加・変更時に漏れがないか」を確認・担保しにくい • テストコードが画面数分必要になる
24. コードについて 24 • 機能・役割が集約されている • 追加・変更がしやすい • 確認しやすい仕組みを準備する • メンテナンスが容易 • 10年、基本的な構造の改修はされなかった • 変更に耐える構造と覚悟が必要 • 変化を楽しめる • 未来も楽しんで作っていける、 なめらかな成長ができるコードを書こう コードを改修する
25. Controller コードについて 25 改修後のコード Model DB View Controller Controller Service 各プラン 設定 Repository
26. Controller コードについて 26 改修後のコード Model DB View Controller Controller Service 各プラン 設定 Repository 現在プラン
27. Controller コードについて 27 改修後のコード Model DB View Controller Controller Service Repository 現在プラン
28. Controller コードについて 28 改修後のコード Model DB View Controller Controller Service Repository 現在プラン
29. Controller コードについて 29 改修後のコード Model DB View Controller Controller Service Repository 利用可能な機能か？ 選択フォームの値
30. Controller コードについて 30 改修後のコード Model DB View Controller Controller Service Repository 利用可能な機能か？ 選択フォームの値 • どのプランでどの機能を使えるか確認しやすい • プラン・機能・画面の追加に強くなった • テストコードの記述が容易
31. Controller コードについて 31 改修後のコード Model DB View Controller Controller Service Repository 利用可能な機能か？ 選択フォームの値 • どのプランでどの機能を使えるか確認しやすい • プラン・機能・画面の追加に強くなった • テストコードの記述が容易 作業分担が容易に
32. コードについて 　細かな実装方法や知っておくべき概念は、右の本に 書いているので、興味持った方ご一読ください。 所謂レガシーコードからリファクタリングしながら置き換 える手順が詳細に載っています。 https://www.nikkeibp.co.jp/atclpubmkt/book/18/P53540/ 32
33. フロントの改修 • IE11サポート停止 ◦ ES2015など様々機能が使えるように • Vue.js の導入 ◦ UIのコンポーネント化 ◦ 段階的な導入ができる ◦ コンポーネントのテストが容易に • Storybookの導入 ◦ コンポーネントのドキュメント作成が容易に 33 コードについて
34. フロントの改修 • IE11サポート停止 ◦ ES2015など様々機能が使えるように • Vue.js の導入 ◦ UIのコンポーネント化 ◦ 段階的な導入ができる ◦ コンポーネントのテストが容易に • Storybookの導入 ◦ コンポーネントのドキュメント作成が容易に 　作業分担が容易に 34 コードについて
35. 35 コードについて アウトプットを観測できる手段（テスト・ドキュメントなど）を増やす 定量的に把握する 上記を繰り返して成果物のレベルを上げる “ 成長するコードをつくる”
36. 3. リモートでの開発体制について 36
37. 37 • リモートワークで気をつけたいこと • 物理出社と比べ、偶発的な接点が少ない • 目標の方向性を合わせる機会が減る • 業務外で遊びづらい交流が減って人となりを知る機会が減る • 期待（予想）する行動と、実際の行動の乖離を避けたい チームの出力を最大化したい リモートでの開発体制について
38. 38 • 雑な交流場所を設ける • Google Meet で入退室自由なルームを常設 • チーム外の人と30分のお茶会（雑談会） • 行動指針を明文化する • CCX Way • ドラッカー風エクササイズ • GitHub Issue Template チームの行動理念をつくる リモートでの開発体制について
39. リモートでの開発体制について CCX Way • チームの行動指針を明文化 ◦ ユーザーの手間を最小限にしたか？ ◦ 利己的なデザインにしていないか？ ◦ ユーザーのしたいことを優先する • チーム内では ◦ 機能の仕様策定の礎に • チーム外では ◦ 機能の仕様策定の礎に ▪ 作業依頼をうける際も ◦ どんなチームなのかを説明 39
40. リモートでの開発体制について ドラッカー風エクササイズ • 自分は何が得意なのか？ • どういうふうに仕事するか？ • 自分が大切に思う価値は何か？ • チームメンバーは自分にどんな成果を期待してい ると思うか？ 　質問に全員が答えることで、相互理解の促進と期待 のすりあわせという効果があり、特にプロジェクトの開 始時や新メンバーを迎えるときに効果的であると言わ れています https://tech.pepabo.com/2017/07/07/the-drucker-exercise/ 40
41. リモートでの開発体制について ドラッカー風エクササイズ　ペパボ Edition • 自分は何が得意なのか？ • チームメンバーは自分にどんな成果を期待してい ると思うか？ • チームメンバーに期待することはなにか？ ペパボ では「期待をすり合わせる」ことを第一として チューニングしている https://tech.pepabo.com/2017/07/07/the-drucker-exercise/ 41
42. 42 ※kumak1の例 リモートでの開発体制について
43. リモートでの開発体制について GitHub Issue Template • チームにスポット参戦・途中参戦がある ◦ ドメイン知識・技術にも差がある ◦ ストレスなく活躍してもらいたい • 仕組みで解決 ◦ GitHub Issue Template 43
44. 44 なにが最大の達成目標なのか どんな行動をすればいいのか チーム > 個人 > タスク とブレイクダウンしながら 「いい感じ」を補助する仕組みをつくる “ 目的と期待を明文化する” リモートでの開発体制について
45. 45 1. セクションタイトル まとめ
46. まとめ 46 • なめらかな成長を支援する • ビジネスモデルを拡張し、関わる人の幅を広げる • 成長するコードをつくる • 変更を繰り返して成果物のレベルを上げる • 目的と期待を明文化する • 進むべきベクトルがぶれない
47. まとめ 47 • なめらかな成長を支援する • ビジネスモデルを拡張し、関わる人の幅を広げる • 成長するコードをつくる • 変更を繰り返して成果物のレベルを上げる • 目的と期待を明文化する • 進むべきベクトルがぶれない ショップオーナー様 関わる全ての人、 プロダクトと共に、なめらかに成長する
48. 48 Thank You! Thank You! ご静聴ありがとうございました