プロジェクト紹介

2025年は、多くの人にとってAIプログラミングの元年と呼ばれています。AIを使ってコードを書く人が増えていますが、その多くはまだおもちゃレベルにとどまっています。Vibe Codingで開発プロセスをどう組むか、どのツールを選ぶべきか、プロトタイプから本番運用までに何が足りないのか、わからないことが多いでしょう。

私たちは段階的な三段階の実践パスを採用しています。初心者向けステージではミニゲームでAIプログラミングに素早く慣れ、第一段階ではVibe Codingのワークフローを身につけWebアプリケーションのプロトタイプを完成させ、第二段階ではフルスタック開発とデプロイを学び、第三段階ではクロスプラットフォームの複雑なアプリケーションを構築します。

各ステージには完全なプロジェクト実践が含まれており、実際の課題の中でおもちゃから製品へと進化し、最終的にどんなアイデアも実用アプリとして具現化する能力を身につけます。

私たちは、Vibe Codingをマスターし、体系的なトレーニングを積めば、一人でフロントエンド・バックエンド開発、AI能力の統合、プロダクトデザインを兼ね備えたオールラウンド開発者になれると信じています。

本プロジェクトは主に3種類の学習者を対象としています：

• 初心者（一般の方 / プロダクト・運営側）：非技術背景の方や入門学習者が重要な概念を理解し、最初のAI小ツールやプロダクトプロトタイプを完成させるのを支援します。
• 初中級開発者（基礎のある学生や開発者）：vibe codingとネイティブAIアプリケーション開発を体系的に習得します。
• 上級開発者（企業・スタートアップ、オープンソース・独立開発者）：チームや個人がネイティブAIアプリケーションを迅速に構築・検証・反復できるよう支援します。

📖 コンテンツナビゲーション

総付録

AI能力辞典：一般的なAIコア概念と用語、シナリオの解説

ゼロ、ようちえん

章节	キーコンテンツ	状態
初心者向け：学習マップ	全体学習パスガイド	✅
初心者向け：AI時代、話せばプログラミング	貪食蛇などのケースでAIプログラミングの能力を初体験	✅

一、AIプロダクトマネージャー

章节	キーコンテンツ	状態
初級二：AI IDEツールを知る	IDEの使い方を学び、インターフェース構造と効率的なプロンプト方法を習得	✅
初級三：プロトタイプを作る	プロダクト分析の分解から、マルチページプロダクトプロトタイプ実装までの完全ループ	✅
初級四：プロトタイプにAI能力を追加	一般的なAI能力（テキスト・画像・動画）のAPI導入を理解し完了	✅
初級五：完全プロジェクト実践	実シナリオのシミュレーション、ユーザーフィードバックの反復とプロジェクト発表（課題あり）	✅

付録

章节	キーコンテンツ	状態
付録A：プロダクト思考補足	アイデア評価からニーズ分解、MVPまでのプロダクト思考フレームワーク	✅
付録B：よくあるエラーと解決策	vibe codingでのよくあるエラーとトラブルシューティング方法	✅
付録：アイデアの探し方	参考アプリ、トレンド、VCリストから細分化方向を見つける	✅
付録：ダブルダイヤモンドモデル	まず問題を定義し、それからソリューション設計を展開する完全リズムを理解	✅
付録：Jobs to Be Done	JTBD手法でユーザーが本当に達成したいことを見極める	✅
付録：The Mom Testユーザーインタビュー法	ユーザーインタビューを通じてニーズを検証する調査方法	✅

二、初中級開発エンジニア

フロントエンド部分

章节	キーコンテンツ	状態
lovartで素材制作	lovartを使って人物、シーンなどのビジュアル素材を一括生成し、UIデザインとフロントエンド開発に素材基盤を提供	🚧
FigmaとMasterGo入門	デザインツールで情報アーキテクチャとページ構造を整理し、フロントエンド実装の基盤を作る	🚧
最初のモダンアプリケーション構築 - UIデザイン	デザインカンプに基づいてコンポーネント化インターフェースを完成し、デザインからコードへの最初のリンクを実現	🚧
UIデザイン仕様を参考にページとボタンを設計	主要なデザイン仕様を使ってページ構造、ボタン階層を整理し、AIでデザイン案を生成する方法を学ぶ	🚧
ホグワーツの肖像画を一緒に作ろう	ゼロからAI能力を組み込んだフロントエンドアプリを作り、デザインと開発を連携させる	🚧

バックエンド開発部分

章节	キーコンテンツ	状態
APIとは何か	HTTPインターフェースとリクエスト・レスポンスモデルを理解し、バックエンド統合と連携の準備	🚧
データベースからSupabaseまで	SupabaseでデータベースとAPIを構築し、データモデルとフロントエンドページを接続	🚧
大規模モデルでインターフェースコードとドキュメントを支援	大規模モデルでインターフェースとデータベースのドキュメントおよびコードを生成し、読みやすくテスト可能なバックエンドを実現	🚧
GitワークフローとZeaburデプロイ	Gitワークフローでコードを管理し、アプリケーションをZeaburにデプロイして公開	🚧
モダンCLI開発ツール	CLI系AIプログラミングツールで開発とデバッグを加速し、個人のエンジニアリングワークフローを形成	🚧
stripeなどの決済システムの統合方法	決済システムを導入し、課金フローと基本決済プロセスを完了	🚧
最初のモダンアプリケーション構築 - フルスタックアプリ	フロントエンド、バックエンド、決済モジュールを統合し、デプロイ可能なフルスタックWebアプリを完成	🚧
モダンフロントエンドコンポーネントライブラリ + Trae実戦	モダンフロントエンドコンポーネントライブラリとTraeを使い、ログイン登録と課金対応のプロダクトを独立して完成	🚧

AI能力付録

章节	キーコンテンツ	状態
Dify入門とナレッジベース統合	Dify Workflowと基本RAGでツール系プロダクトを構築し、今後のアプリアップグレードのサンプルを作成	🚧
AI辞典の調べ方とマルチモーダルAPIの統合を学ぶ	適切なモデルとAPIの調べ方を学び、テキスト、画像などのマルチモーダル能力をプロダクトに組み込む	🚧

三、上級開発エンジニア