見出し画像

はじめてのv0とアーカイブ動画

伊藤雅康

生成AIのクリエイティブは業務では使えない。そんな時代はもう終わりました。

今、Xで話題になっている「v0」を使えば、デザイナーに頼らずともビジネスで活用できるWebページなどのクリエイティブが作成できます。

ここではv0の紹介と2024年9月27日に開催した大好評にて終了したv0講座のアーカイブを有料記事として公開します。

その前に初めてv0を見た、聞いたという方のために、v0が如何に革新的かをご紹介します。

◆瞬間、世界が動きだした

「v0」が新しくなったと話題になり、生成AIプレイヤー界隈で海外からも話題になった投稿をしました。

正に、世界が動き出した瞬間でした。

これは、できることを探っていた時に偶然、360°画像をインポートして生成した結果で私自身すごく驚きました。その入力したプロンプトと出てきた内容を反芻した結果、安定してVR空間の構築ができるようになりました。

VR空間を「v0」で作ったことを公開した時は、世界からもコメントをいただきました。

これまで、VR画像はゲーム用途でしか使い道が…という意見もあったのですが、この投稿から世界が変わります。
前例がない、まさにファーストペンギンでした。

◆新時代のウェブデザイン

改めて、作例としても公開をした私のウェブサイトをご覧いただきたいです。
PCからご覧いただくとわかるのですが、読込時でメインメモリの使用量が110MBで閲覧時はメインメモリの使用量が50MBまで低下します。この超軽量化ともいえる環境は異常ともいえる軽さであり、SEO対策上、非常に有効となります。

操作方法は空間を触ると空間はグルグル上下左右斜めに動かすことができ、回転する画像は右クリック、タッチパネルなら二本指で拡大縮小、動かすことが可能です。

ちなみに、Google検索では検索結果が出ているときで400MB程度なので非常に軽量化されていることがわかると思います。

しかし、すごいと言えるのはその軽量化だけではなく、「v0」が360°画像やglbファイルを読み込んで空間も含めて構築ができるという事実です。

これはReactコンポーネントで表示できるからこそ成せることであり、そのことに気づいた生成AIユーザーの方々は新しい360°画像を用いた空間の生成で、ゲームやシステムの構築など新しい可能性を見出し、新しいムーブメントが起きています。

これは新しい時代の幕開けと言っても過言ではないと考えておりますし、まさに「瞬間、世界が動き出した」と感じています。

◆v0 chatがもたらす各業界への影響

「v0」は、生成AIを活用したUIデザイン生成ツールであり、さまざまな業界に大きな影響を与えています。以下に各業界への影響を詳しく説明します。

・フロントエンド開発業界

「v0」は、フロントエンド開発者にとって革新的なツールであり、自然言語でUIデザインを指示し、そのコードを生成できるため、プロトタイピングから本番環境のコード生成までを一貫して行うことが可能です。この機能により、開発者は迅速に高品質なUIを作成でき、開発効率が大幅に向上します。

・デザイン業界

デザイン業界では、「v0」の導入によりデザイナーが手動で行っていた作業が自動化され、デザインプロセスが効率化されます。特に、テキストプロンプトを用いたUI生成は、デザインの一貫性を保ちながら迅速なプロトタイピングを可能にし、デザイナーの創造性を高めるツールとして評価されています。

・システム開発業界

システム開発業界では、「v0」のような生成AI技術がコーディング支援や自動テストなどのプロセスで活用されており、生産性の向上に寄与しています。特に、生成AIによる自動化は、開発者がより高度な設計やアーキテクチャの構築に集中できる環境を提供します。

◆作例紹介

百聞は一見に如かず。Webデザイナー経験がないがFTPサーバーのことが少しわかる程度の私が実際に作ったWeb UIをご覧ください。

「v0」の本領発揮の一つは動的UIにあると考え、ウェブサイトの構築とデザイン性にも重点を置きました。

従来の型にハマらない創造的な動的UIが実装できます。

1．SVGパーティクルアニメーション＋LPデザイン

Claude 3.5 sonnetで制作したSVGアニメーションを「v0」でデザインさせたLPデザインの中に組み込んだ例です。

2．動的グレースケールフィルター+webpファイル

1枚の画像の上を円状図形が動くものです。円状の色は写真をグレースケールにするというものです。

はじめはpngで構築していたのですが、後からwebpファイルが読み込めることに気づいたので、

「すべての機能、デザインを保持したまま画像を添付のwebpに変更してください。」とお願いして変えてもらいました。
（現在はwebpファイルの添付がうまくできない事象が継続的に発生中）

3．スクロールトリガーアニメーション（ズーム）+GSAP

スクロールしたりスワイプすると画像が動くアクションを「スクロールトリガーアニメーション」といいます。

今回はズームを試してみました。ズームする起点は任意で選べるようになっていて、左上、中央上、右上など言葉でも指定できます。

4.スクロールトリガーアニメーション（パララックス）+GSAP

スクロールすると画像が切り替わるアクションをパララックスといいます。パララックスとは、視差効果のことであり、 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤーの各要素にアニメーションをつけたりすることが可能です。

5.Google Font

Google FontはNext.js Font APIを利用することで使うことができるwebフォントです。非常に多くの種類があり、外部サイトで一覧が見れたりするのですが、ここでは66種類のフォントを実際に入力、フォントサイズの変更を試すことができるようにしました。

「v0」のReactコンポーネント上でもGoogle Fontに対応できます。実は上記の作例もフォント変更しています。

上記リンクから実際に試すことができます。

7.Three js.+VR画像

VR画像生成AIのSkybox AIはROBLOX用の背景に使えたり、メタバースの背景としての役割やTechno Wizard Planによる3DVR生成が強みでしたが、「v0」を使えば更に活躍の場を増やすことができます。

特に、360°画像を全天球で読み込めることで空間の再現が容易になっています。

https://v0.dev/chat/b/eExGGDjSky

上記のリンクよりお試しいただけます。

上記のリンクは実際にHTMLに変換して実際にホームページとして公開したものになります。

8.スライド

「v0」はスライドの作成もできます。

簡易的なスライドなら、「v0」で作ることで業務の効率化が図れます。

手順としては

1.Gensparkでクライアントや市場動向の調査

2.Midjourneyなどで画像生成

3.Gensparkでまとめた内容を「v0」にペーストしてスライドを生成。適宜画像を挿入。

この3ステップでスライドは完成します。

9.自己紹介ページ作成+アニメーション

ホームページの制作の例です。

本来であればVercelでデプロイする流れがあるのですが、ホームページの場合はHTML、CSS、Javascriptの3種類をFTPサーバーにアップロードすることが一般的です。

ここではHTML、CSS、Javascriptの3種類を実際にアップロードして「v0」がホームページ制作で有用であることを証明しています。

10.マルチバース疑似空間再現 + VR画像

VR画像を全天球で再現しているものを応用し、宇宙空間のように空間を往来できるようにしています。

操作方法は空間を見たい球体にある程度近づいた後にタッチをすると、画面中央にアングルを移動するので、そこから一気にズームすることで空間の中に入り、中を見渡せるようになります。空間に出入りする様子は宇宙に出る瞬間や大気圏突入の感覚を味わっているようです。

11.ECサイトワイヤーフレーム

わずかな言葉でECサイトのフレームができます。

「サムネイル形式のECサイト画面をつくってください」

これだけで充分に形にしてくれます。

他にもこれまでに生成AI界隈で前例のない作例をいくつか作ってはありますがそれはまた、別の記事で紹介します。

◆v0はウェブデザインの世界を根本から覆す

これまでの生成AIを用いた簡易的なウェブサイト制作のコーディングまでの流れは簡易的なデザインであればCreate.xyzで制作から確認まで一気通貫することが可能で、デザイン性の高いウェブデザインを構築するのであればFigmaを利用したりすることが一般的でした。

平面的な空間にアニメーションをつけたりするのであれば、create.xyzやFigmaの方がよい部分も非常に多くありますが、それ以上にスクロールトリガーアニメーションを日本語で話すようにプロンプトを入れるだけでデザインを実現させる「v0」は圧倒的と言えます。

しかし、それで「v0」は終わらないのです。

SaaSの構築もでき、更には最初にご覧いただいた360°画像を用いた全天球の空間を用いたウェブサイトを作ることが可能なのです。

◆突然になった話題の「v0」とは

「v0」は、Next.jsの開発元として知られているVercel Labsが提供する生成AIサービスです。このサービスは、ユーザーがテキストで指示を出すことで、AIがその指示に基づいたUIを自動生成することを目的としています。以下に、「v0」の主な特徴と機能について詳しく説明します。

◆「v0」の特徴

  • 生成AIによるUI作成: ユーザーがテキストプロンプトを入力すると、AIがその指示に基づいてUIコンポーネントを生成します。これにより、人間のデザイナーと対話しているかのようにUIを作成できます。

  • リアルタイムプレビュー: コードの変更が即座に反映されるリアルタイムプレビュー機能が強化されており、フィードバックサイクルが短縮されます。

  • 自動スケーリング: 需要に応じてリソースを自動的に調整する自動スケーリング機能があり、トラフィックの急増にも対応可能です。

  • 統合された開発環境:「v0」は統合された開発環境（IDE）を提供し、コードの記述、テスト、デプロイを一箇所で行えるように設計されています。

  • Shadcn UIとTailwind CSS: 生成されるUIはShadcn UIとTailwind CSSというライブラリとフレームワークをベースにしており、モダンでスタイリッシュなデザインが可能です。

◆アカウント登録と操作方法

Vercel v0にはUI生成専用の「v0」とチャット画面でUI等を生成する「v0 chat」があります。上記の画面の場合は今回特集するv0 chatではありませんのでご注意ください。

まずは右上のアカウント登録から。 Select an Image

上記の画面が「v0」の初期画面になります。右上の「Sign in」でログインまたはアカウント登録をします。


GitHubのアカウントを保有している場合はGitHubでアカウント登録を進めてください。もしGitHubのアカウントがない場合は、Eメールアドレスでアカウント登録をしてください。

アカウント登録後の画面です。履歴は時計アイコンをクリックすると表示されますが、直近1週間のチャットを表示します。それ以前のチャット履歴は現在見れないのですが、別の方法でチャットの履歴を見る方法があります。

①後述するPublishしたリンクから「チャットの内容を確認」をクリック
②ブックマーク登録から見る

ブックマーク登録のほうが一般に公開されずに管理ができるので現状は②がお勧めです。

「v0」の最大の特徴は「Reactコンポーネント」で生成したコードをその場で表示、再現してどう動くのかを確認できることです。

また、画像を添付して適切な場所に画像も配置し、その場で確認できるのも非常に魅力的なポイントになります。

さらに「v0」には即座に共有できる「Publish」があります。これにより、外部の共有が楽にできるようになります。

また、Add Block to Projectとは、Vercelなどにデプロイが可能になります。

◆現在確認できるアップロード対応拡張子

  • テキストファイル: .txt, .md, .json, .xml

  • ソースコードファイル: .js, .tsx, .html, .css

  • 画像ファイル: .jpg, .png, .gif, .svg

  • 動画ファイル:.GIF

  • 3Dファイル:.glb

  • 音楽ファイル: .MP3, .wave

  • その他のファイル: .webp, .csv

現在確認できるアップロード対応可能なファイルになります。以下のファイルは対応しません。

  • 対応不可ファイル:.pdf, .xslx, .pptx, .otf, .ttf, .MP4, .fbx, .vrm, .obs

◆料金体系について

料金体系は、無料のFreeプラン、月額20ドルのPremiumプラン、Enterpriseプランの3つのみです。

世界トップクラスのエンジニアを月2,800円で雇えることと同等ともいえる、この性能と料金は圧倒的なコストパフォーマンスと言えます。

今や生成AIエンジニアはベテランで1人当たり150万～200万の費用がかかっても不思議ではありません。そう考えると月額2,800円は圧倒的破格と言えます。

画像はVercelの料金ページをスクリーンショットをして貼り付けした後、「このスクショを完全再現してください」とプロンプト入力して作りました。

下記が料金プランスクリーンショットです。

Freeプランは1日10回程度のチャットしかできませんが、Premiumプランになると1日100回～200回程度のチャットができるようになります。

クレジットについては「v0」ではなく、UIの開発に特化しているVercel v0に対してのクレジットになります。

◆v0はコーディングで表現できるもののすべてが形になる

皆さん、これまでの人生の中で、「あんなこといいな、できたらいいな」と感じたことはありませんか？

・新しい仕組みを思いついた
・アレとコレを掛け合わせたらどうなるんだろう
・ツール触ってみたけど難しすぎて私にはできなかった。

など、そういったこれまでの挫折にも似た敬遠で諦めていたものがv0でなら叶えることができます。

◆ここで自己紹介

改めてstudio vecoの伊藤といいます。
普段は企業向けに生成AIの研修をしています。
展開している事業は3つです。

・FascinAIte　デザイン特化の生成AI定着

クライアント様は特にデザイン業界が多いです。
人材開発支援助成金を使った画像生成AIとv0、著作権も含めた研修をしています。
当方調べではありますが、デザイン業界に特化した画像生成AIやv0を使った研修は2024年9月現在、他に類がありません。

ChatGPTを含む助成金を活用した研修から単発の講演も承っております。
他社の事例や海外の動向なども踏まえた実践的な内容で多くの事業者様に満足頂いております。

・EducAIte　教育、子育て分野の生成AI定着

学校教育に頼るだけの生成AI浸透は限界があり、産官学が一体となって生成AIに向き合わない限り、教育分野に早期に浸透することはありません。
教員の皆さまや生徒さん向けのそれぞれに合った生成AIの授業、研修で令和7年度末まで校務DX推進を50％までに進めようとしている文部科学省の目標に少しでも叶えられるように支援をしています。

・CommunicAIte　新しい生成AIの文化定着

ことばの壁を越えろ。常識の壁を壊せ。をテーマに独自のアプローチで新しいサービスの開発をしています。
v0で作ったVRのウェブサイトデザインのほか、言語すら超えた全く新しいアプローチの画像生成AI開発に取組中です。

そのほかの活動は以下の通りです。

  • 一般社団法人教育AI活用協会 副代表

  • NewsPics TOPICS「IKIGAI Lab.」執筆者

  • 親子で学ぶ生成AIイベント多数主催

  • 生成AI EXPO 共同代表

ここまでお読みいただきありがとうございます。

以降は有料でご購読いただけた方だけに公開しております。
9/27にPeatixで販売している内容を全く同じ内容になっております。

ここから先は

152字

¥ 3,000

この記事が気に入ったらサポートをしてみませんか？