AIコーディングで画像生成アプリを作る方法

TL;DR

画像生成Webアプリは、Next.jsで画面とサーバー処理を構築し、Supabaseで認証、データベース、画像保存をまとめ、Stripeと画像生成APIを連携すれば開発できる。AIコーディングによりMVPは2、3週間で形になったが、品質調整やバグ修正を含む公開までは約1カ月半を要した。

Transcript

はい、どうもしです。え、昨日ですね、 新しくアプリケーションサムネAIって いうものを私リリースしましたので、ま、 今回そちらの紹介とどういった技術 スタック、技術構成で作ったのかと、AI コーディングどんな感じでやっていったの か、え、そこら辺についてお話しできたら なと思います。ま、このチャンネル見て くださってる方はですね、ま、何かしら AIでバイブコーディングで、え、個人 開発とかしてる方いらっしゃると思います ので、ま、マネタイズの部分どうやってる のかとかですね、え、ま、そこら辺知り たいという方はですね、最後まで見て いただけたらなと思います。え、それでは 早速サムネ合の紹介をしていきます。はい 。っていう感じで、これがサムネAIの ランディングページになります。ま、 YouT... Read More

Key Insights

• サムネAIは、入力したタイトルやキーワードを基に、画像編集ソフトを操作せずテンプレート形式のサムネイルを生成できるWebサービスである。
• 生成画像は1280×720で出力され、YouTubeのサムネイルだけでなく、noteの記事画像や個人開発サービスのOGP画像にも利用できる。
• 料金設計はクレジット制であり、新規登録時に3クレジットを付与し、画像を1回生成するたびに1クレジットを消費する仕組みである。
• アプリ構成はNext.jsを画面とサーバーの両方に使い、APIを広く設けず、サーバーアクションとデータアクセス層で処理をまとめている。
• Supabaseはデータベース、認証、画像ストレージを一体で提供し、MCPサーバー経由でテーブルやRLSポリシーなどの作業もAIへ依頼できる。
• 画像生成にはGPT Image 1を使用し、高品質設定では話者の試算で1画像当たり約37円かかるため、無料クレジットと販売価格の調整が必要になる。
• 開発期間はMVPまで2、3週間、公開品質まで約1カ月半であり、話者は最後の微修正やバグ修正に開発時間の多くを費やしたと述べている。
• AIコーディングはCursorからClaude Codeへ段階的に移行でき、既存コードの読み込み、機能追加、UI修正、ビルドエラー対応にも利用された。
• 🎬 このチャンネルの他の動画:
  • AI時代にエンジニアが独立して稼ぐ方法
  • 信頼できるWeb開発会社を選ぶ3つの基準とは？
  • AIコーディングの精度を高める方法とは？
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: AIコーディングで画像生成アプリを作る方法は？

Next.jsで画面とサーバー処理を作り、Supabaseで認証、データベース、画像保存を統合し、Stripeで決済、GPT Image 1で画像生成を実装する方法が紹介されている。CursorでMVPを構築した後、Claude Codeを既存プロジェクトへ導入し、追加機能や修正、公開時のエラー対応を進めている。

Q: サムネイル生成アプリにはどのような機能が必要ですか？

主要機能は、テンプレート選択、タイトルやキーワードの入力、素材のアップロード、画像生成、ダウンロード、共有、生成履歴の確認である。紹介されたサービスにはGoogle登録、クレジット管理、月額と単発の購入、プラン管理、メールで受け取るフィードバック機能も実装されている。

Q: Next.jsを個人開発で使う利点は何ですか？

話者が挙げた利点は、ディレクトリ構成をそのままルーティングに使えることと、サーバー側でデータ取得や更新を処理できることである。サーバーアクションをフォームに組み合わせれば、クライアント側からAPIを呼ぶ構成を減らせるほか、ストリーミングによる利用体験の改善も図れるとしている。

Q: Next.jsとSupabaseを接続する方法は？

Supabase JSとSupabase SSRのモジュールを使い、実行場所に応じてクライアントを分ける。クライアントコンポーネントではブラウザ用クライアント、サーバー側ではサーバー用クライアントを作成する。話者は、この使い分けをCursorやClaude Codeのルールへ記述し、生成コードにも守らせている。

Q: Supabaseを認証や画像保存にも使う理由は何ですか？

データベースだけでなく、認証とストレージも同じサービスで扱えるため、個人開発の構成をまとめやすいからである。話者はRLSポリシーの設定を重視してSupabase認証を採用し、MCPサーバーをCursorやClaude Codeへ接続することで、テーブル、RLS、エッジファンクションの作業も依頼できると説明している。

Q: 画像ストレージの無料枠が不足したらどうしますか？

紹介された選択肢は、Supabaseを月額25ドルのプロプランへ変更してストレージを50GBに拡張するか、画像保存先をCloudflare R2へ切り替えることである。話者が確認した範囲ではSupabaseの無料枠は1GBで、利用量は0.23GBに達しており、R2は無料枠で毎月10GB使えるとしている。

Q: 画像生成アプリの料金はどのように設計しますか？

画像生成原価を基に、無料配布するクレジット数と有料プランの価格を調整する。紹介例では、高品質な画像生成が1回約37円で、新規登録者へ3クレジットを付与するため、1人当たり約90円から100円分を無料提供する計算になる。赤字が続く場合は、付与数を減らすか販売価格を上げる案が示されている。

Q: CursorからClaude Codeへ途中で移行できますか？

既存プロジェクトの途中からでも移行できると説明されている。Claude Codeの初期化コマンドでコードベースを読み込み、CLAUDE.mdを出力させることで、既存の構成を踏まえた作業を依頼できる。実例では、フィードバックフォームの追加、細かな挙動の修正、ビルドやデプロイ時のエラー解決に使われた。

Q: AIコーディングだけでアプリを短期間に公開できますか？

MVPは短期間で作れても、公開品質への仕上げには追加時間が必要というのが話者の結論である。実例では最低限動く機能が2、3週間で完成した一方、細かな修正やバグ対応を重ね、全体では約1カ月半かかった。話者の体感では最初の約80％は高速だが、残りの20％に多くの時間を要する。

Q: 公開したWebアプリの利用状況を確認する方法は？

Google AnalyticsとGoogle Search Consoleを登録し、訪問者数や検索クエリを確認する方法が紹介されている。Search ConsoleはGoogleへのインデックス登録にも使い、「AIサムネ」など、どの検索語から流入したかを把握できる。Vercelへ課金している場合は、Vercel Analyticsを追加する選択肢も示されている。

Summary & Key Takeaways

• 開発した「サムネAI」は、タイトルやキーワード、必要に応じてロゴなどの素材を入力し、テンプレートに沿った画像を生成するWebサービスである。出力サイズはYouTube向けの1280×720で、画像のダウンロード、Xへの共有、生成履歴の確認に対応する。新規登録時には3クレジットが付与され、1回の生成で1クレジットを消費する。

• アプリの画面とサーバー処理にはNext.jsを採用し、データ取得や更新はサーバーコンポーネント、サーバーアクション、データアクセス層に集約した。Supabaseはデータベース、認証、画像ストレージに利用し、接続にはSupabase JSとSupabase SSRを使用する。決済はStripe、画像生成はGPT Image 1、公開はVercelが担う構成である。

• 開発初期はCursorとClaude 4を使い、2、3週間で最低限動作するMVPを構築した。その後Claude Codeを既存プロジェクトへ導入し、UIの追加、細かな修正、ビルドやデプロイ時のエラー対応にも利用した。話者の体感では最初の約80％は高速に進む一方、残りの品質調整やバグ修正に多くの時間がかかり、完成まで約1カ月半となった。