00:00:00毎週のように新作が登場する中で、本当に使う価値のあるデザインツールをどうやって見極めていますか？
00:00:04問題は、毎日新しいツールがリリースされ、どれも高品質を謳っていますが、そのほとんどが単なる期待外れだということです。
00:00:09ツールの検証を通して、約束通りの性能を発揮し、私たちのワークフローにうまく適合するものをいくつか見つけました。
00:00:15チームメンバーの一人が、ヒーローセクションに3Dアニメーションを配置した車のプロダクトランディングページを制作していました。
00:00:21このウェブサイトのソースコードと使用されているすべての機能は、AI Labs Proで公開されています。
00:00:25ご存知ない方のために説明すると、これは最近立ち上げたコミュニティで、今回や過去の動画で紹介したプロジェクトにそのまま組み込めるテンプレート、プロンプト、コマンド、スキルが手に入ります。
00:00:36私たちの活動に価値を感じ、チャンネルを支援したいと思ってくださるなら、これが最適な方法です。リンクは概要欄にあります。
00:00:42このようなサイトを作るための最初のステップは、質の高いアセットを用意することです。そこで私は、AI搭載の3Dオブジェクトジェネレーター「Tripo3D」を使用しました。
00:00:50サインインすると約300クレジットが付与されましたが、これは約10回の生成を行うのに十分な量でした。
00:00:54次に、3Dに変換するための画像が必要でした。
00:00:57ヒーローセクション用の車の画像は持っていましたが、背景がモデルの生成を妨げていました。背景と前景の識別はこの種のツールには難しく、無駄にクレジットを消費したくなかったからです。
00:01:08そこでCanvaの背景削除ツールを使って背景を消しました。無料の代替案として「Remove BG」も使えます。
00:01:16背景を削除した後、Tripo3Dにその画像を参照用として読み込ませました。
00:01:21モデルの生成には約1分かかり、画像と非常によく一致したものが出来上がりました。
00:01:25あらゆる角度からすべてのビューを確認できましたが、どの側面から見ても一貫して実物に近いモデルになっていました。
00:01:313Dモデルが完成したので、エクスポートを行いました。
00:01:34Tripo3Dの無料プランではエクスポートが15回までなので、生成結果に納得した上で、2回の試行のうち最も出来が良い方をダウンロードしました。
00:01:43解像度を4Kに設定してエクスポートしました。
00:01:45ダウンロードしたGLBファイルを、新規作成したNext.jsアプリのpublicディレクトリに追加し、簡単にアクセスできるようにしました。
00:01:52他の形式ではなくGLBでエクスポートした理由は、テクスチャやマテリアルを別々に持たず単一のファイルに含んでいること、そしてウェブのネイティブ形式であるためウェブライブラリとの親和性が高いからです。
00:02:04GLBファイルの準備ができたら、いよいよウェブアプリに実装します。
00:02:08ランディングページの構築には、最近リリースされたばかりの「Codex」アプリを選びました。現在はmacOSでのみ利用可能です。
00:02:14「Claude Codeがあるのに、なぜこの動画でCodexを使っているのか？」と思われるかもしれません。
00:02:19新製品の発売に伴い、無料プランでも上限が拡大され、寛大なクォータが提供されているため、今が最大限に活用する絶好の機会だからです。
00:02:29もちろん、お好みのエージェントを使って同じプロセスを進めることも可能です。
00:02:32Codexをダウンロードし、プロジェクトフォルダを開きました。
00:02:34インターフェースはAntiGravityのエージェントマネージャーに非常によく似ていますが、コードよりもエージェントに焦点を当てた作りになっています。
00:02:40私たちが最も気に入ったのは「スキル」機能です。
00:02:43他のエージェントで独自のスキルを作成する場合、オープンソースのスキルクリエイターを入手して構築する必要があります。
00:02:49しかし、Codexにはスキルクリエイターが組み込まれており、インストール直後から多くの一般的なスキルがすぐに使えます。これは他のエージェントにはない利点でした。
00:02:563Dアニメーションのプロセスを簡略化するため、スキルクリエイターを使い、アニメーションの構成方法や使用するライブラリについて詳細な説明を入力しました。
00:03:06いくつか質問に答えると、スキルクリエイター内のスクリプトが実行され、スキルが構築されて使用可能な状態になりました。
00:03:13ただ、一つだけ通常とは異なる点がありました。
00:03:14通常、エージェントは「.agent」や「.claud」フォルダにスキルをインストールしますが、Codexはルートフォルダにインストールしたため、手動で「.agent」フォルダに移動させました。
00:03:24それでも、Claudeが定めたオープンソースのエージェントフレームワークと同じパターンに従っており、スキルに機能を追加するためのスクリプト、参照、アセットがすべて含まれていました。
00:03:33また、どのユーザープロンプトがスキルをトリガーするかをエージェントが判断するための、汎用プロンプトが含まれたyamlファイルも同梱されていました。
00:03:40作成したスキルを使ってアニメーションを設定するようCodexに指示し、プロンプトに必要な詳細をすべて盛り込みました。
00:03:47実装が開始され、インストールコマンドが実行されました。
00:03:49かなりの時間が経過した後、タスクは完了しましたが、環境内のコマンドがタイムアウトしたため依存関係をインストールできなかったと表示されました。そこで、代わりにpackage.jsonに依存関係を書き出すよう指示しました。
00:04:01手動でインストールコマンドを実行したところ、プロジェクト内のライブラリのバージョン違いによる依存関係の不一致でエラーが発生しました。
00:04:08ヒーローセクションのアニメーションが思い通りに動くようになるまで、Codexを使って何度もデバッグを繰り返しました。
00:04:14Codexは個々の機能の完了に時間がかかっていたため、タスクを4つのサブタスクに分割することにしました。
00:04:21各タスクにはランディングページの1つの機能を割り当て、目的、要件、制約を盛り込んで他のタスクから切り離しました。
00:04:28Codexのマルチエージェント機能を使用し、各エージェントに一つのタスクを担当させました。
00:04:32全員が同じランディングページを扱っていたため、メインブランチで直接変更せず、別々のワークツリーで作業させました。同じセクションで複数のエージェントが作業すると、コードが競合するからです。
00:04:43ほぼすべてのエージェントが、同じくらいの時間でタスクを完了しました。
00:04:46出力をマージした結果、コードの競合もなくすべての機能が実装されました。Codex単体で行うよりも大幅にスピードアップできました。
00:04:55ウェブサイトは完成し、必要なコンポーネントも揃いましたが、ヒーローセクション以外にアニメーションがなく、平坦に見えました。そこで「GSAP」を使うことにしました。
00:05:03GSAPは多くのプロフェッショナルに使用されているJavaScriptアニメーションライブラリで、一貫したパフォーマンスを発揮します。
00:05:09先ほど依存関係の競合やタイムアウトエラーが発生したため、実装前にターミナルからnpm installコマンドでGSAPを先にインストールしておきました。
00:05:18Codexに対し、アニメーション追加のための詳細な指示を出し、すでに完成しているヒーローセクションには一切手を触れないよう念押ししました。
00:05:27どこに、どのようにアニメーションを追加するか具体的に指示しましたが、このタスクの実行には長い時間がかかりました。
00:05:33いくつか軽微なエラーが出ましたが、エラーメッセージをCodexにフィードバックして修正を繰り返しました。
00:05:37その結果、ヒーローセクションはそのままに、アニメーションの実装が完了しました。
00:05:42他のすべてのセクションにスクロールトリガーのアニメーションが追加され、サイト全体の印象が劇的に良くなりました。
00:05:48アニメーションは付きましたが、ヒーローセクションに比べるとコンポーネント自体がまだ物足りない印象でした。
00:05:54そこで「Aceternity UI」のコンポーネントを採用することにしました。Aceternityのコンポーネントには、すぐに使えるマイクロインタラクションやアニメーションが豊富に組み込まれているからです。
00:06:04Codexを使い、アニメーションは維持したまま、既存のコンポーネントをAceternityのものに置き換えるよう指示しました。
00:06:10実装後、アプリのテーマに合わないグラデーションが追加されていることに気づきました。
00:06:14スクリーンショットを見せて、グラデーションがテーマに沿っていないことを指摘したところ、テーマに合った色に修正されました。
00:06:21しかし、アニメーションを確認すると、実装されたコンポーネントは静止したままで、Aceternity本来のマイクロインタラクションが欠けていました。
00:06:30そこで、ホバー時の傾斜エフェクトなどが組み込まれたAceternityコンポーネントがあることを伝え、単純なものではなくそちらを使うよう指示しました。
00:06:38その結果、ホバーによる傾斜やインタラクションが追加され、サイトの双方向性が格段に向上しました。
00:06:44さらにビジュアルを磨くため、NPMパッケージとして公開されている「post-processing」リポジトリを使用しました。
00:06:51これは「React Three Fiber」を使用する際のアフターエフェクトとして適用される、ポストプロセッシング・アニメーションレイヤーです。
00:06:56これを通じて、ガンマ補正などの画像処理機能や、パフォーマンスを維持したままの高度な調整が可能になります。
00:07:01このライブラリを使って繊細なライティング効果を作るようCodexに指示し、手順をガイドしてもらいました。
00:07:07最初はうまくいかず、出力結果に目に見える変化はありませんでした。
00:07:11何度もプロンプトを出し直してデバッグした結果、ようやく理想のエフェクトがかかり、3Dモデルに絶妙な光沢が加わりました。これでヒーローセクションに温かみのあるライティングが施され、全体が完成度の高い仕上がりになりました。
00:07:23今回の動画は以上です。
00:07:25もしチャンネルを支援し、このような動画制作を続けてほしいと思ってくださるなら、下の「スーパーサンクス」ボタンから応援をお願いします。
00:07:31いつものように、ご視聴ありがとうございました。また次の動画でお会いしましょう。