Webflow ページ構築は何をしますか？

概要

Webflow MCP の書き込みツールは、ユーザーが要求したものとは異なる動作を静かに実行しても成功を報告します。クラス名は変更され、画像は何にもバインドされず、スタイルは間違ったブレークポイントに配置されます。すべての書き込みは読み戻して確認する必要があります。

中核原則: 成功応答は証拠ではありません。要素ツリーが証拠です。

CMS アイテム、ブログ投稿、ページ SEO については、代わりに CMS に特化した公開スキルを使用してください。このスキルは Designer サーフェス（要素、スタイル、アセット、カスタムコード）を対象としています。

鉄則

現在の会話で明示的な承認がない限り、本番環境に公開しないでください。

サイト公開は、すべてのステージングされた Designer の変更をすべてのページに出荷します。これには、あなたが行っていない作業や、本番環境でまだ到達可能な非公開ページも含まれます。「以前に公開するように言った」というのはタスクをまたいで引き継がれません。再度確認してください。

ステージングは別物であり、作業をレビューするための方法です。ステージングサブドメインのみ（カスタムドメインリストが空）への公開は、修正後の通常のステップであり、その後にステージングでの QA が続きます。プライマリの本番ドメインのみに公開し、サイトのすべてのドメインには決して公開せず、承認を得た後にのみ公開してください。

9つの落とし穴

1. `whtml_builder` が競合するクラスをリネームする

hp2-proof を要求しても、その名前のスタイルが存在する場合、hp2-proof-1 が返されます。hp2-proof-n を要求すると hp2-proof-n-1 が返されます。連鎖的な競合により hp2-proof-link-1-2 が生成されます。ラッパー div にはクラスがまったく割り当てられないことがよくあります。

エラーは発生しません。あなたの head CSS は存在しないクラスをターゲットにすることになり、登録されたスクリプト内の querySelectorAll('.hp2-proof') はゼロ個の要素にマッチするため、スクロールアニメーションは決して実行されません。

挿入後は必ず query_elements でスタイルを確認し、実際の styleNames を読み取り、その値に対して CSS とスクリプトセレクターを記述してください。クラスのないラッパーは .parent-class > div として到達可能です。

2. `html` 内のクラスは、すでに存在する場合にのみ適用される

html パラメーターで参照されるクラスは、そのスタイルがサイトにすでに存在するか、同じ呼び出しの css パラメーターで定義されている場合にのみバインドされます。そうでない場合、要素はクラスなしで挿入され、それでも成功を報告します。使用するすべてのクラスを css で定義してください。

ビルダーは子孫セレクターもサポートしていません。単一クラスとコンボクラス（.a.b）を使用してください。@media と clamp() は問題ありません。

3. `whtml_builder` には単一のルート要素が必要

トップレベルに複数の兄弟要素があると、失敗するか部分的にしか挿入されません。1つのコンテナーでラップしてください。

4. マークアップとして挿入された画像はバインドされない

html 内の <img> は、「アセットライブラリに存在しません」という partial_success を返します。要素を挿入し、set_image_asset とアセット ID を使用してバインドしてください。

5. `update_style` は `breakpoint` ではなく `breakpoint_id` でスコープされる

breakpoint キーは静かに無視され、書き込みはベースブレークポイントに適用され、デスクトップを上書きします。応答に breakpoints キーが表示されるのは、スコープされた書き込みが機能した場合のみです。breakpoint_id を明示的に渡し、読み戻して確認してください。

6. `set_style` は追加ではなく置換する

set_style は既存のすべてのスタイルを削除し、渡したものだけを適用します。クラスを追加するには、最初に現在の styleNames を読み取り、完全なリストを渡してください。

7. `set_page_freeform_code` はブロック全体を置換する

ページの head およびフッターのカスタムコードは、data_scripts_tool に存在します（ページツールやスタイルツールではありません）。get_page_freeform_code および set_page_freeform_code を location: "head" とともに使用します。

書き込みはオールオアナッシングです。追加機能はありません。常に現在のブロックを get し、文字列を変更し、全体を set し直してください。断片を書き込むと、head にあった他のすべてのものが静かに削除されます。また、一部のプランでは <script> タグを拒否するため、スクリプトは埋め込み（下記参照）に配置されます。

8. API 経由で作成されたページはベース CSS を継承しない

サイトがベース CSS コンポーネントでルートフォントサイズを設定している場合（例：html{font-size:.625rem} で 1rem が 10px になる）、API 経由で作成されたページはそのコンポーネントを取得しません。すべてが Designer および公開時に 1.6 倍大きくレンダリングされます。すべての新しいページの最初の要素はベース CSS コンポーネントです。スタイルを設定する前に確認してください。

9. アセット作成の出力が消え、バインディングにレート制限がかかる

特定のサイズ未満の create_asset 出力は永続化されないため、22 個のアセットバッチはインラインで出力され、すぐに書き写す必要があります。set_image_asset は読み取りと書き込みをそれぞれ 1 回ずつ行います。429 エラーが発生するまでに約 10 バインディング/分です。10 個ずつバッチでバインドし、間に 1 分間隔を空け、名前、アセット ID、日付、署名行のテーブルを保持してください。

カスタムコードとスクリプト

ページスクリプト API は一部のアカウントでブロックされています。ページで JavaScript を実行するには:

register_inline_script（最大 2000 文字）または register_hosted_script
返されたホスト型 URL を、data_element_settings_tool で code キーを使用して編集した HtmlEmbed 要素 内の <script src> から参照します

ページをセクションごとに 1 つの埋め込みと、アニメーションライブラリとスクリプトをロードするローダー埋め込みで構成します。登録されたスクリプトを変更するのではなく、表示名をバージョン管理してください（sections.v17）。update_registered_script はインラインスクリプトでは失敗し、バージョン管理された名前は埋め込み内の 1 つの URL を編集することでロールバックできます。ページ CSS も同様にバージョン管理してホストしてください。

ドラフトのプレビュー

ドラフトページは API を通じて公開済みに切り替えることができず、ページ分岐は Enterprise 機能です。そのため、ドラフトは ローカルレプリカ（ライブナビゲーションとフッターマークアップ、サイト CSS、ベース CSS ルール、CDN からのアニメーションライブラリ）に対して QA を実施します。

非表示タブまたはヘッドレスペインでは、アニメーションのティッカーが一時停止します。強制的に実行するには:

gsap.ticker.lagSmoothing(0); gsap.ticker.tick();

非表示ペインのスクリーンショットは、フォールドの下が空白で表示されます。スクリーンショットのためにセクションを表示範囲に入れるには body を変換し、実際の scrollTo の後に ScrollTrigger.update() を呼び出してください。

アセット

3 つのステップがあり、3 つ目を見逃す人が多いです:

create_asset をファイル名と生バイトの MD5（32 文字の小文字 16 進数）で実行
返された uploadUrl にバイトを multipart/form-data として POST し、uploadDetails のすべてのフィールドとファイルを file の下に追加します。201 を期待します。
同じ名前とハッシュでもう一度 create_asset を実行して確定します

CDN URL は https://cdn.prod.website-files.com/<siteId>/<assetId>_<filename> です。動作する curl レシピについては asset-upload.md を参照してください。

動画は同じフォーム（video/mp4、video/webm）でアップロードされ、autoplay muted loop playsinline とポスター画像を備えた埋め込みから参照されます。ホームページの動画は帯域幅を消費するため、小さなループと軽量ファイルをスマートフォンに提供してください。

レート制限

読み取り（query_elements、get_all_elements、get_settings）はアセットとコレクションのエンドポイントを大量に使用し、大量のアセット作業の後に 429 を返し始めます。書き込みは機能し続けます。query_elements が 429 を返す場合、深度 2 の get_all_elements は通常成功します。

バッチ読み取り: 1 回の query_elements 呼び出しで複数のクエリを実行できます。

検証チェックリスト

すべてのビルドセッションの後にこれを実行し、意図ではなく結果を報告してください。

query_elements で、導入したすべてのクラスのスタイル名を確認。実際の名前が CSS とスクリプトのターゲットと一致すること
挿入されたすべての画像の設定に assetId があること
ブレークポイントスタイルが意図したブレークポイントで読み戻されること
head/footer ブロックに、編集前のすべての内容がまだ含まれていること
埋め込み内の登録済みスクリプト URL が、今登録したバージョンと一致すること
アセット CDN URL が 200 で期待されるコンテンツタイプとサイズを返すこと
ベース CSS コンポーネントがページの最初の要素であること
ステージングされたページが構築したものと一致すること: ステージング HTML を取得して確認し、推測しないこと

危険信号

「ツールが成功を返したのでクラスが適用されている」
「今 CSS を書いて、後でクラス名を確認する」
「小さな変更なので、head ブロックを直接書く」
「ユーザーがこのプロジェクトの前半で公開を承認した」
「一貫性を保つためにすべてのドメインに公開する」

これらはすべて: 続行する前にツリーを読み戻してください。

Webflow ページ構築