カスタム HTML ページ

概要

カスタム HTML ページとは、本文全体をあなた自身が用意した HTML で構成するファネルステップです。完成した自己完結型の HTML ドキュメントを ClickFunnels に貼り付けると、ClickFunnels がそれをファネルのドメイン上のパスでホストし、貼り付けたとおりに配信します — 書き換えも、挿入も、テンプレート化も一切行われません。

動作は他のファネルステップと変わりません。名前と URL パスを持ち、ファネルビルダーに表示され、複製・スプリットテスト・分岐が可能です。

一方で、これはエディタページではありません。カスタム HTML ページにはドラッグ＆ドロップの編集画面も、セクションや行も、テンプレートもありません。コンテンツの面は HTML ただ 1 つです — 貼り付ければ公開され、差し替えれば更新されます。

どんなときに使うか

カスタム HTML ページは、これまで存在した 2 つのホスティングモデルの間を埋めるものです。

こんな場合は…	使うもの
ClickFunnels 上でビジュアルにページを組み立てたい	ページエディタで作る通常のファネルページ
完成した HTML ドキュメントはあるが、置き場所がない	カスタム HTML ページ
ページを自分ですでにホストしている（独自ドメイン、静的ホスティング、Netlify、Vercel、自社アプリ）	ClickFunnels SDK を使った外部ページ

この機能が想定しているのは、デザインされたものではなく生成されたページ — AI エージェントが HTML・CSS・JavaScript をひとつのドキュメントとしてまるごと出力したケースです。従来はそのファイルの置き場所を自分で探す必要がありました。これからは、ClickFunnels に渡すだけで本物のファネルステップとして公開できます。

SDK は別の機能です

カスタム HTML ページに SDK は必須ではありません。フォームもチェックアウトもない読み物としてのページであれば、HTML を貼り付けるだけで完了です。SDK は、ページでオプトインを取得したり販売したりしたい場合に追加するものです。ClickFunnels SDK を追加する（任意）を参照してください。

はじめる前に必要なもの

• ページを配置するファネル。 カスタム HTML ページはファネルステップです。（ステップを持たないスタンドアロンとして作成することもできます — スタンドアロンページとスプリットテストを参照してください。）

• 完成した HTML ドキュメント。 断片ではありません。貼り付けた内容がそのまま訪問者のブラウザに届くレスポンスになるため、<!doctype html>、<head>、<body> と、依存する CSS・JavaScript をすべて含んでいる必要があります — インラインでも、ページから到達できる URL からの読み込みでも構いません。ドキュメントの上限は 2MB です。

ステップ 1: ステップを追加する

この記事での画面表記について

ClickFunnels の画面は日本語化されています。本記事では、日本語表示の画面に実際に表示される文言を太字で示し、英語表示のワークスペースを使っている場合のために英語のラベルを括弧で添えています。日本語の画面キャプチャで確認できていない一部の状態メッセージやボタンについては、英語のラベルのみを記載しています。

ファネルを開き、ステップを配置したい位置のコネクタで + をクリックし、ステップを追加（Add Step）パネルの ファネル（Funnel）カテゴリから カスタムHTMLページ（Custom HTML page）を選びます。パネルには「完全なHTMLを貼り付けると、ClickFunnels がこのファネル内のページとしてホストします」と説明されています。

開いた カスタムHTMLページを追加（Add a custom HTML page）フォームに入力します。

フィールド	内容
名前（Name）	ファネルビルダー内でのステップ名。必須。
ページURL（Page URL）	ファネルのドメイン上でページが配信されるパス。フィールドの下に「空欄の場合、ページ名がページのURLとして使用されます」と表示されているとおり、空欄にするとページ名から自動生成されます。
説明（Description）	自分用のメモ。任意。
ClickFunnels SDKを使用しますか？（Using the ClickFunnels SDK?）	フィールドではなく、このページ用の SDK スニペットをコピーできる欄です。フォームもチェックアウトもないページなら読み飛ばして構いません。必要な場合はステップ 2を参照してください。
カスタムHTML（Custom HTML）	貼り付ける HTML ドキュメント全体。必須。

順番が重要です。ページに SDK が必要な場合は、フォーム中央のスニペットを取得してドキュメントに貼り付け、その後でそのドキュメントを最後のフィールドに貼り付けてください。

フォーム右下の作成ボタン（英語 UI では Add custom HTML page）をクリックすると、ページはそのパスで即座に公開されます。

ステップ 2: ページトークンを取得する（SDK を使う場合）

ClickFunnels は作成フォームを開いた時点でこのページのページトークン（Page token）を発行するため、ページ自体が存在する前からスニペットが用意されています。ClickFunnels SDKを使用しますか？ の下に、それぞれ コピー（Copy）ボタン付きで 2 つのスニペットが表示されます。

• ページトークンタグ（Page token tag） — <meta name="cf-page-token" content="cfp_…"> タグ。

• SDKスクリプト（SDK script） — アカウントの SDK ホストを指す <script src="…/sdk.js" defer></script> タグ。

両方をドキュメントの <head> にコピーし、完成したドキュメントを カスタムHTML に貼り付けて、作成ボタンをクリックします。表示されていたトークンはページ作成時にそのページへ紐づけられるため、いま貼り付けた HTML はすでに正しいページを指しています — 2 回目の作業も、後から直す必要もありません。

どちらのスニペットも任意です。フォームもチェックアウトもない読み物としてのページなら、このセクションは無視して HTML を貼り付けるだけで構いません。ページを作成するまで何も保存されないため、フォームを途中で閉じても何のコストもありません — 表示されたトークンが単に使われないだけです。

フォームにスニペットが表示されない場合

トークンの発行中、このセクションには発行中であることを示すメッセージ（英語 UI では “Generating your page token…”）が表示されます。発行に失敗した場合は、エラーメッセージ（同 Could not generate a page token.）と再試行リンク（同 Retry）が表示されます。その場合でもページは作成できます — ClickFunnels が作成時にトークンを発行し、下記のペインを表示します。

トークンは一度きりの表示ではありません。ステップの 設定（Settings）にある同じ ClickFunnels SDKを使用しますか？ セクションに残り続けます — 2 つのスニペットが、それぞれ コピー ボタン付きで、HTML を更新するときに使う カスタムHTML フィールドのすぐ上に表示されます。

この同じ設定ペインが、後から HTML を更新する場所でもあります。

HTML にまだトークンが入っていない場合

貼り付けた HTML にこのページのトークンの meta タグが含まれていない場合、作成時にモーダルが HTMLをClickFunnelsに接続する（Connect your HTML to ClickFunnels）ペインに切り替わり、同じ 2 つのスニペットが表示されます — 先に HTML を貼り付けてから SDK のことを思い出しても、何も失われません。必要なものをコピーして 完了（Done）をクリックし、ステップの設定からドキュメントに追加してください。HTML にすでにタグが入っている場合、モーダルはそのまま閉じます。

HTML を更新する

ファネルビルダーからステップの 設定 を開きます。名前（Name）、URL、説明（Description）、SDK スニペットの下に、ページの現在の HTML が入った カスタムHTML フィールドがあります — 設定を開いた時点で取得されるため、大きなドキュメントでは読み込みに少し時間がかかります。

編集または置き換えて 保存（Save）をクリックすると、公開中のページが更新されます。保存のたびにドキュメントはまるごと置き換えられます。部分的な編集はできないため、変更した箇所だけでなく、新しいドキュメント全体を貼り付けてください。

差し替え時に SDK タグを失わないように

ページが SDK を使っている場合、ページトークンの meta タグと sdk.js のスクリプトはあなたの HTML の中にあります — そのため、それらを含まないドキュメントに差し替えると、そのページのオプトイン・チェックアウト・トラッキングが何の警告もなく無効になります。貼り付けるすべてのバージョンに両方を残してください。設定フォームでも、フィールドのすぐ上で「HTMLは貼り付けたとおりに配信されます。オプトインとトラッキングが動作し続けるように、ページトークンのmetaタグとSDKスクリプトを含めたままにしてください。」と注意喚起しています。

HTML を読み込めなかった場合、フィールドは空のままにはならず、意図的にロックされます — 編集可能な空の入力欄は、コンテンツのないページと区別がつかず、そのまま保存すると公開中のページが消えてしまうためです。再読み込みのリンク（英語 UI では Retry）を使ってください。フィールドがロックされている間も、名前・URL・説明は編集できます。

ClickFunnels SDK を追加する（任意）

自分でホストするページで ClickFunnels SDK ができることは、カスタム HTML ページでもすべて同じように動作します。訪問者のトラッキング、コンタクトを作成してオートメーションを発火させるオプトインの取得、そしてチェックアウトです。契約も同一です — meta タグに入れたページトークン、SDK スクリプト、フォームフィールドの data-cf-element — 違いは、ファイルを誰がホストするかだけです。

したがって ClickFunnels SDK: 外部ページと外部ファネル が、そのすべてのリファレンスになります。要素レジストリ、送信の動作、チェックアウト要素と CfSdk JavaScript API、トラブルシューティングまで、あの記事に書かれています。読むときは、次の 2 点を読み替えてください。

• 登録はページ作成そのものです。 外部 URL を入力することはなく、同期を保つ対象もありません — ページのアドレスはファネルのドメイン上であなたが指定したパスなので、403 url_mismatch はここでは起こり得ない失敗です。

• Content Security Policy はあなたが設定するものではありません。 レスポンスを配信するのは ClickFunnels なので、CSP のセクションは該当しません — 自分のドキュメント内の <meta http-equiv> タグで CSP を送信している場合を除きます。

最小構成のカスタム HTML オプトインページの全文です。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Join the list</title>

    <!-- ステップ設定から取得したページトークン -->
    <meta name="cf-page-token" content="cfp_aB3xY7zQ9pK2mNvT8r5JcDef">
  </head>
  <body>
    <form>
      <label for="first">First name</label>
      <input id="first" name="first_name" type="text" data-cf-element="first-name" autocomplete="given-name" required />

      <label for="email">Email</label>
      <input id="email" name="email" type="email" data-cf-element="email" autocomplete="email" required />

      <button type="submit">Continue</button>
    </form>

    <script src="https://sdk.myclickfunnels.com/sdk.js" defer></script>
  </body>
</html>

チェックアウトとワンクリックアップセル

カスタム HTML ページでの販売は、自分でホストするページの場合とまったく同じ流れです。商品をステップに接続し、チェックアウト要素でフォームをマークアップすれば、SDK が決済 UI をマウントします。完全な契約は、SDK の記事のチェックアウトを追加するにあります。

ワンクリックアップセルも動作します。ワンタイムオファーは、チェックアウトの次のファネルステップです — 購入者のカードは直前の購入で保存済みのため、承諾はワンクリックで完了し、メール入力もカード入力も <form> も不要です。どちらのホスティングモデルもどちらの役割も担えて、自由に組み合わせられます。カスタム HTML のチェックアウトから、カスタム HTML のアップセルにも、外部ホストのアップセルにも引き渡せますし、その逆も可能です。

設定手順は次のとおりです。

1. アップセルを、チェックアウトステップの直後に独立したステップとして作成します — カスタム HTML ページか外部ページのどちらかです。ワンクリックの権利を受け取れるのはこの 2 種類のページだけで、ページエディタで作成したページでは受け取れません。

2. オファーする商品は、チェックアウトステップではなくアップセルステップに接続します。 何も接続されていないアップセルステップには売るものがなく、オファーも提示されません。

3. アップセルページに oto-accept ボタン、oto-decline ボタン、shipping 要素を置きます。 oto-accept は、オファーする商品行を value 属性に variantId|priceId の形で持ちます。クリックすると保存済みのカードに課金され、購入者は次のステップへ進みます。oto-decline は課金せずに次へ進みます — ダウンセルをつなぐのもこの方法で、そのダウンセル自体をカスタム HTML ページにすることもできます。

ワンクリックの権利はチェックアウトがリダイレクトする際に発行されるため、購入者はそのリダイレクト経由でアップセルに到達する必要があります。アップセルの URL を直接開くと、オファーを紐づける購入が存在しません。SDK は結果を unavailable として報告するので、ページ側でそうした訪問者を注文フォームへ送るようにしてください。したがってテストは、アップセルページを単体で開くのではなく、購入者と同じ流れで — 注文フォームから始めてテストカードで支払う形で — 行ってください。完全なマークアップとその他の動作はワンタイムオファー（OTO）にあります。

AI エージェントと一緒に構築する

カスタム HTML ページは、ウェブページ全体を書けるものの公開先を持たないアシスタントにとって自然な出力先です — しかもこのページ種別は、プログラムからまるごと管理できるため、公開作業そのものもアシスタントに任せられます。

ClickFunnels MCP サーバーを接続すれば、アシスタントはファネル内にページを作成し、発行されたトークンを読み取り、トークンと SDK タグを最初から含んだ最終的な HTML を書き、ページを更新し、配信されている HTML を読み返して公開内容を確認できます。その際、どのホスティングモデルを提案しているのか — ClickFunnels のエディタページか、カスタム HTML ページか、外部ホストのページか — を伝え、何かを作成する前にあなたに確認します。

同じ操作は ClickFunnels V2 API でも利用できるため、独自のツールを構築することもできます。Developer Hub を参照してください。

スタンドアロンページとスプリットテスト

カスタム HTML ページは、ファネルステップを持たない状態でも作成できます。ページは存在してトークンも発行されますが、まだファネルからは到達できません。これは、スプリットテスト（Split test）のバリアントや 条件付き分割（Conditional split）のブランチに入れるページを準備しておく方法です — それらのスロットが受け取るのは URL ではなくページだからです。

2 つのカスタム HTML ページで A/B テストを行うには、1 つ目をファネル内のステップとして作成し、2 つ目をスタンドアロンで作成してから、その 2 ページでスプリットテストを構成します。

複製も通常どおり動作します。ステップの複製、ファネルの複製、スプリットテスト内のページ複製の操作（英語 UI では duplicate this page）のいずれでも HTML はコピーされます。コピーは独自のトークンを持つ新しいページになり、貼り付けた HTML にページトークンが含まれている場合、ClickFunnels がそれを複製側のトークンに書き換えます。そうしないと、複製が元のページの SDK アイデンティティで配信され、送信が誤ったステップに届いてしまうためです。

カスタム HTML ページを含むファネルを共有する

カスタム HTML ページを含むファネルは共有できます。通常どおりファネルの共有リンクを生成する（またはフレームワーク／リソースパッケージにファネルを含める）と、カスタム HTML ステップも一緒に運ばれ、ドキュメントは貼り付けたとおりの姿で相手のアカウントに届きます — {{ braces }} もそのままです。ファネルを共有およびクローンする方法を参照してください。

引き継がれないのはページトークンです。cfp_ トークンは SDK 上のアイデンティティであり、発行したワークスペースの外に出ることはありません。

• 共有リンクを公開するとき、ClickFunnels はドキュメント内のページトークンをすべて、使用できないプレースホルダーに置き換えます。共有リンクの先にあるコピーには、あなたの有効なトークンは含まれません。

• 相手がファネルを受け取るとき、コピーされたページには独自のトークンが発行され、ClickFunnels がプレースホルダーと入れ替える形で HTML に書き込みます。

そのため、受け取ったページは届いた時点で SDK が使える状態です。オプトインやチェックアウトは相手自身のページとして動作し、あなたのページを指すものは何も残りません。sdk.js のスクリプトタグは通常のマークアップなので、そのままコピーされます。

ドキュメント内のトークンはすべて書き換えられます

置き換えの対象はそのページ自身のトークンだけではありません。HTML 内に見つかった cfp_ トークンは、別のページを指すために意図的に貼り付けたものも含めてすべて置き換えられます。相手はそのページにアクセスできないため、その参照はいずれにせよ機能しません。受け取り後、その箇所にはコピーされたページ自身のトークンが入ります。

引き続き 2 つの制限があります。

• カスタム HTML ページは単体では共有できません。 スタンドアロンのページ共有も、リソースパッケージへのページの追加も、カスタム HTML ページでは行えません。そのページが含まれるファネルごと共有してください。

• 外部ページがあるとファネル全体が共有できません。 外部ページを含むファネルは、複製・共有・リソースパッケージへの追加のいずれもできません。そのページは他者のホスト上にあり、コピーできるものが存在しないためです。

エディタページとの違い

カスタム HTML ページは、意図的に薄いホスティング層です。あなたのドキュメントがそのままページであり、ClickFunnels はそれを手を加えずに配信します。これはトレードオフでもあります — エディタページに付いてくるいくつかの便利な機能はここでは使えないため、どれが対象かを知っておく価値があります。

• エディタはありません。 カスタム HTML ページはページエディタで開けません。編集対象となるページツリーが背後に存在しないためです。ファネルステップ設定の HTML フィールドが編集画面です。

• ファネルやサイトのヘッダー／フッターコードは挿入されません。 ドキュメントをそのまま配信するとは、まさにそういう意味です — ファネルレベルやサイトレベルで設定したカスタムのヘッダー・フッターコードは追加されず、そこに置いているトラッキングスクリプトも同様です。このページに必要なものは、すべてページ自身の HTML の中に入れてください。

• ページ単体では共有できません。 スタンドアロンのページテンプレートとしての共有や、リソースパッケージへのページの追加は、カスタム HTML ページでは引き続き行えません。ただし、そのページが含まれるファネルは共有できます — カスタム HTML ページを含むファネルを共有するを参照してください。

• ステップカードにはサムネイルではなくバッジが表示されます。 ファネルビルダーのプレビューはエディタページの構造からレンダリングされますが、カスタム HTML ページにはその構造がないため、ステップカードには </> HTML バッジが付きます。

• ラン単位のレポートでは、表示時ではなく送信時にステップがカウントされます。 カスタム HTML ステップは、単に表示されただけではファネルのランを進めません。そのため、そのページに着地して送信せずに離脱した訪問者は、ステップに到達したとは記録されません。ステップカード自体は、他のステップと同じようにページビュー・オプトイン・売上を報告します。

リファレンス資料とフィードバック

• ClickFunnels SDK: 外部ページと外部ファネル — マークアップとチェックアウトの完全な契約。カスタム HTML ページにもそのまま適用されます

• ClickFunnels MCP サーバー — AI アシスタントをワークスペースに接続し、これらのページの作成・更新を任せる

• どの ClickFunnels インテグレーションを使うべきですか? — API、Page SDK、MCP、Webhooks の違い

• Developer Hub — API リファレンスとガイド