ぶべオンライン講座運営プラットフォーム「vibely（バイブリー）」を、企画・設計・開発・運用まで一貫して内製しました。
vibelyは、オンラインスクール向けのコンテンツ・受講生管理プラットフォームです。
受講生によるUGC（ユーザー生成コンテンツ）を活用し、コミュニティを形成しながら講座を運営できます。
コンセプトは「AIとUGCで拡がるオンライン講座運営」。
教材格納・進捗管理といった学習の土台に、受講生がブログや制作実績を発信できる仕組みを同じ場所へ統合し、講座の販売から提供までをオールインワンで支える設計にしました。
このページ自体も、vibely上で動いています。
受講生・運営者が触れる画面から、決済・AI連携・マルチテナント基盤まで、すべて自社で構築しています。
フロントエンドから外部サービス連携まで、TypeScriptで一気通貫に構築しています。
領域 | 採用技術 |
|---|---|
フレームワーク | Next.js 16（App Router）／ React 19 / TypeScript |
スタイリング | Tailwind CSS / Radix UI |
DB / ORM | PostgreSQL（Supabase）／ Prisma 6（マルチファイルスキーマ） |
認証 | Supabase Auth（SSR） |
決済 | Stripe（買い切り・サブスク）／ Stripe Connect（OAuth） |
AI連携 | Model Context Protocol（Mastra MCP）／ Vercel AI SDK |
リッチエディタ | TipTap 3（テーブル・埋め込み・コールアウト等の独自拡張） |
外部連携 | Slack / Discord / Chatwork / Google Calendar・Drive / Zoom |
メール | Resend / React Email |
SNS運用・動画生成 | Instagram Graph API、Kling AI、Remotion |
フォーム / バリデーション | React Hook Form / Zod |
テスト | Playwright（E2E） |
Model Context Protocol（MCP）サーバーを実装し、Claude・ChatGPT・Cursorなどから自然言語でvibelyを操作できます。
コース作成、ブログ・実績の投稿、受講生管理までをAIツールから直接実行でき、変化の速いAI講座でも教材を常に最新に保てます。
実際、この制作実績ページ自体も、AIアシスタントがMCP経由で入稿しています。
TipTapをベースに、テーブル・画像アップロード・外部埋め込み（YouTube / Figma / Loom 等）・コールアウトといった独自拡張を実装しました。
受講生・運営者が、専門知識なしにリッチなコンテンツを書ける編集体験を提供しています。
Stripe / Stripe Connectにより、買い切り・サブスクの販売と、テナント側での売上受け取りに対応しています。
受講生がアフィリエイターとして紹介報酬を得られる仕組みまで内製しました。
Remotionを用いて、Reactコンポーネントからプロモーション動画を生成しています。
マーケティング素材の制作までエンジニアリングで効率化しました。
教材格納（動画／テキスト。YouTube・Vimeo・Loom等の埋め込みにも対応）
受講生管理・学習進捗トラッキング・データエクスポート
AIツール連携（MCP）
UGC生成（受講生ブログ・制作実績・SNSワンタップシェア・OGP自動生成）
面談日程調整（Google Calendar連携・Zoom / Google Meet の自動発行）
コミュニティ連携（Slack / Discord / Chatwork への公開通知）
決済連携＋アフィリエイト（Stripe / Stripe Connect）
広告掲載（掲載期間・対象制御・クリック計測）
イベント、ポートフォリオ自動生成、クイズ、ドキュメント など
シェア！
