フロントエンドエンジニアが個人開発でリリースするまで

こんにちは。フロントエンドエンジニアのKです。
普段はNuxt.jsを中心に開発しています。
今回は「WEB BOOKMARK」というブックマークアプリを作ったのでそのお話をしようと思います。

WEB BOOKMARKとは

「WEB BOOKAMRK」URLを保存するだけ。AIが整理して、見える化する。

この後の内容は主に技術面の話になるので軽く開発したプロダクト自体の説明を入れておきます。
その名の通りWEBのブックマークです。
今っていろんなSNSでいろんな魅力的なコンテンツが溢れていますよね。その中で「あ、この紹介されてる飲食店良さそう！お気に入りしとこー」と保存するのですが、後々「あれってTiktokやっけ？Youtube Shortsやっけ？インスタのリールやっけ？」みたいなことないですか？
そこでサービスごとのお気に入り機能ではなく、自由に整理できるブックマークが欲しかった感じで作りました。
あと、それっぽいことを言うと以前にドラマかアニメかを見た時に「本棚はその人の性格を表す」みたいなことを聞いた記憶がうっすらと残っていて「この情報があふれる時代に、ブックマークこそが個性を表すのでは？」みたいな感じです。

なぜ個人開発をしたのか？

技術的な面

元々仕事とは別にプロダクトを作るのが好きで今まで色々作っていました。
ただ以前まではDBの処理や諸々を考えたら、一人で何かサービスをリリースするにはバックエンドの知識がどうしても必要であまり得意でないながらもPHP（LaravelやSymfony）を利用して開発していました。ただ時代の流れに伴ってBaasやらなんやらが出てきて自分の好きなフロントエンドに集中して開発ができる環境が整ってきたのを感じて（遅い）、バックエンドはあまり考えずに開発してみようと思い今回のサービス開発に着手しました。
あと、AIがアツい。AIを使って何か作りたい。

技術スタック & アーキテクチャ

フロントエンド：Nuxt3
バックエンド：Directus（REST API）
AI活用（API）：Gemini（リスト提案、Webページ解析による日時 & 場所抽出）
デプロイ：Vercel
その他：Google Maps API

なぜこの技術を選んだのか？

Nuxt3：普段から利用しておりコンポーネント設計や状態管理の書き方に慣れていました。
Directus：SQLや複雑なバックエンド実装をあまり書きたくないという思いから、ヘッドレスCMSを検討しました。その中でもDirectus単なるCMSにとどまらず「管理画面からスキーマを視覚的に設計できる」「REST API が自動生成される」「認証機能やファイルアップロード機能が標準で備わっている」などの点からバックエンド開発の工数を大幅に削減できると判断しました。
Google Maps API：地図を描画したり施設を取得したりするのに利用しています。
Gemini AI：このモデルが良い、と言うよりも上記のGoogleMapsAPIと合わせてコストの管理をGCPにまとめたかった。多分もっと良いAIモデルもあると思うし最近だとDeepseekを使った方がコスパは良いと正直思う。この辺は今後も検討していきたい。

バックエンドに強くないフロントエンドエンジニアが個人開発する方法

Directusを使ってDB管理を楽に

DirectusはSQLを直接書かなくても、管理画面でテーブルやカラムを視覚的に設計できるため、DB設計のハードルが大幅に下がりました。
例えば「ブックマーク」と「リスト」の関係も、管理画面上で Many-to-Manyのリレーションとして簡単に設定できます。また、REST API が自動生成されるので、フロントエンド側からは単純な fetch 呼び出しでデータの CRUD 操作が行えました。
特に個人開発はしっかりと設計してから着手するようなものではなく開発していく中でアイデアが広がっていくので、ある程度画面をポチポチしているだけで設計ができるのでフロントエンドエンジニア的には楽でした。もちろんnode.jsであればたとえばTypeORMなどでしっかりマイグレーション管理して設計するのも良いとは思いますがとりあえず「フロントエンドに集中したかった」と言うのが正直なところです。

インフラを極力意識しない構成

デプロイ環境はVercelを利用しています。ある程度は何も考えなくて良い。最高。

個人開発の難しかったこと

スコープ管理

個人開発はやりたい機能がどんどん増える問題があります。これはしょうがないです。
よく「MVP（最低限の価値を持つ製品）を意識してリリースしましょう」と言う人がいますが、なかなかそれが難しいですよね。
僕個人の意見だと、ある程度納得するまで作り込む方が良いかなとは思います。

UX設計

とりあえず「シンプル」を意識しました。
開発しているとあまり気づかないのですが、意外と初見のユーザーはそのサービスに訪れても「何をしたら良いのかわからない」ということが多いです。
なので特にユーザーの初手はできるだけシンプルに。「URLを入れるだけ」という動作に拘りました。

開発のモチベーション維持

個人開発は途中で挫折しがちです。
自分なりのモチベーション管理法（SNS発信・公開スケジュールを作る など）を見つけるのが良いと思います。

これからの展望

今後追加したい機能

とりあえず以下のようなことをふわっと考えています。
おすすめブックマークの提案：「AIが他のユーザーの傾向からおすすめを出す」
ランキング機能：「みんながブックマークしている人気リストを可視化」

まとめ & 宣伝

個人開発は楽しいです。
普段会社などの組織で何か開発をしていると、自分は納得していない仕様やUIなども甘んじて受け入れて実装しなければいけないことが多いと思います。
そのフラストレーションを開放しましょう。
フロントエンドエンジニアでバックエンドやインフラが苦手でも、ツールを組み合わせれば一人でWebサービスをリリースできます。