AIと会話しながらアプリを作れる環境が急速に整ってきました。以前であれば、業務アプリを作ろうと思ったら、プログラミング言語を学ぶか、システム開発会社へ依頼する必要がありました。

しかし現在は、Google AI Studioなどを使い、「このような画面を作ってください」「入力された内容をもとに診断結果を表示してください」「結果をPDFにしてください」と会話しながら、実際に動くアプリを作ることも可能になっています。

Google AI StudioのBuild modeでは、自然言語からWebアプリを生成でき、現在はクライアント側だけでなく、Node.jsを利用したサーバーサイド処理、外部データベースとの接続、認証などを含むフルスタック開発にも対応しています。生成したコードはGitHubへ出力したり、既存のGitHubリポジトリを取り込んだりすることもできます。

ここまで聞くと、「それならGoogle AI Studioだけでアプリを完成させればよいのでは？」と思うかもしれません。実際、それで完成するアプリもあります。

一方で、アプリが大きくなってくると、「この表示だけ直したいのに、どのコードを変更すればよいのか分からない」「修正を頼んだら、関係ない機能まで変わってしまわないか心配」「昨日まで動いていたのに、どの変更で壊れたのか分からない」「AIにどこまで触らせてよいのか判断できない」といった問題が起きます。

こうした段階で活用しやすいのがClaude Codeです。

この記事で重要なのは、Claude Codeにプログラムを丸投げすることではありません。既存のアプリを調べてもらい、変更範囲を決め、小さく修正し、結果を確認する。この工程をAIと一緒に進めることです。

特に非エンジニアがClaude Codeでアプリ開発を進める場合、「調べる → 範囲を決める → 直す → 確認する」という順番を守ることが、非常に重要になります。

この記事では、Google AI Studio、Claude Code、GitHubをどのように組み合わせればよいのかを、実際の開発作業をイメージできる形で解説します。

Claude Codeは「ゼロから作る」だけでなく既存アプリの修正工程で使える

Claude Codeについて調べると、「ターミナルから使えるAIコーディングツール」「コードを書いてくれるAI」といった説明を見かけることがあります。もちろん、それも間違いではありません。

しかし、非エンジニアがClaude Codeをアプリ開発へ活用するときに、もっと重要なのは、すでに存在しているコードを読んでもらえることです。

アプリ開発では、ゼロから作る工程だけではなく、不具合の原因を探す、既存機能の仕組みを理解する、変更すべきファイルを特定する、一部分だけ修正する、修正による影響範囲を確認する、テストするといった作業が何度も発生します。

Claude Codeは、こうした既存コードを扱う工程で非常に活用しやすいツールです。

既存コード全体を読ませて問題の場所を探す

非エンジニアがアプリを修正するときに最初に困るのは、「どこを直せばよいか分からない」という問題です。

例えば、診断アプリを作ったとします。ユーザーが質問に回答し、最後に診断結果が表示される仕組みです。ところが、「結果画面に表示される点数がおかしい」という問題が発生しました。

プログラムを理解している人であれば、診断ロジックが書かれているファイルを探せるかもしれません。しかし非エンジニアには、質問画面のファイルなのか、診断ロジックなのか、APIなのか、データベースなのか、表示処理なのか判断できません。

ここでClaude Codeに「点数を直してください」といきなり依頼するのではなく、まず「この点数がどのような処理で計算され、最終画面へ表示されているか調べてください」と依頼します。これだけでAIへの仕事の渡し方が大きく変わります。

修正前に「どこを直す必要があるか」を調べてもらう

Claude Codeには、コードを変更せず、コードベースを調査して計画を立てる用途に向いたPlanモードがあります。公式ドキュメントでは、Planモードでは読み取りを中心にコードベースを探索し、変更前の調査に利用できるとされています。

非エンジニアにとって、この考え方は非常に重要です。AIに「まず調べてください」と依頼するのと、「とにかく直してください」と依頼するのでは、開発リスクが大きく変わります。

まず現在の仕組みを理解し、次に変更候補を出し、その後に変更範囲を決める。これを基本にしましょう。

Google AI StudioとClaude Codeはどちらを使えばよい？

Google AI StudioとClaude Codeは、どちらもAIを活用してアプリ開発を進められます。そのため、「結局、どちらを使えばよいのですか？」という疑問が出てきます。

結論から言えば、どちらか一つを選ぶ必要はありません。工程によって使い分ける方が分かりやすいでしょう。

Google AI Studioはアイデアを素早く形にするときに使いやすい

Google AI StudioのBuild modeでは、「こんなアプリを作りたい」と自然言語で伝えることで、必要なファイルを生成し、プレビューで動作を確認しながら開発できます。

現在は複数ファイルを扱うフルスタック開発にも対応しており、サーバーサイドのNode.js処理、npmパッケージ、シークレット管理、外部データベース接続なども扱えます。

つまり、「Google AI Studioは簡単な試作品しか作れない」と考えるのは正確ではありません。かなり本格的なアプリまで構築できます。

それでも、非エンジニアにとって特に便利なのは、画面を見ながらアイデアを形にできることです。例えば、「質問を1問ずつ表示する診断アプリを作りたい」「最後に診断結果を表示したい」「結果をPDFで出力したい」といった要望を、完成形を見ながら調整できます。

Claude Codeはコードを調べながら修正するときに活用する

一方、アプリがある程度できたあと、「この処理はどうなっているのか」「なぜここだけ動かないのか」「この機能に関係するファイルはどれか」という問題が増えてきます。

このような段階では、Claude Codeを使い、コード全体を調べながら修正する方法が使いやすくなります。特に、既存コードの理解、不具合の原因調査、複数ファイルの関係確認、修正候補の整理、テスト、Gitを使った変更確認といった工程との相性がよいでしょう。

どちらか一つではなく工程によって使い分ける

例えば、次のように整理すると分かりやすくなります。

大切なのは、Google AI Studioで作ったらClaude Codeへ完全に乗り換えるという考え方ではありません。必要に応じて工程ごとに使い分けるということです。

Claude Codeに既存コードを修正させる基本の5ステップ

ここからがこの記事で最も重要な部分です。非エンジニアがClaude Codeを使う場合、いきなりコードを変更させないことをおすすめします。

基本は次の5ステップです。

1. 調査する
2. 原因と変更候補を確認する
3. 変更範囲を決める
4. 修正する
5. 差分と動作を確認する

ステップ1｜まずコード全体を調査させる

最初は、コードを書き換えさせません。例えば、次のように依頼します。

まだコードは変更しないでください。
現在のプロジェクトを調査してください。
今回、診断結果画面に表示される点数がおかしい問題を確認したいです。
点数計算から結果表示までに関係しているファイルと処理の流れを特定してください。
非エンジニアでも分かる言葉で説明してください。

この段階の目的は、直すことではなく、現在地を知ることです。

Claude CodeのPlanモードを使えば、ファイルを変更せずに調査を進める運用もしやすくなります。

ステップ2｜原因と変更候補を出してもらう

次に、原因候補を整理させます。

現在のコードはまだ変更しないでください。
調査した内容をもとに、この問題が発生している原因候補を優先順位順に整理してください。
それぞれについて、どのファイルを変更する可能性があるのかも教えてください。

ここで重要なのは、原因が分からないまま修正へ進まないことです。AIが修正案を出しても、まず「どのファイルを触る予定なのか」を確認します。

ステップ3｜変更してよい範囲を指定する

原因が見えてきたら、変更範囲を決めます。例えば、次のように伝えます。

今回変更してよいのは、診断結果の計算と結果表示に関係するファイルだけです。
ログイン、顧客データ保存、PDF生成、メール送信の処理は変更しないでください。

AIに「何をしてほしいか」だけでなく、「何をしてはいけないか」も伝えることが重要です。

ステップ4｜一つずつ修正させる

変更範囲を決めたら、ようやく修正します。ただし、「見つかった問題を全部直してください」とはしません。できるだけ一つずつ進めます。

まず点数計算部分だけ修正してください。
結果画面のデザインやPDF生成処理にはまだ触らないでください。
修正後、変更したファイル名と変更内容を説明してください。

一度の変更を小さくすると、問題が起きても原因を追いやすくなります。

ステップ5｜変更後に差分と影響範囲を確認する

コードが変更されたら、「直りました」だけで終わらせません。次のように確認します。

今回変更したファイルをすべて一覧にしてください。
それぞれについて、
1. 何を変更したか
2. なぜ変更したか
3. 既存機能へ影響する可能性があるか
を説明してください。

今回変更してはいけないと指定したログイン、PDF生成、メール送信、データ保存に変更が入っていないことを確認してください。

この「変更後の説明」は、コードを読めない非エンジニアにとって特に重要です。

「触ってよい場所」と「触ってはいけない場所」をAIへ伝える

AIアプリ開発では、「何を作りたいか」を伝えることが重要です。しかし、既存アプリの修正では、それと同じくらい、「どこまで触ってよいか」を伝えることが重要になります。

例えば、「結果画面を少し変えたい」だけだったとします。ところが、AIが最適化のために関連コードも整理しようとすると、データの構造、API、認証、別画面、共通部品まで変更される可能性があります。

変更自体が間違いとは限りません。しかし、変更箇所が増えるほど、「何が原因で動かなくなったのか」が分かりにくくなります。

変更対象を明示する

まず、「今回は何を変更するのか」を具体的に伝えます。

今回の目的は、結果画面に表示されている説明文を変更することです。
結果画面の表示に直接関係するコードのみ変更してください。

変更禁止範囲を明示する

さらに重要なのが禁止範囲です。

ログイン機能、データベース構造、診断ロジック、PDF生成、メール送信機能は変更しないでください。

「ここだけ直してください」よりも、「ここは直してよい。しかし、ここから先は触らない」と境界を伝える方が明確です。

必要になった場合も勝手に変更させない

指定範囲外のファイルを変更する必要があると判断した場合は、変更を実行しないでください。
なぜ変更が必要なのか説明して、私の確認を待ってください。

これだけでも、AIとの開発コミュニケーションは大きく変わります。

プロンプトだけでなくClaude Codeの権限設定も使う

ただし重要なのは、文章で「触らないで」と指示するだけに依存しないことです。

Claude Codeには、ファイル編集やコマンド実行などに対する権限設定があります。公式ドキュメントでは、読み取りのみを基本とするモード、編集前に確認するモード、編集を自動承認するモードなどが用意されています。また、細かなpermission ruleによって特定の操作を許可・制限できます。

重要な開発では、プロンプトによる指示とツール側の権限制御を組み合わせると考えてください。

非エンジニアほど「いきなり直して」と頼まない

AIへアプリ開発を頼むとき、ついやってしまうのが、「動かないので直してください」という依頼です。

しかし既存アプリが大きくなるほど、この指示は危険になります。なぜなら、「動かない」という現象だけでは、AIがどこを変更するのか分からないからです。

危険な指示例「動かないので直してください」

例えば、「PDFが出ないので直してください」だけでは、PDF生成処理、結果データ、ボタン、API、ファイル保存処理、ブラウザ側処理など、さまざまな箇所が対象になる可能性があります。

良い指示は「調査→説明→提案→修正」の順番

PDF生成ボタンを押してもPDFが出力されません。
まず原因を調査してください。
まだコードは変更しないでください。
PDF生成に関係している処理を特定し、原因候補と修正案を説明してください。

その回答を見てから、次のように進めます。

では、その中のPDF生成処理だけ修正してください。
診断結果データの構造は変更しないでください。

これが「調査 → 説明 → 提案 → 修正」です。

一度に複数の問題を修正させない

例えば、PDFが出ない、メールが届かない、スマホ表示がおかしい、管理画面の並びがおかしいという4つの問題があったとします。

一度に「全部直してください」と頼むより、1つ修正 → 確認 → GitHubへ記録 → 次を修正、と進める方が安全です。

AIは非常に速くコードを変更できます。だからこそ、人間側が意識して変更単位を小さくする必要があります。

実務で使えるClaude Codeへの指示テンプレート

ここでは、非エンジニアでも使いやすい指示例を紹介します。そのままコピーするのではなく、自分のアプリに合わせて目的や機能名を変更してください。

不具合を調査するとき

現在、〇〇という問題が発生しています。
まずコードは変更しないでください。
この問題に関係するファイルと処理を調査してください。
原因として考えられることを優先順位順に整理してください。
修正が必要になりそうなファイルも一覧にしてください。
私はプログラミングの専門家ではないため、専門用語はできるだけかみ砕いて説明してください。

画面だけ修正するとき

今回は〇〇画面の表示だけ変更します。
〇〇画面のレイアウトと表示文言に関係するファイルのみ変更してください。
API、データベース、認証、計算ロジックには触らないでください。
指定外の変更が必要だと思った場合は、変更せず理由を説明してください。

新しい機能を追加するとき

既存アプリへ〇〇機能を追加したいです。
まだ実装しないでください。
まず現在の構成を調査して、
・どのファイルに関係するか
・新しく必要になるファイル
・既存機能への影響
・データベース変更の必要性
を整理してください。
その内容を確認してから実装します。

既存機能を壊していないか確認するとき

今回の修正によって既存機能へ影響がないか確認してください。
特に、
・ログイン
・データ保存
・PDF生成
・メール送信
の4つについて、変更前と同様に動作するか確認してください。
コード上で確認したことと、実際に人間が操作して確認すべきことを分けて教えてください。

変更内容を非エンジニア向けに説明してもらうとき

今回変更したファイルを一覧にしてください。
各ファイルについて、
・何を変更したのか
・なぜ変更したのか
・何に影響するのか
を専門用語をできるだけ使わず説明してください。
最後に、私がブラウザから実際に操作して確認すべき項目をチェックリストにしてください。

この最後の指示は特におすすめです。プログラムが分からなくても、「何を実際に操作して確認すればよいのか」は人間側でも判断できます。

なぜClaude Codeでのアプリ開発にGitHubが重要なのか

AIを使ってアプリを開発する場合、GitHubの重要性はむしろ高くなります。

「自分はプログラマーではないからGitHubは必要ない」と思うかもしれません。しかし逆です。コードを細かく読めない人ほど、いつ、何を変更したのかを残しておく仕組みが重要になります。

AIは短時間に複数ファイルを変更できる

人間がコードを修正する場合、1時間かけて数ファイルを変更することがあります。AIなら、その変更を数分で行う可能性があります。これは大きなメリットです。

一方で、変更スピードが速い分、どこが変わったのか人間が追いつけなくなるという問題も起きます。そのためGitHubを使います。

GitHubなら「何を変更したか」を確認できる

GitHubでは、commitによって一つまたは複数ファイルへの変更を記録できます。さらに、commitには固有のSHA、つまりそのcommitを識別するIDが割り当てられます。

例えば、正常動作していた時点 → PDF機能を修正 → メール機能を修正 → 管理画面を修正、という履歴が残っていれば、「メール修正後から問題が起きた」と追いやすくなります。

diffで変更前と変更後を比較できる

GitHubではcommitやbranchなどを比較し、どこが変わったのか確認できます。この変更差分がdiffです。

非エンジニアがすべてのコードを理解する必要はありません。それでも、「3ファイルだけ直す予定だったのに20ファイル変更されている」と分かれば、「ちょっと変更範囲が広すぎないですか？」とAIへ質問できます。これだけでもGitHubを使う意味があります。

「動いていた時点」を残してからAIに修正させる

特に覚えておいてほしいのが、正常に動いている状態を残してから、次の修正をするという考え方です。

例えば、「診断結果まで正常に動いた」という状態になったらcommitします。そのあとPDF生成を追加し、PDF生成が正常に動いたら、またcommitします。次にメール送信を追加します。

このように小さく区切ると、何か問題が起きたとき、「どの時点までは正常だったか」を特定しやすくなります。

GitHubは単なるコード保管場所ではありません。AI開発においては、正常だった状態を残しておく安全装置と考えると理解しやすいでしょう。

Google AI Studio→GitHub→Claude Codeの実践ワークフロー

ここまでの内容を、実際の流れにまとめます。

1．Google AI Studioでアプリの原型を作る

まず、「何を作りたいのか」を形にします。例えば診断アプリなら、入力 → 質問 → 診断 → 結果表示まで作ります。

この段階では完成を求めすぎません。まず一連の流れが動くことを優先します。

2．動くところまで確認する

次に、自分で実際に操作します。入力できるか、次へ進めるか、結果が出るか、データが正しいかを確認します。

AIが「完成しました」と言っても、人間が操作して確認することが重要です。

3．GitHubへ保存する

Google AI Studioは、生成したコードをGitHubへpushして、既存の開発・デプロイ工程へつなげる機能を提供しています。またGitHubの既存プロジェクトをBuild modeへ取り込むこともできます。

正常に動く状態をGitHubへ残します。ここが基準点になります。

4．Claude Codeに既存コードを調査させる

Claude Codeを使って、まず変更せず、このプロジェクト全体の構成を調べてもらいます。

このアプリは、入力→診断→結果表示→PDF生成→メール送信→顧客データ保存という流れです。
まずコードを変更せず、それぞれの機能がどのファイルで実装されているか調査してください。

5．変更範囲を指定する

次に今回の作業を限定します。例えば、「今回はPDF生成だけを修正します。診断ロジック、顧客データ、メール送信、管理画面は変更しません」という形です。

6．修正する

変更範囲を確認してから、「ではPDF生成部分だけ修正してください」と実行します。

7．動作確認する

修正後、本来直したかった機能、その前後の関連機能、変更してはいけないと指定した機能を確認します。

8．問題なければcommitする

正常に動けばGitHubへ記録します。これで、「PDF修正まで正常」という新しい基準点ができます。そして次の修正へ進みます。

つまり、AI Studioで形にする → GitHubへ残す → Claude Codeで調べる → 範囲を決める → 修正する → 動作確認する → GitHubへ残す、という流れになります。

AIにアプリを修正させるときの5つの注意点

1．本番環境を直接実験場所にしない

すでに顧客が使っているアプリを直接変更しながら試すのは危険です。可能であれば、開発環境、テスト環境、本番環境を分けます。

少なくとも、変更前に正常状態をGitHubへ残してから作業してください。

2．変更前の正常な状態を残しておく

これまで説明したとおり、「いま正常に動いている」というタイミングは重要です。次の変更を始める前にcommitしておきましょう。

3．データベース・認証・決済などは特に慎重に扱う

すべての変更が同じリスクではありません。例えば、ボタンの色を変更することと、顧客データの構造を変更することでは影響がまったく違います。

特に、データベース、認証、権限、決済、APIキー、個人情報、メール送信などは慎重に扱う必要があります。「ついでにきれいにしてください」というような広い変更を頼まない方がよいでしょう。

4．AIの「直りました」をそのまま信用しない

AIが「修正しました」「問題ありません」と答えても、それだけで本番へ反映してはいけません。

AIがコード上で確認できることと、実際の利用者が画面から操作して確認することは違います。例えば、スマートフォンでも正しく表示されるか、メールが実際に届くか、PDFを実際に開けるか、データが保存されるか、ログアウト後も問題ないかなど、人間が確認すべきことがあります。

5．変更後は必ず人間が実際に操作する

非エンジニアだからこそ、この確認はできます。コードは分からなくても、「期待した動きをしているか」は判断できるからです。

AI開発で人間に必要なのは、すべてのコードを理解することではありません。何が正しい状態なのかを判断することです。

Claude Codeを使うと非エンジニアの役割はどう変わる？

AIによってコードを書けるようになると、「もうプログラミングの知識はまったく必要ない」と言われることがあります。しかし、実際には少し違います。

コードを書く作業の重要度は下がっていく可能性があります。一方で、人間側には新しい役割が生まれます。それが、AIにどこまで仕事を任せるか決めることです。

例えば、「結果画面がおかしい」という問題があったとき、AIへ丸ごと「直して」と言うのではなく、何が正常なのか、何が異常なのか、どこまで調べてよいか、どこまで変更してよいか、何を変更してはいけないか、修正後に何を確認するかを伝えます。

これは、プログラミングというより、仕事の設計に近い能力です。

これからAIを使ってアプリを作る人に求められるのは、「すべてのコードを書けること」だけではありません。むしろ、ゴールを言語化し、作業を分解し、AIへ範囲を渡し、結果を判断する能力がますます重要になります。

Claude Codeでのアプリ開発は「小さく直す」が基本

ここまでの内容を一言でまとめるなら、Claude Codeには大きな仕事を一度に渡さず、小さく直してもらうことです。

例えば、「診断アプリを完成させてください」という大きな依頼より、今日は「点数計算を直す」、次に「PDFを直す」、次に「メール送信を直す」という方が管理しやすくなります。

それぞれの間でGitHubにcommitを残しておけば、問題が起きても原因を追いやすくなります。

AIが高速になればなるほど、人間には、変更を小さく区切る管理力が重要になります。

よくある質問

Claude Codeだけでアプリをゼロから作れますか？

Claude Codeを使ってゼロからアプリ開発を進めることもできます。ただし、非エンジニアの場合は、画面を確認しながらアイデアを形にしやすいGoogle AI Studioなどで原型を作り、その後Claude Codeで既存コードを調査・修正する方法も有効です。どちらか一つに固定する必要はありません。

Google AI StudioとClaude Codeはどちらを使うべきですか？

目的によって使い分けるのがおすすめです。画面を見ながらアイデアを素早く形にしたい場合はGoogle AI Studio、既存コードを詳しく調べながら修正したい場合はClaude Codeという使い分けが考えられます。Google AI Studioも現在はフルスタック開発やGitHub連携に対応しているため、「AI Studioは試作専用」と考える必要はありません。

プログラミングが分からなくてもClaude Codeは使えますか？

利用できますが、AIへ丸投げするのはおすすめしません。非エンジニアの場合は、「まず変更せず調べてください」「変更するファイルを教えてください」「ここから先は変更しないでください」「修正後に私が確認すべきことを教えてください」といった形で、AIに作業を分解して依頼することが重要です。

Claude Codeに勝手にコードを変更されることはありませんか？

Claude Codeには操作を制御する権限モードがあります。例えばPlanモードはコードベースの調査を中心に使え、ソース変更前の確認に向いています。また、ファイル編集やコマンド実行について細かなpermission ruleを設定することもできます。重要なプロジェクトでは、文章での指示だけでなく、こうした権限制御も併用してください。

なぜClaude Codeを使うならGitHubが必要なのですか？

GitHubを使うことで、「いつ、何を変更したのか」をcommitとして残せるためです。各commitはSHAで識別され、異なるcommit間の変更内容を比較できます。AIは短時間で多くのコードを変更できるため、変更履歴を残しておくことは、問題発生時の原因特定や復旧に役立ちます。

CTA｜AIでどこまで自社の業務をアプリ化できるか整理しませんか？

AIを活用すれば、これまで専門の開発会社へ依頼しなければ難しかった業務アプリでも、自社で試作できる場面が増えています。

一方で、本番運用まで考えると、データをどこへ保存するのか、誰が利用するのか、誰が管理するのか、どこまでAIに変更を任せるのか、セキュリティをどう確保するのか、開発を続けるのか外注へ切り替えるのか、といった判断も必要になります。

「AI Studioでここまでは作れたけれど、この先どう進めればよいか分からない」「自社の業務をAIでどこまでアプリ化できるのか知りたい」「外注する前に、作りたいものを整理したい」という場合は、現在の業務と実現したい内容を整理するところから始めてみてください。

参考情報

• Anthropic Claude Code公式ドキュメント：Permission modes / Permissions（Planモード、権限制御）
• Google AI for Developers公式ドキュメント：Google AI Studio Build mode（フルスタック生成、GitHub連携）
• GitHub Docs：Commits / Comparing commits（commit、SHA、diff）

※AIツールの機能・仕様は変更される場合があります。利用時は各公式サイトの最新情報をご確認ください。