ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

トップ > AI > アプリやサイトのUIデザイン・コード生成AIサービス「v0」紹介

アプリやサイトのUIデザイン・コード生成AIサービス「v0」紹介

AI

こんにちは！今回は、アプリやWebサイトのUIデザインとコードを生成できるAIサービス「v0」をご紹介します。

v0はVercel社のアプリやWebサイト等のUIデザインとReactベースのコードを生成してくれるチャット形式の生成AIサービスです。

今回は、v0の概要や使い方、生成できるものをご紹介します。

1. v0概要

1.1. 概要

v0は、2023年10月にPublic Beta版として公開された、UIデザインとコードを生成・公開できるVercel社の生成AIサービスです。

vercel.com

v0では、チャット形式でプロンプトを送信し、デザインの生成と修正を行うことができます。チャットでは画像やmp3、wavファイルを添付することができます。生成されるコードはTailwind CSS、shadcn/uiコンポーネントを利用したReactで構築されます。生成したデザインをローカル環境等のNode.jsがインストールされている環境に追加するコマンドも生成されるので、開発中のプロジェクトへの導入も簡単です。

v0.dev

APIリクエストを実行することも可能です。ただし、v0上で稼働するアプリはサーバーサイドでAPIリクエストを実行することができず、APIキー等の資格情報をクライエントサイドのコードに含む方法でしか実行できません。この方法では資格情報が漏洩する可能性があるので、特に顧客情報など機密情報に関わる場合はご注意ください。v0でサーバーサイドで実行するコードを生成し、別のプラットフォームでデプロイするのがおすすめです。

v0.dev

※Vercel社について：Vercel社は、Webアプリの開発・デプロイができるフロントエンド開発者向けのクラウドプラットフォームVercelを提供する企業です。クラウドプラットフォームVercelではWebサイトやアプリのデプロイ、ホスティング等を行うことができます。APIや外部データベースとの統合も実装可能です。また、GitHubと連携することができ、連携するとGitHubリポジトリの変更を自動でVercelにデプロイしてくれるようになります。

1.2. 料金プラン

料金プランはFree、Premium、Enterpriseの3プランがありますが、Freeプランでも十分役立ちます。Freeプランでは1日のレート制限内であれば自由にメッセージ（プロンプト）を送信できデザインの生成と公開が可能で、毎月$200分のクレジットが配布されます。本記事ではFreeプランを使います。

v0.dev

また先日（2024年6月）、デザインに適用できるカラーテーマを生成・登録できるTheme機能が追加されました。この機能はいずれかの有料プランで利用することができます。

2. 新規登録

それでは、早速v0を使ってみます。

v0を利用するにはクラウドプラットフォームVercelの新規登録が必要です。下記のv0のトップページを開き、「Get started」>「Sign in」>「Sign up」をクリックして新規登録画面に移動します。

v0.dev

ログイン方法を選択します。

サインアップが完了するとv0のトップページが表示されます。この画面でプロンプトを入力してデザインを生成します。

3. 使い方

v0の機能や使い方を紹介していきます。

3.1. 生成

v0のトップ画面でチャットの入力欄に生成したいデザインの概要を入力します。今回は下記の内容を入力して「Send」をクリックしました。

  • プロンプト…個人の収入・支出管理アプリの画面を下記の通り作成してください。* ダッシュボード * 期間別支出・収入のグラフと一覧

「Send」をクリックすると、画面の左側にv0からのメッセージが表示されながら、画面の右側に生成中のコードが表示されていきます。コードが全て生成されたところでデザインのPreviewが表示されました。

この画面の機能を解説していきます。

No. 項目名 内容
1 メッセージ入力欄 追加の要件や修正がある場合はここに入力して送信すると、現在のデザインが修正されます。
2 ファイルパネル 生成結果の部分で表示する画面やページを選択します。修正を加えた場合、ここにバージョンも表示されます。
3 Share Chat このチャットの共有設定ポップアップを表示します。ポップアップでは、「Public with link (Anyone with the link can view this chat and its Blocks)」を選択してURLを知っている人全員がこの画面にアクセスできるように設定できます（チャット履歴は閲覧できますがメッセージの送信はできません）。デフォルトではこの画面を閲覧できるのは自分だけになっています。
4 表示切替 生成結果のコードを表示するかPreviewを表示するか選択します。
5 Add to Codebase クリックして表示されるポップアップで、生成したデザインをNode.jsインストール済みの環境に追加するコマンドを確認します。
6 Fork この生成結果の分岐点を作成します。作成した分岐点はチャット履歴の一覧で選択できるようになります。
7 Share チャット画面の共有と生成結果の公開設定を行います。「Share」ではチャット画面の共有、「Publish」ではデザインの共有を行うことができます。公開後、ここから非公開にすることができます。
8 チャット履歴 チャット履歴の一覧を表示します。一覧から過去のチャットにアクセスできます。

引き続き、実際に生成されたデザインを修正しながら使い方を確認していきます。

3.2. 修正

チャットの入力欄に修正したい内容を入力して送信します。まずは、レイアウトを修正します。

既存の収支管理アプリのダッシュボードのスクショを添付して下記のメッセージを送信します（今回はマネーフォワード Meのダッシュボードのスクショを添付しました）。

  • プロンプト…このデザインをまねて作成できる？

下記の通り画面が生成されました。生成結果表示部分の上部のデザインタイトル「収支管理アプリ」の隣にドロップダウンが表示され、「v1」と表示されています。ここをタップしてバージョンのドロップダウンを表示し、表示したいバージョンを選択します。

参考画像と同様画面構成が縦方向のカードリストになり、項目も「資産総額」や「今月の収支」、「今月の予算」になりました。

ただ、グラフ部分の円グラフがおかしな形になっています。次にここを正常な円グラフで表示できるように修正します。v0からのメッセージを見ると、「円グラフを実装するにはrechartsライブラリを使用する必要がある」とされています。

ということで、rechartsライブラリを使って円グラフを実装します。次のメッセージを送信します。

  • プロンプト…実際のグラフをrechartsライブラリを使って実装して

送信すると下記のような画面が生成されました。円グラフが表示されており、コードを確認してもrechartsライブラリがインポートされているのが確認できます。

次に、細かい修正を行います。「収支グラフ」を1週間単位ではなく1か月単位のグラフに変えられるか確認します。

  • プロンプト…ホームの収支グラフを1ヶ月ごとのグラフに変えて。

結果、週単位だったのを月単位に変えることができました。また、ついでにグラフが画面幅に合わせて調整できるようなデザインにも変えてくれました。

次に、アイコンを別のシリーズに変えられるか試してみます。次のプロンプトを送信しました。

  • プロンプト…ヘッダーのアイコンをFont Awesomeのものに変えて。

アイコンが差し替えられたのが確認できます。プロンプトではヘッダーのアイコンのみを指定しましたが、ナビゲーションのアイコンもFont Awesomeに統一されています。

また、実際のプロジェクトでこのコードを使用する際の注意点として、パッケージのダウンロードコード等をチャットで提示してくれています。

3.3. コードの確認

それでは、生成されたコードを確認してみます。コードは.tsx形式で生成されています。

v0ではバックエンドと連携することができないので、動的に値を設定すべきところが静的に設定されていることが分かります。この部分は、実際のプロジェクトにコードを適用する際に動的に値を表示できるように修正する必要があります。

また、v0はレスポンシブデザインを実装できると謳っています。実際に、コード全体にフレックスボックスレイアウトが使われており、Rechartsグラフ幅については画面幅に合わせてグラフ幅を調整するように実装されています（BarChartには実装されているがPieChartには実装されていない）。ただし、画面幅に合わせてカラム数を変える等の細かいレスポンシブデザインは実装されていませんでした。

実際にレスポンシブデザインが正しく適用されているかは次のセクションで確認します。

3.4. デザインの公開

それでは、生成したデザインを公開します。チャット画面右上の「Share」>「Publish」をクリックして、表示されたポップアップの「Confirm and Publish」をクリックします。ポップアップ下部に表示される「Visit site」をクリックすると、このデザインのPreviewが確認できます。

この画面の右下の「Fork」をクリックして分岐を作成すると、チャットを開始してカスタマイズすることができます。PublishするとこのURLを知っている全員がPreviewを確認できます。

次に、謳っている通りレスポンシブデザインが実装できているか確認します。下記のように画面幅に合わせて変化しました。レスポンシブデザインを実装できていますね。

ただし、特に下記の部分はカラム数の調整が必要そうです。

4. 生成できる範囲の確認

次に、v0ではどの程度のデザインを生成できるのかを確認していきます。

4.1. LP

まずは、詳細な指示なしでどの程度使えるLPが生成できるか検証してみます。下記のプロンプトでダイエットアプリのLPを生成してみました。

  • プロンプト…ダイエットアプリのLPを作成してください。

実際に生成された画面は下記です。LPとして要素が不足していることから、LPのフォーマットは詳細に作り込まれているわけではなさそうです。

次のプロンプトで表示項目を明らかにして修正してみたところ、プロンプト通りの項目とプロンプトから推測できる内容が追加されました。

  • プロンプト…LPには次の項目を含めてください。 * アプリのキャッチコピー * アプリの画像 * アプリが解決する課題 * アプリの特徴6つ * アプリの主要機能と説明 * アプリの料金表 * アプリの利用者の声

プロンプトで指示した要素は、「アプリの画像」以外は全て含まれていますね。チャットでも記載されているようにv0.dev/chatでは画像生成はできないため、画像部分は実際の画像に置き替えられるようになっていました。

記載内容や構成を詳しく指示すれば、理想通りのLPも生成できそうですが、詳しい指示がないとかなり簡素なデザインになることが分かりました。

4.2. フロントエンドの処理

次に、フロントエンドの処理を実装できるかを確認します。

まずは簡単な電卓アプリを生成して計算処理ができるか検証します。次のプロンプトで、計算履歴を表示できる電卓アプリを生成してみました。

  • プロンプト…電卓アプリを作成して。このアプリでは計算の履歴が確認できるようにしてください。

計算が正しくでき、履歴も正しく表示されています。計算の処理は実装できることが分かりました。

次に、お問い合わせフォームを生成してバリデーションが実装できるか検証します。

  • プロンプト…お問い合わせフォームを作成してください。このフォームでは、空欄の入力欄があるときや、メールアドレスが不適切な形式のとき送信を実行できません。

空欄と不適切な形式のメールアドレスのバリデーションを確認すると、それぞれエラーメッセージが表示されました。プロンプト通りにバリデーションが実装されています。

フロントエンドで完結する処理は実装可能だと分かりました。

4.3. API・データベースとの連携

では、APIや外部データベースと連携ができるのか確認していきます。まず、郵便番号検索API（Zipcloud）を使って住所を教えてくれるアプリを生成します。

zipcloud.ibsnet.co.jp

  • プロンプト…入力された郵便番号から住所を教えてくれるアプリ

郵便番号で検索してみると、住所が正しく表示されました。ただし、チャットにもある通りクライエントサイドでAPIリクエストを実行しています。

次に、Supabaseと連携してデータの閲覧ができるアプリを生成してみます。

  • プロンプト…SupabaseのAPIを使って、"event"テーブルからイベントデータを取得し、リスト形式とカレンダー上で表示するアプリを作成してください。表示するフィールドは、created_at（作成日時）、title（タイトル）、date（イベント日付）、およびnote（メモ）です。データは、dateに基づいて昇順に並べ替えて表示してください。 SupabaseのAPIキーとURLは次の通りです: SUPABASEKEY SUPABASEURL

Supabaseのeventテーブルにある2つのデータがリストに表示されています。Supabaseと連携できましたね。

ただし、クライエントサイドでAPIリクエストを実行していることが分かります。

APIリクエストはクライエントサイドで実行されるため、アプリの内容によってはv0でそのまま公開するのを避けるべき場合もあります。その場合は、サーバーサイドでAPIリクエストを実行するコードを生成し、Add to Codebaseのコマンドを使いGitHubにファイルを格納してVercelでデプロイする方法がおすすめです。

5. まとめ

今回は、Vercelが提供するアプリやWebサイトのUIデザイン・コード生成サービスv0の概要と使い方をご紹介しました。チャットでやり取りしながらデザインを調整できるのがv0の特徴です。

バックエンドとの連携ができないのでそのままアプリとして使うことはできませんが、ローカルストレージは利用できるのでプロトタイプの幅は広がりますね。フロントエンドに時間をかけられない開発者はぜひご活用ください。

6. 9月末に追加された新機能

本記事の作成後、9月末に追加された新機能をご紹介します。

  • チャットやProject Source（Premiumプランユーザーのみ）でPDFを添付できるようになりました。
  • チャットでSupabase、Drizzle、Prismaに関する質問をすると、参考Webページのリンクを付けて回答できるようになりました。
  • 言語で日本語を選択できるようになりました。

日本語を選択できるようなったのはポイントが高いですね！今後も各機能での日本語対応を進めるとのことなので、日本のユーザーも増えそうです。

7. Vercel Meetup in Japan

2024年10月2日に、VercelのCEOであるGuillermo Rauch (ギシェルモ・ラウチ) が登壇するVercel Meetup（AI and v0 special with CEO）が開催されました。v0に関する話を簡単にご紹介します。

  • 非エンジニアでもクオリティの高いリッチなLPやロゴなどビジュアルが重要なもののデザインを生成できる。
  • デザインとコードを公開するPublish機能はv0でプロトを制作して実装した。