バイブコーディングで自社サイトは作れる？道具の選び方と、指示・修正・確認・引き継ぎの進め方

バイブコーディングは、コードを読まずにAIとの会話でソフトやサイトを作るやり方です。呼び名はAndrej Karpathyが2025年2月に紹介しました。 自社サイトやLPは作れますが、掲載内容と公開前の確認、公開後に直せる状態での引き継ぎは人の仕事です。 道具は「会話で作るサービス」と「手元で動くAIエージェント」の2種類で考えると、目的に合わせて選べます。

バイブコーディングとは｜意味と語源

バイブコーディングとは、生成されたコードを詳しく読まず、AIへの指示と画面の確認を中心にソフトやサイトを作る方法です。自然な言葉で希望を伝え、生成された画面や動作を確かめながら、修正を重ねていきます。語源は英語の「vibe coding」で、AI研究者のAndrej Karpathyが紹介した呼び名です。

Vercelの公式説明では、その時期を2025年2月としています。原投稿の正確な日時を直接検証したものではないため、月までの表記にとどめます。Vercelの由来の説明

現在は、自然な言葉でAIに開発を頼む方法全般を指す場合もあります。当初の発言には使い捨ての週末プロジェクトという文脈もあり、事業利用では確認を補う必要があります。

バイブコーディングの道具は2種類

道具は、会話から新しく作るサービスと、手元の既存ファイルを調べて編集するAIエージェントに分けて選べます。

両方にまたがる道具もあり、「手元で動く」は主にファイル編集や命令を実行する場所を指します。

ツール比較｜会話で作るサービス

確認日：2026年10月時点。金額は米ドルです。

Artifactsは成果物を作る仕組みで、現在のClaude Designは、その中で使えるテンプレートです。独立版は2026年12月14日に終了し、その後は読み取り専用となる予定です。独立版の移行案内

ツール比較｜手元で動くAIエージェント

Claude Codeは利用形態ごとの課金条件、Cursorは現行・旧契約と他社モデルの追加課金を確認して選びます。

既存サイトの更新では、元データと公開手順を渡せるAIエージェントが候補です。新しいLPの見た目を検討するなら、画面を共有しやすい会話型サービスも選択肢になります。

バイブコーディングの料金と書き出しで確認すること

月額料金だけで選ばず、制作の利用上限、商用の公開条件、移行に必要なファイルまで確認します。

無料枠は試作に使えますが、修正や公開が無制限になるとは限りません。クレジットやトークンは利用量の単位で、サービスごとに計算の仕組みが異なります。

料金だけでなく、契約画面と現行の公式案内を突き合わせてから申し込みます。Boltの料金・上限、Figmaのクレジット条件、Codexの料金条件

また、コードを書き出せることと、自社の公開先でそのまま動くことは別です。BoltのZIPは、手元で動かす際にNode.jsという実行環境と、動作に必要な部品の導入が必要です。単体HTMLと、組み立てやサーバー処理が必要なソース一式を区別してください。

Lovableでは、2026年5月13日以降の新規アプリは、サーバー処理を含むTanStack Startが標準です。従来のReactとViteによる構成とは、移行先に必要な環境が異なります。データ保存、認証、外部連携も、コードとは別に移行や再設定を確認します。Lovableの公開・移行説明

既存のCMSへ入れる予定なら、完成前に確認用ページへ取り込んで試してください。取り込める形式、共通デザインとの干渉、外部サービスの必要性を先に確かめます。

バイブコーディングの始め方｜自社サイトを作る進め方

対象読者と事実を固めたうえで、骨組み、文章、見た目、動き、軽さの順に作ると判断しやすくなります。

当社では、トップページや製品紹介LP、採用・会社概要のページをAIエージェントで制作しています。人が指示と確認を担い、次の8手順に分けて進めています。

1. 誰に向けたページかを決めます

初めて商品を知る人か、比較して購入を考える人かを具体化します。さらに、購入、問い合わせ、資料請求など、ページでしてほしい行動を決めます。

1. 載せる事実を集めます

商品仕様、料金、配送条件、実績、注意事項を、確認済みの資料からそろえます。AIには、資料にない数字や効果、利用者の声を補わないように指示します。

1. 見た目の決まりを1枚にします

色、書体、部品、動き、文章の調子、使わない表現を文書にまとめます。当社では、このトーン＆マナー文書を新しいページの制作時にAIへ渡します。

1. ページの骨組みを作ります

見出し、掲載順、画像の位置、行動への導線だけを先に確認します。商品写真から仕様、購入条件へと、読む人が迷わず進める順序を検討します。

1. 文章を整えます

見出しと本文を確認済みの事実に照らし、重複や曖昧な表現を直します。商品の長所だけでなく、使えない条件や注文前の注意も読み取れるようにします。

1. 見た目を整えます

トーン＆マナーに沿って、写真、文字の大きさ、余白、色を調整します。当社の約束は、1画面の主役を1つにし、和文と英字・数字の書体を分けることです。ロゴ由来の紺を基調に、菫、藍、青緑を差し色として使っています。

1. 必要な動きを加えます

メニュー、開閉、画面の切り替えなど、説明や操作に役立つ動きを加えます。当社では、見えていないものは動かさず、操作や読解を妨げないことを優先します。

1. 軽さと公開先での動作を確認します

画像容量、読み込み、スクロールのかくつきを測り、重い部分を直します。確認用ページで表示を見た後に公開し、本番でも同じ内容を実際に開きます。

当社では、文章や部品のデータと組み立てるプログラムを「生成元」、公開するHTMLを「生成物」として分けます。修正は生成元へ反映し、そこから公開用データを組み立て直します。公開HTMLだけを直接直すと、次の生成時に修正が消えるためです。

作り直すたびに版番号を付け、前の状態へ戻れるように保存しています。当社のトップページは2026年10月時点で15版目ですが、以前の版も保存しています。

バイブコーディングの指示と修正｜うまく作るコツ

うまく作るコツは、対象読者、根拠、変更範囲、確認方法を、AIが判断できる言葉で渡すことです。

「売れるページにして」だけでなく、誰のどんな疑問を解消したいかを伝えます。以下は、商品や資料の内容を自社のものに置き換えて使う指示文の例です。

指示文の例1｜最初の骨組みを作る

初めて当社の商品を知る人に向けた、商品紹介LPの骨組みを作ってください。
目的は既存の商品ページへの移動で、読者が素材と使い方を理解できる構成にしてください。
添付した商品資料の事実だけを使い、料金、効果、実績、購入者の声を創作しないでください。
添付のトーン＆マナー文書を守り、まずは見出し、掲載順、画像の役割を提案してください。
公開先に必要な環境と書き出す形式を説明し、未確定の内容は確認事項として残してください。

指示文の例2｜画面を見て部分修正する

スマートフォンでは、商品写真の次に素材と使い方が読める順序へ修正してください。
承認済みの価格、注意事項、リンク先は保ち、今回の変更は配置と余白に限定してください。
トーン＆マナーに従い、抽象図形、光の玉、紫のネオン、すりガラス、絵文字は使わないでください。
同じ角丸カードを3列に並べず、画面ごとに主役が分かるよう情報の強弱を調整してください。
修正後は変更箇所と確認結果を示し、まだ確かめられていない点も報告してください。

指示文の例3｜公開前の確認と引き継ぎを頼む

公開前の確認として、スマートフォン表示、読み込み、リンク、フォームの動作を点検してください。
秘密鍵や内部資料が公開物に含まれないか確認し、実際に調べた範囲を記録してください。
画像を実際に見て代替テキストを確認し、文章や数値と図の内容も突き合わせてください。
修正は生成元に反映し、組み立て直した生成物を確認できる状態にしてください。
元データの保管先、再公開の手順、前の版へ戻す方法、未対応事項を引き継いでください。

修正依頼には、対象の画面と「何が困るか」を一緒に添えると、意図を伝えやすくなります。修正は内容、配置、動作に分けて結果を承認します。

公開前に確かめること

公開前には、スマートフォン、速度、送信、秘密情報、権利、アクセシビリティを、実際の公開環境で確認します。

AIの報告に加え、担当者が見た結果を版と結び付けて残します。公開前の確認用ページと、公開後の本番ページの両方を確認してください。

実際にあった例｜共通CSSと古いSafariで表示が変わる

当社では、共通CSSが文字サイズ、リストの記号、画像の余白を上書きし、本番で見た目が変わりました。ページ固有の名前の範囲にCSSを閉じ込め、手元と本番の計算後のスタイルを比べて直しました。

一部の古いiPhoneのSafariでは、縦並びの指定により高さが0になり、中身が消えた例もあります。新しいブラウザーで画面幅だけを狭めても、この問題は見つかりませんでした。対象の実機、またはその版のブラウザーエンジンで再現して修正しています。

スマートフォンは画面を1枚ずつ撮り、動く部分が重なったり空白になったりしないよう記録します。当社では登場の動きがある部分は、1秒ほど待ってから撮っています。

実際にあった例｜フォームが全件迷惑扱いになる

新しいページへ置いたフォームで、迷惑メール対策の設定が別ページ用のまま残ったことがありました。見た目は正常でも、送信した内容は全件が迷惑扱いになっていた例です。フォームは、送信操作、受信、完了表示の3点を本番で確かめます。

空欄、不正な形式、エラー後の再入力も試し、大量送信などへの対策は別に技術担当者へ確認を依頼します。

長いページを改行なしの1行で取り込んだ結果、本番で本文が空になった例もありました。当社では閉じタグの後に改行を入れて対応し、公開後の実物も開いています。公開の記録が成功でも、実際のページが更新されていなかった経験があるためです。

表示速度｜容量と操作の両方を測る

評価は、モバイルとパソコンを分けた実利用データの75パーセンタイルで考えます。公開前の検証と実機操作に加え、公開後は取得できる実利用データも確認します。GoogleのWeb Vitals

当社では、25枚のアプリ画面の動きを、動画ではなくSVGアニメーションで作りました。1枚約5KBで、同じ内容のMP4約118KBより軽くできた例です。生成PNG約1.2MBをWebP約47KBへ変換した例もありますが、容量は内容で変わります。

画像は画質を見ながら軽くし、画面に入るまで読み込まない処理も使い分けます。診断の点数だけでなく、読む、選ぶ、送るという操作を通して確かめます。

セキュリティ｜公開してよい設定と秘密値を分ける

外部サービスを使う秘密のAPIキーは、訪問者へ配信されるページやプログラムへ入れないようにします。公開ファイル、開発履歴、顧客データ、バックアップも点検対象です。IPAは、設定ファイルや個人情報を外部から参照できない場所へ置くよう求めています。IPAの運用管理指針

環境変数という設定欄へ入れても、すべてが秘密になるわけではありません。Next.jsのNEXT_PUBLIC_、LovableのVITE_で始まる変数は、ブラウザー向けに組み込まれます。秘密値か公開可能な識別子かを、発行元と実装の両方で確認してください。

robots.txtやnoindexは情報を秘密にする機能ではないため、非公開情報にはアクセス制限を設けます。秘密鍵の漏えいが疑われる場合は、削除に加えて失効・再発行と利用履歴の確認を進めます。

アクセシビリティ｜画像のaltを実物に合わせる

altは、画像を見られないときに内容を伝える代替テキストで、当社では実物を見てから記述します。本文との重複も確認し、装飾か情報を伝える画像かで扱いを検討します。

見出し、文字の拡大、色だけに頼らない説明、入力欄の項目名も確認します。自動診断に加え、キーボードと読み上げで問い合わせの完了まで進めるかを試してください。

2024年4月1日から、民間事業者にも合理的配慮の提供が義務化されました。ただし、すべての民間サイトに特定のJIS適合レベルが一律に義務化されたという意味ではありません。利用者への対応と事前の環境整備を分けて、改善を進めます。内閣府の説明

バイブコーディングの権利と商用利用

生成物の所有、第三者の権利、素材の利用条件、公開先の商用条件を分けて確認することが必要です。

「生成物は利用者のもの」という規約でも、第三者の権利を侵害しない保証にはなりません。文化庁は、生成物の利用を、既存作品との類似性と依拠性などから判断すると整理しています。AIが自律的に作ったものと、人が創作の道具として使ったものの著作物性も別に考えます。文化庁の考え方の概要

たとえば、v0で生成した成果物の利用判断と、Vercelの公開先プランは別の確認です。Hobbyは個人的・非商用の利用に制限されているため、自社商品の宣伝に使えると早合点しないでください。制作が無料でも、事業用の公開まで無料とは限りません。VercelのHobby条件

当社では、図解を作る際に見出しだけを渡すと、内容を想像で補われた経験があります。その方法で作った図は43%が本文と食い違ったため、節の本文を渡す方法へ変えました。これは当社の確認例で、一般的な誤り率ではありません。

現在は本文と図を別のAIにも突き合わせ、数字のグラフは実データからSVGで作っています。自社で検証するときは、ダミーの顧客情報を使い、未公開商品や取引条件を渡す前に共有・学習設定も見直してください。

引き継ぎと保守

公開後に直せるよう、担当者、元データの保管先、公開手順、版の戻し方を、公開前にそろえます。

公開URLとAIとの会話履歴だけでは、次の担当者が同じ状態を再現できるとは限りません。文章を直す担当と、フォームや公開環境を直せる担当を、社外を含めて決めておきます。

引き継ぎの確認では、保存した元データから別の環境で起動し、確認用ページへ公開してもらいます。文章を実際に変更し、前の版へ戻せるところまで試すと、手順の不足が分かります。

バックアップも、何が戻るかを対象ごとに確かめることが必要です。Boltでは過去の版へ戻しても、現在のデータベースは変更されません。Lovableのデータベース保存には、ストレージ内のファイルは含まれません。コード、データ、添付ファイルの復元を分けて確認します。Boltの復元範囲、Lovableの保存範囲

公開後は、部品やソフトウェアの更新情報と不具合に対応します。保守を依頼するなら、文章変更、動作確認、復旧の対応範囲と、契約終了時に返すデータや権限を決めます。

向いている場面と向いていない場面

説明中心のLPや試作には取り入れやすく、個人情報・認証・決済を扱うほど技術的な確認と保守体制が必要です。

バイブコーディングのデメリット・危険性・セキュリティ

バイブコーディングのデメリットは、見た目の完成が早くても、内部の不具合や保守の不足を見落としやすい点です。危険性やセキュリティの負担は、ページの見た目より、扱う情報と機能で変わります。

ログインできることだけで、別の顧客の情報を見られないと判断することはできません。管理ボタンを隠すだけでも、操作の権限を守ったことにはなりません。顧客情報を扱う場合は、他人のデータを取得・変更できないことを技術者に確認してもらいます。

既存の商品ページへつなぐ説明用LPなど、扱う機能を絞って始めると、確認範囲を把握しやすくなります。

よくある質問（FAQ）

コードを書かずに始められますが、費用、権利、SEO、セキュリティは、作るものと利用条件に応じて確認が必要です。

プログラミングの知識は要る？

試作や文章・見た目の修正は、プログラミングを学ぶ前でも取り組めます。ただし、何を公開し、どこに情報が保存されるかを理解することは必要です。フォームや会員機能を扱う場合は、コードと設定を確認できる人と分担してください。

無料で作れる？

無料枠で試作できる道具はありますが、書き出し、独自ドメイン、事業用の公開には別条件があります。制作中の追加利用と、公開後のサーバー・データ保存などの費用も確認します。無料で画面を作れたことを、運用費が発生しない根拠にしないでください。

作ったサイトの権利は？

利用者の所有を認める規約はありますが、適用契約と第三者の権利を確認する必要があります。写真、書体、部品などの条件は、AIサービスの規約だけでは処理できません。日本法上の著作権が成立するかも別の問題なので、指示や編集の記録を残します。

バイブコーディングはSEOに不利？

作り方の名称だけで有利・不利を決めず、検索で理解される内容と利用しやすさを確認します。スマートフォンでも商品説明や重要な条件が読め、意図したページを検索対象にできるかを点検します。速度の良い測定結果だけで検索上位が保証されるわけでもありません。Googleの説明

バイブコーディングのセキュリティは大丈夫？

自動検査やAIの回答だけで、安全と判断することはできません。秘密鍵の管理、入力の処理、認証と権限を、公開する機能に合わせて確認します。公開時の検査に加え、更新と障害に対応できる担当者を確保してください。