[個人開発] WebサイトリニューアルにVercel v0を使ったら革新的すぎた件

Posted at 2025-02-07

これは何？

寝不足になりながら個人で開発したWebサイトのリニューアルを生成AIを使って頑張った話を自己満でまとめた記事です。

こちらです。(PSO2NGSというオンラインMMORPGのチームサイトです)

私、実はこのゲームを旧PSO2の時代からもう10年近くやってまして
ゲーム内で所属しているチームを紹介してメンバーと活動内容を広めていく取り組みを(勝手に)やっています。

今回はこのサイトをいろいろな面でリニューアルしました。

まずはリニューアル前のサイトのスクショを見てみましょう。

このサイトは、元はTumblrと呼ばれるブログとSNSを組み合わせたようなサービスがありそれを利用して公開していました。

Xのように画像やテキストを投稿して他のユーザーに見てもらうこともできるし
投稿したデータを利用してブログ形式でWebサイトを公開できるCMSのような機能もあります。
私の利用範囲では特に費用もかからずサイト公開出来ていました。

これだけ聞くととても便利なのですが

Tumblrを利用している国内ユーザーがそれほどいない(どちらかというと海外ユーザーがゲームのスクリーンショット等を投稿して盛り上げていた印象)
サイト制作という点では独自にカスタマイズしにくい
- WordPressのテーマのようにWebサイトのテンプレートが用意されているが自由度が低い
- カスタマイズも出来るが独自のJavascriptを組み込むといったことがほぼ出来ない(厳密に言えばサポートに連絡して承認もらえれば組み込める模様。連絡しても返答なかったけど)
上記理由からテンプレート以上のことは基本HTMLとCSSのみで実装するしかなかった

という感じだったので、もう少しモダンな技術を使って自分でカスタマイズできたらいいなあとずっと前から思っており
今回ようやく重い腰を上げてリニューアルに踏み切ったというわけです。

まずTumblrは利用しない方針にしました。その上で

などを考慮し、よくある構成のNext.jsとVercelを利用することにしました。

同じくVercelが開発している生成AI系サービスのv0を利用しました。

本職がインフラエンジニアなのでインフラ込みのバックエンド領域には知見がありますが
フロントエンドの知見があまりなく0からNext.jsで開発していくのは時間的労力が高すぎるので
ありがたく生成AIの力を借りることにしました。

基本AIとプロンプトでやり取りしながら進めていきました。まじで便利すぎる。
実際の開発画面のスクリーンショットを貼っておきます。

こんな感じで生成したコードを実行したときの画面プレビューを閲覧しながら開発できるし

生成したコードももちろん画面上から確認できます。
右上のデプロイというボタンを押すとそれだけでVercelに展開されてサイトを公開できます。

総じてユーザー体験が良すぎるなあと。

複数ファイルの生成に対応している
- Vercelが作っているサービスなので、Next.jsの仕様を理解してコンポーネントごとにファイルを分割して生成してくれる
- 今回作ったサイトもコードとしてはNext.jsで書かれています
生成したコードと実際の動作をプレビュー画面でしながら開発できる
- v0の画面から生成したコード自体を自分で編集することも可能
画像ベースでプロンプトから指示が出せる
- 生成してもらった画面がこういう動きになってるんだけどもう少しなんとかならない？ってときにその部分のスクショと理想系の説明をすれば解釈して直してくれる
生成したコードをそのままVercelにデプロイして公開できる
- デプロイボタンを押して待ってるだけ
意図しない挙動になった場合元のバージョンに復元することができる

価格がちょっとお高めかも（月額$20、日本円で¥3000ちょっとくらい
- フリープランもあるけどプロンプト入力の回数上限があるので本格的に使いたい場合は課金必須
指示を出していない部分を直してしまったり、数回前に編集した部分が巻き戻ることがある
- これは生成AI系のサービスの宿命かもしれない

一旦ひと段落したのでゆっくり寝られます。
まだ上手く動いていない部分やサイト内で利用している画像が若干古かったりと修正箇所はあります。
ゆっくり直していきますか〜。
みなさんも是非v0を利用してみてください！