AI でシネマティックなスクロールサイトを作る

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

Claude Desktopをダウンロードする

https://claude.com/download

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

Claude Desktop でフォルダーを開く

Claude Desktop Code Local Select the project folder Open Trust Workspace

Scroll World スキルをインストールする

Scroll World

/plugin marketplace add oso95/scroll-world /plugin install scroll-world@scroll-world

Higgsfield を Claude に接続する

Higgsfield MCP のページを開く

https://higgsfield.ai/mcp

コネクタの URL をコピーします。

Claude Desktop Customize Connectors Add custom connector

名前を「Higgsfield」にして URL を貼り付け、接続してログインします。

Hostinger を開いてアカウントを準備する

Hostingerを開く

Claude から直接デプロイできるようにホスティングを設定します。

https://www.hostg.xyz/SHJoR

Hostinger を Claude Code に接続する

このコマンドを Terminal に貼り付けて Enter キーを押します。

claude mcp add hostinger -- npx -y hostinger-api-mcp

ブラウザーでのログインを完了する

Claude Code に戻り、Hostinger の接続を使用します。ブラウザーが開いたらログインしてアクセスを承認します。

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

シネマティックなスクロールサイトをビルドする

Use the installed Scroll World skill to plan and build a cinematic scroll-controlled website for {{PROJECT_NAME}}. Use the connected Higgsfield MCP for visual generation. Before beginning the production workflow, inspect the installed Scroll World skill and handle only the local dependencies that are genuinely required for this project. Do not ask the user to install optional tools or duplicate Higgsfield integrations. If a local CLI is absolutely required for a specific Scroll World operation that cannot be completed through the connected MCP, explain the reason before installing or using it. PROJECT - Niche: {{NICHE}} - Main visitor goal: {{PRIMARY_GOAL}} - Context or location: {{PROJECT_CONTEXT}} - Visual direction: {{VISUAL_DIRECTION}} - Number of main scenes: {{SCENE_COUNT}} - Scene journey: {{SCENE_JOURNEY}} - Main call to action: {{MAIN_CTA}} - Additional instructions: {{ADDITIONAL_INSTRUCTIONS}} VISUAL SOURCE {{VISUAL_SOURCE}} MOBILE {{MOBILE_STRATEGY}} Everything you decide — the scene ideas, the content sections, the wording, and the call to action — must fit this niche and move the visitor toward that one goal. Keep the real identity of any property, product, architecture, or brand exactly as it appears in the material I give you, and never present an invented room, feature, specification, or business claim as factual. FIRST, PRODUCE A PRODUCTION PLAN — do not generate any paid asset yet. Cover: 1. The art direction, and how you will hold visual consistency across every scene. 2. The ordered scene journey and the camera movement for each scene. 3. The transition strategy between neighbouring scenes. 4. The desktop assets, and the mobile assets if a dedicated sequence is required. 5. The estimated Higgsfield generation usage and cost. 6. The website content and the call to action. Stop there and wait for my explicit approval. AFTER I APPROVE Generate the scene images and camera clips through the authenticated Higgsfield account connected to Claude, and save or download every generated asset into the project as the website workflow requires. Extract or create the boundary frames and the connectors between neighbouring scenes, then integrate the finished sequence into the Scroll World website engine. Build the website around it with content this niche actually needs, working navigation and buttons, and a final call to action that matches the goal above. Then run the site locally and give me the preview address.

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

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

ニッチ

ビジネス・製品・ポートフォリオのカテゴリ

ウェブサイトの主な目的

訪問者に取ってほしい主なアクション

プロジェクトの背景

場所または重要な背景

メインの画像素材

選択してください

ビジュアルの方向性

希望するアートとデザインの方向性

メインシーンの数

メインとなるビジュアルシーンの数

シーンの流れ

選択してください

モバイル向けビジュアル戦略

選択してください

メインの行動喚起

最後のコールトゥアクションの文言

追加の指示

任意 — スタイルや内容に関する制約があれば記載

必要に応じて参考素材を追加する

自分のメディアを使う場合は、プロンプトを送信する前にここで追加します。

Project folder reference-assets

画像、動画、ロゴ、レンダリング、ブランド資料を追加します。

生成されたプロンプトを Claude Code に送信する

制作プランを確認して承認する

シーンの順序、ビジュアルの一貫性、カメラの流れ、モバイル戦略、想定生成コストを確認し、プランを承認します。

ローカルプレビューを開く

ビルドが完了したら、Claude が提示するプレビュー用アドレスを開きます。

シーンの切り替わりを確認する

フラッシュ、飛び、急な方向転換、一貫性のないフレーム、目に見えるカットがないか確認します。

テンポと内容を確認する

スクロール速度、テキストの配置、コンテンツセクション、ボタン、最後のコールトゥアクションを確認します。

モバイルレイアウトをテストする

ビジュアル・テキスト・ボタンが狭い画面でも正しく表示されることを確認します。

最終的な修正を依頼する

特定箇所の修正を依頼する

Apply only these corrections: [YOUR_CORRECTIONS] Change nothing else. Keep every unrelated scene, approved visual asset, transition, and content section exactly as it is, including anything I did not mention, and keep the responsive behaviour unchanged. Then run the website locally again and tell me precisely what changed.

ウェブサイトを Hostinger にデプロイする

ウェブサイトを Hostinger にデプロイ

Deploy this project to my connected Hostinger account. Preserve the approved cinematic experience exactly as it is, and do not regenerate any approved visual asset. First confirm that every required asset exists and that the desktop and mobile asset references resolve correctly. Then optimize the site for production, run the production build, and inspect and fix any build error that would block deployment. Choose the deployment method that fits this project through the connected Hostinger account, and publish to a temporary live URL first when that is supported. Report the build result, the deployment result, and the live URL.

公開中のウェブサイトを確認する

シネマティックな流れ、コンテンツ、ボタン、コールトゥアクション、モバイルレイアウトを確認します。

最終的なドメインを接続する

ウェブサイトが承認されたら、選択したドメインを Hostinger 経由で接続するよう Claude に依頼します。

今後の更新を公開する

変更内容を説明し、ウェブサイトを再ビルドして再公開するよう Claude に依頼します。