00:00:00生成AIがどれほど強力になったか。
00:00:02新しいツールが次々と登場しており、その中でもGoogleはGemini 3のリリース以来、本当に勢いを増している。
00:00:07そのため、
00:00:08X上で人々が素晴らしいランディングページをワンショットで作成し、
00:00:11このモデルはゲームチェンジャーだと言っているのを見たことがあるだろう。
00:00:14しかし、彼らは嘘をついている。
00:00:15実際には、これらのサイトを構築するために複数のツールを使用する必要がある。
00:00:18そしてGoogleは、Gemini 3とNano Bananaを搭載した実験的なツールで狂ったように進化を続けている。
00:00:23しかしGoogleは、これらすべてを組み合わせて使用する方法を提供していない。
00:00:26だからこそ、これらのツールをすべて組み合わせた完全なワークフローが必要になる。
00:00:29今日は話すことがたくさんある。これらのツールがこれほどうまく連携するとは正直思っていなかったからだ。
00:00:34これらのサイトで見られるアニメーションは、単なる一連のフレームに過ぎない。
00:00:37しかし、AIツールを使ってこれらのフレームを生成しても、一貫性のある結果は得られない。
00:00:41Googleは、アセット生成専用に設計されたWISCという実験的ツールをリリースすることでこれを解決した。
00:00:47画像生成にはNano Bananaが搭載されている。
00:00:49私はヒーローセクション用の画像シーケンスを生成するためによくWISCを使用している。
00:00:53シンプルな言葉でプロンプトを入力し、各シーケンスの詳細を段階的に更新して、生成された画像をヒーローセクションで使用する。
00:01:01このプロセス全体を使って、
00:01:02このランディングページを作成し、
00:01:03カメラを使ったクールなアニメーション効果を実装することができた。
00:01:07まず、
00:01:07シーケンスの最初と最後のフレームだけを生成し、
00:01:10その2つのキーフレームを使ってヒーローセクションのアニメーションを作成する。
00:01:14しかし、構造なしにただプロンプトを始めると、必要なキーフレームに同じ構造の連続性が保たれない。
00:01:20そのためには、被写体、視覚的な意図、画像に求めるディテールのレベルを明確に定義する必要がある。
00:01:26WISCは被写体、
00:01:27シーン、
00:01:27スタイルのフレームワークを使って画像生成をガイドし、
00:01:30それらを組み合わせて1つの新しいビジュアルを作成できる。
00:01:33だからこそ、
00:01:34どんなカメラが欲しいか、
00:01:35レンズの反射をどう見せたいか、
00:01:37解像度、
00:01:38画像の奥行きなど、
00:01:39すべての詳細を含めたところ、
00:01:41プロンプトの通りに正確なビジュアルを作成してくれた。
00:01:44生成された画像が常に期待に応えるとは限らない。
00:01:47その場合は、シンプルな言葉で変更を伝えるだけで、新しいビジュアルに変更が反映される。
00:01:53WISCで最も気に入っているのは、優れた結果を得るために長く詳細なプロンプトを書く必要がないことだ。
00:01:58これは、
00:01:58中間レイヤーとしてGemini 3を使用しており、
00:02:01シンプルな言葉の上に詳細なプロンプトを書いてくれるため、
00:02:03しっかりしたビジュアルが得られるからだ。
00:02:05ここで、なぜWISCを選んだのかという疑問が生じる。
00:02:08Nano Bananaは詳細なテキストプロンプトが必要で、
00:02:10GoogleのMix Boardはムードボード用に設計されており、
00:02:13どちらも高速で制御された画像リミックスには最適化されていない。
00:02:16WISCの核となる強みは、参照画像を組み合わせることにあり、より優れた制御で画像を生成できる。
00:02:21最初のフレームができたら、最後のフレームはカメラの側面アングルにして、レンズを分解してコンポーネントを見せたいと思った。
00:02:28そこで、
00:02:29技術的なカットアウェイを生成するようプロンプトを入力し、
00:02:31内部レンズをどのように重ねるか、
00:02:33背景をどのように見せるかを指定した。
00:02:35最初の試行では正しく生成されなかった。
00:02:37内部の回路まで分解してしまい、それは表示してほしくなかった。
00:02:40先ほど述べたように、必要な変更を伝えるだけでいい。
00:02:42そこで、レンズの層だけを表示するよう指示したところ、内部回路を表示せずに画像を生成することに成功した。
00:02:49さて、WISCはVIOモデルを使用したアニメーションもサポートしている。
00:02:53しかし、
00:02:53WISCのアニメーションは1つの画像をアニメーション化することに焦点を当てており、
00:02:56複数のキーフレームを接続することはできない。
00:02:58そのため、Google Flowという別のツールを使用した。
00:03:01Flowは、
00:03:01ストーリーの計画にGeminiを使用し、
00:03:02安定したキャラクターをデザインするためにGoogleの画像モデルを使用し、
00:03:05動画コンテンツを作成するためにVIOを使用している。
00:03:07カメラアニメーションの開始フレームと終了フレームはすでに作成していたので、
00:03:10次はそれらの間にトランジションを作成したかった。
00:03:13そこで、フレームから動画へのオプションを使用して、フレームを提供した。
00:03:16スムーズな遷移を確保するには、
00:03:17開始フレームがどのように終了フレームへつながるかをプロンプトで言及する必要があります。これによりモデルに論理的な道筋が提供されるからです。
00:03:24プロンプトには、
00:03:24アニメーションをどのように流したいか、
00:03:26開始フレームがどのように終了フレームへ遷移すべきか、
00:03:28そしてアニメーションスタイルを含めるべきです。これらの詳細により、
00:03:31モーションが意図的なものになります。
00:03:33これらのモデルは複雑なタスクでミスをする傾向があるため、最初の試行ではアニメーションが正しく生成されませんでした。
00:03:38生成された動画は、スピンの方向と終了フレームの両方が完全に間違っており、遷移がぎこちないものになってしまいました。
00:03:44修正方法は、
00:03:45必要な変更を加えて単純に再プロンプトすることでした。例えば、
00:03:48よりスムーズな遷移のためにカメラの回転方向を変更するようプロンプトしたところ、
00:03:53求めていたバージョンが生成され、
00:03:55プロジェクトで使用するためにダウンロードしました。
00:03:58動画生成モデルはコストがかかるため、無料プランでは動画生成が無制限に利用できるわけではありません。
00:04:04地域によって異なりますが、月間180クレジットのみが提供されます。
00:04:08VIO 3.1による各動画生成には20クレジットが使用されるため、月に最大9本の動画を生成できます。
00:04:14Flowによって生成された動画はMP4形式であり、
00:04:17スクロールアニメーションへのマッピングが難しいため、
00:04:19Heroセクションで直接使用することができません。この理由から、
00:04:23無料のオンラインコンバーターを使ってWebPに変換しました。
00:04:26MP4動画をアップロードし、
00:04:28最高品質のアニメーションWebPを生成するよう変換設定を行い、
00:04:31WebP形式に変換してプロジェクトで使用するためにダウンロードしました。
00:04:35WebPを選択することが重要なのは、
00:04:37この形式ではスクロールインタラクションのマッピングが容易になるためです。ウェブ上では、
00:04:42この形式は画像として扱われ、
00:04:43他の形式のように媒体プレーヤーラッパーを必要としません。これらのファイルはよりコンパクトで、
00:04:48優れたパフォーマンスを提供するため、
00:04:50短編アニメーションコンテンツに理想的です。
00:04:52変換したWebPファイルを、
00:04:53新しく初期化したNext.jsプロジェクトのpublicディレクトリに追加しました。プロジェクト内のすべてのアセットはここに配置されるからです。
00:05:00アニメーションの準備ができたら、ランディングページのHeroセクションに追加したいと考えました。
00:05:05私は通常、
00:05:05ClaudeにはXML形式でプロンプトを与えます。ClaudeのモデルはXMLの理解に最適化されており、
00:05:11構造化された意図をより確実に解析し、
00:05:13各セクションを独立して推論できるからです。
00:05:15アニメーションを追加するためにClaudeに与えたプロンプトには、
00:05:19構築したい内容、
00:05:20アニメーション用アセットの場所、
00:05:22スクロールアニメーションの動作方法、
00:05:24そして目標をcontextタグ内に含めました。すべての要件をrequirementタグに含め、
00:05:29アニメーションの動作をanimation behaviorタグで記述し、
00:05:33実装の詳細、
00:05:34制約、
00:05:35必要な出力をそれぞれのタグ内でプロンプトに直接指定しました。このプロンプトをClaudeに与えると、
00:05:40求めていた通りに自動的にアニメーションが実装されました。Heroセクションは見栄えが良かったものの、
00:05:46残りのコンポーネントはAIが生成しがちな一般的なウェブサイトのように見えました。これは、
00:05:51既存の美しいコンポーネントライブラリに頼るのではなく、
00:05:54バニラCSSから高品質な結果を期待していたためです。
00:05:57UIライブラリは複数存在し、
00:05:59それぞれ独自のスタイルとデザインテーマを持っていますが、
00:06:01プロジェクトスタイルに最も適したライブラリを選択する必要があります。私のカメラランディングページでは、
00:06:06Apple風のUIを目指しており、
00:06:08そのコンセプトに最も近いライブラリはHero UIです。これはTailwind CSS上に構築されており、
00:06:13Framer Motionに依存してウェブサイト全体でコンポーネントに命を吹き込みます。
00:06:17このライブラリはNext.js、
00:06:19Vite、
00:06:20Laravelなど、
00:06:21最も一般的に使用されているフレームワークをサポートしています。そのため、
00:06:24既存のNext.jsセットアップとの統合は簡単でした。インストール方法は2つあります。インストールコマンドを使用してすべてのコンポーネントをプロジェクト全体にインストールするか、
00:06:33必要に応じて個別のコンポーネントをインストールするかです。私はClaudeで後者の方法を選択しました。Claudeに既存のコンポーネントをHero UIコンポーネントに置き換えるよう指示したところ、
00:06:42ウェブサイトが大幅に改善され、
00:06:44サイトに遥かにプロフェッショナルな外観と使用感をもたらしました。ユーザーはランディングページに滞在するかどうかを、
00:06:50UIがどれほど魅力的かを見て数秒以内に判断します。モーションは訪問者の注意を、
00:06:53私たちが気づいてほしい機能へと誘導し、
00:06:55ユーザーの定着率を高めます。バニラJavaScriptを使用してゼロからアニメーションを実装するのは困難なため、
00:07:01私は既存のライブラリに頼ってプロセスを簡素化しています。このプロジェクトでは、
00:07:05幅広い既製のアニメーションを提供する無料のオープンソースライブラリであるMotion.devを使用しました。通常、
00:07:10アニメーションではDOM更新とアニメーションタイミングを手動で同期させる必要があります。しかし、
00:07:15Motion.devはDOM更新を内部で処理することでこのロジックを抽象化します。ユーザーがスクロールするとコンポーネントが自動的に更新されるため、
00:07:22スクロール位置を手動で追跡することなくアニメーションがスムーズに再生されます。このライブラリは標準のコンポーネントではなくモーションコンポーネントを使用します。これらのコンポーネントにはpropsで開始状態と終了状態が定義されており、
00:07:33ライブラリがそれらの間の遷移ロジックを自動的に処理します。ランディングページでは、
00:07:37Claudeにこのライブラリを使用してパララックスとスクロールアニメーションを実装するよう指示しました。その結果、
00:07:43ページの主要セクションに注目を誘導することでユーザーエクスペリエンスが向上しました。ページの各セクションがどのように見えるべきかを説明するのは面倒なプロセスです。人々が自分の作品を投稿している既存のギャラリーからインスピレーションを得る方が良いでしょう。私は21st.devを使用しました。これは複数のデザイナーによって構築された様々なUIコンポーネントのインスピレーションを提供するプラットフォームです。コンポーネントはAceternity UI、
00:08:05Prism UI、
00:08:06Coconut UI、
00:08:07Magic UIなど、
00:08:08人気のあるUIライブラリの上に構築されています。アイデアを探している時、
00:08:12ランディングページに最適なコールトゥアクションセクションを見つけました。21st.devで最も気に入っている点は、
00:08:17使用したい任意のコンポーネントに対して、
00:08:19AIコーディングエージェント用に特別に調整されたプロンプトをコピーできることです。自分でClaudeを誘導する必要がありません。プロンプトは広範囲に構造化されており、
00:08:27ShadCNやTypeScriptサポートなどのプロジェクト要件が含まれています。コーディングエージェントがコンポーネントディレクトリに直接貼り付けるための指示付きコードを提供します。必要なすべての依存関係コードと追加すべきパスが含まれており、
00:08:39インストールが必要なNPMパッケージもリストアップされています。また、
00:08:43AIエージェントがコンポーネントをアプリケーションに直接統合するために必要なすべてのステップと、
00:08:47特定のプロジェクトのニーズに合わせてエージェントがどのように調整すべきかを詳述した実装ガイドも含まれています。このプロンプトをClaudeに渡すと、
00:08:55プロンプトをコピーしたのとまったく同じコールトゥアクションセクションが統合されました。また、
00:08:59モーションの追加について明示的に言及していなかったにもかかわらず、
00:09:02インストールしたモーションライブラリからモーションも追加されました。21st.devからフッターも取得しましたが、
00:09:08デモのフッターにはGitHubとTwitterのアイコンが含まれていました。
00:09:11Claudeにコピーしたプロンプトを渡すと、
00:09:14プロジェクトに関連性がないためGitHubアイコンは省略されました。フッターはカメラ製品サイトに関連するアイコンのみを含むようにカスタマイズされ、
00:09:21ランディングページに完璧にフィットするフッターが作成されました。これでこの動画は終わりです。
00:09:25チャンネルをサポートして、
00:09:27このような動画を作り続けるお手伝いをしていただける方は、
00:09:29下の「Super Thanks」ボタンをご利用ください。いつもご視聴ありがとうございます。次回の動画でお会いしましょう。