AI制作プロセス
全体像
AI制作の4ステップ
ChatGPTで壁打ち
アイデアをまずChatGPTに投げます。具体化・横展開・方向性の模索をChatGPTとの対話で進め、自分の中でアイデアをある程度まとめます。
実装プロンプトを生成
どんな環境・技術が必要かをChatGPTに確認し、Claude Codeに渡すための実装計画プロンプトをChatGPTに出力してもらいます。
Claude Codeで実装
生成したプロンプトをClaude Codeに投げて実装を進めます。ブラウザのコンソールエラーを確認しながら、Claude Codeと往復して完成に近づけます。
手作業・公開・改善
インフラやアカウント登録など手作業が必要な部分はClaude Code / ChatGPTにガイドしてもらいます。Vercelに公開後も、反応を見ながら素早く改善を続けます。
制作環境
使っているツール一覧
Claude Code
AI実装メインの実装エンジン。自然言語でコード生成・編集・エラー修正ができる。
ChatGPT
設計・壁打ちアイデアの具体化、実装プロンプトの生成、インフラ設定のガイドに活用。
Gemini
画像生成キャラクター・イラスト素材の生成に活用。ChatGPTと使い分けている。
Canva
画像加工生成した画像のトリミング・加工・バリエーション整理に使用。
Next.js
フレームワークReactベースのフレームワーク。静的生成とVercelとの相性が良い。
Vercel
デプロイGitHubにプッシュするだけで自動デプロイ。無料枠で個人プロジェクトを公開できる。
制作実績
以下は実際にこのプロセスで作ったプロジェクトです。各プロジェクトの「制作裏側を見る」から、具体的な工数・使用ツール・苦労した点を確認できます。
このやり方の強み
AIで作ることのメリット
まず作ってみる
手戻りを気にして要件定義・設計を入念にやる必要がありません。仮で作ってから考える。それができるのがAI開発の最大の強みです。
速い
ChatGPTでの壁打ちからClaude Codeでの実装まで、アイデアを数時間でカタチにできます。従来の開発と比べて圧倒的に短縮できます。
改善しやすい
公開後の機能追加や修正が低コスト。ユーザーの反応を見ながら素早く改善を続けられます。
誰でも始められる
プログラミング経験がなくても、AIにガイドしてもらいながら実装できます。大切なのは「何を作りたいか」のアイデアです。
関連ページ
もっと詳しく知りたい方へ





