v0（Vercel）でUIパーツをAI生成する
ここからはコーディング型の世界です。まずはv0。テキストで指示するだけで、実際に動くUIコンポーネントのコードをAIが書いてくれる、Vercel社が提供するツールです。
v0が変えた「コードを書く」という体験
v0は、Next.jsやReactというWeb開発の現場で広く使われている技術で動くサイトを、AIとの対話だけで生成できるツールです。「ヒーローセクションと料金表を含むランディングページを作って」といった具合に、自然な日本語や英語で指示を出すと、実際にブラウザで動くコード付きのプレビューが数秒〜数十秒で表示されます。これまでコーディングと言えば「エンジニアが一行ずつ書くもの」というイメージでしたが、v0はその常識を大きく崩しました。
ビルダー型との一番の違いは、生成されるものが「見た目」だけでなく「本物のコード」である点です。v0が生成したコードはそのままダウンロードしたり、GitHubに保存したりして、他の開発環境に持ち込むことができます。つまり、Wixのように特定のプラットフォームに縛られることがなく、将来的にサイトを別のサーバーに移したり、エンジニアに追加開発を依頼したりする際の自由度が格段に高くなります。
ただし、この自由度の高さは同時に「使いこなすには多少の理解が必要」という側面も持っています。生成されたコードをそのまま公開できる状態に仕上げるには、多少なりともWeb制作の基礎知識（HTMLやCSSの構造、ホスティングの仕組みなど）があったほうがスムーズです。完全な未経験者よりも、「多少パソコンに詳しい」「昔ちょっとコードを触ったことがある」という層に特に向いているツールと言えるでしょう。
できること
特に便利なのが、生成後にチャット形式で「ボタンの色を変えて」「もう少し余白を広げて」と指示を重ねることで、その場でコードが修正されていく点です。デザインツールを操作する感覚に近い手軽さで、コードレベルの調整ができます。
実践のステップ
v0のアカウントを作成する
Vercelのアカウントでログインし、v0のチャット画面にアクセスします。
作りたいUIパーツを文章で指示する
「サービス紹介セクション」「お客様の声のカードレイアウト」など、パーツ単位で具体的に指示するとクオリティが安定します。
チャットで微調整を重ねる
色、余白、フォントサイズなど、気になる点を対話形式で指示して調整していきます。
コードをエクスポートする
気に入ったパーツができたら、コードをコピーまたはダウンロードして、次のSTEPで紹介するBolt.newなどの制作環境に組み込んでいきます。
メリット・デメリット
メリットは、本物のコードベースでの自由度の高さと、パーツ単位での細かい調整のしやすさです。デザインの引き出しが少ない人でも、質の高いUIパーツを次々と試せます。デメリットは、サイト全体を一気に組み上げるというよりは「パーツ単位」での生成が得意なツールであるため、サイト全体の一貫性は自分で意識して整える必要がある点です。次のSTEPで紹介するBolt.newのような「サイトごと生成する」タイプと役割分担して使うのがおすすめです。
気をつけたいポイント
- HTMLやCSSの基礎知識が多少あると、生成されたコードの調整がぐっとスムーズになります。
- パーツごとにデザインのテイストがばらつかないよう、事前にトーン＆マナーを決めておきましょう。
- 生成コードを公開環境に反映するには、ホスティングの知識も必要になる点を念頭に置いておきましょう。
まとめ
v0は「コードレベルで自由に作りたいが、ゼロから書きたくはない」という層にぴったりのツールです。次のSTEP12では、パーツ単位ではなくサイトごと生成できるBolt.newを紹介します。