📋 プロジェクト概要
設計コンセプト
ターゲット層（30〜50代主婦）が日常使いしているLINEを起点に、新しいアプリのインストールやID/パスワード作成の負担なく、シームレスにコミュニティへ誘導する設計。
🔄 ファネル全体設計
STEP 1
集客
SNS / 広告
LP へ誘導
STEP 2
決済
UTAGE + Stripe
月額課金の処理
STEP 3
LINE誘導
LINE公式
限定LINE追加 + 通知
STEP 4
定着
コミュニティサイト
動画 + 交流 + CRM
🛠 ツール役割分担
| レイヤー |
ツール |
役割 |
区分 |
| ファネル・LP |
UTAGE |
集客ページ作成、決済導線の構築 |
既存利用 |
| 決済 |
Stripe（UTAGE経由） |
月額課金の処理、解約管理 |
既存利用 |
| 1対1コミュニケーション |
LINE公式アカウント |
購入後の誘導、通知、個別サポート |
運用 |
| コミュニティ |
自作Webアプリ |
動画配信、掲示板、会員交流 |
自作開発 |
| CRM・管理 |
自作Webアプリ（管理画面） |
会員管理、分析、LINE配信連携 |
自作開発 |
👤 顧客導線フロー
SNS・広告
│
└──> UTAGE LP （商品説明・申込ページ）
│
└──> Stripe 決済 （月額課金開始）
│
├──> Stripe Webhook 発火
│ └──> 自作サーバーが受信
│ ├──> DB に会員情報登録
│ └──> LINE連携準備
│
└──> UTAGE 購入完了ページ
│
└──> LINE公式 友達追加ボタン
│
└──> 限定LINE公式アカウント
│
├──> ウェルカムメッセージ送信
├──> コミュニティサイトのリンク
└──> LINEログインでサイトへ
│
└──> コミュニティサイト利用開始
Stripe 解約イベント
└──> Webhook 受信
├──> DB の課金状態を更新
├──> コミュニティサイトへのアクセス停止
└──> LINE でお知らせ送信（任意）
📊 CRM機能（管理者画面）
📋 会員一覧・管理
全会員の課金状態（継続/解約/未払い）、LINEアカウント紐付き、最終ログイン日、コミュニティ投稿数を一覧表示
📈 アクティビティ分析
動画視聴率、掲示板参加率、ログイン頻度などを可視化。エンゲージメントスコアで会員の活動度を把握
⚠️ 解約予兆検知
ログイン頻度低下、動画未視聴が続く会員を自動検出。解約前にLINEでフォローアップを実施
📨 セグメント配信
条件に合う会員グループにLINE一斉配信。例：「30日未ログイン」「新規加入1週間以内」等
💰 売上ダッシュボード
MRR（月次経常収益）、解約率、LTV（顧客生涯価値）をリアルタイムで表示。Stripeデータと自動連携
🔔 自動アクション
特定条件でLINEメッセージ自動送信。例：入会3日後にウェルカムメッセージ、7日未ログインで声かけ
⚙️ 技術スタック
L
LINEログイン
認証（Supabase Auth連携）
L
LINE Messaging API
通知・自動配信
システム構成図
┌─────────────┐ ┌──────────────┐ ┌─────────────────┐
│ UTAGE │────>│ Stripe │────>│ Webhook │
│ LP・ファネル │ │ 月額決済 │ │ 購入/解約通知 │
└─────────────┘ └──────────────┘ └────────┬────────┘
│
┌────────▼────────┐
│ Next.js API │
│ バックエンド │
└──┬─────┬─────┬──┘
│ │ │
┌────────────────────────┘ │ └────────────────────┐
│ │ │
┌───────▼───────┐ ┌─────────▼────────┐ ┌─────────▼────────┐
│ Supabase │ │ LINE API │ │ Vimeo │
│ DB + Auth │ │ 通知・配信 │ │ 動画配信 │
└───────────────┘ └──────────────────┘ └──────────────────┘
│
┌───────▼───────┐
│ Next.js │
│ フロントエンド │
│ （Vercel） │
└───────────────┘
✨ シームレス設計のポイント
-
UTAGE購入完了ページにLINE追加ボタンを配置
決済直後の画面に「限定LINEに参加する」ボタンを表示。購入の熱量が高いまま次のアクションへ誘導。
-
LINE追加後すぐにウェルカムメッセージ
友達追加した瞬間に自動メッセージ。コミュニティサイトへの案内リンクを含める。迷子にさせない。
-
LINEログインでパスワード不要
コミュニティサイトへのログインはLINEアカウント連携。新しいID/パスワードの作成・記憶が不要。タップ2回で入れる。
-
LINEリッチメニューにサイトリンク常設
LINE画面の下部メニューに「コミュニティを開く」「動画を見る」ボタンを常設。いつでもワンタップでアクセス。
-
新着通知はLINEプッシュで
新しい動画やお知らせがあればLINEに通知。「見に行かないと気づかない」をなくす。LINEが入口、サイトが目的地。
設計思想
ユーザーの生活導線（LINE）上にコミュニティの入口を置くことで、「わざわざ行く場所」ではなく「いつも目に入る場所」にする。これが1000人規模の定着率を左右する最重要ポイント。
📅 開発スケジュール
Phase 1 — MVP（2〜3週間）
最小構成でリリース
LINEログイン認証、Stripe Webhook連携、動画一覧・視聴ページ、シンプルな掲示板、基本的な会員管理画面
Phase 2 — コミュニティ強化（2〜3週間）
交流機能の充実
トピック別スレッド、いいね・リアクション、画像投稿、お知らせ配信、LINEプッシュ通知連携
Phase 3 — CRM構築（3〜4週間）
管理・分析機能の実装
アクティビティ分析、解約予兆検知、セグメント別LINE配信、売上ダッシュボード（MRR/解約率/LTV）
Phase 4 — 自動化（2週間）
運営の自動化
条件別自動LINEメッセージ、ウェルカムシーケンス、未ログインフォロー、解約防止フロー
⚠️ 注意事項・前提条件
UTAGE × Stripe の決済フロー
UTAGEでStripe決済が構築済みであること。購入完了ページのカスタマイズ（LINE追加ボタン設置）が必要。
LINE公式アカウント
限定コミュニティ用のLINE公式アカウント（認証済み推奨）が必要。LINEログインにはLINE Developersでのチャネル作成が必要。
動画教材
動画は自前サーバーに置かず、Vimeo Pro（またはMux）を利用。限定公開URLでセキュリティ確保。直接ダウンロード防止も設定可能。
MVP優先の原則
CRMをフル機能で最初から作らないこと。まずPhase 1の最小構成で会員に価値を届け、運用しながら必要な機能を順次追加していく。
セキュリティ
環境変数（APIキー等）はdotenvxで暗号化管理。認証情報をソースコードにハードコードしない。Stripe Webhook署名の検証を必ず実装。