Claude＋Higgsfield MCPで映画のような3Dサイトを作る

Claude Desktop をダウンロードしてインストールする

Claude Desktopをダウンロードする

https://claude.com/download

空のプロジェクトフォルダーを作成する

Claude Desktop でフォルダーを開く

Claude Desktop Code New Local Select the project folder Open Trust Workspace

Higgsfield MCP を接続する

Higgsfield MCPを開く

https://higgsfield.ai/mcp?tab=claude

Claude Desktop Account Menu Settings Connectors Add Add Custom Connector

Higgsfield MCP の URL を貼り付けてアカウントを接続する Higgsfield の権限を Always Allow に設定する

ウェブサイト用プロンプトをカスタマイズする

下の基本項目を入力してください。詳細オプションは任意です。

映画のようなサイトを作るツール

コンセプトとスタイルを選び、Claude がサイトを構築し Higgsfield でビジュアルを生成するための完全なプロンプトをコピーします。

You are a senior creative director and front-end developer working inside Claude Desktop, with the Higgsfield MCP connector enabled. Build a complete cinematic, scroll-driven website for the project below, in one pass. Work directly inside the local project folder that is already open and create every file there. Finish the whole site — design, copy, and generated visuals — rather than a rough draft I have to repair afterwards. PROJECT Brand or project name: {{BRAND_NAME}} Product or niche: {{PRODUCT_NICHE}} Main call-to-action: {{PRIMARY_CTA}} Do not reproduce a real company's logo, identity, imagery, copy, or layout. If the name resembles an existing brand, create an original interpretation of it instead. ART DIRECTION {{VISUAL_STYLE}} Commit to that direction and hold it everywhere: one color palette, one lighting language, one typographic system, one treatment for every image and video. The finished page should look like a single art-directed shoot, not a set of unrelated pictures. Treat this link as broad design inspiration only — study its layout rhythm, pacing, composition, and interaction feel, and never copy its text, images, brand, or main subject: {{REFERENCE_URL}} VISUAL SOURCE {{VISUAL_SOURCE}} PAGE STRUCTURE {{SECTIONS_PRESET}} Open with a cinematic hero that lands the product within the first screen, keep one continuous visual story running as the visitor scrolls, and close on the call-to-action and footer. Every section must earn its place: no filler blocks, and no two near-identical layouts in a row. VISUAL ASSETS — GENERATE THEM WITH HIGGSFIELD Use the Higgsfield MCP connector yourself to generate every image and video the design calls for, before you consider the site finished. Never ship placeholder images, grey boxes, hotlinked stock photos, or an empty image tag. {{ASSET_MODE}} Write a specific, cinematic prompt for each asset — camera angle, lens feel, lighting, materials, background, mood — always describing the main subject exactly as established in VISUAL SOURCE, and carry the same palette through all of them. Any motion asset must show that same subject: never redesign it between the images and the video. Save the generated files inside the project folder and reference them with local relative paths. Generate the images with the {{IMAGE_MODEL}} model. If you generate any motion asset, use the {{VIDEO_MODEL}} model for it. MOTION {{ANIMATION_LEVEL}} Animate with transform and opacity so scrolling stays smooth, honour prefers-reduced-motion, and never let an animation block reading or tapping. COPY {{COPY_TONE}} Write finished, specific copy for every section: hero headline and subheadline, section headings, body text, feature or benefit lines, and button labels. Name concrete details of the product instead of generic marketing filler. No lorem ipsum, no TODO, no empty sentences. Use the main call-to-action above as the wording of the primary button, in the hero and again near the end of the page. QUALITY BAR - Fully responsive: check desktop, tablet, and mobile, including the hero, the type scale, and any full-bleed media. - Every link, button, and navigation item works, and tap targets are comfortable on a phone. - Media is optimized: correctly sized, lazy-loaded below the fold, with a poster frame on video and no sound playing automatically. - Basic SEO: honest page title, meta description, a single H1, descriptive section headings, alt text on every image, and Open Graph title, description, and image. No keyword stuffing. LOCAL PROJECT Keep everything static and self-contained inside the open project folder: index.html at its root, CSS, JavaScript, images, and videos in clearly named folders, relative paths throughout, and any library loaded from a CDN. No backend, no build step, no npm install. FINAL CHECK Before you tell me it is done, confirm the main subject looks like the same product in every image and video, no section is empty or unfinished, and every button and link works at desktop and mobile widths. Then tell me how to open it in my browser and list the assets you generated.

ビジュアル、ページレイアウト、モーション、AI モデルの任意設定です。よく分からない場合はそのままにしてください。

Claudeを開く

ブランド名またはプロジェクト名

例：AURION X

商品・ジャンル

選択してください

メインの画像素材

選択してください

ビジュアルのテイスト

選択してください

メインの行動喚起

選択してください

ビジュアル生成のレベル

選択してください

ページ構成

選択してください

アニメーションの強さ

選択してください

文章のトーン

選択してください

画像モデル（任意）

選択してください

動画モデル（任意）

選択してください

参考リンク（任意）

任意 — 見た目の参考にするだけで、コピーはしません

プロンプトを送信してウェブサイトをビルドする

参考画像を選んだ場合は、プロンプトを送る前に添付してください。

最初のローカルプレビューを開く

ウェブサイトを確認し、必要な変更を加える

デスクトップとモバイルのレイアウトを確認し、変更したい点を説明するか、必要に応じてスクリーンショットを添付します。

サイトを公開する準備をする

サイトをデプロイに向けて準備する

承認済みのデザインを変えずに、デプロイ可能な最終版を作成します。

Prepare the current website for deployment without redesigning it or changing the visual direction. Make sure every required file is included in the local project. Download and store any required Higgsfield-generated images or videos locally inside the project, and replace temporary or remote media URLs with reliable relative local paths. Optimize the final images and videos where possible without noticeably reducing their quality. Remove unnecessary development files from the final deployment version. Create a folder named "deploy" containing the complete static website ready to upload to a web host. The deploy folder must have index.html directly at its root, along with every required asset, stylesheet, script, font reference, image, and video. Verify that the website works correctly from the deploy folder, including the layout, navigation, animations, responsive behavior, images, and videos. Do not redesign the website. Only prepare, optimize, and package the approved version for publishing.

Claudeを開く

Hostingerを開く

Hostingerを開く

Hostingerのホスティングページを開いて、利用できるプランと各プランの内容を確認します。

USED IN TUTORIAL

https://www.hostg.xyz/SHJjW

ホスティングプランを選んでアカウントを作成する

ウェブサイトの移行を設定する

Hostinger Migrate an Existing Site Upload Backup Files

使用したいドメインを選択、接続、または取得します。

ウェブサイトの ZIP をアップロードする

Project folder deploy

deploy フォルダーを開き、その中身をすべて選択し、選択したファイルを ZIP アーカイブに圧縮して、その ZIP をアップロードします。

公開中のウェブサイトを開く

選択したドメインを開き、ウェブサイト・ビジュアル・アニメーション・レイアウトがオンラインで正しく動作することを確認します。

完成したウェブサイトは、ポートフォリオのデモ、クライアント提案、プレミアムなランディングページの提案として活用できます。

提供メニューのまとめ方

ポートフォリオ用デモ

AI で作れるシネマティックな体験の実績として、公開中のサイトを見せましょう。

プレミアムなランディングページ

シネマティックなローンチページ、キャンペーンサイト、ビジュアル重視のブランド体験を提供できます。

ウェブサイトのリデザイン

現在のウェブサイトがどれだけモダンで高級感のある見た目になりうるかを企業に示せます。

クライアント提案用デモ

AI ウェブサイト制作サービスを提案する際に、公開中のサイトを見せましょう。

これは、ビジュアルの強さが体感価値を高めるニッチで特に効果を発揮します。