株式会社Web春 代表取締役の栗田です。宮城県塩竈市でWeb制作をやっています。
先に結論です。僕はバイブコーディングをClaude Codeで回して、毎日の仕事にしています。クライアントのサイトも、自社サイトも、App Storeに出している自社アプリも、ほぼ全部この方法で作っています。
ただし仕事で使うバイブコーディングは、「コードを読まずに任せる」ではありません。打たずに任せて、見て判断する。手を動かすのはAI、何を作るか決めて、事実を確かめて、責任を持つのは人です。この分担を守れるかどうかで、案件になるかどうかが決まります。
この記事の要点
- バイブコーディングとは
- バイブコーディングとは、AIに自然言語で指示を出し、生成されたコードを逐一読み込まずに開発を進める手法のことで、2025年2月にAndrej Karpathy氏が提唱し、同年のCollins Dictionary「Word of the Year」に選ばれました。
目次
バイブコーディングをClaude Codeで回している毎日の仕事
Claude Codeは、ターミナルで動くコーディングエージェントです。指示を出すと、複数のファイルを読み書きして、動かして、結果を見ながら自分で直すところまでやってくれます。僕はAIモデルをOpusとFableで使い分けています。
自社サイト26ページを7日間で作り直しました
2026年7月に、Web春の自社サイトをClaude Codeでフルリニューアルしました。26ページの新規構築、旧サイトからの記事62本・実績24件の移行、お問い合わせフォーム4本の接続、計測と構造化データの整備まで含めて7日間（企画4日・構築3日）です。手を動かしたのはAIで、僕はコンセプトと構成の決定、デザインの良し悪しの判断、文章の事実確認、各工程のGOサインを担当しました。全手順はClaude Codeによるサイト制作の全手順、7日間の記録は自社サイトのリニューアル実録にあります。
iOSアプリもClaude Codeで作って、App Storeに出しています
自社のiOSアプリ3本も、実装の大部分をAIとの対話で進めました。企画からApp Store公開まで、だいたい1週間です。アプリは審査という第三者のチェックが入るので、サイトより出す前の確認が効いてきます。公開にかかった費用と審査で止まった記録はApp Storeにアプリを公開する費用に書きました。
運用も、請求書も、営業資料も同じAIで作ります
サイトを作ったあとの更新も、AIでやっています。サイトのコードとデザインと会社の情報を全部持っているAIなので、請求書や営業資料のPDFも同じ見た目で出せるんですよ。サイトは「会社に1体のAI」の土台になる、というのが僕の考えです。
バイブコーディングとは
バイブコーディングとは、AIに自然言語で指示を出し、生成されたコードを逐一読み込まずに開発を進める手法のことです。「vibe」は英語で「雰囲気」。コードを1行ずつ理解して書くのではなく、AIとのやり取りの手応えを頼りに進めることから、この名前がつきました。
言い出したのは、元Tesla AI部門責任者でOpenAIの創業メンバーの一人でもあるAndrej Karpathy氏です。2025年2月にXへ「完全に雰囲気に身を任せ、コードが存在することすら忘れる」という趣旨の投稿をしたのが最初とされています。そこから1年足らずで、Collins Dictionaryの2025年Word of the Yearに選ばれました（Collins Dictionary公式ブログ・CNN）。
広まった背景には、AIが1行ずつ候補を出す「自動補完」から、複数のファイルを自分で読み書きして直す「コーディングエージェント」に進化したことがあります。Claude Codeはまさにこの種類の道具です。
趣味のバイブコーディングと、仕事のバイブコーディングの違い
趣味の文脈では、Karpathy氏の投稿どおり「コードを一切読まずに任せる」意味で使われることが多いです。一方で仕事では、出てきたコードやデザインを人が確認し、事実関係とセキュリティを検証する工程を必ず挟みます。同じ言葉でも、気をつける点がまったく違います。
ノーコード・フルスクラッチとの違い
Webflowのようなノーコードは、用意された部品を画面上で組み合わせる仕組みです。裏のコードは提供元が作り込んだものなので、動作は安定しやすい。一方でバイブコーディングは、AIがその案件専用のコードをその場で生成します。自由度が高い分、人の確認が欠かせません。
人がゼロからコードを書くフルスクラッチ開発と比べると、自由度は同じで、実装にかかる時間だけを大きく縮めた手法だと考えると分かりやすいと思います。Web春はWebflowとAIサイト制作の両方をやっていて、Webflow上でAIを使う話は、後半の「Webflowとどう使い分けているか」に書いています。
Claude Codeでバイブコーディングを始める3ステップ
1. 道具を1つ決めて課金する
道具は大きく2種類です。
| タイプ | 代表的なツール | 向いている人 |
|---|---|---|
| コーディングエージェント型 | Claude Codeなど | ターミナル操作に抵抗がなく、本格的に作りたい人 |
| ブラウザ完結型 | Figma Makeなど | プログラミング未経験で、まず触ってみたい人 |
ひとつ厳しいことを書きます。確かにお金はかかりますが、勉強費用0円で何もかも終わらせようとするなら、それはもう挑戦しないほうがいい、と言ってしまいます。道具にお金を出せないなら、仕事にするところまで届きません。
とはいえ費用を抑える選択肢もあります。最近は中国製のAIがかなり良いと言われていて、価格も安く、性能もそれなりです。しかも中国のAIで作れるようになると、「中国のAIで作りたい」という人とマッチングして案件を取れるようになります。道具の選択が、そのまま仕事の入口になるわけです。
2. 自分のサイトと自分のアプリを作る
何から始めるか迷っているなら、答えははっきりしています。まず自分のサイトを作ること、そして自分のアプリを作ることです。誰かのためではなく自分のものを作るのが、一番早いです。最初は1ページのサイトや、1機能だけのツールで十分です。ブラウザだけで作るならFigma Makeで勤怠管理アプリを作った記録が参考になります。
3. 動かして直すを繰り返す
一度で完成させようとしないでください。指示を出す、動かす、気になる点を伝える、また動かす。この往復が基本の動き方です。新人スタッフに仕事を頼んで、成果物を見ながらフィードバックする感覚に近いと思います。
うまくいくコツは5つです
- 「いい感じにして」ではなく、誰向けに何を優先するかまで書いて指示する
- 1回で完璧を求めない
- 思ったのと違うものは捨てる
- 指示はページ単位・機能単位に小さく分ける
- 一晩置く、人に見せるなど、対話の外の目を1回入れる
中でも一番大事なのは捨てる勇気です。自社サイトのデザインは約50パターン作って絞り込みました。デザインがうまく出せるようになるまでの約1ヶ月は、AIでゴミを大量生産していました。
バイブコーディングのデメリット
動いたけど本番に出せず、全部捨てたものがあります
自分の失敗から書きます。いまのモデルが出る前、僕はCMSも予約フォームもノーコードツールも、自分で作ろうとしました。結果は全部ゴミになって、削除しました。自社サイトのリニューアルも、今回うまくいく前に4回ほど試して、どれもうまくいきませんでした。
だから煽って言えば「7日でできたサイト」です。でも蓋を開ければ、AIがまだあまり賢くなかった頃から数えて、半年ぐらいかかっています。
何でも作れる分、完成が遠のきます
正直に書くと、自社サイトにもまだ自分で点検できていないページがありますし、公開したいページもたくさん残っています。作れる量が増えると、やりたいことも同じだけ増えるんですよ。AIで早く終わるのではなく、同じ時間でやれる量が増えるだけです。
レビューを省くと、誤りがそのまま公開されます
何を作るかの決定、デザインの良し悪し、書いてある内容が事実として正しいかは、人の仕事のままです。AIが生成するコードには既知の脆弱性のパターンが混ざる可能性もあります。また、クライアントの個人情報や公開前の事業計画をそのままAIに貼るのは避けてください。ツールごとに入力データの扱いが違います。
向いていない開発もあります
決済や個人情報を大量に扱う業務システム、医療・金融のように規制が厳しい領域、既存の大規模システムと密につながる開発は、専門知識を持つ人が設計の主導権を握るべき領域です。「できるか」と「その手法が適切か」は分けて判断してください。
バイブコーディングは案件になるか、稼げるか
仕事にできます。ただし、価値が生まれる場所が変わります。以前は「コードを書けること」に価値がありました。今は、何を作るべきかの要件定義、デザインの判断、内容の事実確認、完成と言ってよいかを決めるレビューの4つが価値の中心です。
最初の1件は、自分のもので作る
実績が無い状態から始めるなら、まず自分のもので0→1の実績を作ることです。自分のサイト、自分のアプリ。動いていれば、それ自体が実績になります。最初の1件を誰かの案件で埋めようとすると、実績が無いから受注できない、受注できないから実績が無い、というループから抜けられません。
Webflowとどう使い分けているか
クライアントが「Webflowで作りたい」と希望されたものは、全部Webflowで作っています。それ以外は、今はAIサイト制作をおすすめしています。人が作るよりAIが作ったほうが、もうパフォーマンスが高いからです。サイトにはチェックすべき項目が何百とあって、人が全部埋めていくと確認だけでかなりの時間を使います。
さらにコードで持つサイトなら、中身のAIモデル（Claude・GPT・Geminiなど）を、その時々で一番賢いものに切り替えられます。ツールを乗り換えるたびにサイトを作り直す、ということが起きません。セキュリティも人が監修すれば十分な水準を取れて、Web春のサイトはSSL Labs・Mozilla Observatoryの両方でA+です。
Webflowで作るサイトにも、AIは使っています。2025年にWebflowとバイブコーディングを組み合わせたときに書いた手順を、当時のまま載せます。
Webflowは視覚的にウェブサイトを作れるノーコードツールですが、実はカスタムコードの埋め込みもできます。この2つを組み合わせることで、技術的な知識がなくても高度なカスタマイズが可能になるんです。
またWebflowは最近になってWebflow cloudという機能を発表しました。それはGithub連携ができるものとなっており、つまりはバイブコーディングとWebflowをよりスムーズに連携できるようになることを指します。
具体的な連携方法としては以下のような流れになります。
- Webflowでベースとなるサイトを作成します。
- 次にAIに「このボタンをクリックしたら3Dアニメーションを表示したい」といった自然な言葉で指示を出します。
- するとAIがJavaScriptやCSSのコードを生成してくれるので、それをWebflowのカスタムコード欄に貼り付けるだけ。
僕も最初は半信半疑でしたが、実際にやってみると驚くほど簡単でした。プログラミングの経験がなくても、やりたいことを言葉で伝えるだけでコードが手に入るんです。
この先、サイトの概念そのものが変わると思っています
誰でも綺麗なサイトをすぐ作れるようになったら、今「おしゃれ」と言われるサイトは「AIっぽいサイト」に置き換わって、価値は暴落します。でも、そこにも必ず流行が生まれます。3Dになるのか、ゲームのようになるのか、今は分かりません。その波に一番に乗るために必要なのは、一番賢いAIを追い続けることだけだと思っています。
まとめ｜バイブコーディングはClaude Codeで、判断は人が持つ
バイブコーディングは、AIに自然言語で指示してコードを書かせる作り方です。僕はClaude Codeで毎日、サイトもアプリも作っています。趣味なら気軽に試してよく、仕事にするなら、判断とレビューを人が引き受ける前提で向き合ってください。最初の1件は自分のサイトとアプリです。
Claude Codeで作っていて踏んだ落とし穴や、うまくいった指示の出し方はメルマガで先に書いています。自分で作る方は登録しておいてください。AIで作ったサイトの本音はAIでホームページを作ってみた本音、制作費はAIホームページ制作の費用に書いています。作るのを任せたい方はAIサイト制作のページか、相談フォームからどうぞ。
制作実績
よくある質問
バイブコーディングとは何ですか？
AIに自然言語で指示を出し、生成されたコードを逐一読み込まずに開発を進める手法です。2025年2月にAndrej Karpathy氏がXで提唱し、2025年11月にCollins Dictionaryの「Word of the Year」に選ばれました。
Claude Codeでバイブコーディングはできますか？
できます。Web春は毎日Claude Codeで仕事をしていて、自社サイト26ページを構築3日（企画込み7日）で作り直し、自社のiOSアプリ3本もApp Storeに公開しています。
バイブコーディングのデメリットは何ですか？
レビューを省くと誤りや脆弱性がそのまま公開されることと、思いどおりに出せるまで時間がかかることです。Web春も自社サイトは約50パターンから絞り込み、過去4回のリニューアルの試みは失敗しています。
バイブコーディングで案件を取って稼げますか？
稼げます。ただし最初の1件は自分のサイトか自分のアプリで作ってください。動いていればそれ自体が実績になり、実績が無いから受注できないというループを自分の判断だけで抜けられます。
プログラミング知識ゼロでもできますか？
Figma Makeのようなブラウザ完結型なら、知識ゼロからでも小さなものは作れます。仕事で使う本番のサイトやアプリでは、出てきたものを判断してレビューできる知識か、判断できる人と組む体制が必要です。
バイブコーディングは無料でできますか？
無料枠のあるツールで試すことはできます。ただし仕事にするなら有料の道具を1つ決めて課金してください。勉強費用0円で全部済ませようとすると、仕事にするところまで届きません。
