知り合いの会社のWebサイトリニューアルをきっかけに、本格的な「バイブコーディング」に初めて挑戦しました。
今回は「v0」でデザイン案を作成し、「Perplexity Pro」の「Claude Sonnet 4.6」で「WordPress」サイトを構築した実体験から生成AIの「バイブコーディング」のメリット・デメリットを振り返ります。
「バイブコーディング」をした意図
「バイブコーディング」とは、生成AIに自然言語で指示を出すだけでコードを生成・修正してもらう開発スタイルのことです。ブログや動画で話題になっているものの実際の業務で使えるのかに疑問を持っていました。
そこで今回､Webサイトのリニューアル案件を打診されたのをチャンスとして、「バイブコーディング」で実際に（素人が）どこまでWebサイトを構築できるかを実証実験したかったからです。
実際のサイト構築では一発で完了することはなく、コンテンツの追加やパーツのサイズ､色の変更など、細かい修正が多数発生します。
そういった修正に迅速に対応できなければ、仕事のツールとして使うのをためらってしまいます。そのあたりも含めて実作業の中で検証したいというのが今回の意図でした。
Webサイト構築の流れ
「v0」
今回の作業は以下の流れで進めました。
まずデザイン案をデザイン生成に強いAIツール「v0」（https://v0.app/）で作成。
リニューアルするWebサイトはコンテンツが多くないので、スクロールし1ページにまとめられる「ランディングページ（LP）」形式を採用しました。
「v0」には5種類ほどデザイン案を出してもらい、その中からひとつを選んでHTMLとCSSに変換した上でダウンロード形式で生成してもらいました。
「Perplexity Pro」
「Perplexity Pro」では今回選択した「Claude Sonnet 4.6」モデル以外にも「ChatGPT5.4」や「Gemeni3.1Pro」､「Soner2」などが選べます。その中から「Claude Sonnet 4.6」を選んだのはコード生成に高い評価があったからです。
「v0」が出力したHTMLとCSSを「Claude Sonnet 4.6」モデルにアップロード。コードを精査して「WordPress」に適合する形に書き直し出力してもらいました。
テンプレートはできるだけ完成形に近づけて指示する
「Claude Sonnet 4.6」モデルは､トップページのLPデータのHTMLとCSSをわずか1〜2分で生成しました。生成したCSSは1,000行もありました。このスピードに驚愕!
経験豊富なプログラマーであっても、これほど短時間でコードを書き上げることはできません。この一事例だけでもプログラマーが積極的に生成AIを使い始めた理由がわかる気がします。
ただし、生成AIが最初に出力したコードで完了することはあり得ません。その後、気になる箇所の修正を(業務ならクライアントからの仕様変更も)繰り返すことになります。
ネット上での情報は､最初のコード出力までで生成AIを評価していて､業務では大事な修正作業のやりやすさについての評価はほとんどありません。
このため､今回実作業を経験することで評価しようと思ったわけです。
結果､今回の作業を経てもっとも重要だと感じたのが、
イメージする完成形に近い形で依頼する
です。
最初の出力が不完全でも、あとから修正を繰り返してイメージに近づけることは可能です。私も最初はその考えで作業を進めました。しかし、そうすると修正にかかる手間が予想以上に多いことがわかりました。
修正指示が「Claude Sonnet 4.6」にうまく伝わらず、希望する結果が得られるまで同じ依頼を何度も繰り返すケースが多々あったからです。
プロンプト（指示文）が適切であれば防げる、というのは正論です。でも、生成AIに慣れていないユーザーにそれを求めるのは酷です。
現在の生成AIは画像認識の精度が予想以上に高くなっていました。そこで、初心者は特にプロンプトではなく画像で指示する（赤枠などで範囲を明示する）のが有効な手段だと感じました。
そのためには参照する画像はできるだけ完成形に近いものを用意することが大切です。データ作成に時間がかかるかもしれませんが、IllustratorやPhotoshopなどで細部まで作り込んでから依頼することで、生成AIとの修正のやり取りが減り、結果として完成までの時間短縮につながります。
シンプルなテーマを選ぶのが必須
実は今回のリニューアル作業で、大きなつまずきがありました。それが､テーマの選定です。
最初は無料テーマの「Cocoon」を採用しました。理由は、今自分のWebサイトで使っているテーマなのでノウハウがある分、修正作業があってもスムーズに作業を行えると判断したからです。
しかし、結果的にはこの判断は間違いでした。
トップページからコンテンツページの作成に着手したときに問題が発生しました。「Claude Sonnet 4.6」に依頼して出力した修正コードが、実際のページに反映されないのです。何度コードを出力し直してもうまくいきません。
「Claude Sonnet 4.6」と原因を追求したところ、テーマが最初から持っているコードが干渉して、修正コードが反映されないという結論に至りました。
今後発生するであろうコンテンツ追加やメンテナンスなどを考えると「Cocoon」を使い続けることのリスクが予想されます。
そこでテーマを変更することにしました。幸い､まだリニューアルの初期段階。作成変更もそれほどの負担にはならないと判断しました。
その上で採用したのは「Twenty Twenty-Five」。「WordPress」に最初からインストールされているテーマです。「Perplexity Pro」に質問したところ、最もシンプルで余分なコードが少ないテーマとして推薦されました。
この経緯から生成AIを使って「WordPress」でサイトを構築する場合は「Twenty Twenty-Five」のようなシンプルなテーマを選ぶことが安全だと学びました。
修正を繰り返すとコードがスパゲティ状態に
作業工程では「Claude Sonnet 4.6」に何度も修正依頼をすることになります。
私は当初､修正したCSSは前のCSSの該当個所を書き換えるのだと思っていました。しかし､実際の「Claude Sonnet 4.6」の行動は、追記という形でコードが出力されます（他のモデルでも同様かは不明）。最初のCSSはそのままで「!important」を使って強制的に修正CSSを適用させる仕様です。
これの困るところは、後から自分で修正しようとしても、どこを変えればよいかわからなくなる点です。
作業の途中で簡単な修正を自分でしようとしたところ、該当のCSSを変更しても反映されませんでした。原因は、後から追加された「!important」付きのCSSが優先されていたからです。
修正を重ねるたびに「!important」付きのCSSが増えていく結果、ページが完成する頃にはコードの見通しがもの凄く悪くなっています。
このままでは後々のメンテナンス時に苦労することが明らかです。このため、作業完了後に追加CSSと「!important」の整理を依頼しました。後々の作業効率を考えると、この指示は必須です。
「Claude Design」
4月17日､「Anthropic」社は「Claude Design」を発表しました。
まだ､ベータ版のような扱いですが､今回「Claude Sonnet 4.6」でWebサイト構築を経験したことで私が見る「Claude Design」のメリットを上げます。
最大のメリットと感じるのがUI上で修正ができる点です。
上記のように「Claude Sonnet 4.6」で修正を繰り返すとコードがスパゲティ状態になる大きな欠点があります。
一方「Claude Design」は､画面のUI上でフォントの大きさや色の変更など多くの(ほとんど?)の修正が行えます。
画面で修正をし完了後にコードを生成する作業工程となります。このため､「Claude Sonnet 4.6」のように「!important」の追記があふれメンテナンスの支障になる心配がなくなります。
「Claude Sonnet 4.6」で「!important」の追記に苦労した経験者からすると「Claude Design」のこのひとつの仕様だけでも､確実に作業効率に繋がります。
今は「Claude」のPro版以上でないと試すことはできません。「Claude」のPro版は20ドル(約3,000円)で学割もないので私の使用環境では気軽に試すことはできません。
また､現在契約している「Perplexity Pro」で使えるかも現時点では不明。なので､私が実際に扱えるのはまだ先になると思います。
生成AIにすべて頼らないこと
今回の経験から、修正は生成AIにすべて任せず、自分で修正箇所を特定してからピンポイントに指示する方が早く解決できることもわかりました。
いくら指示しても「Claude Sonnet 4.6」が該当箇所のコードを出力してくれないことがあったのです。仕方なく、自分でブラウザーの「ウェブ開発ツール」で修正箇所のタグを探し、具体的にそのタグを指定し「Claude Sonnet 4.6」に依頼したら解決しました。
自分では的確な指示をしているつもりでも「Claude Sonnet 4.6」にとってはあいまいな指示だったのでしょう。「ウェブ開発ツール」で適切な該当個所のタグを示すことで、ようやく意図が伝わったのです。
「指示を的確にすればいい」というのは正論ですが、プロンプト初心者にはかなり難しいことです。逆に言えば、コードをまったく読めない初心者では、生成AIがどれだけ賢くなっても、思い通りのWebサイトを完成させるのはかなり難しいと感じました。
スレッドが長くなると精度が落ちる？
今回の「WordPress」リニューアルでのスレッドのやり取りは2週間に及びました。私はこれほど長いスレッドを経験したことがありませんでした。
その経験の中で生成AIについての新たな気づきもありました。そのひとつが､長いスレッドによる精度の低下です。
スレッドが10日を過ぎた辺りから、こちらの指示に対してかみ合わない返答が増えてきました。人間なら疲れて判断が鈍ることはありますが、生成AI（LLM）はデータの塊なので、そんなことはあり得ないはずです。
最初は自分の気のせいだと思っていたのですが、続けていると明らかに最初の頃と返答の質が変わっていることを実感したのです。
そういえば、ネットの情報で「スレッドが長くなると最初の要件を忘れるので、一定期間ごとに要件を再提示する方が良い」という記述を見たことがあります。まさにこれがそれなのかもしれないと思いました。
解決策として「別スレッドに切り替える」という方法を試しました。正直、劇的に精度が戻ったという実感はありませんでしたが、一定の効果はあったように思います。
生成AIのメリット・デメリット
以上の経験をふまえ、生成AIを使ったWebサイト構築のメリットとデメリットをまとめました。
メリット
時間短縮
最初の指示の完成度が高いほど修正が少なくなり、作業時間を大幅に短縮できます。これは間違いなく一番のメリットです。
テーマ変更のハードルが下がる
WordPressのテーマ乗り換えは、多くのブログ管理者が苦労するポイントです。無料テーマでは機能が物足りなかったり、有料テーマは1万円を超えることも珍しくありません。
また、自分のブログに合うかどうかは実際に乗り換えてみないとわからない部分も多く、なかなか実行に踏み切れない原因のひとつです。
でも､生成AIを使えば、希望をすべて反映した自分だけのオリジナルデザインを比較的簡単に実現できます。デザインでの差別化を図りたい場合には大きなメリットになります。
法人サイトの受注ではコードを読めてメンテナンスも考慮した構築が必要ですが、個人ブログならそこまで求めなくても大丈夫。
修正したくなったら生成AIに依頼して全く異なるデザインに変えるという考えが今後普及するかもしれません。なぜならば､生成AIによってテーマ乗り換えのハードルが確実に下がっていますから。
デメリット
テーマの選び方に制約がある
「Cocoon」のような多機能テーマは独自コードが多く含まれており、生成AIが出力するコードと干渉することがあります。今回の事例ではそれが明確になりました。
生成AIでサイトを構築するなら、シンプルなテーマを選ぶのが成功の秘訣です。
メンテナンスが難しくなる
バイブコーディングでHTMLやCSSにまったく触れずに構築できることはメリットですが、修正やメンテナンスが発生したときに自分ではどこを直せばいいかわからないという問題が生じます。
特に業務でWebサイトを構築した場合修正依頼は必ず発生します。「修正できません」ではビジネスとして成立しないので、業務で利用する場合は自分のスキルを考え十分な検討が必要です。
コードの基礎知識は必要
「バイブコーディング」は1行も書かなくて構築できるが売りですが、実際にWebサイトを構築するには最低限コードを読める知識が必要です。生成AIは人間のプログラマーのように意図を汲んで動いてはくれません。「ウェブ開発ツール」などで問題点を見つけ人間が指示しなければいけない場面が必ず出てきます。
その時､HTMLやCSSの知識がまったくないとWebサイトを完成させるのはかなり難しいと言わざるを得ません。
先頃リリースされた「Claude Design」では､その敷居がかなり下がった印象なので今後コードの知識がいらなくなる将来が到来するかも知れません。それはそれで楽しみです。
まとめ
今回は本当に良い経験になりました。ブログやYouTubeだけの情報だけではわからない、細かい作業の段取りや落とし穴を実際に体験できたからです。
やはり、実践に勝るものなしです。
この経験は今後の生成AIの活用に大いに役立つと感じました。
コメント