V0 Vercelで大家さんのWordPressサイトを刷新 Vibe Coding はどこまでできるか？
いやー、とんでもない時代になりました。AIがプログラミングしてくれるなんて、なんといい時代なのでしょう〜。
今回は、テックを自称するテック大家さんが、本ブログ「テック大家さん」の殺風景なトップページを、今どきのランディングページに刷新します。
その作業をAIを使ってVibe Coding（バイブコーディング）するとどうなるのか。これが本日のテーマです。
用語説明
いくつか、本投稿が使用する用語説明から進めます。
Vibe Coding（バイブコーディング）とは
AIがプログラミングできるようになり、しかも、実用的なプログラムを生成してくれる昨今。LLM（大規模言語モデル）を使って、自然言語でプログラムさせる、という手法に名称がつきました。
それが、Vibe Coding（バイブコーディング）。
Vibeというのは「ノリ」でやる、みたいな意味だそうです。
ノリで自然言語を使って、会話するようにAIにプログラミングさせる。それが、Vibe Codingというわけです。
V0 by Vercelとは
V0というサービスがあります。
こちらは、AIに対して自然言語で依頼するとアプリの画面を作ってくれるサービスです。
プレゼンテーションなども作れるようです。生成したアプリは、Webアプリとしてコードも作ってくれます。そのコードはすぐにデプロイして一般公開できるし、ダウンロードして自分で改変することもできます。まさに夢のような(?!)サービスです。
Claudeとは
生成AIというとChat GPT が有名ですが、筆者テック大家さんが好んで使っているのがClaudeです。LLM(大規模言語モデル）のチャットサービスで、Chat GPTと同じように利用できます。プログラミングをさせるとかなり優秀なコードを書いてくれるので気に入っています。
Claudeといえば、最近はClaude Codeというコーディングに特化したコマンドラインプログラムを公開されています。Claude Codeは単一のファイルではなく、複数ファイルにまたがるような「プロジェクト」構造全体をみてプログラムを書いてくれます。かなりのすぐれものです。
それでは、用語説明はこのくらいにして、ここからは実際にAIと行った作業を見ていきましょう。
Vibe Codingで作りたいもの
AIを使ったVibe Codingで作りたかったもの。それは、本サイト「テック大家さん」のトップページです。
本サイトはWordPressで運営しています。使っているWordPressテーマはLuxeritasという無料のテーマ。ブログ中心のサイトなのでトップページはブログの記事一覧を表示していました。
これを筆者の経歴なども含めた自己紹介風のランディングページにしたいと考えました。
今風のランディングページを作るにはLuxeritasの設定UIだけでは結構難しいです。必然的にPHPでカスタマイズすることも含めて、作り直しが必要になります。
というわけで、デザインからPHPプログラミングまで、できるだけAIに実行させようというのが今回の目標。
AIコラボレーション制作の手順
単にプログラミングするだけならClaudeでかなり十分な結果を出力してくれます。ただ、今回やりたかったのはレイアウトやデザインの変更です。
2025年7月現在、こういう仕事に関しては正直な話、Claudeは「センスがない」。一方、V0はデザインに関してはかなりいい感じに出力してくる印象があります。
ただし、そこら辺の性能に関してはどのサービスもLLMの更新に伴って随時アップデートされていくので、あくまで2025年7月時点の印象です。
ところが、V0が生成するコードは、React/NextJS + shadcn UIでできているのでそのままではWordPressに取り込むのが難しそうです。
そこで、V0が生成したコードをClaudeに渡して、WordPress (+ Luxeritas）のコードに変換してもらうことにしてみました。
V0でランディングページのデザインを決める
V0でLP（ランディングページ）のイメージを作ってもらった過程をみてみましょう。
当然、一発でいい感じになるわけもなく、何度かやり取りを繰り返した結果として完成度が上がってきます。まずは、最初のプロンプトです。
https://tech-landlord.com/ のブログ記事を読んで記事の内容にあったLPページのデザインをしてみて。色のスキームはオリジナルと同じものをつかい、アイコンも同じものを使ってください。
こんなプロンプトをV0に入力してみましたが、V0はリンク先は読み込んでくれないようです。
しかたなく、スクリーンショットを取って添付、改めて依頼。出来たものがこちらです↓
うーん。なんか思ってた以上に「カラフル」（笑）。色味を変えましょう。
色味は、#ccc8aa をブランドカラーにしたようなシックで単色なデザインにしてみてくれる？
お。ちょっとイメージに近づいてきた。できたのはこちら↓
でも、なんか読みにくいページだなぁ。さらに変更を加えます。
トップのHero?が視認性が悪いので改善してみて。文字と背景の関係がわるいようだ。
なかなかいいじゃない。できたものはこちら↓
でも、色数が多くてなんか塗ったくったみたいなデザインです。もう少しシンプルにしたい。そう考えて、以下のプロンプト。
もう少し色の種類を減らして、白も使って、更にシンプルにしたらどうなる？
結果は以下のイメージ↓
まあ、許せるレベルになってきました。
ということで、これを使うことにします。
V0はプレビューとともに、それを表示するためのコードを提供してくれます。作られたコードは前述のように、React/NextJS + shadcn UIというフレームワークを使って実装されています。
Claudeにお願いして、そのコードをWordPressで使えるコードに変換(?)してもらいます。
React + shadcn UIのコードをWordPress用に書き換え
今度はClaudeのチャット画面を開いて、会話を始めます。
V0が生成したコード(page.tsx)を持ってきて、貼り付けながら以下のように依頼してみます。
V0 by percelと言うサービスで作ったReactのコードがあるのだが、これを当て込むようなLPをLuxeritas上で実現したい。単一のページのみ（トップページ）をこれにするイメージ。それ以外のページはいままで通りで運用したい。
実は内心、色とかUIの形などは別ファイルになっているかなと思っていました。なので、そのままClaudeに渡しても見た目が違うものができてしまうだろうと、あまり期待してませんでした。
するとどうでしょう。
以下のようなファイル群を生成してくれました。
- WordPressに埋め込むためのCSSファイル
- スクロールアニメーションやモバイル用のメニューの動作などを扱うJavaScriptファイル
- WordPressのTemplateに使えるPHPファイル
- 特定ページのときだけ、上記のCSSやJavaScriptファイルをクライアントに送るためのfunctions.php実装
などなど。必要なファイルをすべて生成してくれました。
CSSはshadcn UIで書かれたV0のコードではTailwind CSSというフレームワークが使われていました。それも解釈してWordPressで取り込めるシンプルなCSSに置き換えるという、手の込んだ作業をやってのけたのです。
そして、それらをサーバーの特定のディレクトリに配置するだけでエラーもなく利用することができました。
すばらしい！
実は、この後は、いくつかの複雑な議論を続けました。
オンラインのサイトをどのようにリスクなく更新するか、および、そのためのコーディング。
SEOのためのヘッダの埋込と、既存のLuxeritasシステムとの関係性の確認、そのためのコーディング。
など…
WordPressのディレクトリに配置
ここでは簡単にClaudeが生成したコードをどのような手順で使うかを説明します。
今回のファイルはすべてLuxeritusの子テーマのディレクトリに入れました。
public_html/wp-content/themes/luxechファイルは、WordPressのテンプレートとして利用できるPHPファイル（page-techlandlord.php）。そのページが使う、CSSとJSファイルです。
CSSとJSを読み込むための変更をfunctions.phpにも加えます。
% ls -lt
total 600
-rw-r--r--@ 1 kazushi staff 26736 7 10 17:21 page-tech-landlord.php
-rw-r--r--@ 1 kazushi staff 10049 7 10 17:06 landing-page.css
-rw-r--r--@ 1 kazushi staff 3246 7 10 16:51 functions.php
-rw-r--r-- 1 kazushi staff 17644 7 10 13:02 landing-page.js
...page-tech-landloard.phpのヘッダには以下のように書かれています。
ディレクトリにこのように書かれているPHPファイルが存在する場合、固定ページの設定画面の「テンプレート」から選べるようになります。
Landing Page用の固定ページを新たに作って、Template Name: 「テック大家さんランディングページ」を選択します。
後は、WordPressの[設定] ＞ [表示設定]で作った固定ページ（Landing Page）を「ホームページ」として選ぶだけ。
そんなこんなで最終的には現在(2025年7月)、すっかりトップページを入れ替えて運用しています。
まとめ
WordPressサイトのトップページを、生成AIを使って置き換えるカスタマイズ作業をやってみました。
WordPressの設定画面からのカスタマイズは端からあきらめていましたので、完全にPHPコーディングです。
デザインは、UI作成に定評があるV0 by Vercelで生成。生成されたコードをClaudeでWordPress用に作り変えします。生成されたコードをWordPressのテーマフォルダにコピーすれば完成。このような作業フローは結構実用的なのではないかと実感できました。
実際にはClaudeとかなり複雑なやり取りをしました。そういう意味では、まだまだ手放しでVibe Coding（バイブコーディング）できるわけではなかったのです。それでもかなりいいところまで「ノリ」でコーディングできるのは確か。それが確認できたのは大収穫でした。
今後、ますますAIが性能アップすれば確かに「この方向性、アリだな」と思える楽しい(!)作業でした。
最後までお読みいただきありがとうございましたー。
プロフィール
-
ソフトエンジニア兼不動産オーナー。
某超有名日本メーカーにおいてソフトウエア開発畑を30年近く勤務。
かつてはWindowsのアプリ開発や、組み込み機器のソフト開発を行う。プロジェクトマネジメント・オフショア開発・要件管理などの経験あり。現在は、個人開発で、JavaScript/TypeScript/React/Express、PHP/Laravel、Firebase、Google cloud、Arduino(C++)などでプログラミングを楽しむ。
サラリーマンの傍ら不動産経営を始め、現在、１棟モノの賃貸４物件を東京・神奈川に所有。夫婦でおよそ20年の賃貸経営の実績。
最近の物件では、入居者向けフリーWiFiなど、テック系の設備はDIYで自ら構築。
海外MBA取得。
ソフトエンジニア兼不動産オーナー。
某超有名日本メーカーにおいてソフトウエア開発畑を30年近く勤務。
かつてはWindowsのアプリ開発や、組み込み機器のソフト開発を行う。プロジェクトマネジメント・オフショア開発・要件管理などの経験あり。現在は、個人開発で、JavaScript/TypeScript/React/Express、PHP/Laravel、Firebase、Google cloud、Arduino(C++)などでプログラミングを楽しむ。
サラリーマンの傍ら不動産経営を始め、現在、１棟モノの賃貸４物件を東京・神奈川に所有。夫婦でおよそ20年の賃貸経営の実績。
最近の物件では、入居者向けフリーWiFiなど、テック系の設備はDIYで自ら構築。
海外MBA取得。