v0を使って個人サイトを作り直してみた

最近生成AIサービスを利用し始めた初心者がWebフロントエンドの生成AIサービスv0を使ってみた感想を書きました．

経緯

その昔，Vanilla JSとCSSの簡単な知識だけで個人サイトを作りGitHub Pagesで公開していました．そこから3年ほど放置しており，その間に学んだReactを使ってそろそろ書き直そうと考えました．

当初は全てのコードを手作業で書き直そうしていましたが，如何せん自分にはデザインセンスがなく，どういう見映えにするか悩んでいました．そんななか，Vercelが提供しているv0がなかなかいいという話をXのポストや技術LT会で聞いたりしました．折角なのでこの機会にv0を使って個人サイトをゼロから作り直してみました．

https://v0.dev

ゼロからの作成依頼

まず初めにv0に作成を依頼する個人サイトの基本的な仕様をまとめました．基本的なページの構成や表示する情報は既存の個人サイト以前と同じにしました．

依頼内容

Reactで個人のポートフォリオサイトを作りたい． 作るのは３つのページ: トップページ，作曲データページ，アプリ紹介ページ．

トップページでは中央寄せで自分の画像アイコンは丸形で表示し，その下に名前と一分程度の自己紹介文，X，ブログ，SoundCloudなどの外部サービスへのリンクを載せたい．

作曲データページでは，SoundCloudへのアカウントページのリンクを準備する．また３つの曲カテゴリーがあり，そのカテゴリの中に曲情報を列挙していく．列挙する形式はリストだったりカードだったりかは問わない．一つの曲情報の塊には曲名，作曲ツール，曲データのリンク（1つ以上）が表示されている．

アプリ紹介ページでは，GitHubのアカウントページへのリンクを準備する．また作ったアプリをカードのようなもので列挙していく．アプリの情報はアプリ名，バージョン，短い説明文，対応OSのアイコン，ダウンロードリンク，任意でアプリの画像が表示されている．

この仕様をベースに，見た目や振る舞いに関して今風のいい感じのデザインのページを作るよう依頼しました．

まだ1度しか対話をしていなくても，思いのほかAIがいきなり完成形に近いものを出してきて驚きました．依頼した段階では，正直自分のなかでどういったデザインにしたいという具体的なイメージはなく，ただぼんやりとしたワイヤーフレーム未満のものがあるだけでした．そこにAIが具体的なページのデザインを提案してきて，はっきりとした形のなかったアイディアをそこに紐付けて，次はどうしようなどと考えられるようになりました．アイディア出しのきっかけとして，AIを使うのはかなり有効だと感じました．

微調整の依頼

v0が提案してきたデザインについて，このまま採用してもいい気がしましたが，枠線の有無やアイテムを列挙するコンポーネントの種類，カラーテーマなどが少し気になったので追加でやり取りをして修正を依頼しました．

微調整の依頼10回ほどやり取りして，個人的にこれでいいかなと思えるものを作ってくれました．ただボタンの配色やサイズの変更など細かな修正をする場合は，v0に頼むと出力に時間がかかり修正規模に対して待ち時間が長くなってしまうところが少しストレスに感じました．

こういった経験から全てをAIに委ねるのではなく，デザインの大枠はAIが決めて，細かな修正は人の手で行うのが一番ストレスなく開発できるのかもしれないと思いました．そのためにも自力で変更が必要な箇所を把握し開発できるだけのスキルはAIを使った開発でも必須だと感じました．

Vibe Codingについて

私は細かな部分は人の手を使うことが重要と考えていますが，逆に細かなところは気にせず，全てAIに任せてしまうのも一つの手なのかもしれないとも思いました．

AIにタスクを任せるときは事前に整理された仕様・定義書を準備することが有効な手立てですが，開発途中で仕様や定義に細かな変更が入るのは必然的だと思います．変更点をAIに都度指示すると，先述の通りAIの応答に対して待ち時間が発生してしまい，開発効率が落ちてしまいます．開発体験を重視するならこれはできるだけ避けたいです．

クライアントワークはともかく個人開発であれば仕様の決定権は開発者にあるので，仕様の変更には柔軟に対応できます．それならば個人的なこだわりを捨てて過度な追加修正を行わず，AIが提案してきたものを進んで受用てして好きなようにやらせる方が開発もサクサク進んでいいのかもしれないと思いました．最近流行りのvibe codingはこういったマインドのもとで進めるのかなと感じました．

仕上げ

結局v0と14回やり取りをしてデザインを固めました．Webページに載せるコンテンツはローカル環境にあるため，このあとのコンテンツの差し替え作業は生成したコードをローカル環境にダウンロードして行いました．

v0はnpx shadcn add "URL"を使うことでローカル環境にコードを取り込むことができるようなのですが，なぜか私の環境では上手く動来ませんでした．結局zipでコードをダウンロードし，ファイルを展開してpnpm installを実行して動作環境を整えました．

最終的にコンテンツの差し替えやいくつかの処理を書き直して完成させました．完成したサイトは以下のリンクから確認できます．

https://rerrahkr.github.io

まとめ

今回はv0を初めて使ってみて，その提案の質に驚きました．0から1を生み出す創造力に乏しいときは，AIの力を借りてアイディア出しをするのが良さそうだと感じました．生成されたフロントエンドの出来にも満足しているので今後の開発にも活用していきたいと思います．

一方提案してきたものに対して追加修正を行うなど応用的なことを行うには個人の開発力が物を言うと感じました．そのためにも個人の開発力向上につながる知識やスキルの吸収は継続的に行いたいです．