👏

Claude Code に全部賭けて個人開発(モバイル、ウェブ、拡張機能)を自動化した話 - 5万円吹っ飛んだ実録

に公開
3

Claude Code に全部賭けて個人開発(モバイル、ウェブ、拡張機能)を自動化した話 - 5 万円吹っ飛んだ実録

  • ベータテスト申込み 一緒にテストしませんか? (iOS と Andriod で各10名限定でβテスト公開しています!モバイルブックマークアプリ探している方是非是非!)
  • Product Hunt ← Product Hunt で一位目指します!応援よろしくお願いたします!

💸 まず衝撃の事実から...

全部で 5 万円くらい気づいたら吹っ飛んだよ!(Claude Code の従量課金で)

iOS, Android, Web, Chrome拡張機能, Go の全てをClaude Codeに90%くらい書かせました。
正直、最初は「Claude Code ってどのくらいコストかかるんだろう?」と軽い気持ちで始めたのですが、気づいたら請求額が 5 万円を超えていました。でも結論から言うと、この投資は完全にペイしました。従来なら数ヶ月かかるような個人開発を、わずか数週間で完成させることができました。
さらに、モンスターのキャラデザもChatGPTに作ってもらっています

Claude Code で、個人開発のモバイルアプリ、ウェブアプリ、ブラウザ拡張機能のコーディングを完全自動化した実録をお話しします。

🎯 作ったもの:LLMonster

LLMonster は、ブックマークでモンスターを育成するアプリです。

スマホでブックマークをSlackに貯めていたのですが、ほぼ9割がた忘れてしまい、二度と見ることはなかったです。また、履歴書を作成したり、動画編集・画像加工をPCで行っていたのですが、複雑な操作もスマホからできたら嬉しい! という思いから、LLMonsterにコンテンツを貯めていき、複雑なワークフローを代行してもらおう& というアプリが生まれました。

iOSデモ

https://www.youtube.com/watch?v=Iceq9KfoU6k

例えば:

  • ウェブサイト → 要約SNS 投稿文章を考える
  • 動画 URL → ショート動画の作成
  • 求人 → 職務経歴書の更新

こんな作業をスマホ一つで完結できるようにしました。

🏗️ システム全体像

技術スタック

  • iOS: Swift + SwiftUI + SwiftData, Liquid Glassに対応できるように
  • Android: Kotlin + Jetpack Compose, Material Design を最大限活かす
  • Web: SvelteKit + TypeScript, SvelteKit でHTMLに近い形式で
  • Chrome 拡張: SvelteKit + Manifest V3 Webの資産を活かす
  • Backend: Go + echo, クリーンアーキテクチャで
  • Infrastructure: AWS CDK + ECS Fargate, CDKでDBも全て管理

🎨 Claude Code 活用のコツ

まず何よりも、プロンプトです。
できるだけ詳細に書くことをおすすめします。
特に ディレクトリ構成パッケージ は指定 or 人間が作成してあげたほうが無難です。
Android では MVVM で、iOS では MVC で、Go ではクリーンアーキテクチャでという指示を出して具体的なディレクトリも先に作ってしまいました。
逆にディレクトリだけ作ってしまえば、あとはClaude Code に任せるだけです。

プロンプトの書き方

Claude Code で良いコードを生成するには、具体的で詳細な指示が重要です。

❌ 悪い例: 「iOS アプリを作って」
✅ 良い例: 「iOS 17.0+の SwiftUI アプリで、Share Extension を実装。他アプリから URL を受け取ってローカル DB (Swfit Data) に保存する機能を作って。ディレクトリ構成は、〜感じで、MVVMの原則にできる限り乗っ取って ultrathink

開発の進め方

  1. 骨格実装 → 基本構造を作る
  2. 機能実装 → ビジネスロジックを追加
  3. 最適化 → 細かい調整とバグ修正

📱 実際に作ったアプリたち

iOS アプリ (Swift 完全初心者からスタート!)

Claude Code が一番美しいデザインを作ってくれるのが iOS アプリでした。なぜなんでしょうね?

iOS ホーム画面

最初は、dynamicIsland や App Clip なども使っていたのですが、一旦機能を削って MVP を作ることに集中しました。

ホーム画面では、次のような項目を todo 形式で Claude Code に渡して作ってもらいました。

  1. ユーザーウェルカム項目
  2. ストックしたコンテンツの統計
  3. 最近のアクテビティ

特に iOS では、LiquidGlass を意識して、最先端のドキュメントを参考にしながら、デザインを作ってもらいました。

モンスター画面の画像

モンスター画面では、モンスターと会話できるページへの遷移を作ってもらっていたのですが、後からいったん削除しました。

モンスター詳細画面の画像

モンスター詳細画面の画像2

モンスター詳細画面では、ストックしたコンテンツをもとに育成されたモンスターの情報を表示します。
iOS アプリでは、モンスターの詳細画面を作成して、ストックしたコンテンツをもとに育成されたモンスターの情報を表示します。

ストック画面の画像

ストック画面では、全てのデバイスでストックしたコンテンツを一覧表示します。
リアルタイムに拾ってきています。

Android アプリ (Kotlin 人生初体験)

Kotlin 一度も書いたことない状態から、たった数日でプロダクション品質のアプリが完成!
とにかく、Material Design 3 に準拠して、Roomでローカルデータを管理してと頼んだ。

Android ホーム画面

  1. ユーザーウェルカム項目
  2. 最近ストックしたモンスターのヒーローセクション
  3. ストックしたコンテンツの統計
  4. 最近のアクテビティ

モンスター画面の画像

モンスター画面では、ストックしたコンテンツをもとに育成されたモンスターの情報を表示します。
Android よりも前に、iOS 側でモンスターとチャットする画面を作っていたのですが、コストの関係で今は削っています。

ストック画面の画像

ストック画面では、全てのデバイスでストックしたコンテンツを一覧表示します。
リアルタイムに拾ってきています。

ウェブアプリ + Chrome 拡張

SvelteKit で作ったウェブアプリと、同じコードベースで Chrome 拡張も実現。

デモ動画:https://youtu.be/nZm2iYRVexI

https://youtu.be/nZm2iYRVexI

バックエンド

Go 言語で API 作成。AWS のインフラ構築まで全部 Claude Code がやってくれました。
とにかく、バックエンドはアーキテクチャだけを述べ続けて、こんな感じ!で大体作ってくれます

📊 開発効率の衝撃的な結果

時間短縮率

フェーズ 従来 Claude Code 使用 短縮率
iOS 実装 120 時間 30 時間 75%短縮
Android 実装 140 時間 35 時間 75%短縮
Web/拡張機能 80 時間 20 時間 75%短縮
バックエンド API 100 時間 25 時間 75%短縮
インフラ構築 60 時間 15 時間 75%短縮
合計 500 時間 125 時間 75%短縮

コスト対効果

  • Claude Code 料金: ¥52,340 (3 ヶ月)
  • 削減工数: 375 時間
  • 時間単価換算: ¥1,875,000 相当
  • ROI: 3,585% (投資対効果 35.8 倍!)

🎊 結果発表!

✨ 最強の結果

  • 開発時間 75%短縮 (500 時間 →125 時間)
  • 未経験技術も習得可能 (Kotlin 初体験でも Android アプリ完成!)
  • 一人で 4 プラットフォーム対応 (iOS/Android/Web/拡張機能)
  • 圧倒的 ROI5 万円で 35.8 倍のリターン

📚 参考リンク

プロジェクト関連

最後に: この記事も一部を Claude Code で執筆しました!技術記事の執筆時間も大幅短縮できました 🚀

GitHubで編集を提案

Discussion

あいや - aiya000あいや - aiya000

「📊 開発効率の衝撃的な結果」の「従来」は、どうやって算出したんだろう?
SwiftとKotlinは初心者からスタートとのことなので、今までの経験から算出した⋯わけではないのかな?👀

ekusiadadusekusiadadus

そうです!ディレクトリ構成といくつかのファイルをClaude Codeに見てもらって時間を算出してもらいました💦