Claude Codeで個人開発アプリを作る実践チュートリアル【2026年版】

Claude Codeで個人開発する全体像 — 従来開発との決定的な違い

個人開発のパラダイムシフト — 「書く」から「指示する」へ

従来の個人開発では、コードの大部分を自分の手で1行ずつ書く必要がありました。アイデアがあっても、実装に時間がかかりすぎて挫折する——これがShiftBの受講生データでも最も多い脱落パターンでした（全体の43%が「実装フェーズで挫折」と回答）。

Claude Codeを使った開発では、この構造が根本から変わります。開発者の仕事は「コードを書く」から「AIに的確な指示を出し、生成されたコードをレビューする」へとシフトします。

Claude Codeが個人開発に最適な5つの理由

AIコーディングツールは複数ありますが、Claude Codeが個人開発に特に向いている理由は明確です。

1. ターミナルベースで高速：IDEを開かず、コマンドラインから直接操作。余計なUIがなく、指示→生成→確認のサイクルが最速
2. プロジェクト全体を理解する：リポジトリ全体のコードを読み込み、ファイル間の依存関係を把握した上でコードを生成
3. CLAUDE.mdでプロジェクトルールを定義できる：コーディング規約・技術スタック・命名規則をファイルに書くだけで、AIが一貫したコードを生成
4. Git連携が標準：コミット・ブランチ作成・PR作成まで、Claude Codeから直接実行可能
5. 拡張性（MCP）：外部サービス（Slack、Notion、DBなど）との連携をプラグイン形式で追加可能

開発フロー全体像

Claude Codeを活用した個人開発は、以下の6ステップで進みます。この記事では各ステップを実際のコマンド・プロンプトとともに解説していきます。

事前準備 — Claude Codeのセットアップと最適な開発環境

必要な環境と前提条件

Claude Codeで個人開発を始めるために必要なものは以下のとおりです。

• Node.js 18以上：Claude CodeはNode.jsで動作します
• Git：バージョン管理は必須
• Anthropicアカウント：Max（月額200ドル）またはAPI利用（従量課金）
• ターミナル：macOSのTerminal、iTerm2、Windows TerminalなどCLIが使える環境

料金プランは、個人開発者にはMax（月額$100または$200プラン）が圧倒的におすすめです。API従量課金だと1つのアプリ開発で$30〜80程度かかることが多く、月に複数プロジェクトを進めるならMaxの方がコスパが良いケースがほとんどです。

インストール手順（5分で完了）

Claude Codeのインストールはnpmコマンド1つで完了します。ターミナルを開いて以下を実行してください。

# Claude Codeをグローバルインストール
npm install -g @anthropic-ai/claude-code

# インストール確認
claude --version

# 認証（ブラウザが開く）
claude

初回起動時にブラウザが開き、Anthropicアカウントでの認証を求められます。ログインすれば準備完了です。

最適な開発環境の構成

ShiftBの受講生142名のデータから、開発効率が最も高かった環境構成をご紹介します。

ShiftBの受講生データでは、この構成を採用した受講生のリリース率は84%、それ以外の構成では62%でした。技術スタックの選定は開発の成否を大きく左右します。

プロジェクトの初期化

Next.jsプロジェクトを作成し、Claude Codeを起動するまでの手順です。

# Next.jsプロジェクトを作成
npx create-next-app@latest my-app --typescript --tailwind --app --src-dir

# プロジェクトディレクトリに移動
cd my-app

# Claude Codeを起動
claude

Claude Codeが起動したら、プロジェクトのディレクトリ構造を自動的に認識します。ここからが本番です。

CLAUDE.mdで開発を成功させる — プロジェクト設計の極意

CLAUDE.mdとは何か

CLAUDE.mdは、Claude Codeがプロジェクトを理解するための「設計書」です。プロジェクトのルート（または.claude/ディレクトリ）に配置すると、Claude Codeがすべてのプロンプト実行時にこのファイルを参照します。

CLAUDE.mdの有無で、AIの出力品質は劇的に変わります。ShiftBの受講生データでは、CLAUDE.mdを適切に設定した受講生のコード品質スコア（レビュー通過率）は78%、未設定の受講生は41%でした。つまり、CLAUDE.mdの設定だけでコード品質が約2倍になります。

実践的なCLAUDE.mdテンプレート

以下は、僕がShiftBのプロダクト開発で実際に使っているCLAUDE.mdのテンプレートです。これをベースにカスタマイズしてください。

# プロジェクト概要
タスク管理Webアプリ。個人ユーザーがタスクを作成・管理・完了できるシンプルなサービス。

# 技術スタック
- Next.js 15（App Router）
- TypeScript（strictモード）
- Tailwind CSS
- Supabase（認証・DB・RLS）
- Vercelでホスティング

# コーディングルール
- コンポーネントはアロー関数で定義（export const Component = () => {}）
- Tailwindのクラスは gap-10 形式（gap-[40px] はNG）
- Server ComponentsをデフォルトとしてClient Componentsは最小限に
- APIルートは app/api/ 配下に配置
- 日本語コメントOK（ただし変数名・関数名は英語）

# ディレクトリ構成
- src/app/ - ページ・レイアウト
- src/components/ - 共通コンポーネント
- src/lib/ - ユーティリティ・DB接続
- src/types/ - TypeScript型定義

# テスト方針
- 重要なビジネスロジックにはユニットテスト必須
- UIテストはPlaywrightでE2Eテスト
- テストファイルは __tests__/ ディレクトリに配置

CLAUDE.md作成の5つのポイント

1. 技術スタックを明示する：使用するフレームワーク・ライブラリのバージョンまで書く
2. コーディング規約を具体的に：「クリーンに書く」ではなく「アロー関数で定義」のように具体的に
3. ディレクトリ構成を示す：ファイルをどこに配置するかのルールを明確に
4. 禁止事項を書く：「anyは使わない」「console.logを残さない」など、やってほしくないことも明示
5. 更新し続ける：開発が進むにつれてルールは増える。随時追記する

よくある失敗パターン

実践チュートリアル — タスク管理アプリを0からデプロイまで

作るもの：シンプルなタスク管理アプリ

ここからは実際にClaude Codeを使って、タスク管理アプリを構築していきます。最終的な機能は以下のとおりです。

• ユーザー認証（Supabase Auth）
• タスクのCRUD（作成・表示・更新・削除）
• タスクのステータス管理（未着手・進行中・完了）
• レスポンシブ対応
• Vercelへのデプロイ

Step 1: プロジェクト初期化とCLAUDE.md作成（15分）

まず、Claude Codeを起動し、プロジェクトの骨格を作ります。Claude Codeのプロンプトに以下のように入力してください。

> このプロジェクトはタスク管理Webアプリです。
  Next.js 15（App Router）、TypeScript、Tailwind CSS、Supabaseを使います。
  以下のCLAUDE.mdを作成してください。
  [上記のCLAUDE.mdテンプレートを貼り付け]

Claude CodeはCLAUDE.mdを作成した後、次のアクションを提案してくれます。ここがポイントで、最初から「全部作って」とは言わず、1つずつ進めることが重要です。

Step 2: Supabaseのセットアップ（20分）

次に、Supabaseのプロジェクトを作成し、データベーステーブルを定義します。

> Supabaseのセットアップを行います。
  以下のテーブルを作成するマイグレーションファイルを生成してください。

  - tasksテーブル
    - id: uuid（主キー）
    - user_id: uuid（auth.usersへの外部キー）
    - title: text（必須）
    - description: text（任意）
    - status: text（'todo' | 'in_progress' | 'done'、デフォルト 'todo'）
    - created_at: timestamptz
    - updated_at: timestamptz

  RLS（Row Level Security）を有効にし、
  ユーザーが自分のタスクのみ操作できるポリシーも作成してください。

Claude Codeはマイグレーションファイルを生成し、RLSポリシーも適切に設定してくれます。ここで重要なのは、RLSのポリシーを必ず確認することです。AIが生成したセキュリティルールは、意図通りかどうか人間の目でチェックしてください。

Step 3: 認証機能の実装（30分）

次に、Supabase Authを使ったログイン・サインアップ機能を実装します。

> Supabase Authを使った認証機能を実装してください。
  - メールアドレス + パスワードでのサインアップ
  - ログイン・ログアウト
  - 認証状態に応じたページ表示の切り替え
  - 未認証ユーザーはログインページにリダイレクト
  - shadcn/uiのコンポーネントを使ったフォームUI

Claude Codeは通常、以下のファイルを一括で生成します。

• src/lib/supabase/client.ts — ブラウザ用クライアント
• src/lib/supabase/server.ts — サーバー用クライアント
• src/app/login/page.tsx — ログインページ
• src/app/signup/page.tsx — サインアップページ
• src/middleware.ts — 認証チェックミドルウェア

Step 4: タスクCRUDの実装（1〜2時間）

認証ができたら、いよいよタスクのCRUD機能を実装します。ここがアプリの核心部分です。

> タスクのCRUD機能を実装してください。
  - タスク一覧表示（ステータスでフィルタリング可能）
  - タスク作成モーダル
  - タスクのステータス変更（ドラッグ&ドロップ or ボタンクリック）
  - タスク削除（確認ダイアログ付き）
  - Server Actionsを使ったデータ操作
  - 楽観的UI更新（useOptimistic）

プロンプトのコツ：機能を1つずつ指示するのではなく、関連する機能をまとめて指示する方が、ファイル間の整合性が保たれます。ただし、あまりに多くの機能を一度に依頼すると精度が落ちるので、3〜5機能程度を目安にまとめてください。

Step 5: UIの仕上げとレスポンシブ対応（30分）

> UIを以下の方針でブラッシュアップしてください。
  - モバイルファーストのレスポンシブデザイン
  - ダークモード非対応（ライトモードのみ）
  - shadcn/uiのCardコンポーネントでタスクカードを統一
  - ローディング状態のスケルトンUI
  - 空状態のイラスト付きメッセージ

Step 6: Vercelへのデプロイ（15分）

最後に、Vercelへデプロイします。Claude Codeから直接Gitの操作も可能です。

> デプロイの準備をしてください。
  - 環境変数の一覧を整理（.env.example作成）
  - ビルドエラーがないか確認
  - 不要なconsole.logの削除
  - package.jsonのscriptsを確認

ビルドが通ったら、GitHubにpushしてVercelと連携します。Vercelのダッシュボードで環境変数を設定し、デプロイ完了です。

ここまでの所要時間の目安：慣れている人で3〜5時間、初めてClaude Codeを使う人でも1〜2日あれば完成できます。

開発速度を最大化する7つの実践テクニック

テクニック1: 「Plan Mode」で設計してから実装する

Claude CodeにはPlan Modeという機能があります。Shift+TabキーでPlan Modeに切り替えると、Claude Codeはコードを生成せずに設計だけを提案します。

複雑な機能を実装する前に、まずPlan Modeで「どのファイルをどう変更するか」の計画を立てさせ、問題がなければ通常モードに切り替えて実装させる。この2ステップが開発速度を大きく上げます。

テクニック2: プロンプトに「制約」を入れる

良いプロンプトと悪いプロンプトの違いは「制約の明確さ」にあります。

テクニック3: エラーは全文をコピペする

開発中にエラーが出たら、エラーメッセージの全文をClaude Codeに貼り付けてください。「動きません」「エラーが出ます」だけでは、AIは原因を特定できません。

> 以下のエラーが出ました。原因と修正方法を教えてください。

  [エラーメッセージ全文をここに貼り付け]

ShiftBの受講生データでは、エラー全文を貼り付けた場合の解決率は92%、曖昧な報告の場合は45%でした。

テクニック4: Git Worktreeで並行開発

Claude CodeはGit Worktree機能を使って、メインブランチを保ったまま別ディレクトリで実験的な開発を進めることができます。「この機能を試したいけど、今のコードを壊したくない」というときに最適です。

テクニック5: /compactでコンテキストを整理

長い会話を続けていると、Claude Codeのコンテキストウィンドウが埋まってきます。/compactコマンドを使うと、これまでの会話を要約してコンテキストをリフレッシュできます。2〜3時間に1回程度の実行をおすすめします。

テクニック6: カスタムスラッシュコマンドを作る

繰り返し使うプロンプトは、.claude/commands/にMarkdownファイルとして保存しておくと、スラッシュコマンドとして呼び出せます。

# .claude/commands/review.md
コードレビューを行ってください。以下の観点でチェック：
1. TypeScriptの型安全性
2. RLS（Row Level Security）の漏れ
3. パフォーマンス（不要な再レンダリング）
4. アクセシビリティ（aria属性、キーボード操作）

これで/reviewと入力するだけで、毎回同じ観点でレビューを実行できます。

テクニック7: 画像やスクリーンショットを活用する

Claude Codeは画像を理解できます。UIの修正依頼は、スクリーンショットを撮って「このボタンの位置を左に寄せて」「この部分のフォントサイズを大きくして」と伝えると、テキストだけの説明より格段に正確な修正が得られます。

よくあるトラブルと解決法 — 受講生142名のつまずきデータ

つまずきランキングTOP5

ShiftBの受講生142名がClaude Codeで個人開発をする中で、最もつまずいたポイントTOP5をデータとともにご紹介します。

「AIが生成したコードが動かない」ときの対処フロー

AIが生成したコードがうまく動かないことは日常茶飯事です。重要なのは、パニックにならず以下のフローで対処することです。

1. エラーメッセージを全文コピーし、Claude Codeに貼り付ける
2. 「原因を分析して」と依頼し、まず原因を特定させる
3. 修正案が提示されたら差分をレビューしてから適用
4. 同じエラーが3回以上繰り返される場合はアプローチの変更を指示する（「別の方法で実装してください」）
5. それでも解決しない場合は新しいセッションで、問題のファイルだけを指定してやり直す

セキュリティの落とし穴

Claude Codeは優れたコード生成能力を持ちますが、セキュリティ面では人間のチェックが不可欠です。特に個人開発で注意すべきポイントは以下の3つです。

• RLSポリシーの検証：AIが生成したRLSポリシーが、意図しないデータへのアクセスを許可していないか確認
• APIキーの露出：クライアントサイドのコードにAPIキーやシークレットが含まれていないか確認
• 入力値のバリデーション：ユーザー入力のサニタイズが適切に行われているか確認

開発コストと時間 — リアルなデータで徹底比較

実際のプロジェクト別コストデータ

僕がClaude Codeで開発した直近5つのプロジェクトのコストと時間を公開します。すべてMaxプラン（月額$200）での利用です。

Maxプラン（月額$200）で月2〜3プロジェクトを進められることを考えると、API従量課金よりもMaxプランの方がコスパが良いケースがほとんどです。

従来開発との時間比較

同等の機能を持つアプリを、Claude Codeあり/なしで開発した場合の時間比較です（ShiftB受講生の平均値）。

ランニングコストの全体像

個人開発でClaude Codeを使う場合の月額コストの目安です。

月3万円程度の投資で、従来の3〜5倍のスピードで開発できる。時給換算で考えれば、圧倒的にROIの高い投資です。

よくある質問（FAQ）

Q1. プログラミング完全未経験でもClaude Codeで個人開発できますか？

完全未経験だと難しいです。Claude Codeが生成するコードを「レビューする力」が必要なため、最低限のHTML/CSS/JavaScript/TypeScriptの基礎知識（1〜2ヶ月程度の学習）は必要です。ShiftBの受講生データでは、基礎学習を経てからClaude Codeを導入した受講生のリリース率は84%、基礎なしで始めた受講生は38%でした。

Q2. Claude CodeとCursor、個人開発にはどちらがおすすめですか？

結論から言うと、両方を使い分けるのが最適です。Claude Codeは「大きな機能の実装・ファイルの一括生成・Git操作」に強く、Cursorは「既存コードの細かい修正・リアルタイムの補完・コードリーディング」に強い。最初はどちらか1つから始め、慣れたら併用をおすすめします。

Q3. Claude Codeの利用料金が高く感じます。元は取れますか？

Maxプラン月額$200（約3万円）は確かに安くはありません。しかし、従来2〜3週間かかっていた開発が3〜5日で終わることを考えると、時間あたりの価値は圧倒的に高いです。副業やフリーランスで個人開発するなら、浮いた時間をマーケティングや営業に充てることで十分にペイできます。

Q4. AIが生成したコードの品質は大丈夫ですか？本番環境で使えますか？

CLAUDE.mdを適切に設定し、生成されたコードをレビューする前提であれば、本番環境で十分使えるレベルです。ただし、セキュリティ面（RLSポリシー、APIキー管理、入力値バリデーション）は必ず人間の目でチェックしてください。ShiftBの受講生が開発したサービスの中にも、Claude Codeで生成したコードを本番運用して月数万円の収益を上げているものがあります。

Q5. Claude Codeで作れないアプリはありますか？

Claude Codeはテキストベースのコーディングツールなので、コードで表現できるものは基本的にすべて作れます。Webアプリ、API、CLI、スクリプトなど。ただし、ネイティブモバイルアプリ（Swift/Kotlin）は可能ですが、Claude CodeよりもCursorの方が開発体験が良い場合があります。個人開発であれば、Webアプリ（Next.js + PWA）で十分なケースがほとんどです。

Q6. セッションが長くなると精度が落ちる気がします。対策はありますか？

気のせいではありません。Claude Codeのコンテキストウィンドウが埋まると、古い情報が圧縮され、精度が低下する可能性があります。対策は3つです。(1) /compactコマンドで定期的に要約する。(2) 大きな機能変更は新しいセッションで始める。(3) CLAUDE.mdに重要なルールを書いておくことで、セッションが変わっても一貫性を保つ。

Q7. チーム開発でもClaude Codeは使えますか？

はい、使えます。CLAUDE.mdをGitリポジトリにコミットしておけば、チームメンバー全員が同じルールでClaude Codeを使えます。実際にShiftBの受講生でも、2〜3人のチーム開発でClaude Codeを活用しているケースがあります。ただし、コンフリクトを防ぐためにブランチ戦略をCLAUDE.mdに明記することをおすすめします。