ShrimpReel — 概要と仕組み

ShrimpReel は、1枚の写真をAI生成動画に変換し、バイラルトレンド（ダンスチャレンジなど）に沿ったSaaSウェブサイトを構築するためのオープンソーステンプレートです。アイデアは、すべてのトレンドキーワードに専用サイトを用意し、それぞれをこの同じテンプレートから構築するというものです。リポジトリをクローンし、設定、コピー、メディアを変更すれば、新しいサイトをすぐに立ち上げられます。

すべては Cloudflare のインフラストラクチャ上で動作します — Workers（サーバーレスコード）、D1（データベース）、R2（オブジェクトストレージ）、KV（キーバリューストア）、Queues、レート制限、Cronトリガー。つまり、スタック全体がCloudflareによって管理されるため、独自のサーバーは不要です。

中核コンセプト

• 1枚の写真 → AI動画：ユーザーが1枚の写真をアップロードすると、サイトは事前定義されたテンプレート（例：サンタの工房でエルフとして踊る）に従った短い動画を生成します。
• キーワードごとのサイト：各サイトは特定のバイラルキーワード（例：「クリスマスダンスAI」）をターゲットにします。このテンプレートから新しいリポジトリを作成し、キーワードを設定して公開します。
• 収益化：ユーザーは動画を生成するためにクレジット（一回限りのパックまたはサブスクリプション）を支払います。決済はサードパーティプロバイダー（Waffo Pancake、Dodo Payments、またはStripe）が処理します。

技術スタック（簡略化）

• フロントエンドとサーバーサイドレンダリング：TanStack Start (React 19) + Tailwind CSS 4。サイトはバイリンガル — 英語は /、中国語は /zh。
• API：Hono（軽量ウェブフレームワーク）がすべての /api/* ルート、メディア、sitemap、robots.txt などを処理します。
• 決済：デフォルトは Waffo Pancake（記録商人、つまり販売税を処理します）。Dodo Payments は代替手段です。Stripe もサポートされていますが、あなたが商人となり、税務を自分で処理する必要があります。ローカル開発では、mock プロバイダーが決済をシミュレートします。
• 動画生成：デフォルトで fal.ai のキュー API を使用します。オプションの代替：yir.ai ルーターまたは NanoAPI。ローカルテストには mock プロバイダーを使用します。

主な機能

ユーザーとクレジット

• Google サインイン（One Tap を含む）。
• クレジットパック（一回限りの購入）と月次/年次サブスクリプション。
• クレジット台帳がすべての取引を追跡します。
• ユーザーダッシュボード：動画の表示、請求、設定、コードの引き換え、招待リンク、アカウント削除、データエクスポート。

注文と生成

• クレジットを取り戻す全額および部分返金。
• デッドレターキュー（失敗したジョブ用）を備えた生成キュー。
• 生成が失敗した場合、クレジットは自動的に返還されます。

成長と分析

• ファーストタッチおよびラストタッチアトリビューション（UTMパラメータ、広告クリックID）。
• ファネル追跡：訪問 → サインアップ → チェックアウト → 支払い → 生成。
• 同意バナーの背後にあるGA4イベント。
• 動画の公開共有ページ（動画ごとにオプトイン、リンクプレビュー付き）。

管理パネル

• 概要ダッシュボード（プロバイダーコストと粗利益率を含む）。
• ユーザー、注文、生成、削除要求、問い合わせメッセージ、決済イベント、メール、監査ログ、レポート、引き換えコード、紹介リーダーボード、ランタイム設定、接続テストを管理。
• フィルターと検索を備えたユーザー、注文、生成の詳細ビュー。

メールと通知

• トランザクションメール：クレジット追加、動画準備完了、生成失敗、返金、削除要求の領収書。
• 管理者は新しい削除要求、期限リマインダー、問い合わせメッセージのアラートを受け取ります。
• Telegram、Feishu、Discord などを介した即時決済通知。

コンプライアンスと安全性

• 動画のAI生成ラベル。
• 写真は7日後に削除され、動画は30日後に削除されます。
• 削除要求は48時間キューで処理されます（同じソース写真から作成されたすべての動画を削除し、その写真をブロックします）。
• アップロードモデレーションと、問い合わせ/報告フォームのTurnstile（CAPTCHA）。

運用とセキュリティ

• メンテナンスモード、チェックアウト一時停止、決済プロバイダー切り替え、サイト全体のお知らせ、毎日の生成上限 — すべて再デプロイなしで管理画面から変更可能。
• ヘルスチェックアラートメール、毎日のD1バックアップをR2へ、ブラウザエラー報告をWorkers Logsへ。
• リクエストごとのnonceを使用したコンテンツセキュリティポリシー（CSP）、およびPermissions-Policy。

コンテンツとSEO

• セクション付きのワンページホーム：仕組み、とは、オプションの問題/DIYブロック。
• 拡張可能な記事コレクション（/guides ハブ、関連記事）。
• 法的ページ、問い合わせフォーム。
• SSR canonical、hreflang、JSON-LD、sitemap。
• コピーはロケールごとにコード分割されます（ブラウザは現在の言語のみを読み込みます）。
• npm run seo:check はサイト全体のSEO問題をリントします。

ローカル開発

テンプレートをローカルで実行するには：

npm install
cp .dev.vars.example .dev.vars   # 少なくとも SESSION_SECRET を設定
npm run seed:local               # データベースマイグレーションを適用し、テンプレートメディアをローカルR2にアップロード
npm run dev -- --host 127.0.0.1  # http://127.0.0.1:3000

• npm 11.19 以降を使用してください。
• デフォルトでは、PAYMENT_PROVIDER=mock と VIDEO_PROVIDER=mock — 実際の請求や生成はありません。
• 開発ログインは本番環境外で利用可能です（POST /api/auth/dev-login）。
• メールはローカルでシミュレートされます。GET /api/dev/emails?to=<email>&ref=<order or takedown id> で送信トレイを確認します。

新しいサイトの立ち上げ

README には詳細な8ステップのプロセスがあります。要点は次のとおりです：

1. サイトリポジトリを作成 — テンプレートをクローンし、リモートを upstream に名前変更し、独自の origin を追加します。
2. スキャフォルダーを実行 — node scripts/new-site.mjs が site.ts、wrangler.jsonc、package.json をキーワード、ドメイン、その他の設定で更新します。
3. コピーを書き換え — src/content/en.ts と src/content/zh.ts を編集して新しいトレンドに合わせます。キーワードを置き換えるだけでは不十分です — Google はスケールされたコンテンツ乱用を罰します。
4. メディアを置き換え — 独自のテンプレート動画、デモ動画、ロゴなどをアップロードします。
5. wrangler.jsonc で環境変数を設定（サイトURL、決済プロバイダー、管理者メールなど）。
6. 決済プロバイダーで製品を作成（クレジットパックとサブスクリプションプラン）。
7. ローカルで検証 — 型チェック、テスト、e2e、SEOチェックを実行します。
8. デプロイし、sitemapを検索エンジンに送信します。

ステップ2〜4とステップ7のローカル部分を自動化するClaude Codeスキル（new-hot-site）もあります。

テンプレート更新のマージ

各サイトはテンプレートを upstream として追跡する独立したリポジトリであるため、修正と新機能を取り込むことができます：

git fetch upstream
git merge --no-ff upstream/main

同期プランスクリプト（scripts/sync-plan.mjs）は競合の特定に役立ちます。サイト固有の変更は src/config/site.ts、src/content/*、public/*、seed/、wrangler.jsonc、package.json に保持し、その他はすべてテンプレートと同一に保ちます。

Cloudflare へのデプロイ

必要なCloudflareリソース（D1データベース、R2バケット、KV名前空間、Queues）をサイトごとに作成し、マイグレーションを実行してテンプレートメディアをアップロードする必要があります。READMEに正確なコマンドがあります。

ドキュメントとメモ

• リリースノート：CHANGELOG.md
• 機能計画：docs/SAAS_VIDEO_FEATURES.md、ROADMAP.md
• SEOルール：docs/SEO_AUDIT.md
• 環境変数：docs/env.md
• 決済プロバイダー設定：docs/payments.md
• サブスクリプション詳細：docs/subscriptions.md
• コード規約：AGENTS.md

ほとんどのドキュメントファイルは中国語です。

---

ShrimpReel は、ユーザー認証から動画生成、決済、管理、SEOまで、すべてをCloudflareの無料枠に優しいスタックで処理する、完全で本番準備が整ったテンプレートです。新しいバイラルトレンドごとにクローンしてカスタマイズできるように設計されているため、新しいサイトを迅速に立ち上げられます。