Vibe Codingとは？プログラミング未経験の40代がAIだけでブログとアプリを作った記録

AI体験談・その他
コーディングしているイラスト
Vibe Coding（バイブコーディング）とは、AIに自然言語で指示してコードを生成する開発スタイルです。 この記事では、Vibe Codingの概要と、プログラミング未経験の僕がClaude.aiとClaude Codeを使って実際に作ったものをまとめています。

Vibe Codingとは何か

Vibe Coding（バイブコーディング）は、自然言語でAIに指示を出してコードを生成する開発スタイルのことです。

この言葉を最初に使ったのは、Andrej Karpathy（アンドレイ・カルパシー）氏でした。
OpenAIの創業に関わり、TeslaではAI部門（自動運転技術の開発チーム）を率いた研究者で、AI分野では発言のたびに注目が集まる人物です。

2025年2月2日、Karpathy氏はX（旧Twitter）にこう投稿しました。

自分は最近、新しいスタイルでコードを書いている。LLM（大規模言語モデル）の精度が上がったことで、コードの中身を理解しなくても開発ができるようになった。差分も読まずに「Accept All」を押し、エラーが出たらそのまま貼り付ける。コードを書いているというより、見て、話して、実行して、コピペしているだけだ──。

この投稿は510万回以上表示され、約3万のいいねを集めました。

Karpathy氏がこの投稿で挙げたのは、CursorというAI搭載コードエディタとClaudeの組み合わせでした。
音声入力ツールを使ってキーボードにもほとんど触れなかったそうです。ただし本人は「週末に使い捨てのプロジェクトを作るぶんには悪くない」と、あくまで限定的な文脈で使っていた点は見落とされがちです。

この言葉は急速に広まりました。
2025年11月にはCollins English Dictionaryの「Word of the Year 2025」に選ばれています。
Collinsの定義は「自然言語で促されたAIを用いてコード作成を支援する手法」で、Karpathy氏のオリジナルの意味よりもかなり広い定義になっています。
2025年2月に生まれた言葉が、わずか9ヶ月で辞書に載ったことになります。

さらに2026年1月には、MIT Technology Reviewの「2026年の10大ブレークスルー技術」に選ばれました。
ただし、ここでの名称は「Generative Coding（生成コーディング）」です。
Vibe Codingそのものが選ばれたわけではなく、AIがコードを書くという、もっと広い技術潮流として評価されたという位置づけです。
MicrosoftではコードのうちAI生成が最大30%、Googleでは25%以上に達しているという数字が、選定の根拠として挙げられています。

面白いのは、提唱者であるKarpathy氏自身が、1年後の2026年2月にこの言葉を振り返っていることです。
「あれはシャワー中に思いついた、ろくに考えずに投稿したツイートだった」と明かしたうえで、2026年の自分が好む呼称は「agentic engineering（エージェンティック・エンジニアリング）」だと述べています。
AIエージェントがコードを書き、人間が監督する、という意味合いです。1年でAI自体の能力が上がったことで、Vibe Codingという言葉が指す範囲も変わってきているということでしょう。

僕がAIに教えてもらいながらブログを作っていたとき、この言葉は知りませんでした。
あとから「Vibe Coding」という名前がついたスタイルがあると知って調べてみたら、僕がやっていたことと重なる部分が多いと感じました。

バイブコーディングのイメージのイラスト

僕がVibe Codingで作ったもの

僕は２年くらいプログラミングの勉強をしていたのですが、いつまで経ってもできるようにならない時期が続いていました。
そこで、Claudeに教えてもらいながらやってみたらどうだろう、と思って始めたのが、アプリ制作の最初のきっかけです。Vibe Codingという言葉は、そのときは知りませんでした。

2025年6月に最初のアプリを作り始めてから、ブログサイト、Webアプリ、管理ツール、SEO改善まで、これまでに6つのプロダクトを完成させています。使ったAIは、Claude.ai（ブラウザ上のチャット版）とClaude Code（ターミナルで動くCLI版）の2つです。

それぞれ何を作って、どう進めたのかを簡単に紹介します。詳しい話は各記事に書いてあるものもあるので、気になったものから読んでみてください。

自分の作ったアプリケーションのアイコンのイラスト

お気に入りの場所を共有するアプリ（My Favorite Place）── Claude.aiで構築

一番最初に作ったのが、My Favorite PlaceというWebアプリです。2025年6月から9月にかけて、約3〜4ヶ月で完成させました。

作ろうと思った理由は、お出かけ先を調べるときの不満でした。
たとえば「新宿 喫茶店」で検索すると、出てくるのはまとめ記事ばかりで、どのサイトにも同じような場所が並んでいます。
しかも、書いている人が実際に行ったかどうかも怪しい。それなら、自分が本当に行ったお気に入りの場所を投稿できるサイトがあればいいのにと思ったのが出発点です。
カフェだけでなく、道でも公園でもどこでも、自分がいいと思った場所を地図上に登録して共有できるサービスとして作りました。

これが人生で初めて完成させたWebアプリです。
Claude.aiに教えてもらいながら、対話ベースで一歩ずつ進めていきました。
このアプリについてはブログ記事にしていませんが、実際に動いています。
（2026/3/23現在、認証システムがまだ完全に完成していません。。）

書評プラットフォーム（BookConnect）── Claude.aiで構築

2つ目に作ったのが、BookConnectという書評プラットフォームです。2025年10月から11月後半にかけて、約2〜3ヶ月で完成させました。

自分が本好きということもあり、本のことを語り合えて、しかもユーザー同士でメッセージのやりとりもできるサイトを作りたいと思って始めました。
本の検索、書評の投稿、ユーザー同士のフォロー、メッセージ機能、マイ本棚といった機能が入っていて、My Favorite Placeよりも規模の大きいプロジェクトになりました。

こちらもClaude.aiとの対話で作っています。記事にはしていませんが、動いているサービスです。
（2026/3/23現在、認証システムでエラーが発生する状態です。。）

ブログサイト（blog-nori.com）── Claude.aiと対話しながら構築

3つ目に作ったのが、今まさに読んでいただいているこのブログです。
2025年12月の中盤から作り始めて、約1ヶ月半で完成させました。
技術の組み合わせは、Next.js、Sanity CMS、Vercelです。

最初はNewtという別のCMSを使う予定だったのですが、開発中にサービス終了が発表されて、計画を白紙から立て直すことになりました。
Claude.aiに相談しながらSanity + Vercelという構成に切り替え、そこからコードの意味を毎回確認しながら進めていきました。

全6回のシリーズ記事で、最初の構想から公開までの過程を詳しく書いています。

心の気づきメモアプリ（Insight Notes）── Claude Codeで構築

ここからはClaude Codeというターミナル版のAIツールを使った開発に切り替わります。
最初に作ったのは、日々の気づきを記録するための小さなWebアプリです。

このプロジェクトでは、まずClaude.aiのチャットで設計書を作り、その設計書をもとにClaude Codeで実装とデプロイを行いました。
Claude.aiと対話しながら一歩ずつ進めるやり方から、「設計を先に固めてから一気に作る」というやり方に変わったのがこのプロジェクトです。
設計を先にやることの重要性を、ここで強く実感しました。

  • 前編：設計編── Claude.aiで設計書を作るまでの過程。何を作りたいのか、どんな機能が必要なのかを言語化していく作業
  • 後編：実装・デプロイ編── 設計書をClaude Codeに渡して、セットアップからデプロイまでを進めた記録。環境構築のつまずきやエラー対応のリアルな体験

自分専用CMS管理画面（My Content Studio）── Claude Codeで構築

Claude Codeを使った開発をもっと練習したいと思い、次に何を作ればいいかGeminiやClaudeに相談しました。
そこで出てきたのが、自分のブログ専用のCMS管理ツールを自作するというアイデアです。

「CMSって何？」という状態からスタートして、認証機能、記事の作成・編集・削除、Markdownエディタ、画像アップロード、公開ページまでを4日間で完成させています。
途中でClaudeの説明が何を言っているのかわからなくなってフラストレーションが溜まった場面もあり、そこから「説明の順序ルール」を作ったことが、その後の開発を大きく変えました。

  • 第1回：なぜCMSを自作するのか── Claudeに「次に何を作るか」を相談し、Link-in-Bioアプリの提案を断ってCMS自作を選んだ経緯
  • 第2回：基盤構築からCRUD実装まで── Next.js、Supabase、Vercelのセットアップから、記事の作成・取得・更新・削除ができるようになるまで
  • 第3回：挫折とブレイクスルー── Claudeの説明がわからずイライラした場面と、そこから生まれた「説明の順序ルール」
  • 第4回：完成と振り返り── Markdownエディタ、画像アップロード、公開ページの実装を経て完成。4日間で学んだことの振り返り

ブログのSEO改善 ── Claude Codeで実行

ブログを公開したあと、SEO（検索エンジン最適化）の改善もClaude Codeに依頼しました。
サイトマップの生成、メタタグの整理、構造化データの追加、OG画像の設定といった技術的なSEO対策を、Claude Codeがまとめて実行してくれました。

Claude.aiとClaude Code、どちらでVibe Codingをやるか

僕がVibe Codingに使ったのは、どちらもAnthropicが開発しているClaudeというAIです。
ただし、同じClaudeでも2つの使い方があり、それぞれ性格がかなり違います。

Claude.aiは、ブラウザで開くチャット画面です。
普通の会話と同じように、日本語で質問すると日本語で答えてくれます。
My Favorite Place、BookConnect、ブログサイトの3つは、すべてこのClaude.aiとの対話で作りました。
「このコードはどういう意味ですか？」
「次は何をすればいいですか？」
と、一つずつ確認しながら進められるので、自分が何を作っているのかを理解したいときに向いています。

Claude Codeは、ターミナル（パソコンの黒い画面）から直接コードを生成・実行するツールです。
Insight Notes、My Content Studio、SEO改善の3つは、こちらで作りました。Claude.aiと違って、ファイルの作成・編集・削除をAIが直接やってくれるので、スピードはこちらの方が圧倒的に速いです。
ただ、途中経過を一つずつ確認する対話型のやり方とは違い、AIがまとめて作業を進めてしまうので、何が起きているのかを把握するには意識的に確認する必要があります。

僕の使い分けはシンプルです。
理解しながら進めたいときはClaude.ai、とにかく形にしたいときはClaude Codeです。
実際、最初の3つのプロダクトをClaude.aiで作った経験があったからこそ、Claude Codeに切り替えたときに「何を指示すればいいか」がわかるようになっていました。

ちなみに、リサーチにはPerplexityというAI検索ツールも併用しています。
Claudeは文章を書いたりコードを生成したりするのが得意ですが、最新の情報を調べたり、一次ソースを確認したりする作業はPerplexityの方が正確です。
この記事の「Vibe Codingとは何か」セクションの事実確認にも、Perplexityを使っています。

Vibe Codingに向けられている批判

不均衡なイメージのイラスト

Vibe CodingはCollinsの辞書に載り、MIT Technology Reviewにも選ばれました。
ただ、それと同時に、批判や懸念の声もかなり出ています。
ここでは主に3つの観点から整理します。

セキュリティのリスク

もっとも多く指摘されているのが、AIが生成するコードのセキュリティです。

セキュリティ企業のVeracodeが行った調査では、AI生成コードの45%に、OWASP Top 10（Webアプリケーションの代表的な脆弱性リスト）に該当するセキュリティ上の問題が含まれていたと報告されています。
人間が書いたコードでも31%に同様の問題があるのですが、AI生成コードの方が割合が高いという結果でした。

また、セキュリティ研究企業のSocket.devは、57万6,000件のコードサンプルを分析した結果、AIが20万5,000個もの「存在しないパッケージ名」を生成していたと報告しています。
AIがもっともらしい名前のパッケージをでっち上げてしまうという問題で、これを悪用した攻撃の危険性が指摘されています。

技術的負債の蓄積

AIが生成するコードは動くけれど、長期的には問題になる──という指摘もあります。

GitClearという企業が1億5,300万行のコードを分析した調査や、Carnegie Mellon大学が800以上のGitHubリポジトリを対象に行った研究では、AI生成コードの品質が劣化する傾向が確認されています。
ドキュメントが不足していたり、コードのスタイルが統一されていなかったり、システム全体を誰も深く理解していない状態が生まれやすいという問題です。

スキル低下の懸念

AIがコードを全部書いてくれる環境では、人間のスキルが育たないのではないか、という懸念もあります。

Stack Overflowの調査では、開発者の72%がVibe Codingを業務で使っていないと回答しており、積極的に実践しているのはわずか0.4%でした。
UC San DiegoとCornell大学の共同研究（2026年1月発表）でも、熟練した開発者はVibe Codingのアプローチを採用しておらず、AIを補助として使いつつも設計の判断はAIに委ねていないという結果が出ています。

提唱者自身の注釈

批判の文脈で見落とされがちなのが、Karpathy氏自身の言葉です。

オリジナルのXポストの時点で、Karpathy氏は「週末の使い捨てプロジェクトには悪くない」と書いていました。
1年後の回顧でも、当初のVibe Codingは「LLMの能力が今より低かった時代のもの」と認めています。
批判の多くは「コードを理解しないまま進める」ことへの懸念ですが、提唱者自身がそのリスクを最初から認識していたということです。

Vibe Codingを始めたい人へ

何を作りたいか？をコメントしているイラスト

Vibe Codingを始めるのに、プログラミングの知識は必須ではありません。
僕自身がそうでした。
ただ、いくつか事前に準備しておいた方がいいものと、知っておいた方がいいことがあります。

まず必要なものですが、AIのツールとしてはClaude（すぐに制限に達してしまうので、有料プランを推奨します）、コードを書くためのテキストエディタ（VS Codeなど）、そしてClaude Codeを使う場合はターミナルが必要です。
パソコンは普通のもので十分です。

最初の一歩としては、「何を作りたいか」を決めることが一番大事です。
技術を学ぶために何かを作るのではなく、自分が欲しいもの、使いたいものを決めて、そこからAIに「何から始めればいいですか？」と聞いてみてください。
僕の場合は、お気に入りの場所を共有するアプリが欲しいというところから始まりました。

最後に、僕が実際につまずいたポイントを3つ書いておきます。

1つ目は環境構築です。
Next.jsのプロジェクトを作る、GitHubにリポジトリを作る、Vercelでデプロイする──こうした初期設定でつまずくことは多いです。
ブログ構築シリーズの第3回で、この最初の壁について詳しく書いています。

2つ目はエラー対応です。
コードを書いていると、必ずエラーが出ます。
最初は怖く感じますが、エラーメッセージをそのままClaudeに貼り付ければ、だいたい解決策が返ってきます。
Insight Notesの実装・デプロイ編では、環境構築やエラー対応でつまずいた場面をそのまま書いています。

3つ目は、設計なしで作り始めてしまうことです。
もちろん、AIに相談すれば作ってくれます。
ただ、いきなり「アプリを作って」と頼むと、説明もなしにコードを出し始めることがあります。
何を作るのか、どんな機能が必要なのかを先に整理してからAIに渡さないと、出てきたコードが何をしているのかわからないまま進むことになります。
Insight Notesの設計編で、設計書を先に作ることの大事さについて書いています。

以上、参考にしていただけると嬉しいです。

参考文献

感想やコメントをいただけるとうれしいです。

メッセージを送るポストする