Transcript
00:00:00これは私がわずか数分で作成した、イベントのランディングページです。
00:00:05AIを活用したバーチャル試着体験まで組み込まれています。
00:00:09上司からこのプロジェクトを任されましたが、V0のおかげでアイデアを実際のソフトウェアに落とし込めました。
00:00:14この動画では、V0とは何か、そしてプロジェクトを段階的に構築する方法を紹介します。
00:00:19では、V0とは一体何でしょうか？
00:00:21AIの登場により、コードの生成は簡単になりました。
00:00:23V0はその力を活かし、誰でも簡単に実際のアプリやWebサイトを構築したり、
00:00:28開発者と共同作業したりできる形式にまとめました。
00:00:30V0は、ゼロからリリースまでを可能な限り迅速に行えるよう設計されています。
00:00:36V0の仕組みは次の通りです。
00:00:37作りたいアプリ、エージェント、またはWebサイトについて説明すると、V0がコードを生成し、
00:00:42リアルタイムでプレビューを表示します。
00:00:43V0に話しかけて指示を出すだけで、プロジェクトの変更や修正を
00:00:48自動で行ってくれます。
00:00:49V0はVercelとNext.jsを使用して本物のソフトウェアを生成しますが、単なるWebサイト作成ツールではありません。
00:00:56実際のアプリを構築し、AIやデータベースに接続し、開発者が
00:01:00そのまま使用・デプロイできるコードを生成できます。
00:01:02これが可能なのは、V0がNext.jsのフレームワークを開発したVercelによって作られているからです。
00:01:08Next.jsは、Under Armour、Stripe、Notionなどのブランドで採用されています。
00:01:11そのため、V0がNext.jsアプリを構築・デプロイする際は、
00:01:15世界的な一流企業と同じコードと安全なインフラを使用していることになります。
00:01:19V0の動作と、いかに簡単に始められるかを見ていただくために、いくつかのプロジェクトを紹介しましょう。
00:01:24私はマーケティングチームに所属しており、今週は2つの大きなプロジェクトを抱えています。
00:01:271つ目は、新しく発売する製品のイベントページの作成です。
00:01:312つ目は、既存のWebサイトのランディングページの更新です。
00:01:34まずはイベントページから始めましょう。
00:01:36このイベントは、「Son of Ali」という新しい腕時計の
00:01:40リリースパーティー向けです。
00:01:41ランディングページをスタイリッシュで魅力的なものにして期待感を高め、
00:01:45訪問者が登録したくなるような、体験型のバーチャル試着機能を作りたいと思います。
00:01:48そこで、V0にその通りの指示を出します。
00:01:53プロンプトの入力が終わりました。
00:01:54指示を送信すると、V0が構築を開始します。
00:01:59V0が構築している間に、何がこれほど強力なのかをご紹介します。
00:02:02「Settings」から「Integrations」をクリックすると、
00:02:07V0で利用可能なすべての連携機能が表示されます。
00:02:09まず、V0にはすでにAIが組み込まれていることが分かります。
00:02:12AI SDKを使用してAI機能を構築し、AI Gatewayを介して
00:02:17何百ものAIモデルにアプリから自動的にアクセスできるようになります。
00:02:20また、データベースを作成または接続してアプリのバックエンドを強化したり、
00:02:25Stripeを介して決済を受け付けたりすることも可能です。
00:02:27これらの連携機能により、本格的なフルスタックのAI対応アプリを構築できます。
00:02:32では、イベントページの様子を見てみましょう。
00:02:34V0が最初のバージョンの構築を終えたので、テストしてみます。
00:02:38自分の画像をアップロードすると、
00:02:44指示した通り、時計をバーチャル試着した4つの画像が生成されるはずです。
00:02:49素晴らしいですね。V0は私の指示を反映してコードを更新してくれました。
00:02:55エディタを見ると、V0がNext.jsのコードをリアルタイムで更新しているのが分かります。
00:03:00このエディタは、開発者がコードを確認・編集するのも容易にします。
00:03:04さて、V0による変更が完了しました。とても良い仕上がりです。
00:03:09これを公開する前に、チームに共有してフィードバックをもらいたいと思います。
00:03:12「Share」をクリックしてリンクをコピーすれば、チャットとプレビューをチームに送信できます。
00:03:18このプレビューで見えるものは、ページを公開したときにユーザーが見るものと全く同じなので、
00:03:22実際にデプロイする際、表示が崩れる心配はありません。
00:03:26チームの確認が終わったら、カスタムURLを設定して公開する準備をします。
00:03:31さらに、これによって私が作成したV0のプロジェクトが
00:03:36Vercel上にも作成されています。
00:03:37「Inspect on Vercel」をクリックすれば、そのプロジェクトを実際に確認できます。
00:03:42プロジェクト内では、すべての分析データ、エラー、デプロイの完全な履歴を確認できます。
00:03:48素晴らしいですね。このアプリを本番環境に公開しました。
00:03:51これで実際のサイトにアクセスできるようになり、ユーザーにも同じ画面が表示されます。
00:03:56リンクを共有すれば、誰でもアクセス可能です。
00:03:59V0の非常に優れた点は、カスタムドメインを追加できることです。
00:04:03「.vercel.app」のドメインをカスタマイズしたり、新しくドメインを購入したり、
00:04:09すでに所有しているドメインを追加したりできます。
00:04:10これは一回限りのイベント用のページなので、ベースドメインをカスタマイズして
00:04:14再度公開します。
00:04:15これで完了です。
00:04:16ドメインが更新され、新しく編集・追加したドメインで
00:04:21同じページにアクセスできるようになりました。
00:04:23手順はこれだけです。
00:04:24V0によってアプリがVercelのインフラにデプロイされ、誰でもアクセスできるよう公開されました。
00:04:30それでは次のプロジェクトに移りましょう。マーケティングサイトで
00:04:34すでに公開されているランディングページの更新です。
00:04:36開発チームがこのサイトを管理しており、GitHubを通じてコードのバージョン管理を行っているため、
00:04:41彼らのワークフローに沿って更新を行う必要があります。
00:04:44幸いなことに、V0を使えばその作業も簡単に行えます。
00:04:48新しいV0のウィンドウを開き、「import from GitHub」をクリックします。
00:04:52アクセスしたいGitHubリポジトリのURLはすでに手元にあるので、
00:04:56上のバーに貼り付けて「import」をクリックします。
00:05:01すると、このようにV0がリポジトリをインポートします。
00:05:05リポジトリのインポートが完了したので、変更を加える準備が整いました。
00:05:08マーケティングページの最上部にバナーを追加し、
00:05:12先ほど作成したイベントのランディングページにユーザーを誘導して、
00:05:17「Son of Ali」の発売イベントに登録できるようにしたいと思います。
00:05:18そこで、V0にそのように依頼します。
00:05:21V0が変更を行っている間に、「Git」をクリックしてみます。
00:05:27V0が自動的にブランチを作成してくれたことが分かります。
00:05:31これにより、開発者が私の加えた変更を確認・テストしてから、
00:05:35メインサイトにマージするのが非常に容易になります。
00:05:36変更が完了したので、次はチームが確認できるように
00:05:42プルリクエストを作成します。
00:05:44「open PR」をクリックし、さらに「open pull request」をクリックします。
00:05:49「view PR」をクリックすると、GitHub上でプルリクエストが開かれたことを確認できます。
00:05:54また、サイトがVercel上にあるため、プレビュービルドが自動的に作成されています。
00:05:59そのため、開発者がコードを確認できるだけでなく、他のメンバーも
00:06:03更新内容がどう見えるかを確認し、コメントでフィードバックを送ることができます。
00:06:06これで完了です。
00:06:07エンジニアリングチームに依頼することなく、自分だけでマーケティングサイトを変更できました。
00:06:11彼らは既存のプロセスの枠組みの中で、その変更を確認できます。
00:06:15V0は、マーケティング、プロダクト、創業者、あるいはエンジニア自身など、
00:06:19開発者と協力して仕事をするチームのために構築されました。
00:06:22V0を使えば、誰でもアイデアを本物のソフトウェアに変換し、
00:06:27既存のアプリやWebサイトで共同作業を行うことができます。
00:06:28今すぐ v0.app にアクセスして、最初のプロジェクトをリリースしましょう。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video