開発事例 / 教育

AI Labo - AI駆動開発スクール

12ヶ月でAI開発者へ。カリキュラム・決済・受講管理を統合したスクールLP。

公開中

12ヶ月のカリキュラムでAI駆動開発を学ぶスクール「AI Labo」のLP兼学習管理システム。月別カリキュラム（AI理解→環境構築→アプリ制作→SaaS構築→起業準備）の視覚的な表示、Square決済連携による受講料決済、Supabase認証での受講者管理、Resend連携のメール通知機能を搭載。プログラミング未経験者がAI開発者になるまでの明確なロードマップを提示します。

この作品の要点

困っていたこと	AI開発の学習ロードマップが分かりにくい。
やったこと	12ヶ月のカリキュラムを段階的に可視化し学習パスを明確化。
起きたこと	スクール申込から受講開始までの導線を自動化。

どこでつまずいたか
できあがったもの
どう作ったか
相談する

どこでつまずいたか

01AI開発の学習ロードマップが分かりにくい

02スクール運営の申込・決済・管理が分散しやすい

03プログラミング未経験者にとってAI開発のハードルが高い

どう解いたか

0112ヶ月のカリキュラムを段階的に可視化し学習パスを明確化

02LP・決済・認証・通知を一つのシステムに統合

03未経験からステップバイステップで成長できるカリキュラム設計

マンガでわかる

できあがったもの

できあがった画面

結果

01	スクール申込から受講開始までの導線を自動化
02	カリキュラムの魅力を直感的に伝えるLP構成を構築
03	決済→認証→通知の一気通貫システムで運営コストを最小化

この作品でできること

12ヶ月の段階的カリキュラムを視覚的に表示
Square決済連携による受講料決済
Supabase認証で受講者管理
Resend連携のメール通知機能
AI理解→環境構築→アプリ制作→SaaS→起業の段階的成長

どう作ったか

できること3項目

12ヶ月段階的カリキュラム	AI理解→環境構築→Webアプリ制作→SaaS構築→起業準備の5フェーズで、未経験者がAI開発者になるまでの明確なロードマップを提供。
統合決済・認証システム	Square決済で受講料の申込・管理を自動化。Supabase認証で受講者アカウントを管理し、決済完了と同時にコンテンツアクセスを開放。
メール通知自動化	Resend連携で申込確認・カリキュラム更新・課題リマインドを自動送信。受講者のエンゲージメントを維持。

つくり4項目

Next.js ISR	ISRでカリキュラム情報を定期更新。SEO最適化されたLPと動的な受講者ダッシュボードを両立。
Square Payments	一括払い・分割払いに対応した決済フロー。Square Checkout APIで安全かつスムーズな支払い体験を提供。
Supabase Auth/DB	受講者認証とカリキュラム進捗管理をSupabaseで実装。RLSで受講者ごとのデータアクセスを厳密に制御。
Resend Email	トランザクショナルメールをResend APIで配信。テンプレートベースで美しいメール通知を自動送信。

使いどころ3項目

プログラミング未経験者	ゼロからAI開発を学びたい人向け。12ヶ月で実際に動くSaaSを作れるレベルまで成長。
エンジニアのスキルアップ	既存のプログラミングスキルにAI開発を上乗せ。最新のAI API活用法を実践的に習得。
起業志望者	AI×SaaSで起業したい人向け。技術だけでなく、ビジネスモデル設計やマーケティングまでカバー。

担当と道具

担当	企画・構成設計・フルスタック開発
使った技術	Next.js 16・TypeScript・Tailwind CSS 4・Gemini API・Supabase・Square API・Resend