デザインとコーディングを変えるAIツール v0.dev
仲川 舞
UI/UXデザインをサポートしてくれるAIツール、v0.devをご紹介します。
v0.devについて
v0.devはNext.jsを開発しているVercel社によって開発された、AIを使ってUI/UXデザインやコーディングをサポートするツールです。まるで、デザイナーと対話しているかのように、プロンプトに作りたいものを入力するだけでデザインを作成し、コードとして出力できます。また、Webデザインだけでなく、スライドのデザイン作成なども可能です。
なお、利用にはVercelのアカウントを作成する必要があります。GutHubのアカウントで作成しておくと、便利です。
v0.devは、React、Next.js、TypeScript、Tailwind CSSなどの技術を使用して、コードが生成されます。
特徴と機能
- プロンプトでデザイン生成
テキストで必要な内容を入力すると、AIがすぐにデザイン案を作成
例: “ショッピングカートページ”や”シンプルなログイン画面”と入力するだけでOK - コードのエクスポート
作成したデザインをHTML、CSS、Reactなどのコードとして出力可能 - デザインの修正が簡単
フィードバックや追加のプロンプトをもとに、デザインを修正可能 - チームでの利用に対応
Google WorkspaceやSlackと連携し、チームで同時に作業可能 - デプロイ機能
ボタンひとつでVercelにデプロイ、公開する機能
実際の使用例
プロンプトに以下のような文章を入れて、UIデザインを作成してもらいました。数分で以下のような検索、フィルター機能がついたUIが生成されました。
検索・フィルター機能のついたカードレイアウト
コードは下記のようなものが生成されました。
'use client'
import { useState } from 'react'
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { ArrowUpDown, Search } from 'lucide-react'
const mediaItems = [
{ id: 1, title: '春の桜', category: '自然', date: '2023-04-01' },
{ id: 2, title: '東京タワー', category: '建築', date: '2023-05-15' },
{ id: 3, title: '富士山', category: '自然', date: '2023-06-30' },
{ id: 4, title: '新幹線', category: '交通', date: '2023-07-10' },
{ id: 5, title: '秋の紅葉', category: '自然', date: '2023-10-20' },
{ id: 6, title: '京都の寺院', category: '建築', date: '2023-11-05' },
]
export default function MediaSiteLayout() {
const [searchTerm, setSearchTerm] = useState('')
const [selectedCategory, setSelectedCategory] = useState('all')
const [sortOrder, setSortOrder] = useState('newest')
const filteredItems = mediaItems
.filter(item =>
item.title.toLowerCase().includes(searchTerm.toLowerCase()) &&
(selectedCategory === 'all' || item.category === selectedCategory)
)
.sort((a, b) => {
if (sortOrder === 'newest') {
return new Date(b.date).getTime() - new Date(a.date).getTime()
} else {
return new Date(a.date).getTime() - new Date(b.date).getTime()
}
})
return (
<div className="container mx-auto p-4">
<div className="mb-8 space-y-4 bg-gray-50 p-6 rounded-lg border border-gray-200">
<div className="flex flex-col sm:flex-row gap-4">
<div className="flex-grow">
<Label htmlFor="search" className="text-sm font-medium text-gray-700">検索</Label>
<div className="relative mt-1">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
<Input
id="search"
placeholder="タイトルで検索..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-8 bg-white"
/>
</div>
</div>
<div className="w-full sm:w-48">
<Label htmlFor="category" className="text-sm font-medium text-gray-700">カテゴリー</Label>
<Select value={selectedCategory} onValueChange={setSelectedCategory}>
<SelectTrigger id="category" className="mt-1 bg-white">
<SelectValue placeholder="カテゴリーを選択" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">すべて</SelectItem>
<SelectItem value="自然">自然</SelectItem>
<SelectItem value="建築">建築</SelectItem>
<SelectItem value="交通">交通</SelectItem>
</SelectContent>
</Select>
</div>
<div className="w-full sm:w-48">
<Label className="text-sm font-medium text-gray-700">並び替え</Label>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-full justify-between mt-1 bg-white">
{sortOrder === 'newest' ? '新しい順' : '古い順'}
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={() => setSortOrder('newest')}>
新しい順
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setSortOrder('oldest')}>
古い順
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredItems.map(item => (
<Card key={item.id} className="bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-300">
<CardHeader className="pb-2">
<CardTitle className="text-lg font-medium text-gray-800">{item.title}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm font-medium text-gray-600">カテゴリー: {item.category}</p>
</CardContent>
<CardFooter>
<p className="text-xs text-gray-500">投稿日: {item.date}</p>
</CardFooter>
</Card>
))}
</div>
</div>
)
}
修正依頼をしてみる
とてもシンプルなUIだったので、カードに色をつけて欲しいと注文を入れてみました。何をどのように変更したのかも、わかりやすく説明してくれます。
エラーの修正
途中でエラーが出ましたが、エラーも簡単に修正してくれます。
デプロイしてみる
v0.devには、デプロイ機能があり、ボタンひとつで簡単にWebサイトとして公開することができます。デプロイしたサイトはこちらです。なお、デプロイ先はVercel社が提供しているフロントエンド向けのクラウドプラットフォーム「Vercel」です。
課題
デザインの細かいカスタマイズが難しいのが残念なところです。作成されるデザインは汎用的で、特定のブランドに完全対応するには工夫が必要です。デザイナーに依頼するように、センスの良いデザインを作成してくれるのではないかと期待しましたが、生成されるUIは、かなりシンプルなデザインです。動きのあるワイヤーフレームをまずは作りたい、という場合に活躍してくれそうです。
終わりに
v0.devはデザインとコーディングを簡単にし、開発プロセスを効率化するツールです。プロトタイプをスピーディに作成したい場合や、コスト削減を目指すチームにとって、有力な選択肢と言えます。このようなツールはたくさんありますが、v0.devはプロンプトの入力画面がわかりやすく、仕様や変更内容の説明が丁寧で、使い勝手がいいという印象を持ちました。ぜひ使ってみてください。