前の第2章で「何を・誰のために作るか」を小さく決めました。この章はフェーズ2：準備――実際に手を動かす前に、技術・ツール・デザイン・環境という4つの土台を整えます。ここでの合言葉は「凝らない・悩まない・王道を選ぶ」。準備で消耗しては本末転倒です。AIと相性の良い選択を最短で済ませ、次の「作る」フェーズに全力を注げる状態を作りましょう。
迷ったら「AIが得意な方」を選ぶ、それだけ
フェーズ2でやること
準備フェーズは、一言でいえば「作る前の買い物」です。個人開発で最も多い失敗は、作り始める前の「道具選び」と「環境構築」で何日も溶かし、疲れて本編にたどり着けないこと。ここではプロ用の高級器具は買いそろえず、基本セットだけそろえます。
流行りの最新技術を全部調べ、ツールを比較し尽くし、有料プランを吟味する。作る前に力尽きる。
王道スタック・主力ツール1つ・無料枠をその日のうちに決め、翌日から作り始める。
目安は準備に丸1日以上かけないこと。完璧な選択は存在しませんし、AIと一緒なら後から乗り換えるのも簡単です。「とりあえずこれ」で走り出すのが正解です。
技術選定 ― 王道を選べば実装が楽
技術スタックとは、アプリを作る言語・フレームワーク・データベース・インフラの組み合わせのことです。実践ルートはもちろん、入門ルートでも「どんな技術で出力させるか」を知っておくと、AIへの指示が的確になります。
選び方の結論はシンプルです。AIが大量に学習していて、書き慣れている「王道」を選ぶ。なぜなら、AIは世の中に情報が多い技術ほど正確なコードを書けるからです。マイナーな最新技術は情報が少なく、AIも間違えやすい。個人開発では「AIが得意＝実装が楽＝完成する」が鉄則です。
情報量が多く、AIが正確に書ける。
例：フロントは React／Next.js、バックは Laravel（PHP）や Node.js、DBは PostgreSQL や MySQL、認証やDBは Supabase や Firebase。
登場して間もない技術、日本語・英語とも情報が少ない構成、実験的なフレームワーク。AIが間違え、あなたが検証に追われる。学習目的でなければ王道で十分。
💡 技術は「自分で決めなくていい」。 どのスタックが良いか分からなければ、AIに「〇〇（作りたいもの）を個人開発で作ります。AIが実装しやすい、情報の多い王道の技術構成を提案して」と聞けば十分です。提案されたものをそのまま採用してかまいません。深掘りしたい人はAIと相性の良い技術スタックを参照してください。
入門ルート（ノーコード）の場合は、この選定すらビルダー任せにできます。v0 や Bolt などのAIアプリビルダーは、裏側で自動的に React／Next.js といった王道スタックを使ってくれるので、あなたが技術を意識する必要はほとんどありません。
ツール選び ― ここがルート別の肝
この章で一番重要なのがツール選びです。ここだけは、第1章で選んだルートによって主武器がはっきり分かれます。まず1つ、主力ツールを決めましょう。
「こんなアプリが欲しい」とチャットで伝えると、画面もコードも自動生成。v0・Bolt・Lovableが代表格。プレビューを見ながら「ここをこう直して」と会話するだけで形になります。
コードを直接扱いつつ、実装・修正・テストをAIに任せて高速化。Claude Code・Cursor・GitHub Copilot・Codexが主力。拡張・保守が効くので、長く育てるプロダクト向き。
比較 → AIコーディングツール比較
入門ルートの人は、まずアプリビルダーの比較記事を見て1つ選び、この節は読み飛ばして設計・UIに進んでOKです。実践ルートの人は、次の節でAIエディタを詳しく比べます。
実践ルート：AIエディタを比べる
実践ルートの主武器・AIエディタは、いま4つが定番です。どれも王道なので、正直どれを選んでも失敗しません。それぞれの得意分野だけ押さえて、ピンときたものを1つ選びましょう。
対話しながら複数ファイルをまたいで自律的に実装・修正。設計から実装、テストまで任せる大きな作業に強い。コマンドライン上で動く。
使い慣れたVS Code風の画面で、コードを見ながらAIと編集。補完・チャット・自動修正が一体。初めてのAIエディタに最適。
VS Codeに組み込む王道。書きかけのコードを賢く補完。既存の開発環境をあまり変えずにAIを足したい人向け。
タスクを渡すと裏で自律的に実装を進めるエージェント型。複数の作業を並行で回したい上級者向けの選択肢。
🧭 迷ったらこう選ぶ。 エディタ画面で手元を見ながら進めたいならCursor（Cursorとは？）、対話でまとめて任せたいならClaude Code。この2つのどちらかで始めれば、まず外しません。詳しい違いはCursor vs Claude Code vs Copilot vs Codex 比較で。
ツールは1つに絞って使い込むのがコツです。あれこれ試すより、まず1つを相棒として手に馴染ませる。操作の大半は「日本語で頼む」だけなので、後で別のツールに乗り換えるコストも小さいです。
設計・UI ― 凝りすぎない
アプリの見た目――ロゴ・配色・画面レイアウト（UI）も、いまはAIで用意できます。ただし準備フェーズでは「凝りすぎない」が絶対のルールです。デザインに凝り出すと無限に時間が溶けます。MVP段階では「ダサくなければ合格」くらいの割り切りでちょうどいい。
ロゴ・配色・画面イメージを言葉から生成。デザイン知識ゼロでも「清潔感のある青系で」と頼むだけ。比較はAIデザインツール比較へ。
Claude Designのように、デザインとコードを行き来できるツールも。作った見た目をそのまま実装に落とせる。
自作にこだわらず、既存のUIテンプレートやCSSフレームワーク（Tailwindなど）に乗るのも賢い。整った見た目が一瞬で手に入る。
⚠️ ピクセル単位の調整で1日を溶かさない。 ボタンの角丸を何度も微調整したくなったら要注意のサインです。デザインは「配色を2〜3色決める・余白をとる・フォントを整える」の3点だけ守れば、素人っぽさは十分に消えます。細部の作り込みは、公開して使われ始めてからで遅くありません。
入門ルートのアプリビルダーは、UIも自動で整えてくれるので、この節はほぼAI任せでOKです。実践ルートの人も、まずAIに叩き台を出させて、気になる箇所だけ直す進め方が最速です。ゼロから自分でデザインしようとしないこと。
環境の最小構成
最後は開発環境です。ここも「アカウント登録程度でOK」と考えてください。昔のように、何時間もかけてローカルに開発環境を構築する必要は、多くの場合ありません。すべて無料枠から始められます。
選んだAIビルダー／AIエディタのアカウントを作る。まず無料プランで試し、足りなければ課金。
実践ルートならGitHubのアカウントを。コードの保存・バージョン管理の定番。無料で使える。
Vercel や Netlify、Supabase など。無料枠が手厚い。今は名前を知る程度で、公開の章で詳しく扱う。
✅ 「今いる分」だけ用意する。 ドメイン購入や有料サーバー、決済サービスの契約はまだ不要です。作る段階で必要なのは「ツール」と「コード置き場」だけ。公開・収益化に必要なものは、それぞれの章になってから、必要になった分だけそろえれば十分です。先回りして課金しないこと。
ツールを登録したら、多くのAIエディタやビルダーは「新規プロジェクトを作る」ボタンを押すだけで、必要なファイル一式を自動で用意してくれます。環境構築で詰まったら、その内容をそのままAIに貼り付けて聞けば、たいてい解決します。準備の段階から、AIはもうあなたの相棒です。
この章のまとめ
- 技術は王道を選ぶ。AIが書き慣れた構成＝実装が楽＝完成する。迷ったらAIに提案させてよい。
- ツールはルート別に1つ。🌱入門＝AIアプリビルダー（v0/Bolt/Lovable）、🔧実践＝AIエディタ（Claude Code・Cursor・Copilot・Codex）。
- デザインは凝りすぎない。AIで叩き台を作り、配色・余白・フォントの3点だけ整えれば合格。
- 環境は最小構成。アカウント登録程度でOK、すべて無料枠から。先回りして課金しない。
土台は整いました。次はいよいよ、AIと一緒に手を動かして実際にプロダクトを形にするフェーズです。小さく動かして直すを高速で回す――その具体的なやり方を、次の第4章「AIと一緒に作る」で見ていきましょう。