前回は、開発コスト可視化SaaSのMVPをどう切るか、要件定義の整理を進めました。
特に、
- 複数企業のサービスを横断して管理できること
- プロジェクト単位でコスト感を見えるようにすること
- 最初からチーム機能やエンタープライズ機能を広げすぎないこと
を意識して、最初に作る価値を絞っていました。
2日目の今回は、その要件をもう少し実装可能な形に落とすために、技術選定と画面設計を進めました。
🛠 今回やったこと
今回進めたのは大きく2つです。
- 技術スタックを決める
- Figmaで画面設計を進める
1日目は「何を作るか」を整理する回でしたが、2日目は「どう作るか」を考える回になりました。
💻 技術選定
今回の構成は、以下のようにしました。
- フロントエンド: Next.js
- バックエンド: FastAPI
- データベース: PostgreSQL
- 認証: JWT
✅ この構成にした理由
一番大きい理由は、シンプルで使い慣れているからです。
個人開発のMVPでは、技術選定に時間をかけすぎるよりも、まず手を動かして形にしていくことのほうが大事だと思っています。
今回は「何が一番モダンか」よりも、
- 実装にすぐ入れること
- 迷いが少ないこと
- 構成がシンプルであること
- 後から拡張しやすいこと
を重視しました。
Next.js
フロントエンドは Next.js にしました。
React ベースで慣れているので、画面実装に入りやすいのが大きいです。
個人開発でも情報が多く、困ったときに調べやすいのも助かります。
今後、画面数が増えたりUIを少しずつ改善していくことを考えても、進めやすい構成だと思っています。
FastAPI
バックエンドは FastAPI にしました。
大学の学部時代から慣れ親しんでいるバックエンドフレームワークで、扱いやすいのが理由です。
今回のように、まずはシンプルにAPIを組んで進めたい場面とも相性がいいと感じています。
PostgreSQL
データベースは PostgreSQL にしました。
プロジェクト、利用サービス、コスト情報のように、今回扱いたいデータは比較的構造がはっきりしています。
そのため、安定したリレーショナルデータベースである PostgreSQL は相性がよさそうだと考えました。
個人開発の段階から、ある程度本番も見据えた構成にしておきたい気持ちもあります。
JWT認証
認証は JWT を使う方針にしました。
最初から認証基盤を複雑にしすぎず、MVPとして必要な認証をシンプルに入れたいと考えたためです。
フロントエンドとバックエンドを分ける構成とも相性がよく、最初の段階では十分かなと思っています。
🎨 Figmaで画面設計も進めた
今回は技術選定と並行して、Figmaで画面設計も進めました。
現時点では、
- ログイン画面
- ダッシュボード画面
- アプリ追加の導線
- アプリケーションごとの詳細画面
あたりを考えています。
特に意識したのは、複雑にしすぎないことです。
このサービスは最終的にいろいろな情報を載せたくなると思うのですが、MVP段階ではまず
- どのアプリを管理しているのか
- どのサービスを使っているのか
- 月額コストがどのくらいか
がひと目で分かることを優先したいと考えました。
また、画面を作るときには Figma Community も参考にしながら進めました。
完全にゼロから考えるより、既存のUIや構成を見ながら整理できるのはかなり助かりました。
📝 2日目のまとめ
2日目は、MVPを実際に形にしていくための準備として、
- 技術スタックの決定
- Figmaでの画面設計
を進めました。
要件定義だけで終わらせず、技術や画面に少しずつ落としていくことで、プロダクトの輪郭もかなり見えやすくなってきた気がしています。
次は、この構成をもとに実際のフロント実装やAPI実装を進めながら、さらにMVPを形にしていこうと思います.