# プロジェクト紹介

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

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

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

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

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

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

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

### 総付録

[AI能力辞典：一般的なAIコア概念と用語、シナリオの解説](/ja-jp/appendix/8-artificial-intelligence/ai-capability-dictionary)

### ゼロ、ようちえん

| 章节 | キーコンテンツ | 状態 |
| :--- | :--- | :--- |
| [初心者向け：学習マップ](/ja-jp/stage-1/learning-map/) | 全体学習パスガイド | ✅ |
| [初心者向け：AI時代、話せばプログラミング](/ja-jp/stage-1/ai-capabilities-through-games/) | 貪食蛇などのケースでAIプログラミングの能力を初体験 | ✅ |

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

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

#### 付録

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

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

#### フロントエンド部分

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

#### バックエンド開発部分

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

#### AI能力付録

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

### 三、上級開発エンジニア