「AIでホームページが作れると聞いたけれど、実際はどういうことなのだろう」
そう感じている経営者や担当者は多いと思います。近ごろWeb制作の現場で急速に広まっている「vibe coding（バイブコーディング）」は、開発者の間だけでなく、Webサイトを依頼する側にも大きく関係してくる変化です。
この記事では、vibe codingの基本的な意味から、依頼する立場として知っておくべき費用・期間・品質への影響、そして実際に当社がどのようにAIを活用しているかまでを、できるだけ正直にお伝えします。「依頼前に確認しておきたかった」と感じることがないよう、実務の視点から丁寧に解説します。
この記事でわかること：
- vibe codingとは何か（難しくない言葉で）
- ホームページ制作の費用・期間がどう変わるか
- AI制作に依頼するときの確認ポイント
- 当社が実際にどうAIを使っているか
vibe codingとは何か
「AIに話しかけながらコードを作る」開発スタイル
vibe codingとは、AIに対して「こういう画面にしたい」「このボタンを押したらこうなるようにしてほしい」と自然な言葉で伝えながら、AIがコードを生成・修正していく開発スタイルのことです。
2025年2月、OpenAIの共同創業者でもあるAndrej Karpathy氏がSNSでこの言葉を広めたことで一気に注目を集めました。翌2025年末には英語辞書「Collins Dictionary」の「今年の言葉」にも選ばれ、単なる流行語ではなく、開発現場に根付き始めた新しい手法であることが示されています。
従来のコーディングと何が違うのか
従来のWeb制作では、デザイナーがデザインを作り、エンジニアがそのデザインを見てHTML・CSS・JavaScriptなどのコードに手作業で落とし込む工程が必要でした。この「コードを書く工程」が制作時間とコストの大部分を占めていました。
vibe codingではこの工程をAIが担います。エンジニアは「AIに指示を出し、生成されたコードを確認・修正する人」に役割が変わります。ゼロからコードを書くのではなく、AIの出力を品質管理するかたちです。
| 比較項目 | 従来の制作 | vibe coding活用の制作 |
|---|---|---|
| コード作成の担当 | エンジニアが手書き | AIが生成、人間が確認 |
| 修正の反映速度 | 数日〜1週間 | 数時間〜翌日 |
| 1人で対応できる範囲 | 専門分野に限定 | 幅広く対応可能 |
| 試作・検証のしやすさ | 時間・コストがかかる | 素早く試せる |
なぜ今、Web制作の現場で広まっているのか
ツールの進化が大きな背景にあります。GitHub Copilot、Claude Code、OpenAI Codexといったコーディング支援AIが急速に実用レベルに達し、現場での採用が進みました。「使えるかもしれない」という段階から「実際に使われている」段階に変わったのが2025年前後です。
中小企業や個人事業主にとって関係が大きいのは、この変化が「制作会社に依頼するときの費用や期間」にも影響を与え始めている点です。次のセクションで詳しく見ていきます。
Web制作を依頼する立場が知っておくべき変化
ここが、この記事で最も伝えたい部分です。
制作費用への影響：下がる部分と変わらない部分がある
「AIを使えば安くなる」という話を耳にする機会が増えていますが、すべてが安くなるわけではありません。正確に言うと、コーディング工程のコストは下がりやすい一方で、要件整理・デザイン・品質管理のコストはほとんど変わりません。
コストが下がりやすいのは次のような工程です。
- 基本的なレイアウトやページ構造のコーディング
- 繰り返し作業が多い部分（ページ数が多いサイトの量産作業など）
- 小さな修正・調整の対応
一方で、コストが変わらない・むしろ重要性が増しているのはこちらです。
- 最初の要件整理（何のためのサイトか、誰に向けて作るか）
- デザインの方向性の決定とブランドとの整合
- AIが生成したコードの品質チェックとセキュリティ確認
- 公開後の運用・更新サポート
制作会社によって異なりますが、vibe codingを活用した場合の費用感の目安は次の通りです。
| サイト規模 | 従来の制作（目安） | AI活用制作（目安） |
|---|---|---|
| 5ページ程度の小規模サイト | 30〜60万円 | 15〜40万円 |
| 10〜20ページの中規模サイト | 60〜150万円 | 40〜100万円 |
| ECサイト・機能付きサイト | 150万円〜 | 案件内容により変動 |
※ 上記はあくまで目安です。要件・デザイン難易度・機能の複雑さによって大きく変わります。
納期・制作スピードへの影響
コーディング工程の短縮により、制作期間は短くなるケースが増えています。特に効果が出やすいのは、ページ数が多いサイトや、修正サイクルが多い案件です。
目安として、以前は6〜8週間かかっていたシンプルな5ページ構成のサイトが、3〜4週間程度で完成するケースが出てきています。
ただし、スピードが上がる条件があります。それは、最初の要件整理がきちんとできていることです。「なんとなくこんな感じで」という状態でスタートすると、後から方向が変わるたびに修正が発生し、結果的に時間がかかります。AIを使う・使わないに関係なく、この点は変わりません。
品質・セキュリティ面で正直に伝えること
AIが生成したコードは、必ずしもすべてが最適とは限りません。動くコードと、品質の高いコードは別物です。
具体的には次のような問題が起きることがあります。
- 不要なコードや冗長な記述が含まれることがある
- セキュリティ上の配慮が不十分なコードが生成されることがある
- SEOに悪影響を与える構造になっている場合がある
これらは、制作会社側が適切にレビュー・修正すれば防げる問題です。vibe codingはあくまで「コードを生成するツール」であり、最終的な品質を担保するのは人間の仕事です。
依頼する際に確認したいのは、「AIで作ります」という一言だけではなく、「生成したコードをどのようにチェックしていますか」という点です。
「AIを使えば安くなる」は本当か、正直な整理
改めて整理すると、こういうことです。
AIを使えば費用が下がることはあります。ただし、それは「コーディング工程のコストが下がる分だけ」です。要件整理・デザイン・品質管理・サポートの価値は変わりません。
「AIを使えばタダ同然でできる」という話があれば、品質管理やサポートを省略している可能性があります。長期的に使えるサイトを作るには、制作の仕組みだけでなく、依頼後のサポート体制も含めて判断することをおすすめします。
制作会社に依頼するときの確認ポイント
AI活用の制作会社を選ぶ際、次の点を確認しておくと安心です。
AIを使った制作について聞くべき3つの質問
① AIで生成したコードはどのようにチェックしていますか？
最近はAI自身がコードレビューをサポートする場面も増えており、チェック作業の一部をAIが担うこと自体は珍しくありません。ただし、セキュリティ・パフォーマンス・SEO構造など、サイトの品質に直結する部分は人の目でしっかり確認する必要があります。どこをAIに任せ、どこを人間が確認しているかを説明できない制作会社には注意が必要です。
② SEOへの対応はどうなりますか？
AI生成のコードでも、適切なSEO設定（タイトルタグ・メタ説明・構造化データ・ページ速度など）は別途行う必要があります。「AIで作ったから自動的にSEO対策もできている」は誤りです。
③ 公開後の修正・サポートはどうなりますか？
AI活用によって修正対応が速くなるケースは多いですが、それが月額費用に含まれているのか、都度課金なのかを事前に確認しておきましょう。
見積もりで確認しておくこと
- コーディング以外の工程（ヒアリング・デザイン・テスト・ドメイン・サーバー設定など）が別途かかるかどうか
- 修正回数に上限があるかどうか
- 公開後の運用サポートの内容と費用
丸投げとの違いを理解する
vibe codingを使う制作会社に依頼することは、「AIに丸投げしてもらう」ことではありません。AIを道具として使いながら、ディレクターやデザイナーが判断・品質管理をする体制は、従来の制作会社と変わりません。
「AIを使っているから安心」でも「AIを使っているから不安」でもなく、どのように使っているかを確認することが大切です。
studio Lib.のAI活用実績
studio Lib.では、Webサイト制作の現場でAIを積極的に導入しています。どのように使っているかを具体的にお伝えします。
実際に使っているツールと用途
主に使用しているのは以下のツールです。
Claude Code（Anthropic） コーディング支援・SEO分析・構造の見直しなど、制作から運用まで幅広く活用しています。週次SEOレポートの生成や、競合コンテンツの調査・分析にも使用しています。
Codex（OpenAI / ChatGPT） コード生成・リファクタリング・仕様の言語化など、Claude Codeと用途を使い分けながら活用しています。複数のAIを組み合わせることで、それぞれの得意領域をカバーしています。
VSCode コードエディタとして使用しています。AI拡張機能を組み合わせることで、コードの確認・修正・デプロイまでを一つの環境でまとめて行えます。
AI活用で変わったこと
制作プロセスにAIを組み込んでから、特に変化を感じているのは次の点です。
修正対応のスピード：依頼者からのフィードバックをコードに反映するまでの時間が大幅に短縮されました。以前は数日かかっていた修正が、内容によっては当日中に対応できるようになっています。
SEO分析の精度：Google Search ConsoleとGA4のデータをAIで分析し、週次のレポートを自動生成する仕組みを構築しています。これにより、掘り下げが必要なポイントを見つける時間が短くなり、実際の改善作業に時間を使えるようになりました。
提案の幅：デザインの方向性を複数パターンで検討するとき、AIを使ってスピーディに案を出せるため、方向性の確認が早くなりました。
依頼者にどんなメリットがあるか
これらの変化が依頼者に還元されるのは、主に次の形です。
- 修正対応の速さ：フィードバックを伝えてから反映までの待ち時間が短くなる
- 運用サポートの充実：公開後のデータ分析や改善提案をより細かく行える
- 費用の最適化：繰り返し作業を自動化した分、デザインやコンテンツ戦略に時間を使える
※ 制作実績の詳細については、お問い合わせ時にご紹介しています。
AI活用でのWebサイト制作について、まずはご相談ください
費用感や制作の流れについて、お気軽にお問い合わせいただけます。
vibe codingを自社で取り入れたい方へ
「自社の業務にもAIを使えるようにしたい」という相談が増えています。
AI導入レクチャーで何ができるようになるか
当スタジオでは、中小企業・個人事業主向けのAI活用サポートも行っています。主に対応しているのは次のような内容です。
- ChatGPT・Claudeなどの生成AIをどの業務に使えるかの整理
- 実際の業務を想定した使い方のレクチャー（個別対応）
- 社内で継続して使えるようにするための運用設計
「何から始めればいいかわからない」という段階からでも対応できます。ツールの選定や導入の優先順位など、具体的な状況に合わせてお話しします。
今すぐ試せる3つのツール
AIを初めて業務に取り入れるなら、次の3つが入門として使いやすいです。
Claude（Anthropic） 文章の作成・要約・翻訳・データ分析など、オフィス業務で使いやすい生成AI。無料プランでも基本的な使い方は試せます。
Codex / ChatGPT（OpenAI） テキストで指示を出すとコードを生成してくれるAIです。プログラミング経験がなくても、やりたいことを言葉で伝えると動くコードの下地を作ってくれるため、小規模な修正や自動化の試作に活用できます。
v0（Vercel） テキストで指示するだけでWebのUIコンポーネントを生成してくれるツール。デザインのプロトタイプを素早く作りたい場面で役立ちます。
「自社でAIを活用したい」という方は、まずご相談ください。
よくある質問
Q. vibe codingで作ったWebサイトは、SEOで不利になりますか？
AIが生成したコードだからといって、SEOに不利になるわけではありません。重要なのはコードの品質と、メタ情報や構造化データなどのSEO設定がきちんと行われているかどうかです。当スタジオでは、AI生成のコードに対して人間がSEO観点のレビューを行っています。
Q. AIに任せると、後でカスタマイズできなくなりますか？
適切にコードが管理されていれば、後からのカスタマイズは問題ありません。ただし、AI生成コードが複雑になりすぎていたり、ドキュメントが整備されていなかったりすると、引き継ぎやカスタマイズが難しくなることはあります。依頼時に「納品後の修正はどうなるか」を確認しておくことをおすすめします。
Q. どんな案件がvibe codingに向いていますか？
ページ構成が比較的シンプルなサイトや、修正・更新が頻繁に発生するサイトに向いています。特に、デザインや方向性が明確に決まっていて、コーディングの量が多い案件ほど効果が出やすいです。複雑なシステム連携や高度なセキュリティ要件が必要な案件は、通常の制作と同様の工程管理が必要になります。
Q. 掛川・静岡以外の依頼も受け付けていますか？
はい、対応しています。打ち合わせはオンライン（Zoom・Google Meetなど）で行えますので、エリアに関係なくご相談いただけます。
まとめ
vibe codingは、「AIがコードを書く」という技術の話である前に、Webサイトを依頼する側にとっての費用・期間・品質に直結する変化です。
この記事の要点を整理すると次の通りです。
- vibe codingによってコーディング工程のコストとスピードは改善しやすいが、要件整理・デザイン・品質管理の重要性は変わらない
- 「AIで作ります」という一言だけでなく、品質チェックの方法・SEO対応・修正サポートの体制を確認することが大切
- studio Lib.ではClaude Code・Codex・VSCodeを実際に業務で使用しており、修正対応の速さとSEO分析の精度向上に活かしている
ホームページ制作のご相談、AI活用についての質問など、何でもお気軽にどうぞ。