整えることから始めた開発までの道のり

整えることから始めた 開発までの道のり ⾦城 周市 ウェルスナビ株式会社 1

⾃⼰紹介 金城周市 （Shuichi Kinjo） ウェルスナビ株式会社 マーケティング開発チーム / フロントエンドエンジニア ウェルスナビでは ● 2024年8⽉⼊社 ● 新規事業向けの開発 ひとこと ● DEATH STRANDING 2が楽しみ 2

プロダクト紹介 全⾃動資産運⽤サービス ロボアドバイザー「WealthNavi（ウェルスナビ）」 ● 働く世代が安⼼して使える資産運⽤サービスを ⽬指し、シンプルでわかりやすいUX設計を追求 ● スマートフォンやPCで操作が完結 ● 1万円から運⽤可能 ● リバランス、税⾦の最適化まで資産運⽤の 全プロセスを⾃動化 ● 厳選したETFを通じて世界約50か国、1万2,000 銘柄以上に分散 ● 株式や債券、⾦、不動産にバランスよく投資 ● NISAも⾃動で利⽤できる ※2 © WealthNavi Inc. All Rights Reserved. ※1 一般社団法人日本投資顧問業協会「契約資産状況（最新版）（2024年9月末現在）『ラップ業 務』『投資一任業』」を基にネット専業業者を比較 ウエルスアドバイザー社調べ（2024年12月時点） ※2 ご利用にはお申し込みが必要です 3

これからのウェルスナビ 個人向け金融プラットフォームを目指す 資産運⽤からサービス領域を拡⼤してお客様をサポートできるよう、 個⼈向け⾦融プラットフォームを⽬指した取り組み（MAP構想）を継続しています。 ※画面はイメージです © WealthNavi Inc. All Rights Reserved. ※現時点では構想段階で未提供。 将来的に提供する可能性があるサービス領域 4

アジェンダ 1. プロジェクトキックオフ 2. 手元にある情報から開発できるまで落とし込む 3. まとめ 5 @2024 WealthNavi Inc.

1. プロジェクトキックオフ 2. 手元にある情報から開発できるまで落とし込む 3. まとめ 4. さいごに 6

プロジェクトキックオフ 新規プロジェクトにアサインされ、 気合を⼊れてキックオフミーティングに参加する私。 そして知った現状が 7

プロジェクトキックオフ スケジュールとワイヤーフレームと フロント側で持つ機能以外何もない それでも開発はスタートしないといけないという状況 8

プロジェクトキックオフ スケジュールとワイヤーフレームと フロント側で持つ機能以外何もない それでも開発はスタートしないといけないという状況 何をやればいいのかわからない🤯 9

1. プロジェクトキックオフ 2. 手元にある情報から開発できるまで落とし込む 3. まとめ 4. さいごに 10

⼿元にある情報から開発できるまで落とし込む 🐚 フロントエンド開発を始めるのに必要なのは ● 画⾯⼀覧（サイトマップ） ● フロントエンド開発のスケジュール ● 画⾯仕様書 ℹ ⼿元にある情報は ● ワイヤーフレーム ● プロジェクト全体のスケジュール ● フロントエンド側でもつ機能 11

⼿元にある情報から開発できるまで落とし込む ✅ 開発を始めるために以下のステップで進めていくことにした 1. 画⾯⼀覧を作る 2. ⼯数を割り出す 3. スケジュールを引く 4. 画⾯仕様書を作る 5. 開発スタート！ 12

⼿元にある情報から開発できるまで落とし込む 🗺 画⾯⼀覧の作成‧⼯数出し‧スケジュール作成 ● Figmaのワイヤーフレームをもとに画⾯を⼀覧化 ● 各画⾯ごとに⼯数を割り出し → ここでの精度は求めず、まずは⼯数出すことを⽬標に ● ⼯数を元にスケジュールを引く → 画⾯数が多く⻑期にわたるので機能別でフェーズ分け → 最初のフェーズは画⾯ごとの詳細スケジュールを引いてさらに具体化 13

⼿元にある情報から開発できるまで落とし込む 🗺 画⾯⼀覧の作成‧⼯数出し‧スケジュール作成 ● Figmaのワイヤーフレームをもとに画⾯を⼀覧化 ● 各画⾯ごとに⼯数を割り出し → ここでの精度は求めず、まずは⼯数出すことを⽬標に ● ⼯数を元にスケジュールを引く → 画⾯数が多く⻑期にわたるので機能別でフェーズ分け → 最初のフェーズは画⾯ごとの詳細スケジュールを引いてさらに具体化 💡開発までの道筋がうっすら⾒えてきた？！ 14

⼿元にある情報から開発できるまで落とし込む 📓 画⾯仕様書の作成 ● 作成時のモチベーションとして、最終的には数年後の誰かが画⾯の仕 様で迷わないことを⽬指す ● 仕様書の抜け漏れは許容 → 決まっていないことも多いので完璧を⽬指さずわかっている情報で進める ● 同じ画⾯の仕様書の作成者と実装者を分けることで知識の偏りを防ぐ 15

⼿元にある情報から開発できるまで落とし込む 📓 画⾯仕様書の作成 ● 作成時のモチベーションとして、最終的には数年後の誰かが画⾯の仕 様で迷わないことを⽬指す ● 仕様書の抜け漏れは許容 → 決まっていないことも多いので完璧を⽬指さずわかっている情報で進める ● 同じ画⾯の仕様書の作成者と実装者を分けることで知識の偏りを防ぐ 🙌 開発⼊れる！ 16

⼿元にある情報から開発できるまで落とし込む 😱 反省点 ● ⼯数⾒積もりが⽢くていきなりスケジュール破綻 → ● シンプルな画⾯だと思っていたら、実は複雑な機能を持っていた 育休明けのメンバーに初⽇からアクセル全開のスケジュールを引く → 🤖機械的にスケジュール引いてしまったことで⿁のようなスケジュールに 17

1. プロジェクトキックオフ 2. 手元にある情報から開発できるまで落とし込む 3. まとめ 18

まとめ スケジュールや⼯数‧仕様書は、 粗くても “ある” ことが⼤事 → いつまでに何があれば良いか把握しやすい → 必要なことを依頼しやすくなり結果としてプロジェクトが動く → 開発もスムーズに⼊れる 19

【重要な注意事項】 ● 本資料は、断定的判断を提供するものではなく、情報を提供することのみを⽬的としており、いか なる種類の商品も勧誘するものではありません。最終的な決定は、お客様⾃⾝で判断するものと し、当社はこれに⼀切関与せず、また、⼀切の責任を負いません。 ● 本資料には将来の出来事に関する予想が含まれている場合がありますが、それらは予想であり、ま た、本資料の内容の正確性、信頼性、完全性、適時性等を⼀切保証するものではありません。本資 料に基づいて被ったいかなる損害についても、当社は⼀切の責任を負いません。また、当社は、新 しい情報や将来の出来事その他の情報について、更新⼜は訂正する義務を負いません。 ● 本資料を利⽤することによりお客様に⽣じた直接的損害、間接的損害、派⽣的損害その他いかなる 損害についても、当社は⼀切の責任を負いません。 商号等：ウェルスナビ株式会社 金融商品取引業者 関東財務局長（金商） 第2884号 加入協会：日本証券業協会 一般社団法人日本投資顧問業協会 20

ご清聴ありがとうございました 21 @2024 WealthNavi Inc.

Appendix 1 定期的にWealthNaviの開発（技術‧組織）に関する情報を発信しています。 開発者ブログ ● 技術広報に関する お問い合わせ先 ● https://zenn.dev/p/wn_engineering ブックマーク追加や記事への「いいね」していただけると嬉しいです ウェルスナビ DevRelチーム（[email protected]） 22

• https://zenn.dev/p/wn_engineering

Appendix 2 ウェルスナビでは複数の開発系ポジションで採⽤を強化しています。 主な採⽤中職種 ● ● ● ● ● モバイル開発エンジニア エンジニアリングマネージャー バックエンド開発エンジニア QAエンジニア データエンジニア 採⽤情報詳細 ● 下記URL（QRコード）よりご確認ください。 https://recruit.wealthnavi.com/ 採⽤に関する お問い合わせ先 ● ● 「カジュアルに話を聞いてみたい」という温度感でも構いません。 ウェルスナビ採⽤チーム（[email protected]）までご連 絡お待ちしております。 23

• https://recruit.wealthnavi.com/