🦔

2つ目の個人開発でいろいろ学んだ

に公開
Next.js
TypeScript
Cloudflare
Google Cloud
Claude Code
idea

はじめに

個人開発してみました。

AIで絵コンテを作成できるサービス「CineFlow Pro」です。

hero

https://cineflowpro.nekoallergy.org/

詰めきれていないところもあってお恥ずかしいのですが、よければ見てみてください。

本記事では、本サービスを開発した上で気づいたことをまとめます。自分のメモも兼ねています。

世界中の誰かの助けになれば幸いです。

アプリの主な機能

MV制作を支援する絵コンテ制作Webアプリケーションとして、以下の機能を用意しました。

認証システム

  • Firebase Authenticationによるメール/パスワード認証
  • ユーザー登録・ログイン・ログアウト機能
signup login logout
signup login logout

プロジェクト管理

  • プロジェクトの新規作成・編集・削除
  • プロジェクト設定（タイトル、概要、雰囲気）
projects list projects new project setting
projects_list projects_new projects_setting

絵コンテ編集機能

  • カット（シーン）の作成・編集・削除
  • ドラッグ&ドロップによるカット順序変更
  • カットタイトル、時間、内容の詳細編集
  • 編集モード/閲覧モードの切り替え
  • 画像のズーム表示機能
view edit
projects_details projects_details_edit

AI画像生成（Gemini AI統合）

  • Gemini 2.5 Flash Preview APIによる画像生成
  • 簡易プロンプト入力での即座の生成
  • 詳細な画像生成モード（参考画像アップロード対応）
  • 雰囲気（mood）に基づくスタイル適用
  • 既存画像の編集・改善（チャット履歴を活用）
AI画像生成 AI画像生成
ai_generation ai_generation_2

マイページ機能

  • ユーザー情報の表示・編集
  • 利用統計の表示
mypage edit_profile
mypage editprofile

UI/UX

  • shadcn/uiによる統一されたデザインシステム
  • TailwindCSS 4によるスタイリング
  • Material Iconsによるアイコン
  • レスポンシブデザイン対応（モバイル・タブレット・PC）
  • Sonnerによるユーザーフレンドリーな通知システム

サポート・ドキュメント

  • 詳細な使い方ガイド
  • お問い合わせ機能
  • よくある質問（FAQ）
  • プライバシーポリシー・利用規約
  • 特定商取引法に基づく表記

プラン構成

画像生成50枚までは無料プランでできます。
有料のプラン構成は、仮のものを入れています。要望があれば実装するつもりです。

prices

  • フリープラン（無料）- プロジェクト管理、月間50枚の絵コンテ作成、基本的な機能
  • プロプラン（月額2,980）- 要望があれば実装
  • エンタープライズ（要相談）- 要望があれば実装

技術スタックとか

技術スタック

  • FW: Next.js 15.5.3 / TypeScript
  • スタイル: Tailwind CSS / Shadcn/ui / Shadcn.io / Material icon
  • 認証: Firebase Auth
  • データ: Cloud Firestore / Cloud Storage
  • API: Google Gemini API
  • デプロイ: Google Cloud Run
  • CDN/DNS: Cloudflare
  • 決済: Stripe（実装予定）

その他

  • エディタ：vscode
  • コード生成：Claude Code Pro

各技術について感じたこと

使った技術についての使いごごちなど、初心者なりに感じたことを書き殴っていきます。技術的に事実じゃない箇所があれば教えてください。

▫️ Nextjs
安定。ほぼ一択。

▫️ Tailwindcss / Shadcn/ui / Shadcn.io / Material Icon
Tailwindcssは安定。細かい修正がしやすく、シンプルで好き。また、コンポーネントライブラリはshadcn/uiがデザイン的にドストライクで、全てのコンポーネントにおいてほぼそのまま使用した。

▫️ Cloud Firestore / Cloud Storage
文句なし。前回の反省も踏まえて、最初からfirestoreを使用した。

▫️ Google Gemini API
絵コンテ画像生成AIとして使用。プロンプトと併せて参考画像や前回生成画像を投げる処理などで手こずる。生成したいテーマに合うように、「スタイル」と「雰囲気」を設定できるように工夫。ユーザごとにクレジットをもうけ、50回の回数制限を適用。

▫️ Cloud Run
引き続き使用。全てCLIから操作してデプロイできた。Good。

▫️ Cloudflare
ドメイン購入/DNS/CDNで使用。デプロイ先もCloudflare Workersを使おうかと調べたが、Pros/Cons考えて今回は未使用。

以上です。Xでもこれらの発信してます。よければフォローしてください！

https://x.com/nekoallergy22

感じたこととか気づき

claude codeについて

  • バカになる問題は前回のアプデで解決したように見える。sonnet 4.5の威力なのかも。
  • 初めてWeeklyリミットを感じた。「Approaching weekly limit」の表示が出て、Claudeのサイトで見たら75%になってた。70%をこえるとリミットの表示が出るのか？

git戦略

  • 前回と違って簡素にした。
  • 前回は、実装が完了したら、git status/diff/checkout/add/commit/push/pr/mergeしてmainと統合する作業を、claudeにおまかせしてた。
  • でも個人開発で厳密なブランチ管理やマージが必要かを考え、コスパ悪いなと思ってやめた。ちなみに、catnoseさんのポストをみてより一層吹っ切れた。

マーケ

  • これから実施。やらないかも。
  • 考えられる案は、個人のクリエイターにDM/映像制作系のメディアにアプローチ、とか？

その他

  • 前回に引き続き、開発進捗をスクラップに書き残し、それを元にこの記事を作成した。Zennで当初から想定されている理想的な使い方ができたと思う。
  • サブスクリプションの問い合わせを押下したら、コンタクトページに遷移します。投票ボタンと開発リクエストフォームを配置し、好評であれば有料機能を作るような
問い合わせページと投票ボタン
contact

さいごに

世界中の誰かの助けになれば幸いです。

https://cineflowpro.nekoallergy.org

https://x.com/nekoallergy22

Discussion