PHPカンファレンス 2024｜共創を加速するための若手の技術挑戦

by 株式会社ウエディングパーク

Slide 1

Slide 1 text

共創を加速するための若手の技術挑戦 ©WEDDING PARK CO., LTD. ヒビキ

Slide 2

Slide 2 text

ヒビキ @hibiki_cube 株式会社ウエディングパーク +Creation本部 / 共創事業 - エンジニア元気いっぱい2年目今年の4月から現在のプロダクトにJoin #Apple #ベンチプレスは65kg #RAV4 #VRChat 自己紹介 2

Slide 3

Slide 3 text

ウエディングの各領域に特化した専門メディアを開発・運営海外・リゾートウエディングのクチコミ情報サイト結婚準備クチコミ情報サイト婚約・結婚指輪のクチコミ情報サイト結婚衣装選びのクチコミ情報サイトフォトウエディング・前撮りのクチコミ情報サイトウエディングパークから来ました 3

Slide 4

Slide 4 text

スライド公開のご案内 WeddingPark CREATORS @WeddingParkTECH 4

Slide 5

Slide 5 text

実況や質問、ご感想のツイートもお待ちしております！ 5 #phpcon #track3

Slide 6

Slide 6 text

ウエディングパークの理念・ビジョン 6

Slide 7

Slide 7 text

今日お伝えしたいこと 7

Slide 8

Slide 8 text

今日お伝えしたいこと共創によるものづくりでエンジニアがどう価値を発揮するか 8

Slide 9

Slide 9 text

そもそも共創とは 9

Slide 10

Slide 10 text

そもそも共創とは 10

Slide 11

Slide 11 text

ヒビキ @hibiki_cube 株式会社ウエディングパーク +Creation本部 / 共創事業 - エンジニア元気いっぱい2年目今年の4月から現在のプロダクトにJoin #Apple #筋トレ #RAV4 #VRChat 自己紹介 11

Slide 12

Slide 12 text

結婚・結婚式は、人生や人と人との関わりにおいて大切な節目。だからこそ、デザイン経営的視点が必要。式場・カップル、それらをとりまく“社会の視点”から、全社員がつねに問い続けて、世の中にとって必要とされる結婚・結婚式のありかたを考え、カタチにしていこうとしています。デザイン思考デザイン経営社会のニーズを掴む「視点」社会のニーズから考える「発想」これらの思考法を事業運営に取り入れる共創で推進するデザイン経営 12

Slide 13

Slide 13 text

共創の具体例 13

Slide 14

Slide 14 text

共創の具体例 14

Slide 15

Slide 15 text

結婚式費用の透明化の必要性 15

Slide 16

Slide 16 text

業界課題を共に解決していく婚礼業界大手テイクアンドギヴ・ニーズ社 16

Slide 17

Slide 17 text

結婚式場が提供するデータをもとに費用シミュレーションができる 17

Slide 18

Slide 18 text

共創による価値創造の成果 18

Slide 19

Slide 19 text

今日お伝えしたいこと（改めて）共創によるものづくりでエンジニアがどう価値を発揮するか 19

Slide 20

Slide 20 text

共創によるものづくりでエンジニアがどう価値を発揮するかを、自分の経験から今日お伝えしたいこと（改めて） 20

Slide 21

Slide 21 text

いま携わっているプロジェクトについて 21

Slide 22

Slide 22 text

今携わっているプロジェクト mieruuparkに続く共創事業の次なる共創PJ 22

Slide 23

Slide 23 text

今携わっているプロジェクト共創での成果を出せた今だからこそ出来る新しい事 23

Slide 24

Slide 24 text

今携わっているプロジェクト 24 業界他社

Slide 25

Slide 25 text

プロジェクトのはじまり 25

Slide 26

Slide 26 text

プロジェクトのはじまり 2024年春 26

Slide 27

Slide 27 text

プロジェクトのはじまり新機能開発全力！🔥 27

Slide 28

Slide 28 text

プロジェクトのはじまり新機能開発全力！🔥 新しい共創PJの立ち上げ時期のエンジニアに抜擢 28

Slide 29

Slide 29 text

プロジェクトの状況業界の〇〇という課題にこうアプローチしたいというのは決まっていたが……… 29

Slide 30

Slide 30 text

業界の〇〇という課題にこうアプローチしたいプロジェクトの状況これから企画を生み出す仕様はもちろんまだ無い 30

Slide 31

Slide 31 text

プロジェクトに求められること 31

Slide 32

Slide 32 text

プロジェクトに求められること ● 共創パートナー企業での利用を想定 → プロトタイプだとしても一定のクオリティが求められる ● ある一定の時期までに開発完了→導入をする必要がある ● 少数精鋭のチームで成果を出し切る 32

Slide 33

Slide 33 text

新規の共創プロジェクトであるが故の難しさこれを叶えたい 33

Slide 34

Slide 34 text

新規の共創プロジェクトであるが故の難しさこれを叶えたいこの見せ方良さそう 34

Slide 35

Slide 35 text

新規の共創プロジェクトであるが故の難しさこれを叶えたいこの見せ方良さそうこのインサイトがあるはず 35

Slide 36

Slide 36 text

新規の共創プロジェクトであるが故の難しさこれを叶えたいこの見せ方良さそうこんな使い方ができた方が活用しやすいこのインサイトがあるはず 36

Slide 37

Slide 37 text

新規の共創プロジェクトであるが故の難しさこれを叶えたいこんな機能いいかもこの見せ方良さそうこんな使い方ができた方が活用しやすいこのインサイトがあるはず 37

Slide 38

Slide 38 text

新規の共創プロジェクトであるが故の難しさこれを叶えたいこんな機能いいかもこの見せ方良さそうこんな使い方ができた方が活用しやすいこの課題も一緒に解決できないかこのインサイトがあるはず 38

Slide 39

Slide 39 text

新規の共創プロジェクトであるが故の難しさこれを叶えたいこんな機能いいかもこの見せ方良さそうこんな使い方ができた方が活用しやすいこの課題も一緒に解決できないかこのインサイトがあるはず「じゃあこれでやってみましょう」となるまでには時間を要する 39

Slide 40

Slide 40 text

新規の共創プロジェクトであるが故の難しさこれを叶えたいこんな機能いいかもこの見せ方良さそうこんな使い方ができた方が活用しやすいこの課題も一緒に解決できないかこのインサイトがあるはず「じゃあこれでやってみましょう」となるまでには時間を要する ⇅ ある一定の時期までに開発・導入する 40

Slide 41

Slide 41 text

エンジニアとしての想い簡単では無い状況の中でも着実に成果を出すために、技術で解決策を提示できるエンジニアでありたい 41

Slide 42

Slide 42 text

考えたエンジニアとして出すべき価値企画が決まったら最速でカタチにできるように今のうちから準備をしておこう！ 42

Slide 43

Slide 43 text

実際にやったこと 43

Slide 44

Slide 44 text

企画確定前に行った取り組み仕様変更に強くする工夫 × 2つ人的リソースを無駄なく使う工夫 × 1つ 44

Slide 45

Slide 45 text

企画確定前に行った取り組み仕様変更に強くする工夫 × 2つ人的リソースを無駄なく使う工夫 × 1つ 45

Slide 46

Slide 46 text

仕様変更に強くする新しい開発フローの提案・トライアル 46

Slide 47

Slide 47 text

新しい開発フローの提案・トライアル ● 具体的な機能などはこれから決まっていく ● 双方の希望やアイデアもたくさんある ● 実際に触ってみてはじめて気付くことも多い ● → 一度決まったように思えたことでも変化しやすい 47

Slide 48

Slide 48 text

新しい開発フローの提案・トライアル ● 具体的な機能などはこれから決まっていく ● 双方の希望やアイデアもたくさんある ● 実際に触ってみてはじめて気付くことも多い ● → 一度決まったように思えたことでも変化しやすい ○ むしろ、変えやすいことが事業にとって大きな力になる 48

Slide 49

Slide 49 text

弊社の他プロダクトはウォーターフォール型の開発ウォーターフォール 49 ● 管理はしやすいが、仕様変更には弱い ● スタートからゴールまで比較的時間がかかる ● 作るものの詳細が確定している必要がある

Slide 50

Slide 50 text

新しい開発フローの提案・トライアルプロトアジャイル 50 このプロジェクトのために新しくオリジナルで考案

Slide 51

Slide 51 text

新しい開発フローの提案・トライアルプロトアジャイルウォーターフォール 51

Slide 52

Slide 52 text

新しい開発フローの提案・トライアルプロトアジャイルウォーターフォール 52

Slide 53

Slide 53 text

新しい開発フローの提案・トライアルプロトアジャイル ● なるべく細かく、小さく早く作っていく → 変えやすい ● 動くものがあり、チームがそれに触れる機会も増える ● まず作ってみて、確かめて、それを仕様に還元する 53

Slide 54

Slide 54 text

プロトアジャイルのよかったところ ● 新しい開発フローではありつつも、スムーズに導入できた ● 小さくても動くものがすぐ出来ることで、アイデアに繋がった 54

Slide 55

Slide 55 text

プロトアジャイルのその後 ● 企画の根本が大きく変わったりすると対応しきれない部分も ● 本格的な開発のフェーズでは時間の都合もありウォーターフォール開発に近いやり方をとった ● 不確かなものを作っていくための工夫として今後のナレッジに 55

Slide 56

Slide 56 text

仕様変更に強くするインフラ構成の検討 56

Slide 57

Slide 57 text

既存プロダクトとは異なるインフラ構成の検討 ● 既存プロダクトではEC2やECS Fargateを利用 ● 実績はある反面、構成の検討や準備・運用の工数が懸念 ● 投資フェーズではなるべくコストは抑えたい 57

Slide 58

Slide 58 text

Amplifyを採用する挑戦 ● フロントエンドのインタラクション重視の初期検証にマッチ ● 環境の構築から、デプロイ・運用まで手軽にできるメリット ● 圧倒的なコストパフォーマンスの高さ AWS Amplify 58

Slide 59

Slide 59 text

ブランチ環境機能A 確認用環境機能AのFB修正確認用環境機能B 確認用環境機能Cの途中経過確認用環境 ……… Amplifyの特徴の1つ 59

Slide 60

Slide 60 text

Amplifyの採用結果 ● 企画検討中の期間を使ってインフラとしてどうか検証 ● ブランチ毎の環境がある恩恵が想像以上にあった ○ コードレビューの際にレビュワーが手軽に動作を見れる ○ チーム内で変更前後の把握や比較がしやすい ○ 頻繁に変更がある中でも、共創パートナーへスムーズに共有が行えた 60

Slide 61

Slide 61 text

企画確定前に行った取り組み仕様変更に強くする工夫 × 2つ人的リソースを無駄なく使う工夫 × 1つ 61

Slide 62

Slide 62 text

人的リソースを無駄なく使うための技術選定 62

Slide 63

Slide 63 text

フレームワークの選定 ● 最低限のデザイナー, エンジニア。少しも無駄にしたくない ● それぞれの担当範囲をできるだけ広げておきたい ○ 兼務の都合もあり、全員ずっと時間を取れるとは限らないエンジニアデザイナーエンジニアデザイナー 63

Slide 64

Slide 64 text

フレームワークの選定基準 ● 小さく早く開発できるもの ○ 必要なものが揃っている ○ より少ないコードでシンプルに記述できる ● 追加の学習コストが少ない → 既存の知識を活用できるもの ● デザイナー, エンジニアどちらでも触れる部分を増やせるもの 64

Slide 65

Slide 65 text

選ばれたのはSvelteでした ● 設定した基準をどれも高いレベルで実現できる ● 新しいものを作るタイミングだからこそ技術挑戦のチャンス 65

Slide 66

Slide 66 text

既存の知識を活用できる @if($user->isLoggedIn)

{{ $user->name }}さん、こんにちは

{{ $todo }}

@else

ログインしてください

ログイン @endif {#if user.isLoggedIn}

{user.name}さん、こんにちは

{todo}

{:else}

ログインしてください

ログイン {/if} 66

Slide 67

Slide 67 text

選ばれたのはSvelteでした let count = $state(2); count--}>-

{count}

count++}>+ p { color: red; } ● 必要なものが揃っている ○ 必要十分な状態管理 ○ Scoped Style ○ SSR / SPA / ISR ○ アニメーション 67

Slide 68

Slide 68 text

Svelteの採用結果 ● ハンズオンの場を用意するなど、丁寧に導入した ● 目指していたプロダクト導入時期までに無事に開発完了 ● デザイナーとエンジニアがタスク状況に応じて適宜互いのタスクを巻き取りあうのがやりやすかった 68

Slide 69

Slide 69 text

最後に：共創を加速する中でのエンジニアの価値発揮 69

Slide 70

Slide 70 text

共創を加速する中でのエンジニアの価値発揮 ● 共創 & 新規だからこそ、変化のしやすさが価値になる気づき ○ その土台を技術挑戦を通して提供し、価値を発揮できた ● 制約がある中でも、持てる力を最大限発揮できる環境を作れた ○ mieruuparkよりもさらに短期間で初期開発を完了できた ● 結果として、実際に使った方からもいい反応を得られている 70

Slide 71

Slide 71 text

採用情報 “クリエイターがデザイン思考×具現化力を武器に事業成長をリードする” 技術とデザインのウエディングパークを一緒に創りませんか？テックブログ 71