見出し画像

【番外編】「WordPressが限界」だった私が、AIをとことん活用してWebアプリを開発する全手順

こんにちは、たろーです。

普段は経営コンサルタントをしています。今でこそAIアプリ開発の記事なんて書いていますが、実はもともとバリバリのエンジニア…ではありません。プログラミングの知識といえば、せいぜいWordPressのテンプレートを少しカスタマイズするためにPHPを必死に勉強し、Javaも勉強しようとしたけどあきらめた程度の素人でした。条件分岐の仕組みを覚えたくらいです。

そんな私が、今では自分が作りたいWebアプリをAIという最強のアシスタントと共に開発できるようになりました。

ちなみに、私がこの方法で開発し、現在デバッグ(という名の実務でのテスト利用)をしているのは、こんな実務直結型のアプリたちです。

  • 組合の経理担当者が圧倒的に楽するアプリ

  • 項目打ち込みの手間が90%以上削減される見積書作成アプリ

  • 自分専用の超便利・請求書発行アプリ(Excel管理だとPCが壊れた瞬間に終わる恐怖からの脱却。利益計算や年間の請求・実績確認も完備!)

実はこれ、全部ブラウザベースのWebアプリなんです。 素人ながら、本格的に運用するために専用のサーバーまで借りてしまい、裏側ではGemini APIなどを利用して高度な処理も組み込んでいます。

「素人にそんなことできるの?」と思われるかもしれませんが、サーバーの構築方法も、APIの連携方法も、全部AIに教えてもらいながらやりました。 分からないことがあればAIに聞く。そうすれば、自分のやりたい事や環境に合わせて手取り足取り教えてくれます。もはや、分厚い専門書やネット上の古い「説明書」を何時間も漁る必要は完全に無くなったのです。

どれも「自分や身近な人の日々の業務を楽にする」ための、ニッチだけど確実に役立つものばかりです。

今回は番外編として、「コーディング素人の私が、どのようにAIの特性を見極め、とことん活用してこれらのようなアプリを作っているのか」というリアルな開発の裏側と、それぞれのAIの「クセ」についてお話しします。


夢の「マルチエージェント」が招いた絶望

私がアプリ開発を始めた当初、AIエディタは「Antigravity」を使っていました。しかし、度重なる仕様変更や使いにくさを感じ、現在はVS Codeに「Claude Code」の拡張機能を入れるスタイルに落ち着いています。

VS Codeに移行した頃、私はある野望を抱きました。それは「Claudeの機能を使って、AI同士で開発を進めさせる」というマルチエージェントシステムです。

「これで完璧だ。勝手にアプリが出来上がるぞ!」とワクワクしたのも束の間、すぐに現実を突きつけられました。

いくらトークンがあっても足りないのです。

彼ら(AI)が綿密に話し合い、コードを修正し、テストを繰り返すたびに、私のClaudeの利用枠(トークン)はあっという間に溶けていきました。

試行錯誤の末に行き着いた「AI分業・適材適所」制

「ひとつのAI(Claude)にすべてを任せるのはコスパが悪すぎる」。そう痛感した私は、それぞれのAIの得意分野や自分の課金状況に合わせて「分業化」することにしました。

現在、私がメインで使っているAIとその役割は以下の通りです。

1. Gemini(Google AI Pro):トークン無制限の「壁打ち相手」

Google Driveの容量目当てで課金したら勝手についてきたGeminiですが、実は壁打ちに最適です。 Geminiの良さは、良くも悪くも「こちらの言っている情報以上の内容は勝手に作らない」こと。頭の中にあるフワッとしたアイデアを投げると、それを綺麗に言語化してくれます。トークンを気にせず無限に壁打ちできるので、要件をまとめる初期段階で重宝しています。

2. Claude (Opus / 個人Proプラン):正座して向き合う「超優秀な設計者」

コーディングや論理的な文章作成はClaudeの独壇場なので、ここにしっかり課金しています。 Opusモデルはとにかく頭が良いです。しかし、こちらの指示が曖昧だと、過去の文脈をあっさりと切り捨てる冷酷なクセがあります。出てきた設計書が半端な時は、100%私の指示が半端だった時です。だからこそ、Claudeにお願いする時は、こちらも姿勢を正し、正座して的確な指示(プロンプト)を出すようにしています。

3. Claude Code(VS Code拡張機能):「手足となる実行部隊」

Opusが作った設計書をもとに、VS Code内で実際にコードを書かせるコーディング担当です。

4. ChatGPT(無料版):最後の手段の「駆け込み寺」

ユーザーによって出力のクセが違うので深掘りはしませんが、GeminiでもClaudeでも解決できない壁にぶち当たった時、ふとチャッピーに相談すると、思いがけない別角度からの良い回答をくれることがあります。まさに最後の手段としてのポジションです。

バグ祭りを防ぐ最新ワークフロー(トークン課金 vs 時間の節約)

ここで、最近私が行き着いた「品質重視」の実践的なフローを紹介します。 以前の記事でも紹介した「セッションログを自動更新させる」仕組みをフル活用した手法です。

  1. 設計(Opusに依頼): まずClaude (Opus) に完璧な設計書を作らせます。

  2. 実装と記録(Claude Codeの実行): その設計書をVS CodeのClaude Codeに読み込ませてコーディングさせます。この時、作業プロセスを常に session_log.md に記録させ、1つのタスクが終わるごとに「作業結果のサマリー」を報告させます。

実際の開発で、Claude Codeが自動記録している詳細な作業ログがこちらです。

セッションログ

↑エラーの発生と解決手順まで克明に記録させています。

そして、一つの区切りがついた時にClaude Codeが報告してくる「サマリー(まとめ)」がこちらです。


報告と確認

↑現在の状態と、次に進むための確認事項を簡潔にまとめてくれます。

  1. 分析とレビュー(Opusで検証): 実装が終わったら、この「詳細なログ」と「結果のサマリー」をセットにして、再びOpus(上司役)に読み込ませて分析・レビューさせます。

鳥肌が立った「Opus上司」のガチレビュー

百聞は一見に如かず。実際に、Claude Codeが「5つのバグ修正が完了しました!」と意気揚々と報告してきたサマリーに対して、私がOpusにレビューさせた時の実際の返答の一部をご覧ください。

実際のClaudeとのやり取り画像

いかがでしょうか? もし私が素人判断でClaude Codeの「修正完了しました

」という言葉を鵜呑みにして次に進んでいたら、「エラーも出ないのに通知が飛ばない」「失敗しているのに画面は正常(緑色)になる」「パスワードが丸見えになる」という、後から原因究明に何日も溶かすような地獄のバグ祭りに陥っていたはずです。

実は私、ただ「右から左へ」流しているだけです

ここまで読むと「なんだかんだ言って、たろーさんも専門的な管理をしてるんでしょ?」と思われるかもしれません。

正直に言います。私がやっているのは「右から左への受け流し」です。

ここで一番大事なのは、「自分はコーディング素人である」という自覚を強く持つことです。 Claude Codeから「ここはどう実装しますか?」と専門的な確認をされても、素人の私には正しい判断ができません。そこで変に知ったかぶりをして指示を出し、システム全体が壊れるのが一番怖いのです。

だから私は、Claude Codeからの報告や質問をそのままコピーして設計者のOpusに投げます。そしてOpusが出した「こう修正しなさい」という回答を、またコピーしてClaude Codeに貼り付けるだけ。

全体像を把握し、設計書を作ったOpusに判断させることが、結果的にバグを防ぐ一番の近道だからです。


未来の仕事の仕方はこんな感じなのかも

素人の私が中途半端に介入せず、AI同士で会話(レビューと修正)をさせるのです。

彼ら(OpusとClaude Code)が真剣に議論してコードを直している間、私は暇になるので、本業のコンサルティングの資料作成など、まったく別の仕事をしています。AIを部下として働かせることで、自分一人の体では不可能な「究極のマルチタスク」が実現できている状態です。

結果だけを見るのではなく、「どういう過程で実装したのか」をOpusに報告させレビューさせる。 これをやるとトークンの減りは確かに速いです。しかし、結果的に「エラーやバグの無限ループ」という最悪の遠回りを防ぐことができます。「多少コスト(トークン)をかけても、品質を担保して自分の時間を生み出す」という、まさにマネジメントの基本に立ち返ったワークフローです。

時間のメリハリこそが、最大の業務効率化

ずっとAIと話してると時間は無駄に過ぎていきます。修正も多ければ多いほど自分の時間が費やされていく。

だからこそ、あえて「トークンという限られたリソース」をスケジュール管理の軸にするのです。Claudeのトークンには制限があります。〇時間後にトークンが復活するのであれば、その時間前にトークンを全消費させ、切れたら潔く他の仕事をする。

このメリハリのおかげで、以前は数時間〜数日かかっていた仕事が半分以下で終わることも珍しくありません。AIとの対話そのものをマルチタスク化し、AIの制限時間を「自分の集中タイム」として活用すること。これこそが、非エンジニアが最短でアプリを完成させるための、最強の働き方なのです。

気づけばプロの道具「GitHub」も使えるように

こうしてAIと開発を進めるうちに、もう一つ大きな副産物がありました。 開発の途中でAIから「バージョン管理のためにGitHubにプッシュしましょう」と提案され、言われるがままに設定やコマンドを教えてもらっているうちに、なんとプロのエンジニアが必須とする「GitHub」でのバージョン管理まで使えるようになってしまったのです。 素人にはハードルが高すぎる専門的なツールも、AIという「いつでも質問できる専属の家庭教師」がいれば難なく導入できてしまいます。

結び:AI開発の本質は「マネジメント」である

こうして複数のAIの性格を把握し、適材適所でタスクを振り、厳格にレビューさせる。このやり方は、普段の「経営コンサルタント」という本業に非常に似ています。

プログラミング素人の私は、自分で複雑なコードは書けません。しかし、「どんなアプリにしたいか」をGeminiと壁打ちし、「どういう構造にするか」をClaudeに設計させ、手足となるClaude Codeに実装させ、それを再びOpusに監査させるという「超優秀だがクセのある部下たちのマネジメント」に徹することで、アプリを完成させることができました。

「プログラミング言語が分からないから」と諦める必要はありません。作りたいアイデアと、AIたちを繋ぐ「橋渡し役」になる勇気さえあれば、彼らがあなたの代わりに手を動かしてくれます。

今のところ、私が作っているのは自分や身内の業務を楽にするツールばかりで、アプリ自体での「マネタイズ(収益化)」にはまだ届いていません。しかし、「いつか自分の作ったアプリでマネタイズする」という野望を持っています。 実は現在、具体的な内容はまだ秘密ですが、マネタイズを見据えた新しいWebアプリも密かに開発中です。

過去の私と同じように「WordPressが少し触れる程度」というレベルの方でも、工夫次第でアプリは作れますし、その可能性は無限大です。これからも、一緒にAI開発を楽しんでいきましょう!

💡 AIを暴走させない「具体的なマネジメント術」をもっと知りたい方へ

今回の記事で「AIを部下としてマネジメントする」という全体像をお伝えしましたが、「じゃあ、実際にどういう指示(プロンプト)を出せば、AIは言うことを聞いてくれるの?」と疑問に思った方は、ぜひ以下の実践編ノートも覗いてみてください。

私が数々の失敗(トークン枯渇やスレッド崩壊、スパゲッティコード化)を乗り越えて生み出した、コピペで使える具体的な「魔法のプロンプト」や環境構築の裏技をまとめています。

▼ 第1弾:突然スレッドが使えなくなる絶望を回避する裏技

▼ 第2弾:AIのスパゲッティコード化を防ぐ「設計と魔法のプロンプト」

AI開発の「転ばぬ先の杖」として、あなたの開発プロジェクトを強力にサポートしてくれるはずです!


いいなと思ったら応援しよう!