【無料】Vercel「v0」の使い方！v0チャットが便利すぎるｗｗ

Webサイト開発の世界に革命をもたらす新しいツールが登場しました。Vercelが提供する「v0」は、AIの力を活用してWebサイトのUIデザインとフロントエンドコードを自動生成する画期的なサービスです。

きょろ

これがあればLPのワイヤーフレーム作成も以下のような動くデザインも楽にできちゃいます。

本記事では、v0の詳細や使い方、そして無料で利用できる範囲について詳しく解説していきます。

監修者兼ライター

きょろ

AIツール専門家

所有資格：Google AI Essentials

書籍：Chrome拡張×ChatGPTで作業効率化/工学社出版

AIツールレビュー数100以上。AIワークスタイルのオウンドメディア立ち上げ～AI関連の記事執筆を通じて、「実際に使ってみて、本当に良いAIツールを届ける」という信念のもと、AIで日本が盛り上がることを夢見るアラサー

Vercelの「v0」とは？

v0より引用

Vercelの「v0」は、テキストプロンプトを入力するだけでWebページのUIデザインとフロントエンドコードを自動生成する革新的なAIツールです。従来のWeb開発プロセスでは、バックエンドエンジニア、フロントエンドエンジニア、UIデザイナーなど、複数の専門家が必要でした。しかし、v0の登場により、これらの役割を1つのAIツールで代替できるようになりました。

v0の特徴

SNSで話題？新機能「v0チャット」がすごい！

v0は2023年12月にベータ版としてリリースされ、2024年7月に正式リリースされました。正式リリースに伴い、機能が大幅に拡充されています。

「v0チャット」という新機能が特に注目されています。この機能を使用すると、ReactやNext.jsに関する質問にステップバイステップで回答を得ることができます。これにより、開発者はコーディングの疑問点をリアルタイムで解決できるようになりました。

きょろ

v0チャットの使い方については下で紹介していますので最後までご覧ください。

v0でできること

v0の機能は多岐にわたり、Web開発のプロセスを大幅に効率化します。以下に主な機能を詳しく説明します。

テキストプロンプトによるUI生成

v0の最も注目すべき機能は、テキストプロンプトを入力するだけで、指定されたデザインに基づいたUIを自動生成する能力です。例えば、「シンプルなコーヒーロースターのECサイトのテンプレート」というプロンプトを入力すると、AIがそれに適したデザインを生成します。

例えばこんな感じのものが簡単に作れちゃいます。

この機能により、デザインスキルがなくても、プロンプトに基づいた高品質なWebデザインを簡単に作成できます。また、生成されたデザインは追加のプロンプトで細かく調整できるため、ユーザーの意図に沿ったデザインを実現できます。

画像からのUI生成

v0は、スクリーンショットや画像をアップロードすることで、そのデザインを元にしたUIを生成することも可能です。この機能は以下のような場面で特に有用です：

1. 既存のウェブサイトのリデザイン
2. 競合他社のサイトを参考にしたデザイン作成
3. デザイナーが作成したモックアップの実装

画像からのUI生成機能を使用することで、既存のデザインを再現したり、参考にしたデザインから新しいアイデアを得ることができます。これにより、デザインプロセスが大幅に効率化され、クライアントとのコミュニケーションも円滑になります。

Shadcn UIとTailwind CSSの利用

v0が生成するUIは、Shadcn UIとTailwind CSSをベースにしています。これらのフレームワークを使用することで、以下のメリットがあります：

1. モダンでスタイリッシュなデザイン
2. 高度なカスタマイズ性
3. レスポンシブデザインの容易な実装
4. パフォーマンスの最適化

Shadcn UIとTailwind CSSの組み合わせにより、開発者はコードを簡単にカスタマイズし、素早くプロジェクトに適用できます。また、これらのフレームワークは広く使用されているため、コミュニティのサポートも充実しています。

HTMLおよびReactコードの出力

v0は生成されたUIを、HTMLやReactの形式でコードとして出力します。この機能により、以下のようなメリットがあります：

1. 開発者は生成されたコードを直接自分のプロジェクトに組み込むことができる
2. コードの構造を理解し、必要に応じて修正や拡張が可能
3. 迅速なプロトタイプ作成が可能

HTMLとReactの両方のコードを出力することで、様々な開発環境やプロジェクトの要件に柔軟に対応できます。

v0チャット機能

2024年7月の正式リリースで追加された「v0チャット」機能は、開発者にとって強力な支援ツールとなります。この機能の主な特徴は以下の通りです：

1. ReactやNext.jsに関する質問にステップバイステップで回答
2. コーディングの疑問点をリアルタイムで解決
3. 具体的なコード例を交えた説明

v0チャット機能を活用することで、開発者は学習曲線を短縮し、より効率的にプロジェクトを進めることができます。

v0のは無料で使える？料金について

v0の利用にあたり、多くの人が気になるのが料金体系です。結論から言えば、v0は無料で使用することができます。ただし、無料プランでは作成できるコードに制限があるため、大量のコードを生成したい場合は有料プランへの加入が必要になります。

v0は以下の3つの料金プランを提供しています。

無料プランの特徴

無料プランは、v0の機能を試してみたい個人開発者や小規模プロジェクトに適しています。以下の特徴があります

1. 毎月200クレジットが自動的に付与される
2. 基本的な機能はすべて利用可能
3. クレジットを使い切っても翌月に新たなクレジットが付与される

ただし、無料プランではクレジットを使い切った後に追加購入ができないため、大規模なプロジェクトや継続的な利用には向いていません。

きょろ

制限はあるものの、ある程度の機能は無料で使えるのでまずは無料で使ってみましょう。

Premiumプランの特徴

より多くのコード生成が必要な場合や、プロフェッショナルな利用を考えている場合は、Premiumプランがおすすめです。主な特徴は以下の通りです：

1. 毎月5000クレジットが付与される
2. クレジットを使い切った場合も追加購入が可能
3. より高度な機能や優先サポートが利用可能

Premiumプランは、フリーランスのWeb開発者や中小規模の開発チームに適しています。

Enterpriseプランの特徴

大規模な組織や特殊な要件がある場合は、Enterpriseプランが適しています。このプランでは、以下のようなカスタマイズされたソリューションを提供しています：

1. 組織のニーズに合わせたクレジット数
2. カスタムAPI統合
3. 専門的なトレーニングとサポート
4. セキュリティ強化オプション

Enterpriseプランの詳細や料金については、Vercelの営業チームに直接問い合わせる必要があります。

クレジットって何？クレジットシステムについて

v0のクレジットシステムは、1クレジットで1回のコード生成が可能です。クレジットの消費量は、生成するコードの複雑さや量によって異なります。

例えば：

• シンプルなランディングページの生成：1〜2クレジット
• 複雑なECサイトの全ページ生成：10〜20クレジット

クレジットの使用状況は、v0のダッシュボードで確認することができます。

料金プラン選択のポイント

適切な料金プランを選択するためには、以下の点を考慮する必要があります

1. プロジェクトの規模と頻度
2. 月間のコード生成量の予測
3. 必要な機能やサポートのレベル
4. 予算

個人開発者や小規模なプロジェクトであれば、まずは無料プランから始めて、必要に応じてPremiumプランにアップグレードすることをおすすめします。

v0の登録方法

v0を使用するためには、まずアカウントを登録する必要があります。以下に、v0の登録方法を詳しく説明します。

ステップ1: 公式サイトにアクセス

まず、v0の公式サイトにアクセスします。

ステップ2: 「Get Started」をクリック

公式サイトのトップページで「Get Started」ボタンを見つけ、クリックします。このボタンをクリックすると、テキストプロンプトを入力する画面に遷移します。

ステップ3: アカウント登録

テキストプロンプト入力画面に遷移しても、まだアカウント登録が完了していないため、v0を使用することはできません。画面右上にある「Sign In」ボタンをクリックして、アカウント登録プロセスを開始します。

ステップ4: 認証方法の選択

アカウント登録画面では、以下の3つの認証方法が提供されています。

1. GitHub
2. GitLab
3. Bitbucket

きょろ

Googleがないのは珍しいですが、面倒なのでメールで登録しましょう。

こちらのURLに飛びます

アドレス入れて、「Continue with Email」を押下します。

メールアドレスを入力します。

メールを開いて認証しましょう。

「VERIFY」を押下します

「Verify」を押下します。

ステップ5: プロンプト作成画面への遷移

アクセス許可を承認すると、自動的にv0のプロンプト作成画面に戻ります。これで、v0を使用する準備が整いました。

v0の基本的な使い方

v0の登録が完了したら、いよいよ実際の使用方法を学んでいきましょう。v0の基本的な使い方は、直感的で簡単です。以下に、ステップバイステップで説明します。

ステップ0:画像を添付

作りたいサイトやLPをイメージさせるために、イメージとなる画像を添付します。

今回サイバーエージェントのコーポレートサイトをもとにデザインしてみます。

ステップ1:プロンプトの入力

次にプロンプトを入力します。プロンプトとは、生成したいUIやWebページの説明文です。以下のポイントに注意してプロンプトを作成しましょう

1. 具体的に: 「シンプルなランディングページ」よりも「白と青を基調としたミニマルなデザインのコーヒーショップのランディングページ」のように具体的に書くと、より意図に沿った結果が得られます。
2. 要素を列挙: 「ヘッダー、メインビジュアル、商品一覧、お問い合わせフォーム、フッター」のように、必要な要素を列挙すると良いでしょう。
3. スタイルの指定: 「モダン」「クラシック」「ポップ」などのキーワードを使用して、全体的な雰囲気を伝えます。
4. 色彩の指定: 使用したい色や避けたい色を明記します。
5. ターゲット層: 「20代〜30代の女性向け」など、想定するユーザー層を指定すると、それに適したデザインが生成されやすくなります。

例えば、今回サイバーエージェントのコーポレートサイトを作りたいので、以下のようなプロンプトが効果的です：
「20代〜30代をターゲットとした、緑色と白を基調としたサイバーエージェントのようなシンプルなコーポレートサイトデザイン。ヘッダー、大きなMVのスライダー、サービス種類、お問い合わせフォーム、フッターを含める。」

ステップ2: 生成ボタンをクリック

プロンプトの入力が完了したら、「Send」ボタンをクリックします。v0のAIがプロンプトを解析し、指定された要件に基づいてUIデザインの生成を開始します。

ステップ3: 生成結果の確認

数秒から数十秒後（プロンプトの複雑さによって異なります）、生成されたUIデザインが表示されます。この時点で以下の点を確認します。

1. 全体的な印象: プロンプトの意図が正確に反映されているか
2. レイアウト: 要素の配置が適切か
3. 色使い: 指定した色彩が適切に使用されているか
4. タイポグラフィ: フォントの選択や文字サイズが適切か
5. 画像やアイコン: 適切な画像やアイコンが使用されているか

指示文が細かくないからアレですが、サイバーエージェントっぽいブランド感はあります！

以下は実際のmotionもわかる動画です。

ステップ4: 微調整

生成されたデザインに満足できない部分がある場合、追加のプロンプトを使用して微調整を行うことができます。例えば

• 「ヘッダーの背景色をもう少し濃いピンクに変更して」
• 「商品画像のサイズを20%大きくして」
• 「フォントをより現代的なものに変更して」

このような具体的な指示を与えることで、デザインを細かく調整できます。

ヘッダー色を変えてみることにしました。

うん！優秀！

ステップ5: コードの確認

デザインが満足いくものになったら、生成されたHTMLやReactコードを確認します。コードは通常、別のタブまたはポップアップウィンドウで表示されます。

コードを確認する際は、以下の点に注意しましょう：

1. 構造の適切さ: HTMLの構造が論理的で適切か
2. クラス名: 適切なクラス名が使用されているか
3. コメント: 必要に応じてコメントが付けられているか
4. レスポンシブ対応: モバイルデバイスにも対応しているか

ステップ6: コードのエクスポート

満足のいくコードが生成されたら、「Code」ボタンをクリックしてコードをダウンロードします。

基本的な使用上の注意点

1. クレジットの管理: 無料プランの場合、毎月のクレジット数に制限があるため、効率的に使用することが重要です。※無料版のクレジット使用料はわかりません。
2. プロンプトの改善: 生成結果が期待通りでない場合、プロンプトの書き方を改善することで、より良い結果を得られることがあります。
3. バージョン管理: 生成したコードの異なるバージョンを保存しておくと、後で比較や再利用がしやすくなります。
4. セキュリティ: 生成されたコードにセキュリティ上の問題がないか、特に機密情報や個人情報を扱う部分については注意深くチェックしてください。
5. アクセシビリティ: 生成されたコードがウェブアクセシビリティ基準を満たしているか確認し、必要に応じて修正を加えてください。

これらの基本的な使い方を押さえることで、v0を効果的に活用し、Webデザインとフロントエンド開発のプロセスを大幅に効率化することができます。

v0の応用的な使い方

基本的な使い方を習得したら、次はv0のより高度な機能や応用的な使い方を探求しましょう。これらのテクニックを活用することで、v0の可能性を最大限に引き出し、より効率的で創造的な開発が可能になります。

1. 複雑なレイアウトの生成

v0は単純なサイトだけでなく、複雑なレイアウトも生成できます。以下のようなテクニックを試してみましょう

• グリッドシステムの活用: 「3列のグリッドレイアウトで商品カードを表示して」のように指定する
• 非対称レイアウト: 「左側に大きな画像、右側にテキストコンテンツを配置した非対称なレイアウト」と指示する
• モーダルウィンドウ: 「商品詳細をモーダルウィンドウで表示する機能を追加して」と指定する

例えば、以下のようなプロンプトを試してみてください
「4つのセクションからなる複雑なランディングページを作成。ヒーローセクションは全幅の背景画像とCTAボタン、次のセクションは3列のグリッドで特徴を説明、3つ目のセクションは左右非対称のレイアウトで製品紹介、最後のセクションはタブ切り替え可能な顧客レビュー。全体的にモダンでミニマルなデザイン。」

す、すげーーーｗ

動画も見てください。

2. 動的要素の追加

静的なデザインだけでなく、動的な要素を含むUIも生成できます：

• アニメーション: 「ホバー時に少し拡大するアニメーションを商品カードに追加して」
• スライダー: 「メインビジュアルを自動スライドショーにして」
• ドロップダウンメニュー: 「ヘッダーにドロップダウンメニューを実装して」

例えば：
「Eコマースサイトのホームページを作成。商品カードにはホバーエフェクトを追加し、メインビジュアルは3枚の画像が自動でスライドするように。また、ヘッダーのカテゴリーメニューはドロップダウン形式で実装して。」

これ本当にすごくないですか？ホバーがしっかり聞いている・・・

ホログラムの生成

光るホログラムのデザインも生成できます。「ビールアイコンのホログラム」を生成してみました。

以下の要件を満たす、高度なホログラム効果を持つビールアイコンを表現するReactコンポーネントを作成してください：

コンポーネント名:AdvancedHologramBeer

使用技術:
React（hooksを使用）
lucide-reactライブラリのBeerコンポーネント
CSS-in-JSスタイリング（style jsx）

主な機能:
3つのレイヤーを重ねて立体的なホログラム効果を作成
連続的な回転アニメーション
グロー効果とノイズエフェクト
ビールの泡の動きを表現する追加アニメーション

コンポーネントの構造:
黒い背景のフルスクリーン表示
中央に配置された80x80のコンテナ

状態管理:
useStateフックを使用してoffset値とbubbleOffset値を管理
useEffectフックで50ミリ秒ごとにoffsetを更新
別のuseEffectフックで200ミリ秒ごとにbubbleOffsetを更新（泡のアニメーション用）

レイヤーの処理:[0, 1, 2]の配列に対してmapを使用
各レイヤーに対して以下の効果を適用:

3D回転（Y軸とX軸）
スケーリング
不透明度の調整
色相の回転

アニメーション:
CSS @keyframes を使用したグロー効果
ノイズエフェクト用のSVGフィルター
ビールの泡の上昇を表現する追加アニメーション

スタイリングの詳細:
hologram-glowアニメーション：ドロップシャドウと明るさの変化
ノイズエフェクト：SVGフィルターを使用した背景画像
noiseアニメーション：10ステップの変形アニメーション
beer-bubblesアニメーション：泡の上昇を表現

パフォーマンス考慮:コンポーネントのアンマウント時にすべてのインターバルをクリア
アクセシビリティ:適切なaria属性の使用（必要に応じて）

これはすごい！

ClaudeのArtifacts機能と比べてどう？

Claudeでは同じような機能としてArtifacts機能があります。

速ｗClaude 3.5 Sonnetの使い方！料金は？無料で使える「Artifacts」についても徹底解説！

以下の動画を見てください。左がChatGPT-4o、右がClaue3.5 Sonnetです。 スピードやばくないですか？ｗ　しかもこれが無料です。 AI技術の進化は日々進んでおり、その中でも特に注目されているのがAnthropicが開発した...

ai-workstyle.com

2024.06.21

実際に同じプロンプトを入れてどんなクオリティか比較してみました。プロンプトは以下の通りです。

以下は携帯料金比較したものです。これをうまくhtmlとCSSを用いて表にしてください。

ahamo（ドコモ）

基本料金：月額2,970円
データ容量：20GB
オプション「ahamo大盛り」で100GBまで拡張可能
通話料：22円／30秒
5分以内の通話は無料
povo2.0（au）

基本料金：0円（※トッピング条件あり）
データ容量：トッピングにより選択可能
通話料：22円／30秒
かけ放題トッピングあり
LINEMO（ソフトバンク）

基本料金：月額990円～
データ容量：3GB
通話料：22円／30秒
かけ放題オプションあり
LINEギガフリー（LINE利用時のデータ消費は無料）

左がClaude、右がv0です。ん～ただの表作成だとそんなに変わらないですね。
それぞれを特徴をとらえてうまく使いこなす必要がありそうです。

先ほどのホログラムをClaudeにも入れてみました。左がClaude、右がv0です。

いやどっちもすごいけど、Claudeなかなか健闘してません？ｗ

v0を使う際に生じるよくある質問

v0使い方まとめ

v0は、Webデザインと開発の民主化を促進し、クリエイティブな専門家がより戦略的で創造的な業務に集中できるようサポートします。ただし、v0はあくまでもツールであり、人間の創造性や専門知識を完全に置き換えるものではありません。

v0を効果的に活用するためには、その可能性と限界を理解し、プロジェクトの要件に応じて適切に使用することが重要です。また、常に最新の機能や使用方法をフォローアップし、自身のスキルセットを更新していくことが求められます。

v0は、Webデザインと開発の未来を形作る重要なツールの一つとなるでしょう。この革新的なテクノロジーを賢く活用することで、より効率的で創造的なWeb開発の世界が広がっていくことが期待されます。

きょろ

趣味：業務効率化、RPA、AI、サウナ、音楽
職務経験：ECマーチャンダイザー、WEBマーケティング、リードナーチャリング支援
所有資格：Google AI Essentials,HubSpot Inbound Certification,HubSpot Marketing Software Certification,HubSpot Inbound Sales Certification
書籍掲載実績：Chrome拡張×ChatGPTで作業効率化/工学社出版
突如、社内にて資料100件を毎月作ることとなり、何とかサボれないかとテクノロジー初心者が業務効率化にハマる。AIのスキルがない初心者レベルでもできる業務効率化やAIツールを紹介。中の人はSEO歴５年、HubSpot歴１年