この記事はAteam Finergy Advent Calendar 2024の19日目の記事です。

v0ってなに？

v0は、Next.jsの開発やそのホスティングプラットフォーム運用で有名なVercel社が提供する、AIがWebデザインを自動生成してくれるサービスです。

日本語を含む自然言語での指示や画像をもとに、ReactやNext.js、Tailwind CSSといったモダンな技術を使ったコードを生成してくれます。

たとえば、こんなシーンで役立ちます：

自分好みのボタンやフォームなど、よく使うUI部品を作りたい
サイトのデザインを美しく、レスポンシブ対応に仕上げたい
調査したデータを元に、綺麗なランキングやグラフを作りたい

v0にデザインしてもらうには

（画像無しで）プロンプトで指示する
画像を添付して同じようなものを作ってもらう

プロンプトで具体的に指示するのが難しい

「1.（画像無しで）プロンプトで指示する」に関して、ノンデザイナーがv0にプロンプトで具体的に指示するのはけっこう難しそうだなと感じました。v0はshadcn/uiの各種コンポーネントを生成してくれます。ただ実際のWebアプリは、これらのコンポーネントを組み合わせてUIが表現されています。例えば、

データ可視化のためのダッシュボード
- 組み合わせたコンポーネント: Card, Tabs, Select, Chart (Bar and Line)
- ユーザーが異なるメトリクスと図表タイプを選択できる対話的なダッシュボードで、データの視覚化方法をカスタマイズでき、情報をより理解しやすく表示する

上記のようなダッシュボードを作りたい時に、プロンプトで指示するとして、

データ可視化のための対話的なダッシュボードUIを作成してください。

以下のshadcn/uiコンポーネントを使用してください：
Card, Tabs, Select, Chart（BarChartとLineChart）

このUIは以下の機能を持つべきです：
- ユーザーがデータの種類（例：売上、ユーザー数）を選択できる
- 選択したデータをバーチャートまたは折れ線グラフで表示できる
- グラフの種類をタブで切り替えられる

レイアウトは、上部に選択肢、中央にグラフ、下部に更新日時を表示するようにしてください。

以下のようなデータ構造を使用してください：
{
  sales: [{ month: string, value: number }, ...],
  users: [{ month: string, value: number }, ...]
}

ユーザーがデータの種類や図表の種類を変更した時、即座にグラフが更新されるようにしてください。

これが上手くv0に伝わればよいですが、v0プロンプト力が無いとなかなか思ったようなUIになってくれません。デザイナーがプロトタイピングするにあたり構造設計やインタラクション、ビジュアル設計を行いますが、それを上手く言語化することが、v0プロンプト力のポイントだと思っています。

作りたいデザインの画像を投げつける

流石にノンデザイナーがそういった設計をプロンプトとして言語化するのは難しいので「2.画像を添付して同じようなものを作ってもらう」は、有用だと思います。UI Pocketのようなサイトで、自分が作りたいWebアプリのデザインやレイアウトを探し、そのスクショをv0に添付して作ってもらうと良いです。

例として、さきほど作ったアプリのスクリーンショットを添付して依頼してみます。

ファイル構成が若干違うが...

プロンプトで指示した場合

画像から依頼した場合

利用コンポーネントはCard、Tabs、Select、Chart、Rechartsと同じだった。簡易であれば画像からほぼ同一のデザインで生成してくれるので、どういったプロンプトで指示すればよいか分からないなら画像から作ってもらう方が楽。

v0のデザインを実サイトとして運用するなら考えないといけない点がいくつか

画像の用意
- 画像からサイトは生成できるが、画像自体は生成できないので準備する必要がある
実際のデータ
- ダミーデータやサンプルデータを生成してくれるが、実際の製品情報やユーザー情報、コンテンツなどは使用者で用意する必要がある
APIエンドポイントの実装
- APIエンドポイントの構造やレスポンスの形式を提案してくれるが、実際のバックエンド実装やデータベース接続は使用者で用意する必要がある
認証・認可システム
- 認証・認可のフロントエンド部分の実装例を提案してくれるが、実際のユーザー管理システムやセキュリティ設定は使用者で用意する必要がある
パフォーマンス最適化
- v0は基本的なパフォーマンス最適化の提案や実装を行なってくれるが、実際のサーバー設定、CDNの利用、大規模なデータセットの効率的な処理などは使用者で対応する必要がある
SEO対策
- v0は基本的なSEO対策（メタタグの設定など）を実装してくれるが、具体的なキーワード戦略やコンテンツ最適化は使用者で対応する必要がある
継続的なメンテナンスとアップデート
- v0は初期の実装を行なってくれるが、長期的なメンテナンス、バグ修正、新機能の追加は使用者で対応する必要がある

まとめ

v0は、デザイン作業を効率化し、プロトタイピングを加速する強力なツールです。特に、ノンデザイナーや迅速なプロトタイプ作成が求められる場合に効果を発揮します。一方で、コードの最適化や運用準備には注意が必要かなという一定の難しさを感じました。