AI活用2026-02-20・ 読了 9

WordPressからバイブコーディングへ——2週間で自社サイトをゼロから再構築した話

酒井 秀樹
酒井 秀樹
代表取締役 / B2Bセールスコンサルタント
WordPressからバイブコーディングへ——2週間で自社サイトをゼロから再構築した話

バイブコーディングでウェブサイトを全面刷新——WordPress運用から解放された2週間の記録

WordPressを長年使ってきた方なら、この感覚に共感いただけるだろう。

ちょっとした更新作業、プラグインの更新、テーマの互換性チェック、セキュリティパッチの適用——本来やりたいことではないメンテナンス作業に、じわじわと時間を奪われていく。

当社セールストレックも、創業時からWordPressでウェブサイトを運用してきた。コンテンツ発信、ブログ執筆、サービス紹介。WordPressは信頼できるプラットフォームだった。

しかし、ある時期から状況が変わり始める。

きっかけは「バイブコーディング」の蓄積

Sales AI Capsuleという営業練習ロールプレイアプリの開発を進める中で、私はいわゆる「バイブコーディング」——AIとの対話を通じてコードを生成・修正していくスタイル——を日常的に行うようになった。

最初は半信半疑だった。プロのエンジニアではない自分が、本当にアプリケーションを作れるのか。

ところが、やってみると想像以上にできることが広がっていった。

Sales AI Capsuleの開発に加え、他のアプリケーションもバイブコーディングで進める中で、フロントエンドの構築、バックエンドのロジック、データの永続化、UIのコンポーネント設計——こうした領域でのノウハウが着実に蓄積されていった。

一方で、WordPressの運用負担は増すばかり。

デザインをちょっと変えたい。フォームの動きを調整したい。ページの表示速度を改善したい。

そのたびにプラグインを探し、設定画面と格闘し、思い通りにならずに妥協する。その時間があれば、バイブコーディングでゼロから作ったほうが早いのでは——そんな考えが頭をよぎるようになった。

思い切ってゼロから再構築

結論から言うと、思い切って正解だった。

既存のWordPressサイトをリファレンスにしながら、バイブコーディングでウェブサイト全体をゼロから構築。加えて、音声講座用のランディングページも新たに作成した。

構築にかかった期間は約2週間。

ただし隙間時間を使って少しずつ進めたので、実質的な作業時間は1週間程度だと思う。

この「2週間」という数字を聞いて、どう感じるだろうか。

WordPressのテーマを一からカスタマイズしたり、外部に発注したりすれば、もっと時間がかかるはずだ。それが、専門のエンジニアではない人間がAIと対話しながら進めて、この期間で形になった。

サイト構築だけではなかった

驚いたのは、サイトの見た目を作ることだけが「できたこと」ではなかったという点だ。

Google アナリティクス(GA4)の分析設計——どのイベントを取得し、どのカスタムディメンションを設定し、どんなファネルで分析するか。その設計から実際のタグの設置、レポートの作成まで。

さらに、見込み客向けのステップメールの設計と実装

こうした「サイトの裏側」の仕組みも含めて、すべてAIと一緒に構築できた。

特に興味深かったのは、GA4のような複雑なツールの設定作業だ。

通常であれば、管理画面を開いて、ドキュメントと格闘しながら一つひとつ設定していく必要がある。しかし、Claude cowork にブラウザの操作権限を渡すことで、AIが直接ブラウザを操作して、必要な設定を自動的に進めてくれた。

カスタムディメンションの追加、イベントのパラメータ設定、レポートのカスタマイズ——こうした作業を、対話しながら自動化できたのは大きな驚きだった。

GA4のカスタム設定やメール自動化のような領域は、これまで外部の専門家に頼るか、自分で膨大なドキュメントを読み込んで試行錯誤するしかなかった。

それが、AIとの対話の中で「こういう分析がしたい」「こういうタイミングでメールを送りたい」と意図を伝えれば、具体的な実装方法が返ってくる。修正も対話で進む。

本当に正しく動いているのか?

私はプロフェッショナルなエンジニアではない。設定がうまくいっているのか、本当に意図通りに動作しているのか——最初は不安だった。

だからこそ、何度もClaude Codeにレビューを依頼した。

実装を始める前に、Claudeに当社のウェブサイトを読み込んでもらい、B2Bのプロフェッショナル向けサイトとしてどうあるべきかを理解してもらった上で、最適な設定の指示書を作成してもらった。

そして、実際にその指示に従って実装を進めた後、すべての設定が正しく行われているかをチェックしてもらった。具体的には、タグの記述と管理画面上の設定の両面から確認を依頼した。

どこまで完璧にできているかは、正直わからない。ただ、ある一定のレベルには達していると思っている。

そして、これは完成形ではない。

今後、実際に運用していく中で不具合や想定通りに動いていない部分が見つかれば、その都度同じ方法でAIと対話しながら改善を繰り返していけばいい。それができるのが、バイブコーディングの強みだと感じている。

バイブコーディングでここまでできるのか、と改めて実感した。

今後はClaude Codeで運用

構築して終わりではない。ウェブサイトは継続的に更新し、改善していく必要がある。今後の運用にはClaude Codeを活用していく。

これまでは、ウェブサイトに何か変更を加えたいとき——デザインの一部調整、お知らせページの追加、ブログ記事の公開——そのたびにWordPressの管理画面を開いて、自分で作業する必要があった。

個人事業主や小規模な会社であれば、なおさらだ。デザインはテンプレートの制約に縛られ、わからないことがあれば調べながら試行錯誤する。手間がかかるし、思い通りにならないことも多かった。

今後は、Claude Codeに「ウェブサイトのこの部分をこう修正して」と依頼すれば、AIが直接コードを操作して修正してくれる。 運用の負担が大幅に軽減されるはずだ。

加えて、ブログ記事をはじめとするコンテンツの作成については、別途バイブコーディングで構築した「コンテンツスタジオ」というツールを活用している。ここで記事を作成し、ウェブサイトにパブリッシュする。本番環境への公開作業も、Claude Codeに指示を出せば自動的に処理してくれる。

イメージは「ウェブサイト運用のエンジニアを一人雇っている感覚」

そのエンジニアがClaude Codeで、私が直接依頼を出せば代わりに作業を進めてくれる。

もちろん完全に自動というわけではないが、従来のように自分ですべてを操作する必要はなくなった。これは、運用の在り方を大きく変える可能性を秘めている。

動的サイトから静的サイトへの転換、しかし運用は逆に楽になる

私は以前、CMSを販売する外資系企業でカントリーマネージャーを務めていた。ウェブサイトの開発と運用の難しさ——複雑な要件、長いリリースサイクル、継続的なメンテナンスコスト——こうした課題については深く理解しているつもりだ。

その経験から言えるのは、バイブコーディングによるウェブサイト運用は非常に画期的だということだ。

バイブコーディングで構築する本ウェブサイトは静的サイトであり、当時私が扱っていたような動的サイトとは異なる。

動的サイトには、ユーザーごとのパーソナライズ、リアルタイムなデータ連携、複雑な権限管理といった柔軟性がある。しかし、動的サイトが選ばれてきた最大の理由は、「運用を楽にするため」だった。

ところが、バイブコーディングで構築した静的サイトの運用は、動的サイトよりもむしろ簡単かもしれない——今回の経験を通じて、そう感じている。

もちろん、企業規模や運用規模によっては、バイブコーディングだけでは対応しきれない要求もある。現時点では小規模なウェブサイトに適していると言える。

ただし、静的でも動的でもウェブサイトの開発・運用を担う側が、一部でもこの仕組みを取り入れれば、かなりの効率化とスピードアップが実現できるはずだ。

修正がその場で完了する

従来のやり方であれば、たとえばウェブサイトの修正をベンダーに依頼してから成果物が納品されるまでに数日から1週間、2週間とかかることもあった。

この仕組みを使えば、その場ですぐに修正できる。自分でやる場合には、文字通り数十秒で意図が形になる。Claude Codeが指示を受け取り、コードを修正し、反映してくれる。

私からすると、まさに夢のような感覚だ。

顧客にとっても、これは大きな価値だと思う。スピードが上がり、修正の柔軟性が増し、コストも抑えられる。静的サイトの制約はあるが、それを補って余りあるメリットがある。

完全な動的サイトは可能か?

もちろん、完全な動的サイトをバイブコーディングで構築できるかといえば、現時点では難しいかもしれない。

ユーザー認証、データベース連携、リアルタイムな処理など、複雑な要件を満たすには、従来の開発手法も併用する必要があるだろう。

ただ、時間に余裕があれば、どこまでバイブコーディングで実現できるかチャレンジしてみるのも面白いテーマかもしれない。技術の進化は速く、今後さらに可能性は広がっていくはずだ。

Claude Codeのバイブコーディング能力は、チームエージェントなどの新機能が使えるようになったこともあり、以前と比べてかなり向上している。複数のファイルにまたがる修正や、デザインの一括調整、新しいページの追加といった作業が、ターミナルから対話するだけでスムーズに進む。

バイブコーディングの本質

この経験を通じて、ひとつ確信したことがある。

**バイブコーディングは「エンジニアの代替」ではなく、「ビジネスを理解している人間が、自分の意図を直接プロダクトに反映できるようになる手段」**だということだ。

営業のことを一番よくわかっている人間が、営業のためのツールを自分で作れる。これは大きな可能性だと思う。

営業支援への展開

だからこそ、今後はウェブサイトの運用にとどまらず、営業に関するさまざまなアプリケーションの開発にも取り組んでいきたいと考えている。

具体的には、当社の顧客中心営業フレームワーク「BECQA」で伝えている内容——企業分析の習慣化、イネーブラーとの関係構築、クロージングプランの策定、診断型質問の技法——こうしたスキルを研修で学んだ後に、日常の中で定着させるための支援アプリケーションの開発も視野に入れている。

研修で学んだことが翌週には忘れられてしまう。これはB2B営業の研修における根深い課題だ。

AIを活用すれば、学んだ内容を反復練習したり、実際の商談前にシミュレーションしたりする環境を、手の届く形で提供できる可能性がある。

法人営業30年の経験で培った知見と、バイブコーディングで広がった開発の可能性。 この2つを掛け合わせて、企

シェア:
酒井 秀樹
酒井 秀樹
代表取締役 / B2Bセールスコンサルタント

大学卒業後、日本総研に入社。その後、SAP、Adobe、Qlik、Sitecore、Tealiumをはじめとする各分野のリーダー企業で30年以上にわたり、カントリーマネージャー、セールスディレクター等を歴任。その豊富な経験を生かし、セールストレックを創業。BECQAフレームワークを開発。

LinkedIn

営業力を診断してみませんか?

10問の質問に答えるだけで、あなたの営業タイプがわかります

営業力を診断する

営業プログラム・コンサルティングのご相談

BECQAフレームワークを活用したトレーニングプログラムについて、お気軽にお問い合わせください

まずは相談する