- バイブコーディングとは
- バイブコーディングとは、AIに自然言語で指示を出し、生成されたコードを逐一読み込まずに開発を進めるソフトウェア開発手法のことです。
こんにちは、Webflow専門家からAI最先端を常に追っているマサトです。宮城県塩竈市でWeb制作会社「Web春」をやっています。
「バイブコーディング（vibe coding）」という言葉、見かける機会が増えたと思います。2025年2月に登場してから1年足らずで、Collins Dictionaryの2025年Word of the Yearに選ばれるほど広まりました。ただ、言葉だけが独り歩きしていて、「AIに任せれば全自動でサイトやアプリができる」というニュアンスで誤解されている場面もよく見かけます。実際は、趣味で使う場合と事業で使う場合とで、向き合い方がかなり変わる技術です。
僕は普段の仕事、クライアントのサイト制作も自社サイトの構築も、ほぼこのバイブコーディングで回しています。この記事では、実際に毎日使っている当事者として、意味と由来、ノーコードとの違い、実際に何が作れるか、始め方とコツ、そして正直な限界まで書きます。
✓記事の内容
- バイブコーディングの意味と由来（提唱者とWord of the Year選出の経緯）
- ノーコードとの違い
- 実際に何が作れるのか（当社の制作実例）
- 始め方の3ステップと、うまくいくコツ
- 限界と、仕事にできるのかの正直な結論
先に結論から書きます。バイブコーディングとは、AIに自然言語で指示を出し、生成されたコードを逐一読み込まずに開発を進める手法のことです。個人の趣味や小さなツール作りなら、この「読まずに任せる」やり方でも十分に成立します。ただし、事業で使う本番のサイトやアプリになると話は別です。手を動かす部分はAIに任せられても、何を作るか判断し、事実を確認し、責任を持つのは人間のままです。この「判断は人・作業はAI」という分担を理解しているかどうかで、バイブコーディングの成果は大きく変わる、というのが実際にこの手法で仕事をしている僕の結論です。
バイブコーディングとは：意味と由来
バイブコーディングとは、AIに自然言語で指示を出し、生成されたコードを深く読み込まずに「雰囲気（vibe）」のまま開発を進める手法のことです。
「バイブ」という言葉が指しているもの
「vibe」はもともと英語で「雰囲気・気分」を意味する言葉です。コードの中身を1行ずつ理解して書くのではなく、AIとのやり取りで生まれる「なんとなくこの方向で良さそう」という感覚を頼りに開発を進めることから、この名前がつきました。「なんとなく」という響きから軽い印象を持たれがちですが、由来を知ると、コードを厳密に読み込む従来の開発スタイルとの対比がはっきりします。
提唱したのはAndrej Karpathy氏
この言葉を最初に使ったのは、Andrej Karpathy氏です。元Tesla AI部門責任者で、OpenAIの創業メンバーの一人でもあるAI研究者です。2025年2月、自身のX（旧Twitter）への投稿で「新しい種類のコーディングがある。完全に雰囲気に身を任せ、指数関数的な進化を受け入れ、コードが存在することすら忘れる」という趣旨の投稿をしたのが最初とされています。プログラミングエディタに向かい、AIの提案をほぼそのまま受け入れながらコードを書いていく、Karpathy氏自身の開発スタイルを表した言葉でした（Collins Dictionary公式ブログ）。AI研究の第一線にいる人物が「もうコードを見ていない」と発信したこと自体が、当時の開発者コミュニティに強いインパクトを与えました。
2025年のWord of the Yearに選出
この言葉は登場からわずか1年足らずで、Collins Dictionaryの「2025年Word of the Year」に選ばれました（2025年11月発表）。Collinsは「自然言語によってAIにコードを書かせること」という趣旨で定義しています。同じ候補リストには「biohacking（自分の心身を意図的に改造・最適化する活動）」なども挙がっていましたが、最終的に選ばれたのはバイブコーディングでした（CNN）。1つの造語がここまで急速に広まったのは、それだけ「AIに指示してコードを書かせる」という体験が、専門の開発者以外にも一気に広がった証拠だと思います。
趣味の用法と、プロの現場での実際の違い
ここで大事なのが、言葉の使われ方に幅があることです。趣味や個人開発の文脈では、Karpathy氏の元の投稿どおり「コードを一切読まずAIに完全に任せる」ニュアンスで使われることが多いです。一方、僕たちのように仕事でこの手法を使う現場では、意味合いが少し変わります。AIに自然言語で指示を出し、逐一の実装を手打ちしないというスタイルは同じです。ただし、出てきたコードやデザインを人間が確認し、事実関係やセキュリティ、品質を検証する工程は必ず挟みます。「読まずに任せる」ではなく「打たずに任せて、見て判断する」というのが、仕事で使う場合のバイブコーディングの実態です。同じ1つの言葉で呼ばれていても、趣味の文脈と仕事の文脈では、注意すべき点がまったく違うと考えてください。
背景にあるのはAIエージェントの進化
Karpathy氏の投稿が2025年に大きな反響を呼んだのは、ちょうど同じ時期に、AIがコードの提案を1行返すだけの「自動補完」から、複数のファイルにまたがる実装を自律的に読み書きし、実行結果を見ながら自分で修正まで行う「コーディングエージェント」へと進化したタイミングと重なっていたからです。指示を出す→AIが複数の作業を自分で進める→結果を見て次の指示を出す、というやり取りが実用的な速度で回るようになったことで、初めて「コードを逐一読まずに任せる」という進め方が現実的な選択肢になりました。
バイブコーディングとノーコードは何が違うのか
バイブコーディングとよく混同される言葉に、ノーコード・ローコードがあります。当社はWebflow（ノーコード）とAIサイト制作（バイブコーディング）の両方を手掛けているので、この違いはよく質問されます。似ているようで、仕組みは別物です。
ノーコード：あらかじめ用意された部品を組み合わせる
Webflowのようなノーコードツールは、あらかじめ用意されたデザインパーツや機能ブロックを、画面上でドラッグ&ドロップしながら組み合わせていく仕組みです。裏側で動くコードは、ツールの提供元があらかじめ作り込んで検証済みのものを使うため、動作は安定しやすくなります。
バイブコーディング：AIがその場でコードを生成する
一方バイブコーディングは、AIがその場で、その案件専用のコードを新規に生成します。決められた部品の組み合わせではないので自由度は高くなりますが、生成される中身は毎回変わります。だからこそ、人間による確認とレビューの工程が欠かせません。
フルスクラッチ開発との違い
もう1つの比較対象が、AIを使わず人間がゼロからコードを書く従来の「フルスクラッチ開発」です。自由度の高さはバイブコーディングと同じですが、実装そのものに人間の作業時間がかかるため、期間とコストは大きくなりがちです。バイブコーディングは、このフルスクラッチ開発が持っていた自由度を保ったまま、実装にかかる時間だけを大きく圧縮した手法だと捉えると分かりやすいと思います。
当社の場合、決まった機能を素早く安定して形にしたい案件はノーコード、自由度高くゼロから作り込みたい案件はバイブコーディングによるAIサイト制作、と案件の性質で使い分けています。Webflow上でバイブコーディング的な手法を使った実例はWebflow×バイブコーディングの解説記事に書いています。
バイブコーディングで実際に何が作れるのか
言葉のインパクトが大きい分、「結局何ができるのか」が気になると思います。用途としては、LP（ランディングページ）やコーポレートサイトのような静的なWebサイトから、社内の業務効率化のための小さなツール、スマートフォンアプリまで、かなり幅広く対応できます。規模も、個人が土日で作る簡易ツールから、事業として外部に公開する本番サイトまで、両端をカバーできる技術です。ここからは僕の実体験です。
自社サイト26ページを7日間で構築
当社の自社サイトは、2026年7月にAI（Claude Code）を使ったバイブコーディングでフルリニューアルしました。26ページを新規構築し、旧サイトからの記事62本・実績24件の移行、お問い合わせフォーム4本の接続、計測・構造化データの整備まで含めて、7日間（企画4日・構築3日）で終えています。手を動かしたのはAIで、人間（僕ひとり）はコンセプトと構成の決定、デザインの審美判断、文章の事実確認と営業判断、各工程のレビューとGOサインを担当しました。詳しい記録は自社サイト7日間リニューアルの実録に全部書いています。
iOSアプリの企画・開発
サイトだけでなく、当社は自社でiOSアプリを2本企画・開発し、App Storeでの公開まで実施しています。Webサイトの制作と同じく、実装の大部分をAIとの対話で進めるスタイルです。Webサイト制作と違い、アプリはストアの審査という第三者チェックが入る分、事前の作り込みと確認がより重要になります。
Figma Makeで勤怠管理アプリ
ブラウザ完結型のツールでの実例もあります。詳しくはFigma Makeで勤怠管理アプリを作った記事にまとめています。コーディングエージェントのようにターミナルを使わなくても、この手法自体は成立するという一例です。
バイブコーディングのやり方：始め方3ステップ
ここからは、実際に始めたい人向けの手順です。難しく考えず、次の3ステップで十分です。
ステップ1：ツールを選ぶ
大きく分けて2種類のツールがあります。
| タイプ | 代表的なツール | 向いている人 |
|---|---|---|
| コーディングエージェント型 | Claude Codeなど | ターミナル操作に抵抗がなく、本格的な開発をしたい人 |
| ブラウザ完結型 | Figma Makeなど | プログラミング未経験で、まず触ってみたい人 |
僕自身は主にClaude Code（AIモデルはOpusとFableを使い分け）を使っていて、月額の課金は約3万円です。どちらのタイプも無料枠を用意しているものが多いので、いきなり1つに決め打ちせず、2〜3個試してから「対話しながら作る」感覚が一番合うものを選ぶくらいの気軽さで十分です。
ステップ2：小さく作る
最初から本番のコーポレートサイトや業務システムを作ろうとしないでください。名刺代わりの1ページサイト、社内向けの簡単な集計ツールなど、1機能だけで完結するものから始めると、AIとの対話の感覚と、うまくいかない時の直し方が早く身につきます。
ステップ3：動かして直す
バイブコーディングの本質は、一度で完成させることではなく、動かして・見て・直すサイクルを繰り返すことです。指示を出す→動かす→気になる点を伝える→また動かす、という会話のキャッチボールが基本の動き方になります。新人スタッフに仕事を頼んで、成果物を見ながらフィードバックしていく感覚に近いと考えると、身構えずに始めやすいと思います。
最初の一歩は「自分のサイト」と「自分のアプリ」
何から始めるか迷っている人に僕が勧めるのは、はっきりしています。まず自分のサイトを作ること、そして自分のアプリを作ることです。誰かのためではなく、自分のものを作る。これが一番早い。
ひとつ厳しいことを書きます。確かにお金はかかりますが、勉強費用0円で何もかも終わらせようとするなら、それはもう挑戦しないほうがいいと言ってしまいます。道具に月数千円から数万円を出せないなら、そもそも仕事にするところまで届きません。
とはいえ、費用を抑える選択肢はあります。最近は中国製のAIがかなり良いと言われていて、価格も激安、性能もそれなりです。まずはそこで試してみるのもありだと思います。しかも面白いことに、中国のAIで作れるようになると、「中国のAIで作りたい」という人とマッチングして案件を取れるようになります。道具の選択が、そのまま仕事の入口になるわけです。
うまくいくコツ
何度も繰り返してきて分かった、うまくいくコツを5つ書きます。
明確な指示を出す
「いい感じにして」のような曖昧な指示では、AIも曖昧な結果しか返せません。例えば「かっこいいサイトにして」ではなく、「30代の経営者向けに、信頼感を出すため落ち着いた配色にして、実績を目立たせる」のように、誰向けに・何を優先するかまで言語化すると、期待に近い結果が返ってきます。
1回で完璧を求めない
最初の生成がそのまま完成形になることは、まずありません。人間同士のやり取りと同じで、最初のラフ案を見てから軌道修正する前提でいるほうが、結果的に早く仕上がります。
捨てる勇気を持つ
正直に言うと、当社の自社サイトのデザインも、いきなり決まったわけではありません。約50パターンを作って絞り込んでいて、デザインがうまく生成できるようになるまでの約1ヶ月は、AIでゴミを大量生産していました。この「思ったのと違う」を捨てて何度もやり直す割り切りが、実はバイブコーディングで一番大事なコツだと思っています。
指示は小さく分ける
「サイト全体を一気に作って」のような大きすぎる指示は、途中で何が起きているか人間側が把握しづらくなります。ページ単位、機能単位で指示を区切り、その都度動作を確認してから次に進むほうが、遠回りに見えて結果的に早く、修正もしやすくなります。
自分以外の目でも確認する
AIとの対話に集中していると、自分では気づかないうちに視野が狭くなります。一晩置いてから見返す、可能であれば他の人にも画面を見てもらうなど、対話の外側からの目を1回は入れることをおすすめします。当社の場合も、社内での確認だけでなく、公開前の最終チェックを工程として必ず挟んでいます。
限界と注意点（正直に）
ここは制作会社として、都合の良い話だけでなく正直に書きます。
捨てたものの話｜CMSも予約フォームもノーコードツールも、全部ゴミにした
最初に、自分の失敗から書きます。動いたけど本番に出せずに作り直した、というのはたくさんあります。
いまのモデルが出てくる前、僕は長い期間いろいろなものを開発していました。CMS、予約フォーム、ノーコードツール——それこそ自分で作ろうとしました。結果は全部ゴミになって、削除しました。正直、あの時間は無駄だったと言ってもいいくらいです。
自社サイトのリニューアルも同じです。今回うまくいく前に、過去4回ほど試行錯誤して、どれもうまくできませんでした。今回のモデルになったおかげで、一気に全部が進んだというのが実際のところです。
だから、煽って言えば「7日でできたサイト」です。でも蓋を開ければ、まだAIがあまり賢くなかった頃から数えて、半年ぐらいかかっているというのが正確です。7日という数字だけを見て「自分にもできる」と判断すると、たぶん僕と同じように何度か捨てることになります。
そして、まだ完成していません
もうひとつ正直に書くと、この自社サイトも、まだ自分で点検できていないページがありますし、公開したいページもたくさん残っています。完成したとは言えない状態です。
これはバイブコーディングの本質的な性質だと思っています。AIで何でもできるようになったからこそ、完成がより遠のいたとも言えるわけです。作れる量が増えると、やりたいことも同じだけ増える。「AIを使えば早く終わる」と考えていると、この感覚は裏切られます。早く終わるのではなく、同じ時間でやれる量が増えるだけです。
本番品質にはレビューと判断が必要
バイブコーディングは「打つ」作業をAIに任せる手法であって、「判断する」作業まで手放していい手法ではありません。何を作るかの決定、デザインの良し悪しの判断、書いてある内容が事実として正しいかの確認は、人間の仕事として残ります。当社が自社サイトのリニューアルで徹底したのも、まさにこの「手を動かすのがAI、判断するのが人」という分担でした。この分担を省略すると、事実誤認や表現の誤りがそのまま公開されてしまうリスクがあります。
セキュリティと著作権への配慮
AIが生成するコードは、既知の脆弱性パターンを含んでしまう可能性がゼロではありません。また、学習元データとの関係で著作権の扱いが議論されている領域でもあります。読まずに任せる使い方は、趣味の範囲では大きな問題になりにくくても、事業で外部に公開するものには適していません。
機密情報の扱いに注意する
クライアントの個人情報や、公開前の事業計画のような機密情報を、そのままAIツールに貼り付けて指示を出すのは避けてください。ツールごとに入力データの扱いは異なるため、事業で使う場合は利用規約やデータの取り扱い方針を確認したうえで、機密情報は伏せ字にする・別のダミーデータに置き換えるといった配慮が必要です。
「動く」ことと「事業に使える」ことの差
手元でデモが動いた、という状態と、実際に顧客や取引先に見せる本番環境として運用できる状態の間には、まだ距離があります。表示速度、検索エンジンへの対応、アクセスが集中した時の挙動、フォームから届いたお問い合わせを正しく処理できるかなど、事業で使うレベルの検証は、AIに指示するだけでは完結しません。
向いていないケースもある
正直に言うと、すべての開発がバイブコーディング向きというわけではありません。決済や個人情報を大量に扱う複雑な業務システム、医療・金融など規制が厳しい領域、既存の大規模システムと密接に連携する開発は、AIに任せる範囲を広げるより、専門知識を持つ人間が設計の主導権を握るべき領域だと考えています。「できるかどうか」と「その手法が適切かどうか」は、分けて判断してください。
WebflowとAIサイト、どう振り分けているか
実務の判断基準を書きます。クライアントが明確に「Webflowで作りたい」と希望されたものは、全てWebflowで作っています。それ以外は、現状AIサイト制作のほうをおすすめしています。
理由は明確で、人が作るよりAIが作ったほうが、もうパフォーマンスが高いからです。ウェブサイトにはチェックすべき項目が何百とあって、それを人間が全部埋めていくと、確認するだけでかなりの時間を浪費します。
それだけではありません。AIに全部のコードを書かせ、デザインを作らせ、会社の情報を入れておくと、そのAIが会社について何でも答えられるようになります。請求書や営業資料まで作れるようになる。ChatGPTのメモリで管理するAI秘書とは比較になりません。サイトの全情報とデザインの情報を両方持っているAIなので、PDFの作成も請求書の作成も、一貫した見た目で出力できます。
これは「会社に1体のAI」という考え方で、その基盤になるのがサイトだと思っています。この流れが本格的に来るのは、たぶん2〜3年後です。いまはまだ「AIで簡単にサイトが作れる」くらいの受け取られ方をしていますが、本質はそこではなく、もっと先にあると考えています。
作り替えが、一生起きなくなる
もうひとつ、AIサイトの構造的な利点があります。使うAIモデル（Claude・GPT・Geminiなど）を、その時々で一番賢いものに切り替えられることです。
WordPressやWebflowのようなツールでサイトを作ってきた場合、ツールを変えるときにサイトを作り直すという二度手間が発生していました。でもAIサイト——つまり全てをコードで管理するフルスタックなサイトになると、作り替えの費用というものが存在しません。中身の「脳みそ」にあたるAIを差し替えるだけで済むからです。
コードで作っているのでパフォーマンスは最も良く、柔軟性も最大で、しかも脳の部分はいくらでも交換できる。この構造なら、5年後10年後にモデルが入れ替わっても、サイトそのものを作り直す必要はまず出てこないと考えています。
正直なところ、いまWebflowで運用されている方にもAIサイトをおすすめしています。AIで作ると聞くと不安定に見えるかもしれませんが、そこを人間である僕らが監修することで、圧倒的なパフォーマンスが出せます。セキュリティの水準についても、Webflowより上を取れると考えています（実際、当社サイトはSSL Labs・Mozilla Observatoryの両方でA+評価です）。
この先、サイトの概念そのものが変わると思っています
もう少し先の話も書いておきます。事業を始める人が全員、いま「おしゃれ」と言われるサイトをすぐ作れるようになったとき、それは「AIっぽいサイト」に置き換わって、価値は暴落します。大半の人はChatGPTと会話して、綺麗なサイトをポンポン出すようになるはずです。
でも、必ずそこにも流行が発生します。それが3Dのメタバースになるのか、サイトがゲームのようなものになるのか、いまは想像もできません。ただ波は必ず起きる。その波にいち早く乗るために必要なのは、一番賢いAIを追い続けることだけだと思っています。前述のとおり、AIサイトならモデルを切り替えるだけでそれができます。次のムーブメントが起きたとき、真っ先に乗り換えて、最初に仕掛けられる。
バイブコーディングは仕事にできるのか
制作会社の立場から、正直に答えます。仕事にできます。ただし、価値が生まれる場所が変わります。
以前は「コードを書けること」自体に価値がありました。バイブコーディングが広がった今は、コードを打つ作業の比重は下がり、代わりに何を作るべきかの要件定義、デザインの審美的な判断、書く内容の事実確認、そして各工程で完成として良いと判断するレビューの力が、これまで以上に価値の中心になっています。当社が自社サイトのリニューアルで人間の役割として担ったのも、この4つでした。
裏を返せば、「AIに指示を出すだけ」で高品質な事業用サイトやアプリが自動的にできるわけではありません。ツールが誰でも使えるようになったからこそ、判断できる人とできない人の差が、そのまま結果の差になる。それが現場で日々感じている実感です。個人でも会社でも、この判断の力をどう磨くかが、これからの分かれ目になると考えています。
0→1をどう作るか
実績が無い状態からどう始めるか。答えはシンプルで、まず自分のもので0→1の実績を作ることです。自分のサイト、自分のアプリ。それが動いていれば、それ自体が実績になります。
1件できたら、それを糧に2件目、3件目と実績を増やしていく。この順番以外に近道は無いと思っています。最初の1件を「誰かの案件」で埋めようとすると、実績が無いから受注できない、受注できないから実績が無い、というループから抜けられません。自分のものなら、その堂々巡りを自分の判断だけで抜けられます。
フリーランスや小さな制作会社にとっては、追い風でもあります。実装にかかる時間が圧縮される分、以前なら人数の多い会社にしか受けられなかった規模の仕事を、少人数でも引き受けられるようになりました。当社自身、この手法を主力にしたことで案件あたりの制作期間を大きく縮められています。
まとめ
バイブコーディングは、Karpathy氏の投稿から1年足らずでWord of the Yearに選ばれるほど広まった言葉ですが、中身は「AIに自然言語で指示し、コードを逐一書かずに開発を進める手法」というシンプルなものです。ノーコードとは仕組みが異なり、自由度が高い分、人間による確認とレビューが欠かせません。趣味なら気軽に試してよく、事業で使うなら判断とレビューを人間が引き受ける前提で向き合ってください。
当社は、このバイブコーディングによるサイト制作・アプリ開発を実際の事業として提供しています。詳しくはAI関連サービスのページ、自社サイトの構築過程そのものは制作過程の全記録としてgitの実履歴ごと公開しています。バイブコーディングでの制作を検討していて、判断が必要な部分だけ相談したいという場合も、無料相談からお気軽にどうぞ。
よくある質問
プログラミング知識ゼロでもできますか？
ブラウザ完結型のツールであれば、知識ゼロからでも小さなものは作れます。ただし事業で使う本番のサイトやアプリになると、出力を判断しレビューできる知識か、判断できる人と組む体制が必要です。
無料でできますか？
無料枠があるツールも増えていて、試すこと自体は無料で始められます。ただし本格的に使うと従量課金や月額プランになるのが一般的です。当社の場合、Claude Codeの利用だけで月額約3万円かかっています。
どのツールから始めるべきですか？
プログラミング未経験ならFigma Makeのようなブラウザ完結型、開発の基礎知識があるならClaude Codeのようなコーディングエージェント型から試すのがおすすめです。まずは小さく作ってみて、対話しながら進める感覚をつかんでください。
企業のサイトをバイブコーディングで作るのは危険ですか？
「読まずに任せる」使い方のままなら危険です。ただし人間が要件を決め、生成物を確認し、事実関係とセキュリティをレビューする工程を挟めば、事業で使う本番サイトの制作手法として十分成立します。当社もこの手法で自社サイトを構築・運用しています。
バイブコーディングは仕事になりますか？
なります。ただしコードを書く作業自体の価値は下がり、代わりに要件定義・デザインの審美判断・事実確認・レビュー判断の価値が上がります。この分担を担える会社や個人が、今後も選ばれていくと考えています。
