🐈
Claude Codeで画像SNSモバイルアプリをゼロからGAまで達成できるかChallengeしてみる
Claude Codeで画像SNSモバイルアプリをゼロからGAまで達成できるかChallengeしてみる
📈 開発環境
- Macbook pro M2proチップ搭載機
- Claude Code with Claude proプラン（年払課金）
- VSCode with Git Hub Copilot proプラン（社会人大学生の学割）
- Gemeini （社会人大学生の学割）
貧乏リーマンでチキン野郎なので極力お財布に優しめの構成でどこまでイケるのか挑戦してみようと思っています
🚀 なぜ画像SNSモバイルアプリをバイブコーディングするのか
InstagramやTikTokは素晴らしいプラットフォームです。
最近話題のClaude Codeで、どこまで似たような画像SNSアプリを作れるかChallengeしてみたいと思います
📱 画像SNSアプリ「Viewfold」（仮名）とは？
- コンセプト: 多様な視点を尊重し合う画像共有SNS
- 特徴: アルゴリズムに頼らない時系列フィード、クリエイティブツール内蔵
- 対象: アート・写真愛好家、多様性を重視するクリエイター
- 技術: Flutter + Firebase + Clean Architecture
🎯 達成したい目標
ViewfoldアプリをApp Store & Google Playでリリース（GA達成）
そのために、以下の8つのフェーズにわけてバイブコーディングしていきます：
| 週 | フェーズ | 内容 | 記事タイトル（予定） |
|---|---|---|---|
| 1 | 基盤構築 | プロジェクト構造・Clean Architecture | 「Clean Architectureの美学：企業レベルの基盤を30分で」 |
| 2 | 認証システム | ソーシャルログイン・プロフィール管理 | 「パスワードレス時代の認証設計：セキュリティと利便性の両立」 |
| 3 | 画像機能 | 撮影・編集・アップロード | 「画像処理の裏側：圧縮からAI処理まで」 |
| 4 | フィード | タイムライン・無限スクロール | 「アルゴリズムに頼らないフィード設計：時系列の美学」 |
| 5 | ソーシャル | プロフィール・フォロー機能 | 「健全なSNS設計：つながりの質を重視する仕組み」 |
| 6 | インフラ | CI/CD・マルチ環境デプロイ | 「本番運用の現実：監視・アラート・災害対策」 |
| 7 | セキュリティ | 法的対応・プライバシー保護 | 「個人情報保護法時代のアプリ設計：法的リスクゼロを目指す」 |
| 8 | 最終調整 | テスト・最適化・ストア申請 | 「GA達成！リリース直前の最終チェックリスト」 |
🔧 なぜClaude Codeなのか？革新的な開発手法
従来の開発 vs Claude Code開発
従来の開発
💭 アイデア → 📚 調査・学習 → 💻 実装 → 🐛 デバッグ → 📝 ドキュメント
⏱️ 総時間: 数名の体制で数ヶ月？（50名体制で半年かける企業もあるらしいですがw）
😫 課題: 調査時間、実装ミス、品質バラツキ
Claude Code開発
💭 アイデア → 📋 テンプレート準備 → 🤖 Claude Code実行 → ✅ 品質チェック
⏱️ 総時間: 一人でどれくらいの期間でいけるか挑戦
🎯 利点: 高品質、一貫性、学習効率
設定ファイル＆テンプレート戦略
今回の開発では、以下の仕組みで開発効率を最大化します：
- claude.md: プロジェクト憲法（制約・品質基準）
- フェーズ別テンプレート: 各段階の詳細仕様
- MCP サーバー: ファイルシステム直接操作
- 自動品質チェック: テスト・セキュリティ・パフォーマンス
例えば、従来なら数時間かかる認証システムも、こんな感じで：
claude-code "claude.mdとphase2_authentication.mdテンプレートに従って認証システムを実装してください"
🎬 記事の構成（毎回共通）
各記事は以下の構成で展開予定：
1. 今週の挑戦 (5分で読める)
- フェーズの目標
- 技術的なポイント
- 期待される成果
2. 実況開発 (10-15分で読める)
- Claude Codeプロンプトの実行
- 生成されたコードの解説
- 修正・調整の過程
3. 学んだこと・ハマったこと (5分で読める)
- 技術的な発見
- 予想外の問題と解決策
- 次回への課題
4. 実際に動くデモ (動画・GIF)
- その週の成果物
- ユーザー視点での操作感
- パフォーマンステスト結果
🎯 Phase 1で達成すること
- Flutter + Firebase プロジェクト構造作成
- Clean Architecture 3層設計実装
- 自動テスト・CI/CD パイプライン構築
- ブランドテーマ・デザインシステム
🔍 注目ポイント
- Claude Codeで30分: 通常数時間かかる基盤構築
- 企業レベル品質: スタートアップが1年かけて整備する基盤
- テスト駆動開発: 最初からカバレッジ85%以上
💬 最後に：AIと人間が協力して課金少なめでも高品質なプロダクトを作れるか！
この連載は、単なる技術ブログではありません。AIとの協働による新しい開発スタイルを実践・検証する場です。
従来の「人間が全てコードを書く」時代から、「AIと人間が協力して高品質なプロダクトを作る」時代への転換点を、皆さんと一緒に体験したいと思っています。
「Viewfold」が現実のプロダクトとしてストアに並んだとき、それは単なるアプリのリリースではなく、新しい開発パラダイムの実証になるはずです！
がんばれClaude code！
ProプランでもGAするまで頑張ってください
（なおレートリミットがちょいちょい挟まるのでいつ頃できあがるかは謎です）
Discussion