小説おすすめアプリの「リーディア」を開発しました【はじめての個人開発】
はじめに
こんにちは、もっちーです。
はじめての個人開発としてNext.jsを使って小説のおすすめアプリを作りました🎉
その開発記録などをメモとして残しておこうと思います！
開発の背景
なぜ個人開発を始めたか
自分はWebマーケティング会社でエンジニアとして働いています。
おもな業務について
- Web解析ツールの開発・保守
- ユーザー行動データの分析
- WordPressプラグインと自社CMSの開発
会社の業務では既存システムの保守がメインなので、新しい技術に触れる機会が限られていました。
そろそろ30歳になるということもあり、自分のスキルがそこまで高くないことに不安を感じるようになったり・・。
業務でCakePHPしか使ったことないエンジニアが個人開発でNext.js（SSRメイン）を使ってみた感想
そこで業務では使ったことのない技術（TypeScriptやNext.jsなど）で個人開発に挑戦することにしました。
小説のおすすめアプリを作った理由
「リーディア」を開発した最大の理由は、自分が小説を読むことが大好きだからです。
Amazonなどで本を購入するときに、レビュー評価と自分の感想が異なることが多くてモヤモヤした気持ちになることがありました。
たとえば
- 評価が高いから読んでみたけど自分は面白くないと感じた
- かなり面白い作品だったのに投稿されているレビューが低かった
このような感じですね。
他人のレビューに影響を受けないようにして、自分に合った小説を見つけられるシステムがあれば便利だと考えたことがリーディアを開発したきっかけになります。
リーディアの詳細について
細かい機能については別記事にまとめようと考えています（まだ細かいデザインを調整中なので・・）
検索画面
小説の詳細
ちなみに「リーディア」という名前は「Read（読む）」と「Idea（アイデア）」を組み合わせたものです。
自分の好みにぴったりな小説と出会ってほしいいう思いを込めた名前になっていて、シンプルな呼びやすさもサービス名に向いている思っています。
（Claudeに提案してもらったアイデアですが・・笑）
技術スタック
全体の構成図
ざっくりとした構成図（はじめて作りました）
はじめての個人開発ということもあり、まずは動かせる段階まで持っていくことが大きな目標でした。
できるだけシンプルな構成にしたいと思い、以下の技術を採用することにしました。
フロントエンド・バックエンド
- Next.js
- TypeScript
- Auth.js（認証）
- Prisma（ORM）
- shadcn/ui（UIコンポーネント）
- Tailwind CSS（スタイリング）
インフラ（Google Cloud）
- Cloud Run（アプリケーション実行）
- Cloud Run Jobs（バッチ処理）
- Cloud SQL（データベース）
- Cloud Storage（ファイルストレージ）
- Firebase Hosting（CDN）
CDNには無料枠の多いFastlyを検討していましたが、できるだけインフラをGoogleに寄せたかったので断念。
Fastlyを使わなかった理由として「サブドメインを使わずに公開したかった」ということも挙げられます（その方がシンプルで見やすそう・・という薄い理由です）
本当はCDNの設定もGoogle Cloudで完結させたかったのですが、コスト面が厳しかったり自分の技術力が足りなかったりしたので、今回はポチポチするだけで設定できるFirebase Hostingにお世話になることに。
その他のツール
- Docker（開発環境）
- GitHub Actions（CI/CD）
- 楽天Books API, Amazon PA-API（書籍データ取得）
- Gemini, ChatGPT, Claude（データ生成・分類）
開発する上で工夫したこと
1. 継続してコードを書く
9月から毎日コードを書く習慣をつけることができました。
おかげでGitHubの草もたくさん生えてきました。
自分のプロダクトを作れたことに加えて、やりたいことを少しずつ継続する習慣もついたので、自己肯定感アップにも繋がりました。
2. AIツールを活用する
小説の分類データを作成するために、複数の生成AIを活用しました。
使用している生成AIは以下の3つになります。
- Gemini（1.5Pro）
- ChatGPT（GPT-4o）
- Claude（3.5 Sonnet）
1種類だけではデータに偏りが出てしまうので念のため3種類の生成AIを使っていますが、思った以上に初期費用がかかってしまい金欠です💸（すべて合わせて10,000円くらい・・）
もしリーディアで収益化することに成功したら、他の生成AIも使ってみようかな〜と考えています。
3. できるだけシンプルな構成で
もともとはフロントエンドとバックエンドを分離する構成でしたが、できるだけコードが複雑になることを避けたかったので、すべてNext.jsで実装する形に決定しました。
ちなみに：最初に考えていた構成について
個人開発を始めた段階ではフロントとバックを分けて
- フロント：静的ファイルでexportしたNext.js（Cloud Storage）
- バック ：何かしらのバックエンドフレームワーク（Cloud Run）
という構成を考えていましたが、はじめての個人開発なので出来るだけシンプルにした方が良いと感じて、すべてNext.jsだけで実装することに決めました。
Cloud Storageはデフォルトでキャッシュが効くので、↑の構成なら実装がラクかな〜と思ったり。
でも個人開発レベルだったらフロントとバックを分けなくても良いかもしれないですね（はじめての個人開発だし）
最終的にSupabaseからCloud SQLに変更しています
4. いずれは収益化したい
現在のランニングコストは2,000円/月くらいで、ほぼCloud SQLの費用です。
外部の書籍販売サイトへのアフィリエイトリンクを設置しているので、リーディア経由で本を買ってもらえると紹介料が発生するようになっています。
具体的な収益プラン
- 本の単価：600-800円
- アフィリエイト報酬率：5%
- 購入数：2~3冊/月（1ユーザー）
と考えた場合、アクティブユーザーが20~30人いれば赤字にならずに済みそうです（もちろんユーザーが増えればCloud Runの料金も増えてきますが・・）
マーケティングを頑張れば現実的に目指せそうなラインだと思うので、これからは開発以外の部分にも力を入れていきます。
最後に
ここまで読んでいただきありがとうございます！
今後リーディアに実装したい機能をまとめておきます。
- UI/UXの改善
- テストコードの導入
- レビューデータの収集・分析
- ユーザー行動分析（ABテストなど）
- 小説の魅力を効果的に伝える機能の追加
- 検索アルゴリズムの改善（機械学習の導入）
じっくり考えてみたところ「リリースしてからが開発のスタート」だと実感しました。
やりたいことがたくさん思い浮かんできます（笑）
自分はWebマーケティング会社のエンジニアとして働いているので、Web開発だけでなくデータ分析・データ可視化などをすることが時々あります。
今後のキャリアでは「データ系の技術に特化したエンジニアになりたい」と考えているため、そのスキルアップにも繋げられるような機能を開発していきたいです。
Discussion