関連のツールの紹介、使い方などをやさしく説明しています。Tumblrこんにちは!今回は、アプリやWebサイトのUIデザインとコードを生成できるAIサービス「v0」をご紹介します。v0はVercel社のアプリやWebサイト等のUIデザインとReactベースのコードを生成してくれるチャット形式の生成AIサービスです。今回は、v0の概要や使い方、生成できるものをご紹介します。Beta版として公開された、UIデザインとコードを生成・公開できるVercel社の生成AIサービスです。vercel.comv0では、チャット形式でプロンプトを送信し、デザインの生成と修正を行うことができます。チャットでは画像やmp3、wavファイルを添付することができます。CSS、shadcn/uiコンポーネントを利用したReactで構築されます。生成したデザインをローカル環境等のNode.jsがインストールされている環境に追加するコマンドも生成されるので、開発中のプロジェクトへの導入も簡単です。2024年8月20日v0.devAPIリクエストを実行することも可能です。v0上で稼働するアプリはサーバーサイドでAPIリクエストを実行することができず、APIキー等の資格情報をクライエントサイドのコードに含む方法でしか実行できません。この方法では資格情報が漏洩する可能性があるので、特に顧客情報など機密情報に関わる場合はご注意ください。v0でサーバーサイドで実行するコードを生成し、別のプラットフォームでデプロイするのがおすすめです。v0.dev※Vercel社について:Vercel社は、Webアプリの開発・デプロイができるフロントエンド開発者向けのクラウドプラットフォームVercelを提供する企業です。クラウドプラットフォームVercelではWebサイトやアプリのデプロイ、ホスティング等を行うことができます。APIや外部データベースとの統合も実装可能です。GitHubと連携することができ、連携するとGitHubリポジトリの変更を自動でVercelにデプロイしてくれるようになります。料金プラン料金プランはFree、Premium、Enterpriseの3プランがありますが、Freeプランでも十分役立ちます。Freeプランでは1日のレート制限内であれば自由にメッセージ(プロンプト)を送信できデザインの生成と公開が可能で、毎月$200分のクレジットが配布されます。本記事ではFreeプランを使います。v0.devまた先日(2024年6月)、デザインに適用できるカラーテーマを生成・登録できるTheme機能が追加されました。この機能はいずれかの有料プランで利用することができます。新規登録それでは、早速v0を使ってみます。v0を利用するにはクラウドプラットフォームVercelの新規登録が必要です。up」をクリックして新規登録画面に移動します。v0.devログイン方法を選択します。サインアップが完了するとv0のトップページが表示されます。この画面でプロンプトを入力してデザインを生成します。使い方v0の機能や使い方を紹介していきます。生成v0のトップ画面でチャットの入力欄に生成したいデザインの概要を入力します。今回は下記の内容を入力して「Send」をクリックしました。プロンプト...個人の収入・支出管理アプリの画面を下記の通り作成してください。「Send」をクリックすると、画面の左側にv0からのメッセージが表示されながら、画面の右側に生成中のコードが表示されていきます。コードが全て生成されたところでデザインのPreviewが表示されました。この画面の機能を解説していきます。追加の要件や修正がある場合はここに入力して送信すると、現在のデザインが修正されます。生成結果の部分で表示する画面やページを選択します。修正を加えた場合、ここにバージョンも表示されます。このチャットの共有設定ポップアップを表示します。Blocks)」を選択してURLを知っている人全員がこの画面にアクセスできるように設定できます(チャット履歴は閲覧できますがメッセージの送信はできません)。デフォルトではこの画面を閲覧できるのは自分だけになっています。生成結果のコードを表示するかPreviewを表示するか選択します。クリックして表示されるポップアップで、生成したデザインをNode.jsインストール済みの環境に追加するコマンドを確認します。この生成結果の分岐点を作成します。作成した分岐点はチャット履歴の一覧で選択できるようになります。チャット画面の共有と生成結果の公開設定を行います。「Share」ではチャット画面の共有、「Publish」ではデザインの共有を行うことができます。公開後、ここから非公開にすることができます。チャット履歴の一覧を表示します。一覧から過去のチャットにアクセスできます。引き続き、実際に生成されたデザインを修正しながら使い方を確認していきます。修正チャットの入力欄に修正したい内容を入力して送信します。レイアウトを修正します。Meのダッシュボードのスクショを添付しました)。上部のデザインタイトル「収支管理アプリ」の隣にドロップダウンが表示され、「v1」と表示されています。ここをタップしてバージョンのドロップダウンを表示し、表示したいバージョンを選択します。参考画像と同様画面構成が縦方向のカードリストになり、項目も「資産総額」や「今月の収支」、「今月の予算」になりました。グラフ部分の円グラフがおかしな形になっています。次にここを正常な円グラフで表示できるように修正します。v0からのメッセージを見ると、「円グラフを実装するにはrechartsライブラリを使用する必要がある」とされています。いうことで、rechartsライブラリを使って円グラフを実装します。次のメッセージを送信します。プロンプト...実際のグラフをrechartsライブラリを使って実装して送信すると下記のような画面が生成されました。円グラフが表示されており、コードを確認してもrechartsライブラリがインポートされているのが確認できます。次に、細かい修正を行います。「収支グラフ」を1週間単位ではなく1か月単位のグラフに変えられるか確認します。プロンプト...ホームの収支グラフを1ヶ月ごとのグラフに変えて。結果、週単位だったのを月単位に変えることができました。ついでにグラフが画面幅に合わせて調整できるようなデザインにも変えてくれました。次に、アイコンを別のシリーズに変えられるか試してみます。次のプロンプトを送信しました。Awesomeのものに変えて。アイコンが差し替えられたのが確認できます。Awesomeに統一されています。実際のプロジェクトでこのコードを使用する際の注意点として、パッケージのダウンロードコード等をチャットで提示してくれています。コードの確認それでは、生成されたコードを確認してみます。コードは.tsx形式で生成されています。v0ではバックエンドと連携することができないので、動的に値を設定すべきところが静的に設定されていることが分かります。この部分は、実際のプロジェクトにコードを適用する際に動的に値を表示できるように修正する必要があります。v0はレスポンシブデザインを実装できると謳っています。実際に、コード全体にフレックスボックスレイアウトが使われており、Rechartsグラフ幅については画面幅に合わせてグラフ幅を調整するように実装されています(BarChartには実装されているがPieChartには実装されていない)。画面幅に合わせてカラム数を変える等の細かいレスポンシブデザインは実装されていませんでした。実際にレスポンシブデザインが正しく適用されているかは次のセクションで確認します。デザインの公開それでは、生成したデザインを公開します。Publish」をクリックします。site」をクリックすると、このデザインのPreviewが確認できます。この画面の右下の「Fork」をクリックして分岐を作成すると、チャットを開始してカスタマイズすることができます。PublishするとこのURLを知っている全員がPreviewを確認できます。次に、謳っている通りレスポンシブデザインが実装できているか確認します。下記のように画面幅に合わせて変化しました。レスポンシブデザインを実装できていますね。下記の部分はカラム数の調整が必要そうです。次に、v0ではどの程度のデザインを生成できるのかを確認していきます。LPまずは、詳細な指示なしでどの程度使えるLPが生成できるか検証してみます。下記のプロンプトでダイエットアプリのLPを生成してみました。プロンプト...ダイエットアプリのLPを作成してください。実際に生成された画面は下記です。LPとして要素が不足していることから、LPのフォーマットは詳細に作り込まれているわけではなさそうです。次のプロンプトで表示項目を明らかにして修正してみたところ、プロンプト通りの項目とプロンプトから推測できる内容が追加されました。プロンプト...LPには次の項目を含めてください。アプリの利用者の声プロンプトで指示した要素は、「アプリの画像」以外は全て含まれていますね。チャットでも記載されているようにv0.dev/chatでは画像生成はできないため、画像部分は実際の画像に置き替えられるようになっていました。記載内容や構成を詳しく指示すれば、理想通りのLPも生成できそうですが、詳しい指示がないとかなり簡素なデザインになることが分かりました。次に、フロントエンドの処理を実装できるかを確認します。簡単な電卓アプリを生成して計算処理ができるか検証します。次のプロンプトで、計算履歴を表示できる電卓アプリを生成してみました。プロンプト...電卓アプリを作成して。このアプリでは計算の履歴が確認できるようにしてください。計算が正しくでき、履歴も正しく表示されています。計算の処理は実装できることが分かりました。次に、お問い合わせフォームを生成してバリデーションが実装できるか検証します。プロンプト...お問い合わせフォームを作成してください。このフォームでは、空欄の入力欄があるときや、メールアドレスが不適切な形式のとき送信を実行できません。空欄と不適切な形式のメールアドレスのバリデーションを確認すると、それぞれエラーメッセージが表示されました。プロンプト通りにバリデーションが実装されています。フロントエンドで完結する処理は実装可能だと分かりました。API・データベースとの連携では、APIや外部データベースと連携ができるのか確認していきます。郵便番号検索API(Zipcloud)を使って住所を教えてくれるアプリを生成します。zipcloud.ibsnet.co.jpプロンプト...入力された郵便番号から住所を教えてくれるアプリ郵便番号で検索してみると、住所が正しく表示されました。チャットにもある通りクライエントサイドでAPIリクエストを実行しています。次に、Supabaseと連携してデータの閲覧ができるアプリを生成してみます。プロンプト...SupabaseのAPIを使って、"event"テーブルからイベントデータを取得し、リスト形式とカレンダー上で表示するアプリを作成してください。表示するフィールドは、created_at(作成日時)、title(タイトル)、date(イベント日付)、およびnote(メモ)です。データは、dateに基づいて昇順に並べ替えて表示してください。SUPABASEURLSupabaseのeventテーブルにある2つのデータがリストに表示されています。Supabaseと連携できましたね。クライエントサイドでAPIリクエストを実行していることが分かります。APIリクエストはクライエントサイドで実行されるため、アプリの内容によってはv0でそのまま公開するのを避けるべき場合もあります。Codebaseのコマンドを使いGitHubにファイルを格納してVercelでデプロイする方法がおすすめです。まとめ今回は、Vercelが提供するアプリやWebサイトのUIデザイン・コード生成サービスv0の概要と使い方をご紹介しました。チャットでやり取りしながらデザインを調整できるのがv0の特徴です。バックエンドとの連携ができないのでそのままアプリとして使うことはできませんが、ローカルストレージは利用できるのでプロトタイプの幅は広がりますね。フロントエンドに時間をかけられない開発者はぜひご活用ください。本記事の作成後、9月末に追加された新機能をご紹介します。Source(Premiumプランユーザーのみ)でPDFを添付できるようになりました。チャットでSupabase、Drizzle、Prismaに関する質問をすると、参考Webページのリンクを付けて回答できるようになりました。言語で日本語を選択できるようになりました。日本語を選択できるようなったのはポイントが高いですね!今後も各機能での日本語対応を進めるとのことなので、日本のユーザーも増えそうです。本日から早期プレビュー版としてv0を日本語でご利用できるようになりました。今後も順次、各機能を日本語化する予定です。CEO)が開催されました。v0に関する話を簡単にご紹介します。非エンジニアでもクオリティの高いリッチなLPやロゴなどビジュアルが重要なもののデザインを生成できる。デザインとコードを公開するPublish機能はv0でプロトを制作して実装した。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。