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

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

Claude Desktopをダウンロードする

https://claude.com/download

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

Claude Desktopでフォルダを開く

Claude Desktop Code Local Select the project folder Open Trust Workspace

Higgsfield を Claude に接続する

これで Claude が Web サイト用の画像と動画を作成できるようになります。

Higgsfield MCP のページを開く

https://higgsfield.ai/mcp

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

Claude Desktop Customize Connectors Add custom connector

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

Web サイトをカスタマイズする

いくつかの項目を選びます。最も重要なのは「シグネチャー・スクロールコンセプト」、つまり訪問者がスクロールしたときに何が起こるかです。「Let Claude Recommend」のままにすると、選べるアイデアが 3 つ届きます。

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

いくつかの項目を選んで、プロンプトを 1 つコピーするだけです。Claude がコンセプトを提案し、短いプランを示し、ビジュアルを作成して Web サイトを構築します。

Build a premium cinematic scroll website in this project folder for {{PROJECT_NAME}}. Use the connected Higgsfield MCP for all image and video generation. Do not use Higgsfield's website builder or hosting — build the website here, in this folder. Do not ask me to install creative tools. If you need an ordinary local tool while building, set it up yourself, and only when it is genuinely necessary. PROJECT - Niche: {{NICHE}} - Main website goal: {{PRIMARY_GOAL}} - Main call to action: {{MAIN_CTA}} - Additional instructions: {{ADDITIONAL_INSTRUCTIONS}} CREATIVE DIRECTION - Visual direction: {{VISUAL_DIRECTION}} - Inspiration: {{INSPIRATION}} VISUAL SOURCE {{VISUAL_SOURCE}} MOBILE {{MOBILE_EXPERIENCE}} GROUND RULES - Treat any inspiration I give you — above, or images in an "inspiration" folder in this project — as direction only: mood, pacing, composition and feel. Never copy its text, images, branding, logos, proprietary assets or overall identity. - If this is a real business, property, product, place or service, keep its real identity exactly as it appears in my material. Never invent features, specifications, rooms, facilities, business claims or product capabilities. My own media is the source of truth. - Keep everything focused on this niche and on moving visitors toward the main goal. WORK IN THIS ORDER 1. SIGNATURE SCROLL CONCEPT — what happens as the visitor scrolls: one memorable cinematic idea, not a generic fade, zoom or parallax effect. {{SCROLL_CONCEPT}} 2. PLAN — once the concept is settled, and before any paid Higgsfield generation Show me a short, plain-language plan: - The Signature Scroll Concept - The visual direction - The main cinematic visual and what happens in it as I scroll - The website sections around it - The Higgsfield images and video you will create, and how you will use my own media, if any - The expected Higgsfield usage, and my current balance, if you can check them Keep it short and non-technical. Then stop and wait for my approval. 3. MAIN CINEMATIC VISUAL After I approve, use Higgsfield to create ONE strong main cinematic sequence for the scroll experience — not a series of separate videos — plus still images only where they clearly improve the website. Save everything in this project. Then show me the main visual and ask me: Use It or Change It? If I ask for a change, regenerate only what needs changing and keep everything I already approved. Do not build the rest of the website until I choose Use It. 4. BUILD THE WEBSITE Then build the complete website around the approved visual: - A strong homepage structure for this niche — a real premium website, not just a video demo - The cinematic visual as the centrepiece, moving smoothly with scroll progress - Useful sections with finished, specific copy — no placeholder text - Working navigation and buttons, ending on the main call to action - Fully responsive, with a great experience on phones - Fast loading Choose the implementation yourself and handle the technical details without asking me technical questions. Then run the website locally and give me the preview address.

よくわからない場合はそのままにしてください。

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

例：Ember Coffee

ニッチ

ニッチを選択

ウェブサイトの主な目的

目標を選択

メインの画像素材

選択してください

ビジュアルの方向性

選択してください

シグネチャー・スクロールコンセプト

選択してください

インスピレーション（任意）

Web サイトのリンクや短いメモ

メインの行動喚起

選択してください

モバイル表示

選択してください

追加の指示

任意 — Claude に含めてほしいこと、避けてほしいこと

ファイルを追加する（任意）

自分のメディアを選んだ場合や、参考にしたい画像がある場合のみです。

Project folder reference-assets

実際の写真、動画、ロゴ、ブランド資料。Claude はこれらをあなたのビジネスに関する正しい情報として扱います。

Project folder inspiration

気に入ったスクリーンショットや画像（スタイルの参考のみ）。Claude がそれらをコピーすることはありません。

プロンプトを Claude に送信する

プロジェクトフォルダーの Claude に貼り付けて送信します。

コンセプトを選んでプランを承認する

Claude のコンセプトから 1 つ選び（または自分のコンセプトを使い）、短いプランを読んで承認します。承認するまで有料の生成は行われません。

シネマティックビジュアルを確認する

Claude が Higgsfield でメインビジュアルを作成して見せてくれます。続けるなら「Use It」、変更するなら「Change It」と返信し、何を変えたいか伝えます。

Claude に Web サイトを構築してもらう

承認されたビジュアルを中心に、Claude が Web サイト全体を構築します。少し時間がかかりますが、何もする必要はありません。

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

Web サイトの準備ができたら、Claude が伝えるプレビューアドレスを開きます。

スクロール効果を確認する

上から下までゆっくりスクロールします。ビジュアルが鮮明で、フラッシュ、飛び、不自然なカット、奇妙な変化がなく滑らかに動くか確認します。

テンポと内容を確認する

効果が速すぎたり遅すぎたりしないか、テキストが読みやすいか、内容がビジネスに合っているか、すべてのボタンと最後の CTA が機能するかを確認します。

デスクトップとスマートフォンを確認する

パソコンで全幅表示にして Web サイトを見てから、スマートフォンでも見ます。ビジュアル、テキスト、ボタンがどちらでも収まり、使いやすいことを確認します。

修正を依頼する

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

「プロンプトをカスタマイズ」をクリックし、直したい点を書いてからプロンプトをコピーします。

Apply only these corrections: {{CORRECTIONS}} Keep everything else exactly as I approved it. Do not regenerate approved Higgsfield images or video unless a correction genuinely requires it. If a correction needs a new paid Higgsfield generation, first tell me what needs to be regenerated and wait for my approval. Then run the website locally again and tell me exactly what changed.

修正したい内容

例：スクロール効果を遅くして、スマートフォンで見出しを大きくする

Hostinger のホスティングを入手する

Web サイトが完成しました。次はオンライン上の置き場所が必要です。

Hostinger のホスティングを入手

おすすめプラン：Unlimited（旧Business）

USED IN TUTORIAL

すでに Hostinger のホスティングをお持ちの場合は、下に進んでください。

Hostinger を Claude に接続する

すでに Hostinger を Claude に接続済みの場合は、次のタスクに進んでください。

Claude Desktop で、このプロジェクトの Code セッションのまま操作します。メッセージ欄の横にある + をクリックして、プラグインを開きます。

+ Plugins Add plugin

プラグイン一覧で Hostinger を見つけてインストールします。 Claude が初めて Hostinger を使うときに開くブラウザーのウィンドウで、Hostinger アカウントにログインしてアクセスを許可します。

API トークンや設定ファイルは不要です。ログインするだけです。

Web サイトをデプロイする

同じ Code セッションでこのプロンプトを Claude に送信します。Claude がどの Hostinger の Web サイトを使うか確認し、Web サイトを仕上げて公開します。

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

承認した Web サイトを Hostinger で公開し、公開 URL を受け取ります。

Publish this approved cinematic website to my Hostinger account with the Hostinger tools. BEFORE PUBLISHING - Use the Hostinger tools from the Hostinger plugin. If they are not available, or I am not signed in to Hostinger, stop and tell me how to connect Hostinger. Never ask for my password, and never write a token or key into any file. - Inspect this project first: how it builds, and which folder holds the finished website. - If .hostinger/site.json exists in this project, publish to the website it names. - Otherwise, list my Hostinger websites and ask me which one to use, or offer to set up a new website on a free temporary Hostinger domain. Never guess. Tell me that publishing replaces everything on that website, and only continue once I have confirmed it. BUILD AND PACKAGE - Keep the website and all of its visuals exactly as I approved them. Do not regenerate any Higgsfield images or video, and do not redesign or rewrite anything. - Run the production build. If it fails, fix only the build error — never publish a website that does not build. - Check that the finished website includes every image, video and other media file it uses, and that none of them points to a file elsewhere on my computer or to a temporary link. - Package the CONTENTS of the finished website folder as one archive, with index.html at the top level — never the project source, node_modules, or any .env file. PUBLISH AND CHECK - This website runs in the browser, so deploy the archive to the confirmed website as a static website. If the project genuinely needs a server to run, stop and tell me before publishing. - Open the live address and check that it shows this cinematic website — its real content, main visual and scroll effect — not a placeholder page. - If the deployment fails or the live website is wrong, check the deployment details with the Hostinger tools, fix the cause in this project, build again, and ask me before publishing again. - Save the website's domain in .hostinger/site.json, so later updates go to the same website. Save only the domain — never a token or a key. When it is live, give me the live address and tell me about any change you had to make for deployment.

公開すると、選んだ Hostinger の Web サイトの内容はすべて置き換えられます。新しい Web サイトか、置き換えてもよい Web サイトを使ってください。

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

公開 URL を開き、シネマティックなスクロール効果、画像と動画、内容、すべてのボタン、メインの CTA を、パソコンとスマートフォンの両方で確認します。

ドメインを接続する

任意です。すでにドメインをお持ちなら、Claude が Web サイトに接続してくれます。ここに入力してプロンプトを送信します。

ドメインを接続

「プロンプトをカスタマイズ」をクリックし、ドメインを入力してからプロンプトをコピーします。

Connect my domain {{DOMAIN}} to the website you just published, using the Hostinger tools. - The website is the one saved in .hostinger/site.json. If that file is missing, or you are not sure which domain I mean, ask me — never guess which website or domain to change. - First check that the domain is in my Hostinger account. If it is not, or the connection needs something only I can do, tell me exactly what to do and wait. - Change only what is needed to point the domain at this website. Leave the website itself unchanged, and do not touch any other domain settings, such as email records. - Only give me manual DNS steps if the Hostinger tools genuinely cannot make the change. - If the website's main domain changes, update .hostinger/site.json so later updates still go to this website. When finished, tell me whether the domain is connected, which address to open, and anything I still need to do, such as waiting for the change to take effect everywhere.

ドメイン

例：mybrand.com

今後の更新を公開する

変更内容を書いてこのプロンプトを送信します。Claude は変更を加え、まずローカルのプレビューを見せます。問題なければ「Publish」と返信します。そのときに初めて、Claude が Hostinger の Web サイトに公開します。

更新を公開

「プロンプトをカスタマイズ」をクリックし、変更内容を書いてからプロンプトをコピーします。

Update my website in three stages. Stop after stage 2 and wait for my approval. 1. CHANGE Make only this change: {{CHANGE}} Keep everything else exactly as it is, especially the approved cinematic visuals. Do not regenerate any Higgsfield images or video unless this change genuinely requires it. If it needs a new paid Higgsfield generation, tell me what you would regenerate and wait for my approval first. 2. LOCAL REVIEW - Run the production build and fix any error the change caused. - Run the website locally, give me the preview address, and tell me in one or two lines what you changed. - Then stop. Do not publish anything until I reply Publish. If I ask for adjustments instead, make them and show me the preview again. 3. APPROVED PUBLISH — only after I reply Publish - Publish to the same Hostinger website as before: the domain saved in .hostinger/site.json. If it is missing, ask me which website to use — never guess. - Publish exactly what I approved. Do not make any other change first. - Run the production build again. If it fails, stop and tell me why instead of publishing — never fix it on the way. - Check that the finished website includes every image, video and other media file it uses, then package the CONTENTS of the finished website folder as one archive, with index.html at the top level — never the project source, node_modules, or any .env file. - Deploy it to that website as a static website with the Hostinger tools. - Open the live address, check that it shows the approved change, and give me the live URL.

変更内容

例：見出しを「毎朝焙煎したてのコーヒー」に変更