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

Slide 1

Slide 1 text

カラーミーショップのフリープランを提供開始と開発の話牧野弘幸 / GMO PEPABO inc. 2021.12.09 Pepabo Tech Conference #18 1

Slide 2

Slide 2 text

2 自己紹介 EC事業部　Colorme Customer Experience Team 2014年中途入社牧野弘幸 Makino Hiroyuki 入社してから7年ずっとEC事業部。外部サービスとの連携まわりの開発を主に担当。ここ最近はショップオーナー（カラーミー契約者）の運用体験と売上の向上を目指し奮闘中。 ● 趣味 : 3Dアクションゲーム作り・xR・お絵かき ● Twitter : @kumak1

Slide 3

Slide 3 text

3 アジェンダ 1. サービスについて • フリープランとは 2. コードについて • 巨大アプリのコア機能に手をつける 3. リモートでの開発体制について • チームの出力を最大化するには

Slide 4

Slide 4 text

4 1. セクションタイトル 1. サービスについて

Slide 5

Slide 5 text

フリープランとは「ECをはじめてみたい。　けれど売上の予測は立たないので、　ランニングコストは抑えたい。」をかなえる、固定費の無いプラン。 5 サービスについて

Slide 6

Slide 6 text

6 既存プラン（レギュラー）フリープランどのくらいの売上になるかわからないのでまずは無料ではじめて見たい方へ月10万円以上の売上が見込めるので決済手数料などのコストを抑えたい方へサービスについて管理画面ショップページ決済　0円 6.6% + 30円管理画面ショップページ決済　3300円 / 月 3.45% 等

Slide 7

Slide 7 text

7 既存プラン（レギュラー）フリープランどのくらいの売上になるかわからないのでまずは無料ではじめて見たい方へ月10万円以上の売上が見込めるので決済手数料などのコストを抑えたい方へサービスについて管理画面ショップページ決済　0円 6.6% + 30円管理画面ショップページ決済　3300円 / 月 3.45% 等フリープランから既存プランへ変更可能（事業規模に応じて）

Slide 8

Slide 8 text

8 サービスについて「ネットでショップを開く」がゴールではない売上 = 来訪数 × 客単価 × 購入率を最大化するショップオーナー・サードパーティ・決済代行業者・関わる全ての人と成長 “ なめらかな成長を支援する”

Slide 9

Slide 9 text

9 2. コードについて

Slide 10

Slide 10 text

コードについて 10 改修前のコード Controller View Model DB

Slide 11

Slide 11 text

コードについて 11 改修前のコード Controller View Model DB

Slide 12

Slide 12 text

コードについて 12 改修前のコード Controller View Model DB

Slide 13

Slide 13 text

コードについて 13 改修前のコード Controller View Model DB

Slide 14

Slide 14 text

コードについて 14 改修前のコード Controller View Model DB

Slide 15

Slide 15 text

コードについて 15 改修前のコード Controller View Model DB

Slide 16

Slide 16 text

コードについて 16 改修前のコード Controller View Model DB 現在プラン

Slide 17

Slide 17 text

コードについて 17 改修前のコード Controller View Model DB 現在プラン

Slide 18

Slide 18 text

コードについて 18 改修前のコード Controller View Model DB 現在プラン利用可能な機能か？選択フォームの切替

Slide 19

Slide 19 text

コードについて 19 改修前のコード Controller View Model DB 現在プラン利用可能な機能か？選択フォームの切替

Slide 20

Slide 20 text

コードについて 20 改修前のコード Controller Model DB 現在プラン利用可能な機能か？選択フォームの切替 View

Slide 21

Slide 21 text

コードについて 21 改修前のコード Controller Model DB 現在プラン利用可能な機能か？選択フォームの切替 View

Slide 22

Slide 22 text

コードについて 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

Slide 23

Slide 23 text

コードについて 23 改修前のコード Controller Model DB プラン情報利用可能な機能か？選択フォームの切替 View Controller Controller 分岐処理が画面の数だけ増えると・・ • 「どのプランがどの機能を使えるか」を確認しにくい • 「機能追加・変更時に漏れがないか」を確認・担保しにくい • テストコードが画面数分必要になる

Slide 24

Slide 24 text

コードについて 24 • 機能・役割が集約されている • 追加・変更がしやすい • 確認しやすい仕組みを準備する • メンテナンスが容易 • 10年、基本的な構造の改修はされなかった • 変更に耐える構造と覚悟が必要 • 変化を楽しめる • 未来も楽しんで作っていける、なめらかな成長ができるコードを書こうコードを改修する

Slide 25

Slide 25 text

Controller コードについて 25 改修後のコード Model DB View Controller Controller Service 各プラン設定 Repository

Slide 26

Slide 26 text

Controller コードについて 26 改修後のコード Model DB View Controller Controller Service 各プラン設定 Repository 現在プラン

Slide 27

Slide 27 text

Controller コードについて 27 改修後のコード Model DB View Controller Controller Service Repository 現在プラン

Slide 28

Slide 28 text

Controller コードについて 28 改修後のコード Model DB View Controller Controller Service Repository 現在プラン

Slide 29

Slide 29 text

Controller コードについて 29 改修後のコード Model DB View Controller Controller Service Repository 利用可能な機能か？選択フォームの値

Slide 30

Slide 30 text

Controller コードについて 30 改修後のコード Model DB View Controller Controller Service Repository 利用可能な機能か？選択フォームの値 • どのプランでどの機能を使えるか確認しやすい • プラン・機能・画面の追加に強くなった • テストコードの記述が容易

Slide 31

Slide 31 text

Controller コードについて 31 改修後のコード Model DB View Controller Controller Service Repository 利用可能な機能か？選択フォームの値 • どのプランでどの機能を使えるか確認しやすい • プラン・機能・画面の追加に強くなった • テストコードの記述が容易作業分担が容易に

Slide 32

Slide 32 text

コードについて　細かな実装方法や知っておくべき概念は、右の本に書いているので、興味持った方ご一読ください。所謂レガシーコードからリファクタリングしながら置き換える手順が詳細に載っています。 https://www.nikkeibp.co.jp/atclpubmkt/book/18/P53540/ 32

Slide 33

Slide 33 text

フロントの改修 ● IE11サポート停止 ○ ES2015など様々機能が使えるように ● Vue.js の導入 ○ UIのコンポーネント化 ○ 段階的な導入ができる ○ コンポーネントのテストが容易に ● Storybookの導入 ○ コンポーネントのドキュメント作成が容易に 33 コードについて

Slide 34

Slide 34 text

フロントの改修 ● IE11サポート停止 ○ ES2015など様々機能が使えるように ● Vue.js の導入 ○ UIのコンポーネント化 ○ 段階的な導入ができる ○ コンポーネントのテストが容易に ● Storybookの導入 ○ コンポーネントのドキュメント作成が容易に　作業分担が容易に 34 コードについて

Slide 35

Slide 35 text

35 コードについてアウトプットを観測できる手段（テスト・ドキュメントなど）を増やす定量的に把握する上記を繰り返して成果物のレベルを上げる “ 成長するコードをつくる”

Slide 36

Slide 36 text

3. リモートでの開発体制について 36

Slide 37

Slide 37 text

37 • リモートワークで気をつけたいこと • 物理出社と比べ、偶発的な接点が少ない • 目標の方向性を合わせる機会が減る • 業務外で遊びづらい交流が減って人となりを知る機会が減る • 期待（予想）する行動と、実際の行動の乖離を避けたいチームの出力を最大化したいリモートでの開発体制について

Slide 38

Slide 38 text

38 • 雑な交流場所を設ける • Google Meet で入退室自由なルームを常設 • チーム外の人と30分のお茶会（雑談会） • 行動指針を明文化する • CCX Way • ドラッカー風エクササイズ • GitHub Issue Template チームの行動理念をつくるリモートでの開発体制について

Slide 39

Slide 39 text

リモートでの開発体制について CCX Way ● チームの行動指針を明文化 ○ ユーザーの手間を最小限にしたか？ ○ 利己的なデザインにしていないか？ ○ ユーザーのしたいことを優先する ● チーム内では ○ 機能の仕様策定の礎に ● チーム外では ○ 機能の仕様策定の礎に ■ 作業依頼をうける際も ○ どんなチームなのかを説明 39

Slide 40

Slide 40 text

リモートでの開発体制についてドラッカー風エクササイズ ● 自分は何が得意なのか？ ● どういうふうに仕事するか？ ● 自分が大切に思う価値は何か？ ● チームメンバーは自分にどんな成果を期待していると思うか？　質問に全員が答えることで、相互理解の促進と期待のすりあわせという効果があり、特にプロジェクトの開始時や新メンバーを迎えるときに効果的であると言われています https://tech.pepabo.com/2017/07/07/the-drucker-exercise/ 40

Slide 41

Slide 41 text

リモートでの開発体制についてドラッカー風エクササイズ　ペパボ Edition ● 自分は何が得意なのか？ ● チームメンバーは自分にどんな成果を期待していると思うか？ ● チームメンバーに期待することはなにか？ペパボでは「期待をすり合わせる」ことを第一としてチューニングしている https://tech.pepabo.com/2017/07/07/the-drucker-exercise/ 41

Slide 42

Slide 42 text

42 ※kumak1の例リモートでの開発体制について

Slide 43

Slide 43 text

リモートでの開発体制について GitHub Issue Template ● チームにスポット参戦・途中参戦がある ○ ドメイン知識・技術にも差がある ○ ストレスなく活躍してもらいたい ● 仕組みで解決 ○ GitHub Issue Template 43

Slide 44

Slide 44 text

44 なにが最大の達成目標なのかどんな行動をすればいいのかチーム > 個人 > タスクとブレイクダウンしながら「いい感じ」を補助する仕組みをつくる “ 目的と期待を明文化する” リモートでの開発体制について

Slide 45

Slide 45 text

45 1. セクションタイトルまとめ

Slide 46

Slide 46 text

まとめ 46 • なめらかな成長を支援する • ビジネスモデルを拡張し、関わる人の幅を広げる • 成長するコードをつくる • 変更を繰り返して成果物のレベルを上げる • 目的と期待を明文化する • 進むべきベクトルがぶれない

Slide 47

Slide 47 text

まとめ 47 • なめらかな成長を支援する • ビジネスモデルを拡張し、関わる人の幅を広げる • 成長するコードをつくる • 変更を繰り返して成果物のレベルを上げる • 目的と期待を明文化する • 進むべきベクトルがぶれないショップオーナー様関わる全ての人、プロダクトと共に、なめらかに成長する

Slide 48

Slide 48 text

48 Thank You! Thank You! ご静聴ありがとうございました