Vibe Codingでサイト修正｜Web担当者が指示だけで直す3ステップ

「ヘッダーの色を変えたいだけなのに、制作会社に頼むと数日待ち」「小さな文言修正をお願いするのも気が引ける」。社内に1人だけのWeb担当者なら、こんなストレスを毎週のように感じているのではないでしょうか。

この記事では、コードが読めない人でも「ここをこう直して」と言葉で指示するだけでサイトを修正できる「Vibe Coding（バイブコーディング）」のやり方を、具体的に解説します。何から始めればいいか、どこまで自分でやれてどこからプロに任せるべきか、その判断軸まで持ち帰ってもらえる内容です。

Contents / 目次

1. 結論。Web担当者は「指示出し役」になれば修正待ちから解放される
2. Vibe Codingの始め方。最初の3ステップと指示の出し方
3. Vibe Codingで何が変わる。安全に続けるための条件
4. Vibe Codingでよくある失敗と、その防ぎ方
5. Vibe Codingの限界と任せどころ
6. よくある質問（FAQ）
7. まとめ。指示出し役になって、修正待ちのストレスを手放そう

結論。Web担当者は「指示出し役」になれば修正待ちから解放される

結論からお伝えします。Web担当者が修正待ちのストレスから抜け出す一番の近道は、自分でコードを書けるようになることではなく、AIに「こう直して」と的確に指示を出す役割に回ることです。これがVibe Codingの本質です。

Vibe Codingとは、人が手作業でコードを書く代わりに、AIツールに自然な言葉で指示を出してコードを生成・修正してもらう開発手法のことです。Google Cloudもバイブコーディングの解説ページで、コードを1行ずつ書くのではなく、AIアシスタントに指示を出しながら、会話のやり取りでアプリを生成・改良・デバッグする進め方と説明しています。つまり、あなたがやるのは「指示出し」だけ。実際に手を動かすのはAIです。

ここで大事なのは、Web担当者がやるべきことが「コードを書く」から「やりたいことを言葉にする」へと変わるという点です。デザインの良し悪しを判断したり、お客様目線で使いやすさを確かめたりするのは、これまで通り人間の仕事として残ります。むしろ、そこに集中できるようになるのがVibe Codingのメリットです。

従来のやり方とVibe Codingで、Web担当者の動き方がどう変わるのかを整理しておきましょう。

項目	従来のやり方	Vibe Codingのやり方
修正の進め方	制作会社に依頼→見積→修正待ち	AIに言葉で指示→その場で反映
かかる時間	数日〜1週間	数分〜数十分
必要なスキル	HTML・CSSの知識	やりたいことを言葉にする力
小さな修正	頼みづらい・後回しになる	気軽にすぐ直せる
Web担当者の仕事	指示書づくりと確認	指示出しと最終チェック・公開判断

ここが転換点。Vibe Codingで楽になるのは「修正作業そのもの」ではなく「修正を人に頼んで待つ時間」です。文字の修正、色の調整、ボタンの追加といった日常的な小さな変更を、自分のタイミングで完結できるようになります。

ただし、何でもかんでもAIに任せていいわけではありません。後ほど詳しく触れますが、「自分で直していい範囲」と「プロに任せるべき範囲」を見極めることが、安全に使いこなす鍵になります。まずは具体的な始め方から見ていきましょう。

Vibe Codingの始め方。最初の3ステップと指示の出し方

Vibe Codingを始めるのに、プログラミングの勉強は要りません。やることは「環境を用意する」「直したい場所を言葉で伝える」「結果を確認する」の3つだけです。順番に見ていきましょう。

ステップ1。AIにサイトを触らせる環境を用意する

最初にやるのは、AIがあなたのサイトのファイルを読んで編集できる環境を準備することです。代表的なのは、自然な言葉で複数のファイルをまとめて編集できる「Cursor」のようなAIエディタです。Cursorは、多くの人が使うコードエディタ（VS Code）をベースに、AIとの対話機能を組み込んだツールです。

とはいえ、いきなり本番のサイトを触るのは禁物です。まずは練習用のコピーを用意するか、公開前の確認用環境（ステージング環境）で試してください。本番に直接手を入れて表示が崩れると、お客様の目に触れてしまうからです。環境構築の細かい手順はツールごとに変わるため、各ツールの公式ドキュメントで最新の手順を確認するのが確実です。

ステップ2。直したい場所を「結果」で指示する

環境ができたら、AIに直してほしいことを言葉で伝えます。コツは、技術的なやり方を指示するのではなく「どうなってほしいか」という結果を伝えることです。たとえば「CSSのcolorプロパティを変えて」ではなく「お問い合わせボタンを目立つオレンジ色にして」と伝えれば十分です。

うまくいかないときは、一度の指示で完璧を目指さないことが大切です。大まかに伝えてみて、出てきた結果を見ながら「もう少し濃いオレンジに」「文字を白くして」と会話で調整していきます。この「ざっくり指示→確認→微調整」の往復こそがVibe Codingの基本動作です。

初めて指示を出すときに使える、テンプレート的なプロンプトを用意しました。角括弧の部分を自分のサイトの状況に置き換えて使ってください。

あなたは、中小企業のコーポレートサイトを保守しているWeb制作のプロです。
私はコードが読めないWeb担当者です。専門用語をできるだけ使わず、
これから出す指示を安全に実装してください。

# 今のサイトの状況
・サイトの種類［例：WordPressのコーポレートサイト／HTMLの静的サイト］
・使っている技術がわかれば記載［例：不明／HTMLとCSSのみ］

# やってほしいこと
［例：トップページのお問い合わせボタンを、今より目立つオレンジ色に変更したい。
ボタンの上にマウスを乗せたら少し色が濃くなるようにもしたい。］

# 守ってほしいこと
・既存のデザインやレイアウトを崩さないこと
・変更したファイルと、どこをなぜ変えたかを日本語で説明すること
・スマホ表示でも崩れないように配慮すること
・もし複数のやり方がある場合は、リスクが低い方法を選ぶこと

# 進め方
いきなり全部直さず、まず変更案を提示してください。
私がOKを出してから、実際のファイルを編集してください。

このプロンプトのポイントは「まず案を出して、OKしてから編集する」と指示している点です。こうすることで、いきなりファイルが書き換わって戻せなくなる事故を防げます。うまく動かないときは、「今のサイトの状況」を具体的に書き足すと精度が上がります。AIは前提となる情報が多いほど、あなたのサイトに合った修正をしてくれます。

ステップ3。結果を必ず自分の目で確認する

AIが修正したら、必ず自分の目で表示を確認します。AIが書いたコードはあくまで「下書き」だと考えてください。見た目が崩れていないか、リンクが切れていないか、スマホでもちゃんと見えるかをチェックします。問題なければ公開、おかしければ「ここがこう崩れている」とまた指示を出します。

公開前に最低限チェックしたい項目をリストにまとめました。これをそのまま自分の確認リストとして使ってください。

• 表示崩れ：パソコンとスマホの両方で、レイアウトが崩れていないか
• リンク切れ：ボタンやメニューのリンクが正しく動くか
• 文字の読みやすさ：背景と文字の色のコントラストは十分か
• フォームの動作：お問い合わせフォームがある場合、送信できるか
• 表示速度：ページが極端に重くなっていないか
• 変更箇所の説明：AIがどこを変えたか説明できているか

この3ステップに慣れれば、文字の差し替えや色の調整は本当に数分で終わります。お問い合わせフォームの自作に踏み込みたい方はCursorで「お問い合わせフォーム」を自作するでも具体的な手順を解説しているので、あわせて読んでみてください。

Vibe Codingで何が変わる。安全に続けるための条件

Vibe Codingを取り入れると、一番大きく変わるのは「修正までのスピード」です。これまで制作会社に頼んで数日待っていた小さな修正が、その日のうちに終わるようになります。結果として、サイトを「気づいたときにすぐ直せる、生きた資産」として扱えるようになります。

AIによる開発支援の効果を測った研究もあります。GitHubが公式ブログで公開した実験では、開発者95人を2つのグループに分け、JavaScriptでHTTPサーバーを実装する作業の時間を比べました。GitHub Copilotを使ったグループは、使わなかったグループより55%速く作業を完了しました。これはソフトウェア開発者を対象にした実験なので、Web担当者の修正作業でどれだけ短くなるかは、自社で試して確かめてください。

安全に続けるために、次の4つを押さえておきましょう。

• 小さく始めている：いきなり全面リニューアルを狙わず、文言修正や色変更といった失敗してもダメージの小さい作業から手をつけている
• 役割を分けている：「AIに任せる作業」と「自分で判断する作業」をはっきり線引きしている
• 確認のルールがある：公開前のチェックリストを決めていて、自己流の思いつき公開をしていない
• 記録を残している：どんな指示でどう直したかをメモしておき、次回の指示に活かしている

たとえば、これまで「キャンペーンバナーの日付変更を制作会社に頼んで、反映まで3日かかっていた」という会社が、自社で当日中に差し替えられるようになると、施策のスピードそのものが変わります。タイムセールや期間限定の告知など、スピードが命の情報発信が自分たちのペースで回せるようになるわけです。

本当の効果。Vibe Codingの価値は「コスト削減」だけではありません。「直したいと思ったときにすぐ直せる」という心理的な軽さが、サイトを使った情報発信を活発にし、結果的に問い合わせの機会を増やしていきます。

Vibe Codingでよくある失敗と、その防ぎ方

便利なVibe Codingですが、使い方を間違えると痛い目を見ます。ここでは起こりやすい3つの失敗パターンと、その防ぎ方を具体的に紹介します。

失敗1。本番サイトをいきなり触って表示が崩れる

1つ目は、確認環境を用意せず、公開中の本番サイトに直接AIで手を入れてしまうケースです。AIの修正でレイアウトが崩れると、その崩れた状態がそのままお客様に見えてしまいます。最悪の場合、フォームが動かなくなって問い合わせを取りこぼすこともあります。

これを防ぐには、必ず練習用のコピーか確認用環境で試してから本番に反映するのが鉄則です。本番で作業する場合も、修正前のファイルを必ずバックアップしておけば、何かあってもすぐ元に戻せます。

失敗2。AIの出力をそのまま信じて公開してしまう

AIが書いたコードは、見た目は正しそうでも、見えないところに問題を抱えていることがあります。たとえば、不要なコードが大量に追加されてページが重くなる、スマホでの表示が考慮されていない、文字色と背景色のコントラストが弱くて読みにくくなる、といったことが起こります。

防ぎ方はシンプルで、AIの出力を「下書き」として扱い、必ず自分の目で確認することです。先ほどの公開前チェックリストを毎回使えば、こうした見落としはかなり減らせます。「AIにすべてを任せる」のではなく「AIに作業させて、自分で判断する」という姿勢を崩さないことが大事です。

失敗3。機密情報をAIにそのまま入力してしまう

意外と見落としがちなのが、セキュリティの問題です。サイトの修正をお願いするとき、つい管理画面のパスワードやAPIキー、お客様の個人情報が含まれたファイルをそのままAIに渡してしまうことがあります。入力した情報がどう扱われるかはツールによって異なり、思わぬ形で漏れるリスクがあります。

防ぐには、AIに渡す前に「これは外に出てはいけない情報か」を一度立ち止まって考える習慣をつけることです。パスワードやキーの類は、ダミーの文字に置き換えてから相談すれば安全です。社内でルールを決めておくとさらに安心です。AIに入力してはいけない個人情報の記事で、個人を特定できる情報と社外秘の線引きと、社内ルールの作り方を解説しています。

AIが生成したコードは、セキュリティ上の弱点を含むことがあります。お問い合わせフォームや会員機能など、個人情報やお金に関わる部分は、自己流で公開せず専門家のチェックを受けることを強くおすすめします。

Vibe Codingの限界と任せどころ

ここまで便利さをお伝えしてきましたが、正直にお話しすると、Vibe Codingは「これさえあれば制作会社は要らない」という万能のツールではありません。限界と、賢い任せどころを率直にお伝えします。

まず押さえておきたいのは、AIは複雑なバグの修正や、サイト全体の設計が絡む判断が苦手だという点です。「文字を変える」「色を直す」のような局所的な作業は得意ですが、「サイト全体の構造を作り直す」「複数のシステムを連携させる」といった話になると、人間のプロのような全体を見渡した判断ができません。AIは目の前の指示には忠実でも、その変更が他の部分に与える影響まで気を回してくれるとは限らないのです。

そこで、自分でやる範囲とプロに任せる範囲を分けて考えるのが現実的です。目安をまとめました。

作業の種類	判断の目安
文言・画像の差し替え、色やサイズの調整	自分でVibe Codingで対応しやすい
新しいページの追加、簡単なレイアウト変更	練習しながら自分でも挑戦できる
フォームや決済など、情報・お金が絡む機能	プロのチェックを入れた方が安全
サイト全体の構造変更、システム連携	最初から専門家に相談すべき

もう一つ、見落とされがちなコストの話もしておきます。Vibe Codingは制作費を浮かせられる一方で、「学習する時間」と「確認する手間」は確実に発生します。コードが読めない担当者がAIと格闘して半日つぶすくらいなら、最初の仕組みづくりだけプロに伴走してもらい、運用は自社で回す、という分担も選択肢になります。CursorでWordPressを修正する手順の記事でも、バックアップと検証の準備を含めて、見た目や文言の細かな修正を自社で行う手順を紹介しています。

大切なのは「全部を自分でやる」でも「全部を外注する」でもなく、自社にちょうどいいバランスを見つけることです。そこの線引きさえ間違えなければ、Vibe Codingは1人広報・1人Web担当の強力な味方になります。

よくある質問（FAQ）

まとめ。指示出し役になって、修正待ちのストレスを手放そう

Vibe Codingは、コードが書けないWeb担当者を「指示出し役」に変えてくれる手法です。小さく始めて、公開前に自分で確認するルールを守れば、修正待ちのストレスから着実に解放されていきます。一方で、安全な環境づくりや機能面の判断には専門的な目線も欠かせません。

小さな修正のたびに制作会社の対応を待たずに済むサイトにしたい方は、コレットラボのホームページ制作・LP制作をご覧ください。どのページを誰が更新するかを公開前に決め、管理画面のどこを操作するとどのページのどこが変わるかを書いた更新の手順書を作ります。