今回作ったサービス Charahub: https://charahub-dbf63.web.app/ja/
初めに：
最近、AIでキャラクターを生成する人が急激に増えました。
一方で「このキャラ使っていいの？」「クレジットは必要？」といった
権利の曖昧さに悩む場面も多くなっています。
私自身もAI生成キャラクターを公開する中で、
「せっかく作ったキャラがどう使われているか分からない」
「安心して使ってもらえる仕組みが欲しい」
と感じるようになりました。
そこで、Firebaseを使って
AI時代のキャラクター権利を管理するサービス
「CharaHub」を個人開発してみました。
CharaHubは一言で言うと
「キャラクター版GitHub」
です。
イラスト投稿サイトのように見えますが、
内部では以下を重視しています。
- キャラクターごとの権利情報を明示
- 派生（Fork）を追跡できる構造（現在非表示）
- クレジット表記を自動生成
- 利用報告によるトレーサビリティ
「投稿して終わり」ではなく、
キャラクターを“管理する”ためのサービス
を目指しています。
今回の開発では、バックエンドにFirebaseを採用しました。
Firebaseを採用した理由：
- 認証（Firebase Auth）が簡単
- Firestoreで柔軟なメタデータ管理が可能
- Cloud Storageで画像・LoRAなど大容量ファイルを扱える
- 無料枠があり、個人開発に向いている
- 以前始めてvercelで会員サイトを作った時、Frontend:Render,Backend:Vercel,DB:Supabase,メール機能:Resend,ドメイン：お名前.com,version管理：github と、とにかく大変だったのが、 firebaseを使えばほぼgemini3pro highに任せるだけで3分の一以下の時間、手数でサイトを作成出来たからです。更新も楽。
システム構成：
CharaHub システム構成
技術スタック
レイヤー 技術
フロントエンド Next.js 14 (App Router) + React + TypeScript
スタイリング Tailwind CSS + shadcn/ui コンポーネント
国際化 next-intl (日本語/英語対応)
バックエンド Firebase (BaaS)
ホスティング Firebase Hosting + Cloud Run (SSR)
データベース Firestore (NoSQL)
ストレージ Firebase Storage
認証 Firebase Authentication
サーバーレス関数 Firebase Functions (Node.js)
アーキテクチャ図
┌─────────────────────────────────────────────────────────────┐
│ クライアント │
│ (ブラウザ / モバイル) │
└─────────────────────┬───────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Firebase Hosting + Cloud Run │
│ (Next.js SSR) │
└─────────────────────┬───────────────────────────────────────┘
│
┌─────────────┼─────────────┐
▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌───────────┐
│ Firestore │ │ Storage │ │ Auth │
│ (データ) │ │ (画像等) │ │ (認証) │
└───────────┘ └───────────┘ └───────────┘
│
▼
┌───────────────────────────────────────┐
│ Firebase Functions │
│ - pHash生成 (画像類似検出) │
│ - 通知送信 │
└───────────────────────────────────────┘
主要ディレクトリ構成
charahub/
├── app/[locale]/ # Next.js App Router (ページ)
│ ├── page.tsx # ランディングページ
│ ├── characters/ # キャラクター関連ページ
│ ├── dashboard/ # ダッシュボード
│ └── auth/ # 認証ページ
├── components/ # Reactコンポーネント
│ ├── character/ # キャラクター関連UI
│ ├── ui/ # shadcn/ui基盤コンポーネント
│ └── layout/ # ヘッダー/フッター
├── lib/
│ ├── firebase/ # Firebase設定・操作関数
│ │ ├── config.ts # Firebase初期化
│ │ ├── firestore.ts # CRUD操作
│ │ └── storage.ts # ファイルアップロード
│ └── hooks/ # カスタムフック
├── types/ # TypeScript型定義
├── messages/ # 翻訳ファイル (ja.json, en.json)
├── functions/ # Firebase Functions (サーバーレス)
└── firestore.rules # Firestoreセキュリティルール
主要Firestoreコレクション
コレクション 用途
characters キャラクターデータ
users ユーザープロファイル
usageRecords 利用報告
suggestions README編集提案
favorites お気に入り (サブコレクション)
takedownRequests 削除申請
inquiries 問い合わせ
主要機能
キャラクター登録・管理 (オリジナル/二次創作/派生)
ライセンス管理 (CC / カスタム11項目)
利用報告・トラッキング
派生ツリー可視化
pHash画像類似検出
ライセンスカード画像生成
3段階ステータス管理 (論理削除)
実装に工夫した点：まずはChatGPT、Claude、Geminiに色々確認しまくりました。
主に、ChatGPTはアイデア専門、Claudeは実用的かどうかを判断したりコード化、Geminiはその両方という感じです。
出力文字数の順ではClaude→ChatGPT→Geminiなので、仕様書や開発書はClaude、Geminiは少ない文字数ながらいいアイデアを出してくれるので、ChatGPTと相談させながら作りました。
そしてアイデア、機能、UIが固まったら、「Google Antigravityに作らせるのでプロンプトを出力して」って感じですね。
ライセンスやプライバシーポリシー、利用規約もClaudeOpusに任せっきりですが、確認し直しても問題ないです。
注意事項としては、バイブコーディングだと機能を追加するより削除する方が大変なので、その点は気をつけた方が良い、というぐらいです。
メルカリで買った激安の中古パソコンで一人で作っています。
費用も全くかかっていないと言って差し支えありません。
サイトは、まだ作りたてですが、機能は問題ないと思っています。
今後はユーザー数を増やしながらFAQや機能を追加していきたいです。
Qiita初投稿なので、至らない点も多いと思います。
Firebaseや個人開発についてアドバイスいただけると嬉しいです。