カスタムの3Dサイト制作は、AIにコードを書かせるだけの仕事ではありません。ある代理店サイトの制作では、Claude Codeがインタラクティブなページの構築を支援し、Higgsfieldがクライアントの既存写真をワイドスクリーンの動きのある映像に変えました。誰に届けるサイトなのか、ビジュアルに何を込めるのか、デスクトップ以外でも機能するのか。成果物に目的を与えるこれらの判断は、人の手に委ねられていました。
画面を生成する前に、要件を定める
このプロジェクトには、AI変革サービスの導入を検討する経営者、スポンサー候補、AI代理店の経営者やコンサルタントという3つの想定対象がありました。目を引くトップページを求めるだけの場合よりも、こうした対象を定めることで、コーディングエージェントに有用な方向性を示せました。このサービスは、企業のAI変革に要する7カ月を暦日で7日間に圧縮すると打ち出していたため、サイトには演出を見せるだけでなく、具体的なサービス内容を説明する役割も必要でした。
Claude Codeに渡す実用的な最初の要件には、想定する顧客像、価値提案、ブランドの語り口が含まれます。次に決めるのはコンセプトです。ビジュアルデザインと事業を結びつけるために、訪問者に何を見せるべきでしょうか。このサイトでは、別々の業務データが知的な中核に集まる様子を、脈動する3Dのオーブで表しました。レトロ調の冒頭ページから、暗い色調のインタラクティブな画面へと溶け込むように切り替わります。オーブはカーソルの動きに反応し、業務ツールに対応する浮遊したノードに囲まれていました。
このコンセプトはコーディング作業に方向性を与えましたが、同時にトレードオフも生みました。凝った冒頭の切り替え演出は訪問者に印象を残す一方、すぐに説明を読みたい人を待たせるかもしれません。その演出が想定対象の役に立つかどうかは、人が確認して判断する必要があります。演出を生成できたことだけでは、答えは出ません。
案件に即した素材を使う
このサイトでは、一般的なストック画像ではなく、クライアント案件の写真を使いました。プロジェクトによっては、横長の事例紹介カードに適した映像がありませんでした。Claude Codeから外部ツールを呼び出す仕組みであるModel Context Protocol（MCP）接続を通じて、Higgsfieldは既存の9:16の縦長写真を16:9のワイドスクリーン画像に拡張しました。このアウトペインティングでは、写真の元の縁の外側に画像を描き足します。拡張した静止画は、その後、短いループ動画の入力素材になりました。
▲ 縦長写真のワイド画面化
モデルの選択にも、もう一段階の確認が必要でした。同じ元画像をCinema Studio 3.0、Kling 3.0 Pro、MiniMax HQ、Seedance 2.5、Veo 3.1 Ultraで試しました。このサイトでは、カラーグレーディングと、よりすっきりした動きを理由にCinema Studio 3.0を選びました。ほかの生成結果では、動きが過剰になったり、元画像がゆがんだりする可能性がありました。最初に生成されたクリップをそのまま公開できると考えず、元の素材と見比べることが重要です。
文章にも同じ基準が当てはまります。ありきたりなカード、ストック画像、AIが生成したままの文章を使うと、凝ったサイトでもほかと見分けがつかなくなりかねません。Claude Codeは素早く下書きや実装ができますが、サイトに掲げる主張や事例の説明は、想定する購入者に向けて書き起こすか、大幅に編集する必要があります。
参考例を画面に落とし込み、テストする
画面設計の参考として、ウェブサイトのパターンにはMobbin、コンポーネントには21st.devを使いました。どちらもMCP接続を通じてClaude Codeから利用でき、コーディング作業の中でレイアウトやコンポーネントのコードを検索できました。球体のデザイン、カードのレイアウト、ナビゲーションの表現について複数の案を生成し、その中から選びました。インタラクティブな3Dグラフィックスを描画するJavaScriptライブラリのThree.jsが、オーブのリアルタイムな動きとカメラの挙動を支えました。
これらの要素は、トップページの目玉となるビジュアルにとどまらず、サイト全体で活用されました。サイトではオーブに加えて、開くとメディアコンテンツとプロジェクトの概要が表示されるクライアント事例カードを設けました。別の手法紹介セクションでは、監査、データの一元化、ワークスペースの構築、カスタムアプリの開発、AIエージェントというサービスの5つの要素を説明しました。繰り返しフィードバックを反映し、各セクションのアニメーションや切り替えを改善しました。
ここで役割分担が明確になります。AIツールは案を作り、選ばれた操作方法を実装できます。それでも、ナビゲーションが分かりやすいか、事例の説明が十分か、動きがサービス内容への注意をそらさないかは、人が判断しなければなりません。デスクトップでの確認を終えても、制作は完了しませんでした。複雑な3D演出には、モバイル対応に特化した確認と調整が必要でした。スマートフォンでは、レイアウトと性能に別の課題があったためです。
公開と計測も制作工程に含める
視覚表現に力を入れたサイトでは、演出が次の行動を見えにくくすると、従来のフォーム経由のコンバージョンを逃しかねません。このプロジェクトでは、フォーム送信以外の関心も測るため、訪問者識別プラットフォームのOspryを導入しました。Ospryは、米国内の匿名訪問者の約40％を特定できると主張しています。特定できたプロフィールのうち、正確で検証可能な照合結果の割合は80～85％と推定されています。これらの数字はプラットフォームの主張と推定値であり、あらゆるサイトや地域で保証される成果ではありません。
Claude Codeは、ウェブページを利用可能なテキストとして取得するツールのFirecrawlを使い、Ospryの導入ドキュメントを読み込みました。その後、必要なトラッキング用スクリプトをサイトのリポジトリに追加しました。公開済みサイトから訪問イベントが届いていることを、ダッシュボードで確認しました。この検証は重要です。生成した連携コードは、公開先で動作して初めて役に立ちます。
▲ 訪問者の識別と適合度評価
サイトへの流入が始まり、モバイル向けの調整を終えた後、ダッシュボードでは24時間以内に訪問企業194社が特定されました。企業情報、セッションの活動状況、適合度スコアも表示されました。理想的な顧客像を意味するIdeal Customer Profile（ICP）のスコアは、企業が設定した顧客条件にどの程度合致するかを示します。このサイトでは、自動的に働きかける前の推奨基準として、100点満点中70点を使いました。Ospryで特定したデータは、フォローアップのために顧客データベースやExpandiのようなツールにも送れます。
訪問者の識別には、別の判断も伴います。米国からのトラフィックでより効果的とされており、利用にあたっては適用されるプライバシー要件を十分に確認する必要があります。関連する企業の属性や役職で絞り込めば、働きかける対象を定めやすくなります。訪問者を特定できたことも、適合度スコアが高いことも、その人に購入意思がある証拠にはなりません。
次の制作に生かすこと
まず対象者とサービス内容を定め、それらの説明に役立つビジュアルのコンセプトを選びます。Claude Codeで選択肢を探って実装し、手元の素材が必要な形式に合わないときは、Higgsfieldで案件に関係する元画像を加工します。生成した映像を比較し、文章を編集し、スマートフォンで操作を試し、公開後には計測ツールが動作していることを確かめます。AIは制作と修正のサイクルを短縮できます。それでも、役に立つサイトの基準は、各段階での人の判断にかかっています。