AI(v0)＋WordPressでホームページを更新

生成AIの進歩が著しいことは言うまでもありませんが、どんな用途に活用できるのか自分でも試してみたくなり、ホームページを刷新してみました。いろいろな生成AIが利用できますが、今回は”V0 by Vercel”というサイトを利用してみました。Vercelというとホスティングサービスで有名ですが、AIを活用したホームページ作成サービスにも取り組んでいます。

Lighthouseでの結果

以下は今回のホームページ更新後のLighthouse（ホームページをいろいろな側面から分析するChromeの拡張機能）の結果です。若干修正はいれましたが、v0で作成したページの結果は予想以上に良いスコアになりました。

image 7
AI(v0)＋WordPressでホームページを更新 10

以前自分でWordPressを作成したときはパフォーマンスを50以上にするだけで苦労しました。今回はシンプルで動きの少ないページであるとはいえ、100点という点数は想定外に嬉しい結果となりました。

v0の使い方

https://v0.dev にアクセスしてアカウントを作成してください。以下のような画面が表示されるので、あとはそこに「どんなページを作成したいか」と入力するだけです。日本語でも大丈夫です。

image
AI(v0)＋WordPressでホームページを更新 11

Free (無料), Premium ($20), Ultra ($200) と3つのプランがあります。Premiumにではプロジェクト数やメッセージ数の上限がなくなります。まずはFreeプランでためしてみるのがよいでしょう。

プロジェクトを作成したら、チャットで会話しながらホームページを作成してゆきます。

image
AI(v0)＋WordPressでホームページを更新 12

操作は簡単で、画面左下のチャットウインドウで会話をしながらコンテンツを作成してゆきます。例えば「生徒さんの声のセクションも設けたいです。FAQと同じようにコピー＆Pasteして使えるようになっているのが理想です。今のホームページをvoices.htmlで添付しました。見た目がかっこよくないので、今あるページと整合性を取るような感じで、シンプルかつ見やすくなっていると嬉しいです。画面のスペースを省略するために、必要に応じてJavaScriptなどを活用してほしいです。」みたいに希望を入力すると、応答を返してくれると同時にソースコードが更新されます。更新が終わるとプレビュー画面が表示されます。

image 1
AI(v0)＋WordPressでホームページを更新 13

ダウンロードしてプレビュー

生成されたページはReactベースです。Webブラウザ上でもプレビューできますが、いろいろと更新して様子をみるのであれば、一旦ダウンロードしてローカルで実行すると便利です。Reactを実行する必要があるのでnodeが必要です。未インストールの方は、https://nodejs.org/ja/download からダウンロード・インストールしてください。

v0で作成したコンテンツは画面右上のダウンロードアイコンからコード一式をダウンロードできます。npxコマンドを使ってもよいですが、今回はZIP形式でダウンロードしてローカルで展開(unzip)しました。

ダウンロードしたzipファイルを c:\tmp\future-codersに展開しました。package.jsonファイルがあるので、npm installで必要なモジュールをインストールします。単に”npm install”と実行しただけでは、dependencyを解決できないというエラーが起きてしまいました。そこで –legacy-peer-depsオプションを付けてインストールを行いました。

image 2
AI(v0)＋WordPressでホームページを更新 14

インストールが終わったら、npm run devコマンドを実行してサーバを起動します。localhost:3000でコンテンツを見ることができるようになります。

image 3
AI(v0)＋WordPressでホームページを更新 15

ソースコードをみるとファイルが多いので圧倒されるかもしれませんが、ホームページのセクションごとに部品として分かれているので修正は容易です。必要に応じてcomponentsフォルダの各ファイルの中身を修正してください。

WordPressへの組み込み

このままReact(Next.js)として公開するのであれば、このまま成果物をデプロイすればよいだけですが、既存のサイトがWordPressで作成されており、ブログの記事や画像など過去の資産もそれなりにたまっていました。よって、今回作成したデザインをWordPressに組み込むことにしました。

CSSファイルの取得と追加CSSの登録

Unzipしたフォルダにstylesというフォルダがあり、そこにCSSが格納されていますが、”@tailwind”というキーワードがあることからわかるように、WordPressでCSSとして利用するには、ビルドして通常のCSSに変換する必要があります。tailwindをビルドするような方法もありますが、今回はlocalhost:3000に接続して、ブラウザの開発者ツールからダウンロードしました。

image 4
AI(v0)＋WordPressでホームページを更新 16

ブラウザを起動してlocalhost:3000に接続します。開発者ツールのNetworkタブを選び、CSSを選択した状態でページを再読み込みします。layout.cssというファイルがダウンロードされるので、そのPreviewタブからCSSを取得することができます。これをWordPressへ追加CSSとして登録しました。WordPressへの追加方法はテーマによってことなりますが、外観→カスタマイズからできることが多いと思います。

カスタムHTML

個々のセクションは<section>要素で区切られているので容易に見つけることができます。開発者ツールで該当するセクションをさがして、右クリックでコンテキストメニューを表示して、Copy→Copy elementで要素をコピーします。

image 5
AI(v0)＋WordPressでホームページを更新 17

コピーした内容はWordPressの固定ページにカスタムHTMLとしてペーストします。

image 6
AI(v0)＋WordPressでホームページを更新 18

これでv0で作成したコンテンツをWordPressに組み込むことができました。セクションでJavaScriptを使用している場合には若干の注意が必要です。おそらく以下のようにDOMContentLoadedのイベントハンドラを使って、初期化処理を行っていると思います。

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Download
    // フィルターボタンの要素を取得
    const filterButtons = document.querySelectorAll('.filter-button');
    const materialCards = document.querySelectorAll('.material-card');
    
    // フィルターボタンにイベントリスナーを追加
    filterButtons.forEach(button => {

このようなコードが複数個所に分散してしまうと意図した挙動にならないことがあります。その場合は、DOMContentLoadedのイベントハンドラの中身を一つにまとめて、それをカスタムHTMLとして固定ページの最下部に貼り付けました。これで、Reactで実行するJavaScriptも無事動作することが確認できました。v0が生成するコードによっては別途対処が必要かもしれませんが、その場合はJavaScriptを理解して適宜修正することになるでしょう。

所感

絵心の無い自分にとって、ホームページの更新は悩みどころでした。デザインを外注するにしても誰に頼んでよいか、コストはいくらくらいかけるのか、いろいろと考えることがあります。WordPressのテーマは膨大な量があるので、テーマを選ぶだけでも大変です。今回はv0を使うことで、対話しながら自分の意向をAIにつたえて、ページを生成することができました。また、作成後もパフォーマンスやSEO最適化など作業が膨大にあります。そのあたりもv0は考慮してくれているようで、作業はとてもスムーズに進められました。

関連投稿