AIエージェントでインタラクティブなゲーム風3Dポートフォリオを構築

このパイプラインでは、Verdentエージェントプラットフォームを使用します。VS CodeやJetBrains向けに利用可能ですが、デスクトップアプリケーションが推奨されます。洗練されたインターフェースにより、低レベルの構文よりも全体的なアーキテクチャに集中する方にとって使いやすくなっています。

このワークフローのコアエンジンはClaude 4.5 Opusです。高い推論能力と複雑なコード構造の効率的な生成により、3D Webアプリケーションに特に効果的です。

• GitHub連携： GitHubアカウントをVerdentにリンクすると、エージェントがバージョン管理やブランチ作成を自動的に管理できます。
• ワークスペース管理： このセットアップの最も強力な機能の一つは、複数のワークスペースを並列で実行できることです。メインのポートフォリオを構築しながら、別のブランチで補助ツール（アセットオプティマイザーなど）を開発でき、標準的なAIコードエディタでよくあるコードの競合を回避できます。

新しいワークスペースを開き、glTF-transformライブラリを活用するローカルNext.js Webアプリケーションの作成をエージェントに指示します。目標は、以下を自動化するシンプルな「ドラッグ＆ドロップ」インターフェースです：

• テクスチャのWebPフォーマットへの変換。
• 頂点数を削減するメッシュ最適化。
• テクスチャの最大1kまたは2k解像度へのリサイズ。

エージェントを実行してファイル構造を構築させます。完了したら、ローカルサーバーを起動して、重いGLBモデルをインターフェースにドロップできます。

ベストプラクティス： 高忠実度が必要な場合は2kまたは4kテクスチャを使用しますが、最終的なWebビルドではオプティマイザーで圧縮し、モバイルデバイスでもサイトのレスポンシブ性を確保しましょう。

すぐにコードに取りかかるのではなく、エージェントを計画モードに切り替えます。これにより、エージェントは要件を分析し、自身のロジックを再確認し、ロードマップを提示するよう促されます。

• ダイアグラムの確認： エージェントはサイトアーキテクチャの技術ダイアグラムを生成します。
• 複雑さの低減： AIエージェントはデフォルトで複数ページのレイアウトを提案しがちです。モダンな「ゲーム風」の雰囲気を維持するために、エージェントに単一のインパクトのあるエントリースクリーンとメインビューワーに統合するよう指示します。

テキストとリファレンス画像を組み合わせてビジョンを伝えます。このポートフォリオに効果的なプロンプト構造は以下の通りです：

• エントリースクリーン： サムネイルと「ポートフォリオに入る」ボタンを備えたランディングページ。
• キャラクタービューワーレイアウト： 左側60%を3Dキャラクターが占め、右側に情報カードを配置する分割画面アプローチ。
• ナビゲーション： キャラクターを切り替える左右ボタンと、キャラクターを画面の高さに自動フィットするシステム。
• ビジュアルスタイル： 純粋な黒背景、遠くへフェードする無限グリッドフロア、奥行き感を出す浮遊する「スパークル」や「スタードット」パーティクル。

エージェントに質問された際、以下の設定を指定します：

• グリッドスタイル： 黒にフェードアウトする無限グリッドを選択。ブランドの一貫性のために、後でグリッドの色を変更（例：オレンジに）リクエストできます。
• パーティクルスタイル： 背景に微妙な動きの感覚を作り出す「浮遊スパークル」を選択。
• ユーザーインタラクション： 自動回転を無効にする。キャラクターはユーザーの操作に基づいてのみ回転するようにし、より触覚的な「ゲームメニュー」の感覚を提供。

キャラクターモデル（GLB）にランニングやアイドルのアニメーションが含まれていることを確認してください。エージェントには、キャラクターのロード時にこれらのアニメーションを自動的にトリガーするよう指示する必要があります。

ファイルエクスプローラーでプロジェクトフォルダに移動し、以下のようにアセットを配置します：

• モデル： 最適化済みの.glbファイルをpublic/modelsディレクトリに配置。
• UI画像： サムネイルやプロフィール画像をpublic/imagesフォルダに配置。

エージェントに、キャラクターの名前と説明、作成に使用したツール、ソースファイルや外部動画コンテンツへのリンクなどのデータリストを提供します。エージェントはデータ構造を埋めるだけでなく、ファイルパスも自動的に修正します。例えば、.jpgを提供したがコードが.pngを期待していた場合、エージェントはフォルダ内のファイルを検出し、手動介入なしでコードを更新します。

ブラウザでプロジェクトを読み込みます。3Dモデルが小さすぎたり、情報カードの位置がずれている場合は、ブラウザウィンドウのスクリーンショットを撮ります。

スクリーンショットプロンプト： スクリーンショットをエージェントにアップロードして、具体的な批評を提供します。例えば：「右のカードが現在黒背景にあるので、3Dビューワーに重なるように移動してください。また、モデルを画面の全高にフィットさせ、通常のズームにしてください。」

一般的な見た目から脱却するために、カスタムブランディングを適用します：

• ブランディング： 特定のブランドカラーに合わせた「オレンジスタイリング」テーマをリクエスト。
• コンポーネントのアップグレード： 外部動画へのシンプルなテキストリンクの代わりに、コンテンツのビジュアルプレビューを提供する「YouTubeサムネイルカード」の作成をエージェントに依頼。