「経営者×生成AIで生産性20倍！」虎ノ門で働く社長のVibeCoding実況

2025年7月22日 09:46

■はじめに:ClaudeCodeでVibeCoding

私が代表を務めるpaizaは、ITエンジニア特化の転職・就職サービスを提供しています。直近生成AIの変化が激しく、ITエンジニアの業務内容、採用要件、採用数などにも変化がでそうなので、いろいろな人とコミュニケーションして変化を探っていますが、実際に生成AIに触ってみて感触を掴んでおくのが一番重要だと思います。

そこで今回は社長自らClaudeCodeでVibeCodingにチャレンジし、実際のプロンプトベースに作ったものを解説します。
（タイトルは釣りですが、プロト作成スピードは実際に20倍になりました。）

このブログが良いなと思ったら、noteやXをフォローしてくれると嬉しいです。

■生成AIは触ってみないとわからない

先日2025年7月2日（水）〜4日（金）の3日間京都で行われていたインフィニティベンチャーサミット（IVS）に参加してきました。参加してるスタートアップも、セッションの内容もかなりの部分が生成AIに関連するもので、生成AIの勢いの凄さを改めて感じました。

またIVSのセッション参加中に呟いた下記のポストが110万impを超えるバズとなりました。

IVSで聞いたホットトピック。DeNAさんではプロダクト企画は企画書ではもう通らず、Devin等を使ってプロトを作ってこないとダメになった、とのこと。
やばい。
— 片山良平@paiza代表 (@rk611) July 3, 2025

これに自ら影響されて、社長自ら生成AIでプロト作ってみたり、コード書いてみたほうが良いだろう、そうしたほうがより未来予測の精度もあがるだろう、というわけで今回ClaudeCodeを使ってプロトを作ってみることにしました。
※エンジニアやっていたのが20年近く前なので作ってるものはだいぶショボいです

■環境構築

開発をやっていた頃はLAMP環境中心で、PHPに慣れてるのでPHP環境＋ClaudeCodeという組み合わせにすることにします。

ローカルにPHP環境を作る
Dockerいれるの少し大変なので、取りあえず動くことを目指してXAMPPで妥協
.htmlでPHPが動くようにhttpd.conf等の書き換え
最初httpd.confを思い出すのにしばらくかかった…
エディタがなかったのでVSCodeをインストール
Github copilotも使いたいので、Githubの設定
Gitのインストール、SSH Keyの発行、登録
ルートディレクトリを変更
Githubとの連携考えてルートディレクトリの変更
（paiza初期の頃は多少コード書いていたのでGithubアカウントはあった）
ClaudeCodeインストール、課金
$100のMAXプランを自腹課金

結構大変。ここまで累計4-5時間、2日ぐらいかかった…。

従来、「環境設定→言語仕様→ソフトウェア開発」、というながれから、昨今のpaizaラーニングを始めとしたオンライン実行環境付きの学習サービスの登場で、「言語仕様→環境設定→ソフトウェア開発」という流れに学習の変化が起きていました。

VibeCodingの登場で、「動くもの出す（ソフトウェア開発）→言語仕様→環境構築」、というように変化がおきた、と概念上は思っていましたが、実際試してみると最初に環境構築がそれなりに必要であり、環境構築が結構重いです。

多分今後このあたりは改善されて、オンラインエディタ、オンラインの環境という感じになっていくように思います。
※この記事書き始めてから知りましたが、Google AI StudioのBuild apps with Geminiは環境構築不要でアプリ作成できるようです

■作るもの：AI系のTechフィード

作ってみるものは「AI系のTechフィード（キュレーションサービス）」としました。ざっくりとは日本のAI系記事と海外のAI記事を拾ってきて表示する、というようなWebサービスです。

実際に作ったものはこちら（動画にとりました）。ベースは1時間ほどででき、細かい修正調整等して合計で3時間ほどでできました。

システムの概要は下記のとおりです。

海外のニュース、フィード系は何が良いかわからないため、ChatGPTにきいて、とりあえずTechmemeというところから情報を取ることにしました。国内は「はてなブックマーク」のRSSで、海外はTechmemeの記事を拾ってきて表示する、というサービスを作ります。

翻訳や記事の要約はGemini APIを使うことにしました。別件でGemini API の口座を開いていてクレカ登録＆API Keyを発行していたので、それを使います。

とりあえず動くものができればいいのでDBは使わずファイルベースで作ることにします。

■ClaudeCodeで作ってみる

前半のプロンプトは消失してしまったので、大体やったことを順番に書いています。4以降はClaudeCodeに実際に投げたプロンプトまんまです。

はてなブックマークのRSSを拾ってきてAI記事のみ選別してHTMLで表示
→割と一瞬でできる。
表示を色々整える
同時に色々指示すると要因特定等に時間も掛かりそうなのと、コンテキストを上手く理解できなくなりそうなので、なるべく細かくタスクを分解して指示。
1. ブックマーク数を出す
2. ブックマークをクリックし元記事に飛ぶようにする
3. 元サイトのファビコン出す、ドメイン名を出す
4. はてなブックマークコメントを出す、レイアウト調整
5. 画像（ogp画像）のサイズを調整
6. 記事内容の説明表示を100文字に切り詰める
7. 記事タイトルを切り詰める
8. キャッシュクリアボタンの設置
GeminiAPIに接続して、本文の要約をする、プロンプトを調整する
→GeminiAPIは別件ですでにAPI Keyを発行したところまでやっていたので、GeminiAPIのpythonの実装ドキュメントのページを示しつつ、API keyを渡して実装をお願いしたらほぼ一発でできて驚いた
※API KeyまわりはGeminiAPIが何かとかを理解したりするのに少し時間がかかるので、ゼロからアカウント作ってやったりすると時間はもう少しかかる。そもそもAPIがどういうものかを理解してないとむずかしい

== ここから下がClaudeCodeに実際になげたプロンプトになります==
「index.php からhtml部分とPHPのビジネスロジックを分離してください」　
→HTML、CSS、JS、PHPが１ファイルにまとまっていて、長くて見通しが悪かったのでMVC的なファイル構成に分割をしてもらった
「GeminiAPIに投げるプロンプトの場所を教えて下さい」
→プロンプトは直接修正したほうが早いので、プロンプトを書いてある場所を教えてもらった。
「Geminiのバージョンを指定してる部分を教えて下さい」
→Geminiの古いバージョンを指定していたので、Gemini2.5Flashをつかうように記述箇所を教えてもらい手書きで変更。
「Gemini API でてくるテキストがMD形式なので、ディスクリプションエリアについて、MD形式をパースして表示してください。」
→Geminiが元記事の要約を出すときにMD形式（マークダウン形式）で返してくることが多かったため、プロンプトでMD形式を指定し、フロント側でMD形式をパースして表示するように変更
「Ajaxで初回に拾ってきたときにMD表示がうまくされない。リロードするときちんとパースされるよう不具合を修正してください。」
→不具合修正
「.truncated-text の文字サイズを少し小さくしてください」
→表示調整
「ディスクリプションの文字数が100文字で切り詰めしてるところを140文字に変更してください。」
→表示調整
「ディスクリプションの切り詰め文字数の設定が複数箇所に分散しているのでconfigファイルに切り出して、1箇所の修正で済むように修正してください。」
→複数のファイルの複数箇所に切り詰め文字数を直書きしていたので、設定ファイルに書き出し、そこをいじれば全体適用される形に修正
「記事の画像をクリックしても記事に飛ぶように修正してください」
→UI調整
「タイトルの文字数カウントする部分について、半角は2文字で1文字とカウントするようにしてください。」
→記事によってタイトルの横幅が結構変わってしまったので、半角は２文字で１文字カウントするようにして、なるべく横幅が同程度になるように調整
「https://www.techmeme.com/ の記事を拾ってきてはてなブックマークと同様に表示するように修正をしてください。」　
→ようやく、海外の記事を取得して表示する改修に着手
「Fatal error: Uncaught Error: Call to undefined function getOGPImage()」
→コンテナ環境ではなくClaudeCodeが実行時エラーを取って修正する流れができていないため、エラーを教えて修正してもらう
「http://www.techmeme.com から取得してくる記事はタイトルをGeminiAPIに投げて日本語化してください。」
→この手前までの処理で英語での記事タイトル、ディスクリプションの取得はできていたので、生成AIに投げて翻訳を依頼
「キャッシュクリアボタンの横にタイトルのキャッシュのみクリアするボタンを設置してください。」
→元記事取得は時間がかかるため、キャッシュに貯める仕組みになっていたが、翻訳が上手くいかなかったときにそれがキャッシュされていたため、デバッグ用にタイトルキャッシュクリアボタンを設置
「GeminiAPIになげるプロンプトを prompt_config.phpにまとめてください。」
→プロンプトが散在していたので、一箇所に集めてメンテしやすいように修正
「タイトル翻訳ができてないものがいくつかあるのを修正」
「タイトルを翻訳しているときはローディング表示を行う」
→データ取得に時間がかかり、画面が止まってしまってロードしているかどうかよく分からなかったので、ローディング表示を追加。
「タイトルの文字数切り詰めの設定をconfig.phpに切り出してください」
→タイトル文字数を調整しやすいように設定ファイルで設定できるように修正
「タイトル翻訳時にローディング表示がうまく動いていないので修正してください」
「techmeme.comの記事のディスクリプションがすべて同じ物を取ってきているようなので修正をしてください。」
「Techmeme記事のディスクリプションがすべて同じソースを見ているようです。個別の記事の元ページを参照して、その内容をGeminiAPIに投げて要約するようにしてください。」
「個別記事からの内容取得がうまく行っていないことがあるようです。修正してください。」
→Techmemeには元記事のタイトルとディスクリプションしかなかったため、元の記事があるサイトにデータを拾いに行くように修正。サイトの構成とか、どのようなデータがあるかなどを把握しないとこのあたりは上手くいかない。
「techmeme.comの記事の飛び先は、techmeme.comではなく、元記事に飛ぶように修正してください。」

■どのぐらいでできたのか？60時間→3時間

大体３時間ほどでできました。しかもYoutubeで全く関係ない動画を見ながら、その合間に指示を出してそのぐらいです。ClaudeCodeは指示を出してからできるまでが少し待ち時間があるので、ながら作業になりがちです。

仮に、上記の作業を手で開発したらどのぐらいか見積もりしてみたところ60時間ぐらいは掛かりそうだ、となりました。しばらく開発からは遠ざかっているのでその感覚での60時間なので、現役のエンジニアだったら30時間ぐらいで作れるかもしれません。

プロト作成が1/10〜1/20ぐらいのコストでできるのは、やはり驚異的です。作ってみて一部サービス設計を変えたほうがいいなという気付きなどもありました。エンジニアの稼働を使ったうえでサービス再設計となると結構なコストですが、企画側が半日ぐらいでサクッと作って動かしてみて企画を修正できれば、かなりの生産性向上につながるように思います。

前工程の失敗で後工程が丸々無駄になるということもあるので、上流や企画側は動くものを作って企画、設計の精度を上げるというのは結構重要かもしれないなと感じました。

■VibeCodingは経験者でないと辛い

ここまで読んでいただいたプログラミング初学者、ソフトウェア開発初学者の方は気がついたと思うのですが、多分こういうプロンプトを書くのは素人には無理だと思います。

もともと海外記事をGeminiAPIで翻訳しようと考えていたので、日本語記事の要約で一旦API接続を試しておき、その後海外記事を拾って表示確認後、GeminiAPIに翻訳に投げるという感じで開発を進めています。

これは頭の中にざっくりとしたアーキテクチャ設計があったので、ステップを踏んで難なくできているのですが、初心者だと難しいように思いました。

そもそも初心者であればアーキテクチャのことを考えずに翻訳してください、となってしまい、ClaudeCodeからなんか言われても、よくわからん、となってしまいそうです。

また「htmlとビジネスロジックを分離」みたいな発想がそもそもでてこないので、少しサイズが大きくなるとメンテナンス性が格段に落ちそうです（別にこれやらなくてもプロトは作れますが）。

開発工程はタスクを分解しながらすすめたほうが、上手くいかなかったときに問題が特定しやすいです。また、生成AIにお願いして作るとしても、一気にお願いするとブラックボックス化しやすいですが、タスクを分解して依頼するとどういうことをやってるかを掌握しやすくなり、システム全体をコントロールできるようになります。

これは自分でプログラミングしながらシステム作ってると、ちょっとずつ進めて課題箇所クリアしながら作ったほうが進みが早いというのを経験しているからできるのだと思います。

初心者がVibeCodingをやると本当によくわからないブラックボックスができてしまうため、この処理をやってるところをこうしたい、みたいな指示が出せなくなっていくように思います。そうすると細かい部分になかなか手が行き届かなかったり、細かい修正に結構手間取りそうです。

このあたりも、もう少ししたらAIが適切に分解してくれるのかもしれませんが（Kiroに期待）、、ある程度構造を理解しながら、後で改修しやすくみたいなことを考え、AIがいじる範囲を絞って指示をしたほうが、人間の理解も追いつくし、うまくいくイメージがあります。

ちょっと前に社内でプログラミング経験ない人がVibeCodingはじめていて、プロンプト見せてもらったら恐ろしく長いものでちょっとびっくりもしました。

■プロト作ってみての課題

とにかく動作が遅い
1. RSSを拾い、元記事を読みに行き、GeminiAPIに要約・翻訳させ、キャッシュし、表示するという仕組み
2. 一部キャッシュはしてるけど、読み込むたびに諸々の処理が走るのでとにかく遅い
事前にバッチで読んで表示するとかしないと難しそう
そうするとファイルベースよりDBベースにしたほうが良さそうだし、バッチに仕組みも考えないといけない

プロトとしてはそこまでの必要はないので一旦こんなもんでいいか、という感じではあります。しかし、これを作ってみて思ったのは、やっぱり使い手の能力、経験を超えたものを作るのは難しいなということ。

とりあえず動くが、プロダクションレベルの品質にはなってない（特に非機能要件が全く考慮されてない）と改めて思いました。そのあたりを考えながら作るためには、やはり経験のあるITエンジニアをアサインする必要があります。

今回やってみて思ったのは下記のことです

日本語が書ける → AIがコード書く → アプリができる
これは
日本語が書ける → 誰でもAIでアプリ作れる
と勘違いしがちですが、まったくちがいます。
日本語が書ける → ”設計し指示が出せる” → AIがコード書く → アプリができる
というのが正しいのです。「設計し指示が出せる」スキルがないとアプリケーションは作れないと思いました。

生成AIは、設計ができて指示が出せる（自分でも作れる）人が、より早く開発ができるツールなのであって、よくわからない人は的確な指示が出せないので、それっぽいもの出すので止まってしまうのです。

■プロトをつくって良かったこと

3時間ほど（環境構築含まず）で一旦海外記事含めて拾ってくるところまではいけた
AIの記事と行っても結構いろんなものがあるのでタグ化しないと興味ないものも結構まじって、フィードの質が下がる事がわかった
タグ化をGeminiAPIでできそうかとかはプロトで試しておいたほうが良さそうという気付きがあった
3行要約は中身読まなくても内容はわかるから海外記事とかに関しては良いかも

というような、企画サイドとしてやってみないと気がつけないことに先に気がつけました。

■まとめ

プロトを自分で作ってみて、やはりいろいろ発見がありました。概念的にしか理解してなかったことが、具体性を伴って理解をできるようになるので、より生成AIの今後についても考えやすくなりました。これはすべての社長が体験したほうがいいのでは？とも思ったりしました。

AIによって仕事が奪われる、生成AIはコードが得意なのでエンジニアの仕事は大丈夫か？みたいな話をよく聞きます。しかし実際にやってみて思ったことは下記です。

スキル経験がある人が生成AIを使うとブーストされてより早く作れるようになる
経験ない隣接領域は、AIのサポートによって少しやれるようになるため、本業の人の助けになる（プロと作ることで手戻りが少なくなる、無駄なエンジニアコスト割かなくて良くなる、など。）

やっぱり本業の人には勝てないのですが、生成AIによってやれる範囲が広がるし、本業はスピードアップができるというブースター的な存在のように感じました。

なのでITエンジニアの仕事がなくなるというのは当面なさそうだな、と改めて思いました。エンジニアに限らず営業や企画職なども全般に求められることが高度化し、変化の速度が今以上に早くなる、ということは起きそうです。

最後までお読みいただきありがとうございました。この記事が良いなと思ったら、ぜひnoteやXをフォローしてください。

ちなみに、paizaはITエンジニア向け国内最大の転職・就職・学習プラットフォームです（paiza.jp)。生成AI講座も無料で学べるので、よかったら使ってみてください。

関連記事

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

この記事が参加している募集

やってみた

14万件