プレゼン資料が一発で出せると話題 AIツール「v0」の使い方
WebサイトやアプリケーションのUIコンポーネントの設計と開発を支援することを目的としたAIツール「v0」を試してみる。 【もっと写真を見る】 v0とは
v0（ブイゼロ）は、「Next.js」フレームワークの開発元としても有名なクラウドプラットフォーム企業Vercelが開発した、主にWebサイトやアプリケーションのUI（ユーザーインターフェース）コンポーネントの設計と開発を支援することを目的としたAIツールだ。 テキストプロンプトを入力するだけで、Webサイト用のUIコンポーネント（主にReactベース）やLP（ランディングページ）のコーディングができるのが本来の用途だが、最近はプレゼンテーション資料やその他のデザイン素材の作成にも利用できるということで注目を浴びている。 さっそく実際に使ってみることにしよう。 アカウント作成と料金プラン： v0を利用するには、まずVercelのアカウントを作成し、v0のFreeプランに登録する必要がある。 まずはv0の公式サイトにアクセス。 右上の「Sign Up」ボタンをクリック。 Vercelのアカウント作成ページが表示される。まずは私的利用（Hobby）か営利利用（Pro）かを選択し、名前を入力して「Continue」をクリック。 アカウントは、GitHub、GitLab、Bitbucket、メールアドレスのいずれかで登録できる。ここではGItHubアカウントを選択する。 GitHubのログイン画面が表示されるので、ユーザーネーム（またはメールアドレス）とパスワードを入力して「Sing in」をクリック。 VercelがGitHubアカウントにアクセスするための権限を求める画面が開くので、「Authorize Vercel」をクリック。 機能説明デモが表示されるので、「Next」をクリック。 利用規約をよく読んで「Accept and Continue」をクリック。 これでアカウントの作成は完了。利用可能な状態になった。 なお、v0の料金プランは無料プランの他に月額20米ドル（およそ2870円）のPremiumプランおよび法人向けのEnterpriseプラン（価格は要問い合わせ）の3種類が用意されている。 Webコンポーネント作成の使用例 まずは簡単なWebコンポーネント（ウェブアプリケーションやウェブサイトの再利用可能な部品）を作成してみよう。アカウントを作成しログインした状態でプロンプトを入力し「↑」ボタンをクリック。 プロンプト：簡単なアンケートフォームを作って 「React と shadcn/ui コンポーネントを使用して、基本的なアンケートフォームを作成します」というメッセージとともに画面が二分割され、右側でコーディングが始まった。 しばらくするとアンケートフォームが完成した。 作成したコンポーネントを利用する際の説明が記載されている。 追加で自然言語プロンプトを入力することで細かい改良やブラッシュアップ作業も簡単だ。 プロンプト：年齢は必要ありません 性別をプルダウンで入力するようにして すぐに項目の差し替えができた。 成果物の左上には「v2」とバージョン名が表示されている。 クリックしてプルダウンを選択することで、いつでも任意のバージョンに戻ることが可能になっている。 「Fork」ボタンをクリックすると連携させたGitHubの任意のレポジトリーに作成したコンポーネントをフォーク（複製）できる。 さらに、「Share」ボタンをクリックし「Public with link」にチェックを入れることで、作成したコンポーネントを他の人にプレビューしてもらうことができる。 また、「Publish」から「Confirm and Publish」をクリックすることで新たなURLを作成してコンポーネントを公開することも可能だ。 作成したWebコンポーネントを公開するには 作成したWebコンポーネントを公開するにはいくつかの方法がある。いちばん簡単なのは先述した「Publish」機能を使うことだが、今回作成したVercelのアカウントがあれば、クラウドサービス「Vercel.com」でウェブサイトとしてデプロイすることも可能だ。 また、他の開発者が簡単に再利用できる「npmパッケージとしての公開」や「GitHubリポジトリでの共有」、「自己ホスティング」といった方法もある。 Webページのワイヤーフレームやモックアップを作成する WebページのデザインやUI/UXを設計する際に必要になる、ワイヤーフレームやモックアップを作成するのもv0の得意分野だ。 特にお手本となるページのスクリーンショットを参考資料としてアップロードし、以下のようなプロンプトを与えれば、 プロンプト：サンプルを元にトップページのモックアップを作成して 一瞬でお手本の構造をコピーしたモックアップが完成する。 これをベースに下記のようなプロンプトでやり取りすることによって好みのデザインまで持っていくことができる。このようにv0では一発で完成物を出すというよりは、バージョンを重ねてブラッシュアップしていく作り方が推奨されているようだ。 プロンプト：白バックのスタイリッシュなデザインにブラッシュアップして これも「Share」や「Publish」可能なので、デザイナーと開発者などのコミュニケーションも便利になる。 本来の用途と新たな用途 見てきたように、v0本来の用途はWeb開発支援であり、Web開発者やデザイナーが、UIコンポーネントやWebページのプロトタイプを素早く作成するためのツールだ。主要な機能は以下のようになっている。 テキストプロンプトに基づいたReactコンポーネントの生成 shadcn/uiとTailwind CSSをベースにした、すぐに使えるUIコードの提供 複数のUIデザイン案の生成と、それらの細かな調整機能 生成されたコードのコピー＆ペーストによる簡単な統合 CLIを通じた自動依存関係インストールとコード追加機能 特に、Vercelが開発したNext.jsアプリケーションとの親和性が高く、生成されたコードを既存のプロジェクトに簡単に統合できるよう設計されている。 ただし、作成したコンポーネントを実際に利用（Webサイトにデプロイ）するためには、ある程度Next.jsやReactの知識が必要となる。 つまり、v0は優れたコンポーネント生成ツールではあるが、Webサイト全体を作成して実装していくためにはまだまだ開発者の知見が必要であるという点に注意が必要だ。 とはいえ、v0はWebコンポーネンツやプロトタイプ以外のデザインも可能なため、近頃はプレゼンテーション資料やランディングページの作成ツールとしても紹介されることが多くなった。 プレゼンテーション資料を作成する では実際にプレゼンテーション資料を作成してみよう。v0はLLM（大規模言語モデル）を利用しているため、知識内のことなら自力でプレゼンテーション資料を作成することが可能だ。もちろん作成したい資料の内容は読み込ませても自作しても構わない。 ここではLLMも知識として持っているであろう日本の司法機関についての資料を作らせてみることにした。 プロンプト：日本の司法機関について説明するわかりやすいプレゼン資料（インフォグラフィックス）を日本語で3ページくらいで作って すぐに作成をスタート、3枚の資料が作成された。 3枚の資料がバラバラに作成されているので、ボタンクリックでページを切り替えられるように改造してもらう。 プロンプト：3ページをクリックで切り替えるプレゼン資料にして これでOK、後はこれをPublishすることで十分プレゼン用資料として利用可能だ。 なお、以下のプロンプトを使えばもちろん一発で作成できた。 プロンプト：日本の司法機関について説明する、ボタンを押すとページが切り替わる形のわかりやすいプレゼン資料（インフォグラフィックス）を日本語で3ページくらいで作って。 決算報告書を可視化する 上記の応用として、読みにくい資料を可視化することにも利用できる。たとえばマイクロソフトの2024年度第3四半期（FY24 Q3）の決算報告に関するページを読み込む必要があったとする。 そんなときはウェブページのURLをコピーし、下記プロンプトでv0にお願いしてみよう。 プロンプト：下記のデータを、Reactを用いて視覚的にわかりやすい資料にしてください。 https://www.microsoft.com/en-us/investor/earnings/fy-2024-q3/press-release-webcast カーソルをグラフ上に持っていくと説明が表示されるインタラクティブな図版を作成してくれた。URLではなくPDFファイルなどでも同様のことが可能だ。 YouTubeのサムネ画像を作成する 実は筆者の住むタイのチェンマイでは先週末に川の水があふれ大規模な床上浸水被害が起こった（現在は復旧）のだが、その写真を元にYouTubeのサムネ画像が作れないかどうか試してみた。 お手本写真をアップロードし、下記プロンプトで作成。 プロンプト：この写真はタイのチェンマイで起こった洪水被害の様子です これを使ってYouTubeのサムネール画像を作成したいです 日本語のタイトルやキャッチコピーも考えてください ついクリックしたくなる魅力的なデザインにして 作成されたのがこの画像。悪くはないが少し地味だな。 そこでこの画像をお手本にもっと派手にできないかお願いしてみた。 プロンプト：フォントやレイアウトはこれを参考にしてもっと派手にして 「2024年10月5日」と日付も入れよう 作成されたのがこの画像。うーん、だいぶよくなったけどもう一踏ん張りお願いしたい。 Xから得た情報で、グーグルが提供するウェブフォントライブラリー「Google Fonts」が使えることがわかったので、明示的にお願いしてみた。 プロンプト：Google Fontsを使ってもっともっと派手にできないかな？ するとGoogle Fontsから「Rampart One」「Zen Maru Gothic」という2つのフォントを使用してくれた。なんと「緊急速報」の部分は明滅するようになっている。 最後は写真をもう少し明るくしてもらって完成だ。 プロンプト：写真が暗すぎて見えにくいのでもうすこし写真を見やすくしてほしい もちろんPhotoshopを駆使して作成されたものと比較すると見劣りはするが、素人が使うぶんならこれで十分だ。 また、元になる画像やキャラクターを「Midjourney」や「Flux.1」といった画像生成AIで作成するなど他のAIサービスと組み合わせて利用するのもいいだろう。 ClaudeのArtifactsと似ているが、よりWeb開発寄り 最後に他サービス、特に「Claude」の「Artifacts」との類似について考えていきたい。 Artifactsについては当連載の「チャットAI「Claude」すごい新機能「Artifacts」の使い方、全部教えます」という記事で詳細しているので参考にしてほしい。 v0とArtifactsは、基本的な資料作成や可視化タスクではほぼ類似と言ってもいい機能を提供するが、根本的な設計思想に大きな違いがある。 v0は指示がない限りReactコンポーネントを生成し、Web開発とUIデザインに特化しているため、実際のプロダクト開発への直接的な統合が容易になっている。特にNext.jsプロジェクトとの高い互換性を持ち、生成されたコンポーネントを実際のWebサイトやアプリケーションにシームレスに組み込むことができるのが大きな特徴だ。 一方、Claude Artifactsはより汎用的なAI支援ツールとして、幅広い分野での文書作成や概念説明を支援することを目的としているので、Reactコンポーネント以外にもプレーンテキスト、Markdown、HTML、プログラムコードなど様々な出力形式をサポートしている。 この違いは、特にWeb開発プロジェクトや特定の開発環境で使用している場合に顕著になり、v0がより実践的な開発ワークフローに適している点が大きな利点となる。 逆に言えばプレゼン資料作成といった低次の作業だけに使うのであれば好みの方を使って構わないということになる。 両者の特徴を理解し、状況に応じて使い分けることで、より効率的で創造的な作業が可能になるだろう。 田口和裕（たぐちかずひろ） 1969年生まれ。ウェブサイト制作会社から2003年に独立。雑誌、書籍、ウェブサイト等を中心に、ソーシャルメディア、クラウドサービス、スマートフォンなどのコンシューマー向け記事や、企業向けアプリケーションの導入事例といったエンタープライズ系記事など、IT全般を対象に幅広く執筆。2019年にはタイのチェンマイに本格移住。 新刊：発売中「生成AI推し技大全 ChatGPT＋主要AI 活用アイデア100選」、： 文● 田口和裕
