AI時代のものづくりは、エンジニアだけのものじゃない― Vibe Codingから生まれた、私たちの開発文化

なぜこの話をWantedlyで書いたか

「エンジニアじゃないと、プロダクトは作れない」
以前の私は、そう思っていました。

ですが今は、AIと一緒に“考え、設計し、形にする”ことで、
技術経験がなくてもサービスを作れる時代だと実感しています。

この文章では、私自身がVibe Codingに挑戦し、数えきれない失敗を経てたどり着いた
「AIと壊れずにものづくりを進めるための実践方法」をまとめました。

AIに丸投げするのではなく、
人は“考える側”に立つ。

そんな働き方にワクワクする方に、ぜひ読んでほしい内容です。

【非エンジニア向け】Vibe Coding 実践マニュアル

1. はじめに

Vibe Codingとは： 頭の中にある曖昧なアイデアを言語化し、AIに実装してもらうプロセスです。プログラミングの専門知識がなくても、適切なツールと手順を踏むことでアプリケーション開発が可能になります。

本マニュアルは、非エンジニアが直面しやすい「バグの多発」や「AIの暴走」を防ぎ、安定して開発を進めるためのワークフローをまとめたものです。

2. ツール選定ガイド（レベル別）

自分の習熟度や開発段階に合わせて、以下の順でツールを使い分けてください。

Lv.1：アイデア出し・練習段階

推奨ツール: ChatGPT (Canvas機能)、Gemini (Canvas機能)
目的: 1つのプロンプトで、アイデアを画面や構造に変換する練習をする。
特徴: ハードルが低く、手軽に試せる。

Lv.2：精度の向上・構造理解段階

推奨ツール: Google AI Studio、Kimi (Visual Coding)
目的: Webサイト全体の構築方法を理解し、プロンプトの出力精度を高める。
メリット: 無料で利用可能。

Lv.3：本格開発・機能追加段階

推奨ツール: Cursor、WebStorm（AI対応版）
移行のタイミング: Lv.2で作ったコードをダウンロードし、これらのツールにインポートする。
目的: プロジェクト全体の構造をAIに記憶させ、複雑な修正や機能追加に対応する。

3. Cursorを用いた「失敗しない」Vibe Coding ワークフロー

本格的な開発（Lv.3）において、バグや崩壊を防ぐための3つの鉄則ステップです。

ステップ①：AIを「CTO（最高技術責任者）」として定義する

いきなりコードを書かせず、まずは開発のプロセス自体を管理させます。

コマンドフォルダの作成: プロジェクト内に commands というフォルダを作成します。
ワークフロー定義: 以下のプロセスを順に行うようAIに指示（プロンプト化）し、保存します。
- 役割設定: AIをCTOと定義。
- 要件探索: 何を作るか詳しくヒアリングさせる。
- 設計策定: 実際のコードを書く前に設計を行う。
- 実行段階: 実装を行う。
スキルのパッケージ化: よく使う指示（例：「YouTube動画ダウンローダーを作りたい」と言ったら自動的に上記フローを開始するなど）をテンプレートとして保存し、毎回呼び出せるようにします。

ステップ②：AIの暴走を防ぐ（Active Rulesの策定）

AIが勝手に既存コードを書き換えてプロジェクトを破壊するのを防ぎます。

ドキュメント作成: AGENTS.md というファイルを作成します。
ルールの明記: プロトタイプ作成後、AIに以下の内容を整理させ、このファイルに記述させます。
- 技術スタック（使用言語・フレームワーク）
- データ構造
- ページ構成
運用のルール:
- AIには常にこのファイル（Active rules）を参照して開発させます。
- 開発が進んで構成が変わった場合は、必ずこのファイルを追記・更新します。

ステップ③：コードレビューをAIに自動化させる

バグが発生した際、初心者が自力で直そうとすると状況が悪化します。修正もAIに管理させます。

レビュー文書の用意: code review というチェック用プロンプトまたはドキュメントを用意します。
都度レビュー: 1つの機能開発が終わるたびに、AIにこのレビューを実行させます。
修正: AIが指摘した内容（バグや保守性の問題）に基づいて修正を行います。

4. トラブルシューティングと心構え

AIが文脈を忘れる: チャットが長くなると起こります。Lv.3のツール（Cursor等）へ移行し、プロジェクト全体を読み込ませてください。
バグが出た時: 自分でコードを書き換えようとせず、ステップ③の「AIによるコードレビュー」を実行してください。
機能追加: いきなり実装せず、ステップ②の AGENTS.md に矛盾しないか確認してから進めてください。

Vibe Coding のプロンプト事例

ステップ①：AIをCTOにする「キックオフ・プロンプト」

Cursorなどのエディタでプロジェクトを始めたら、最初に以下のプロンプトをAI（チャット欄）に入力してください。テキストにあった「commandsフォルダ」に入れる内容を、すぐに使える形式にしました。

▼ 以下のテキストをコピーしてAIに入力

Markdown

あなたは私のプロジェクトの「CTO兼リードエンジニア」です。
私は技術的な背景がないため、以下の「Vibe Codingワークフロー」に従って私を導いてください。
いきなりコードを書かず、必ずステップ順に進めてください。

## Vibe Coding ワークフロー

### Step 1: 要件探索 (Requirements)
* まず、私が何を作りたいか詳しくヒアリングしてください。
* 曖昧な点は質問して明確にしてください。
* 「これで開発に進んでOK」という合意が取れるまでコードは書かないでください。

### Step 2: 設計策定 (Design & Rules)
* Step 1の内容に基づき、以下の内容を含む `AGENTS.md` というファイルを作成（または更新）する提案をしてください。
    * プロジェクトの目的
    * 技術スタック（言語、フレームワークなど）
    * ディレクトリ構成
    * データ構造
    * **Active Rules（絶対守るべきルール）**

### Step 3: 実行段階 (Execution)
* `AGENTS.md` のルールに基づき、実際のコードを作成・修正してください。
* 一度に全て作らず、小さな機能単位で作成してください。

---
それでは、Step 1を開始します。
私はどのようなツールやアプリを作りたいと考えればよいでしょうか？ヒアリングを開始してください。
あなたは私のプロジェクトの「CTO兼リードエンジニア」です。
私は技術的な背景がないため、以下の「Vibe Codingワークフロー」に従って私を導いてください。
いきなりコードを書かず、必ずステップ順に進めてください。

## Vibe Coding ワークフロー

### Step 1: 要件探索 (Requirements)
* まず、私が何を作りたいか詳しくヒアリングしてください。
* 曖昧な点は質問して明確にしてください。
* 「これで開発に進んでOK」という合意が取れるまでコードは書かないでください。

### Step 2: 設計策定 (Design & Rules)
* Step 1の内容に基づき、以下の内容を含む `AGENTS.md` というファイルを作成（または更新）する提案をしてください。
    * プロジェクトの目的
    * 技術スタック（言語、フレームワークなど）
    * ディレクトリ構成
    * データ構造
    * **Active Rules（絶対守るべきルール）**

### Step 3: 実行段階 (Execution)
* `AGENTS.md` のルールに基づき、実際のコードを作成・修正してください。
* 一度に全て作らず、小さな機能単位で作成してください。

---
それでは、Step 1を開始します。
私はどのようなツールやアプリを作りたいと考えればよいでしょうか？ヒアリングを開始してください。

ステップ②：暴走を防ぐ「AGENTS.md」テンプレート

AIとの対話で要件が固まったら、プロジェクトのルート（一番上の階層）に AGENTS.md というファイルを作り、以下の内容を記述させます。 ※AIが自動で作ってくれることもありますが、内容はこの形式を守らせてください。

▼ AGENTS.md の構成例

Markdown

# AGENTS.md (Active Context & Rules)

## 1. プロジェクト概要
（例：YouTubeの動画をURLからダウンロードし、MP3に変換するツール）

## 2. 技術スタック
* Frontend: （例：HTML/CSS/JavaScript）
* Backend: （例：Python / Flask）
* Libraries: （例：yt-dlp）

## 3. ディレクトリ構成
/src
  /app.py
  /templates
    index.html

## 4. Active Rules (絶対に守ること)
* 既存のコードを削除する場合は、必ず事前にユーザーの許可を得ること。
* コードを変更する際は、必ずこのファイルの「技術スタック」と整合性が取れているか確認すること。
* 初心者が理解しやすいよう、複雑な設計パターンは避けること。
# AGENTS.md (Active Context & Rules)

## 1. プロジェクト概要
（例：YouTubeの動画をURLからダウンロードし、MP3に変換するツール）

## 2. 技術スタック
* Frontend: （例：HTML/CSS/JavaScript）
* Backend: （例：Python / Flask）
* Libraries: （例：yt-dlp）

## 3. ディレクトリ構成
/src
  /app.py
  /templates
    index.html

## 4. Active Rules (絶対に守ること)
* 既存のコードを削除する場合は、必ず事前にユーザーの許可を得ること。
* コードを変更する際は、必ずこのファイルの「技術スタック」と整合性が取れているか確認すること。
* 初心者が理解しやすいよう、複雑な設計パターンは避けること。

ステップ③：コードレビュー用プロンプト

機能が一つ完成したり、バグが出たりした時は、修正を依頼する前に必ずこのプロンプトを投げてください。

▼ 以下のテキストをコピーしてAIに入力

Markdown

現在作成したコード（または変更点）について、コードレビューを行ってください。
修正はまだ行わないでください。まずは以下の観点でチェックし、報告してください。

1.  **バグの可能性:** エラーが起きそうな箇所はあるか？
2.  **整合性チェック:** `AGENTS.md` のルールや既存の構造と矛盾していないか？
3.  **初心者視点:** 私が後で管理できなくなるような複雑な記述はないか？

問題がなければ「問題なし」と報告し、問題があればその内容と、どう修正すべきかの方針を提案してください。
現在作成したコード（または変更点）について、コードレビューを行ってください。
修正はまだ行わないでください。まずは以下の観点でチェックし、報告してください。

1.  **バグの可能性:** エラーが起きそうな箇所はあるか？
2.  **整合性チェック:** `AGENTS.md` のルールや既存の構造と矛盾していないか？
3.  **初心者視点:** 私が後で管理できなくなるような複雑な記述はないか？

問題がなければ「問題なし」と報告し、問題があればその内容と、どう修正すべきかの方針を提案してください。