AIでWebサイトを作るとき、最も埋めにくいのはブランドに合わせた動画かもしれません。Claude Codeはフロントエンド全体を一度に書き上げられますが、動画を自ら生成することはできないため、レイアウト内の動画枠は空のまま残ります。Claude CodeをHiggsfield MCPと動画生成モデルSeedance 2.5につなげば、この穴が埋まります。一つの会話の中で、ブランド映像の生成、確認、修正を済ませ、その映像を軸にサイトを組み立てられます。以下では、セットアップ、結果を左右する4部構成のプロンプト、2つの制作例を紹介します。開発者もデザインソフトも撮影クルーも必要ありません。
Claude Codeに動画用コネクターが必要な理由
Claude CodeはUIコンポーネントの生成やスタイル定義の記述を得意としますが、メディア生成の機能は備えていません。そのままでは、別のブラウザタブで動画ツールを開き、クリップをダウンロードし、手作業でプロジェクトに埋め込む作業を繰り返すことになります。
MCP（Model Context Protocol）は、AIモデルが外部ツールを呼び出せるようにする標準規格です。HiggsfieldをMCPで接続すると、Claudeが動画・画像モデルを直接呼び出し、完成したクリップをチャット内に表示したうえで、サイトのコードに配置します。接続は以後のプロジェクトにも引き継がれるため、制作の流れ全体を自然言語のプロンプトだけで進められます。
設定の手順は次のとおりです。
- Claudeのデスクトップアプリを開き、Connectorsに進みます。
- カスタムコネクターを追加し、名前をHiggsfieldにします。
- Higgsfieldが提供するリモートMCPのURLを貼り付け、Addをクリックします。
- ブラウザに開いたウィンドウで、ClaudeがHiggsfieldアカウントにアクセスすることを許可します。
- Claudeの設定でコネクターが接続済みと表示されれば、Seedance 2.5による動画生成、4Kアップスケール、画像生成などのツールが使えるようになります。
Seedance 2.5で加わったこと
Webサイト用の映像づくりにSeedance 2.5が向いている理由は、次の3つの機能にあります。
| 機能 | 内容 | Webサイトにとっての意味 |
|---|---|---|
| 領域編集 | 崩れたロゴやゆがんだ文字など、問題のある領域だけを選んで修復する | 新たなエラーを招きかねない全体の再生成が不要になり、生成クレジットも節約できる |
| 参照の一貫性 | 1枚の参照画像から、カメラアングルや照明が変わっても製品やキャラクターの見た目を保つ | ヒーローバナー、製品カード、機能紹介クリップの見た目がそろい、ちぐはぐにならない |
| 長いクリップ | 1回で最大30秒を生成（Seedance 2.0は15秒） | 長いスクロール用シーケンスを、クリップをつなぎ合わせずに1回の生成で作れる |
動きやテクスチャの細部、照明のリアルさも優れており、Seedance 2.5は現在利用できる動画モデルの中でも最高水準の画質を持つとみられます。ただし、ネイティブの出力解像度は720pという制約があります。高級感のあるサイトに使うなら、高精細ディスプレイでも鮮明に見えるよう、Claudeにクリップを4Kへアップスケールさせます。
4ブロックのプロンプト
結果の大部分を決めるのはプロンプトの構成です。サイト全体への指示を次の4つのブロックに分けます。
| ブロック | 書く内容 | 例 |
|---|---|---|
| Brand | ブランドのアイデンティティと美的な方向性を1行で | クールなスチール、温かみのあるゴールド、エディトリアル調のセリフ書体 |
| Site | ページを構成するセクションの一覧 | Hero、Craft、Film、Specs、Waitlist |
| Films | クリップごとのカメラの動き、レンズの焦点距離、照明 | 35mmの焦点距離 |
| Greenlight | 映像を確認して承認するまでサイトのコードを書かないというルール | 承認前のコード作成は禁止 |
▲ 4ブロックのプロンプト構成
特に重要なのはFilmsとGreenlightのブロックです。AI動画生成の失敗の多くは、「高級感」のような雰囲気で指示し、具体的な撮影用語を使わないことに起因しているようです。カメラがどう動くか、レンズの焦点距離はいくつか、光がどこから当たるかを書けば、意図にずっと近い映像が得られます。
Greenlightルールがないと、Claudeは確認していない映像や幻覚（ハルシネーション）で生まれた映像をそのままサイトのコードに組み込むことが多く、無駄な手戻りにつながります。承認を絶対の関門にすれば、映像とレイアウトの両方を自分の管理下に置けます。
制作例1：スクロールに合わせて分解される腕時計サイト
1つ目の例は、スイスのミニマリズムを打ち出した架空の高級時計ブランドのサイトです。ブランドのアイデンティティ、スタイルガイドライン、サイト用プロンプトは、Claude自身が4ブロック形式で考えました。このページはスクロールテリング、つまり訪問者のスクロールに合わせて場面ごとに物語が展開するサイトで、ページが動くにつれて時計のムーブメントが分解されていきます。製品説明には、231個の部品、チタンケース、178カ所の手仕上げの面取りを備えた時計と書かれています。
制作は次のように進みました。
- 2本の映像を依頼します。1本は時計ケースの外観をじっくり見せるもの、もう1本は歯車と面取りが見えるようムーブメントを分解図で見せるものです。Seedance 2.5は一度に最大30秒を生成できるため、連続したスクロール用シーケンスがそれぞれ1回で仕上がります。
- Claudeは完成したクリップをチャットに表示し、ソースコードに手を付ける前に確認を求めます。
- 2本目のクリップの終盤で、秒針がわずかにカクつきます。クリップ全体を作り直すのではなく、その箇所だけを直すようClaudeに頼みます。
- ClaudeはSeedance 2.5の領域編集で秒針の動きを修復します。クリップの残りはそのまま保たれ、クレジットも節約できます。
- 修正した映像を承認すると、Claudeはスクロール位置に連動する高解像度の分解図を組み込み、スクロールテリングのページを完成させます。
制作例2：リアルタイム3Dモデルを備えた革製ケースのサイト
2つ目の例は、パリで受注生産する架空の革製スマートフォンケースブランドです。ここでもClaudeが、ブランドコンセプト、「宝石箱」を意味するフランス語の名前、サイト全体のプロンプトを作りました。
腕時計サイトが映像中心だったのに対し、こちらはClaudeがコードで直接書いたリアルタイムの3Dケースモデルが主役です。訪問者がスクロールすると、ケースが回転し、宙返りします。Seedance 2.5は革のシボとステッチの縁をとらえたマクロ映像を生成し、Claudeがそれを4Kにアップスケールしてループ動画として埋め込みます。
▲ リアルタイム3Dモデルとカスタマイザー
ページの最下部にはカスタマイザーがあります。訪問者がカラー、金具の仕上げ、裏地のスタイル、型押しのモノグラムを選ぶと、たとえば€158から€177のように価格がその場で更新され、横には実際に動く予約ボタンがあります。ページ中ほどで3Dモデルが本文の一部を隠してしまったときも、余白を調整するよう一度頼むだけで、Claudeがレイアウトを修正しました。
サイトを高級に見せる細部
- 主要な書体は1つにし、比例した4段階のサイズで使います。
- 余白をたっぷり取ります。
- 720pのクリップは4Kにアップスケールするよう、Claudeに指示します。
- 小さな欠陥は、クリップ全体を作り直さず領域編集で直します。
- 4ブロックのプロンプトは、任意の対話型AIモデルを使って自社の製品やブランドに合わせて調整できます。
要点と始め方
Higgsfield MCPを接続すれば、Claude Codeはサイトのコード作成から動画生成、4Kアップスケール、レスポンシブなレイアウト調整まで、素材づくりの流れ全体を一カ所で担えます。ツールよりも大切なのは作業の順序です。ブランド、構成、具体的なカメラ指示を分けて書き、映像を確認して承認するまではコードを一切書かせないことです。
自分で試すには、次の順に進めます。
- ClaudeのデスクトップアプリにHiggsfieldをカスタムコネクターとして追加し、アカウントを承認します。
- 自分の製品やブランドに合わせて、Brand、Site、Films、Greenlightのプロンプトを書きます。
- Filmsブロックには、カメラの動き、焦点距離、照明の角度を具体的に書きます。
- 生成されたクリップを確認し、欠陥は領域編集で直してから、初めてClaudeにサイトのコードを書かせます。