ClickFunnels でのボタン、テキスト、画像のアクションの設定

公開日: 2025年2月6日更新日: 2026年10月20日

ClickFunnels の要素アクションは、ユーザーがボタン、テキスト、画像を操作したときに何が起こるかを定義するもので、ナビゲーション、フォーム送信、ポップアップの表示などのタスクへユーザーを誘導できます。ClickFunnels には、これらのアクションを設定するための使いやすいインターフェイスが用意されており、ページ全体でスムーズなインタラクションを実現できます。この記事では、ボタン、テキスト、画像要素のアクションを設定して、インタラクティブ性を高める方法を説明します。

必要条件

アクティブな ClickFunnels アカウント
ワークスペースで作成したページ

ボタンアクションの設定

ボタン要素の追加

ページエディタで、要素を配置したい場所に セクション を追加します。
そのセクション内に行を追加します。
行内にあるオレンジ色の + プラス または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
フォーム カテゴリから ボタン 要素を選択します。
ボタン要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。歯車 ⚙️ アイコン をクリックするか、要素を直接クリックして設定パネルを開きます。
ボタンのクリック時のアクション セクションまでスクロールして、ボタンのアクションを設定します。

使用可能なボタンアクション

この設定では、訪問者がボタンをクリックしたときに何が起こるかを定義できます。使用可能なアクションは次のとおりです。

何も起こらない: 何も起こらない オプションを選択すると、ボタンをクリックしても何も起こりません。
リンクなし: このオプションもドロップダウンに表示されます。
移動先…: 移動先… アクションを選択すると、2 つの追加フィールドが表示され、リダイレクト先として カスタムURL と カスタムアクションリンク のどちらかを選択できます。
1. カスタムURL: このオプションでは、ボタンのクリック時にリダイレクトする特定の URL (「ハードリンク」) を入力できます。外部の Web サイトや、ユーザーを誘導したい任意の URL を指定できます。このフィールドは入力した内容の先頭に必ず https:// を追加するため、Web アドレスにのみ使用してください。電話、テキストメッセージ、メールのリンク (tel:、sms:、mailto:) には、代わりに カスタムアクションリンク を使用してください。「新しいウィンドウで開く」オプションを選択することもできます。この場合、ボタンをクリックすると、リンクがブラウザの新しいタブで開きます。
2. カスタムアクションリンク: ハードコードされた URL に直接リンクする代わりに、相対パス または カスタムアクションコマンド (例: #open-popup や /terms-and-condition) を使用できます。これにより、ポップアップを開く、同じドメイン上のパス名に一致するページに移動するなどのアクションを実行する動的なリンクをページ内に作成できます。リンクは入力したとおりに保存されるため、tel:+1234567890 などの電話、テキストメッセージ、メールのリンクもここに入力します。「新しいウィンドウで開く」オプションを選択することもできます。この場合、ボタンをクリックすると、リンクがブラウザの新しいタブで開きます。
3. ストアページ: このオプションは、ファネルに接続されているストアフロントページに直接リンクします。商品リストやショップ関連のコンテンツにユーザーを誘導するボタンに便利です。新しいウィンドウで開く を有効にすると、ストアページを新しいタブで開けます。
4. ブログホームページ: このオプションは、ユーザーをサイトのメインブログページにリダイレクトします。ブログコンテンツの宣伝や、ブログへのリンクに最適です。ブログを別のタブで開きたい場合は、このオプションでも 新しいウィンドウで開く チェックボックスを使用できます。
注文/フォームを送信: ボタンアクションとして 注文/フォームを送信 を選択すると、リダイレクトオーバーライドを有効にする オプションで送信後のリダイレクトを制御できます。
- デフォルトの動作: リダイレクトオーバーライドを有効にする ボックスをオフのままにすると、ボタンアクションはデフォルトの動作に従い、ユーザーを ClickFunnels ファネルの次のステップに進めます。ファネルに次のステップがない場合は、フォームが送信され、現在の URL でページが再読み込みされます。
- リダイレクトオーバーライドを有効にする: このボックスをオンにすると、フィールドに カスタムURL またはページ URL への 相対パス を入力できます。有効にすると、フォーム送信後、ボタンはファネルの次のステップに進む代わりに、指定した URL にユーザーをリダイレクトします。
1クリックアップセル: ファネルステップのページでのみ使用できます。選択した後、製品を追加 をクリックして、提供する製品を選択します。
スクロール先…: ボタンアクションとして スクロール先… を選択すると、ボタンのクリック時にページの特定の部分までスクロールする、スムーズなナビゲーションを作成できます。スクロール先… を選択するとドロップダウンメニューが表示され、セクション、行、特定の要素などのターゲットを選択できます。識別しやすくするために、ユーザーをスクロールさせたいコンテナ (セクション、行、フレックス、要素) のタイトルを変更できます。この機能は、同じページ内の関連コンテンツにユーザーを誘導し、手動でスクロールする手間を減らしてユーザーエクスペリエンスを向上させるのに役立ちます。
表示または非表示…: 表示または非表示… アクションを使用すると、ボタンのクリック時にページ上の特定の要素の表示/非表示を切り替えられます。表示または非表示… を選択すると、次の 2 つのドロップダウンメニューが表示されます。
1. 表示 …: ボタンをクリックしたときに表示する要素、セクション、または行を選択します。
2. 隠す…: ボタンをクリックしたときに非表示にする要素、セクション、または行を選択します。
  ボタンのクリックでコンテンツを表示/非表示にする方法について詳しくは、「ボタンクリックでコンテンツを表示/非表示にする」の記事を参照してください。
ポップアップを開く…: ページのポップアップウィンドウを開きます。ポップアップには、追加情報、フォーム、行動喚起などを含めることができます。
ポップアップを閉じる…: 開いているポップアップウィンドウを閉じます。
完了をマーク…: コース内の現在のレッスンを完了としてマークし、受講者をまだ完了していない次のレッスンに進めます（完了済みのレッスンはスキップされます）。コース内のすべてのレッスンが完了している場合は、代わりに最初のレッスンに戻ります。完了状況に関係なくコースのアウトライン順に進めたい場合は、次のレッスンへ進む… を使用してください。
次のレッスンへ進む…: 完了済みかどうかに関係なく、コースのアウトライン順で次のレッスンに受講者を移動します。必要に応じて次のモジュールにも進みます。非公開のレッスンや、受講者がアクセスできないモジュール内のレッスンなど、アクセスできないレッスンはスキップされます。最後のレッスンでは、コースページに移動します。このアクションは移動のみを行い、現在のレッスンを完了としてマークしません。そのため、すでに修了したコースを見直す受講者に便利です。
前のレッスンに戻る…: このアクションを選択すると、ユーザーはコースのアウトライン順で前のレッスンに戻ります（アクセスできないレッスンはスキップされます）。このアクションは現在のレッスンの完了ステータスを変更しないため、進捗をリセットせずに前のコンテンツを見直す場合に便利です。
レッスンを再スタート…: このアクションは、現在のレッスンの完了ステータスをクリアし、レッスンを再読み込みします。理解を深めるためにユーザーが教材を最初から繰り返す必要があるコースレッスンで特に役立ちます。
コースページの編集とカスタマイズについて詳しくは、「ページエディタを使用したコースの設計」を参照してください。
次のステップにリダイレクト: ボタンをクリックすると、ユーザーはファネルシーケンスの次のステップに自動的に移動します。URL を手動で指定せずに、訪問者をファネルの次の段階へ案内できる簡単な方法です。

次のステップにリダイレクト アクションは フォーム送信 用ではありません。このアクションを選択してもフォームデータは送信されず、クリック時に次のファネルステップへのリダイレクトが実行されるだけです。ユーザーを先に進める前にフォーム情報を取得する必要がある場合は、代わりに 注文/フォームを送信 アクションを選択してください。データが正しく送信され、指定どおりにユーザーが誘導されます。
ファイルをダウンロード…: このアクションはボタンにファイルを添付し、訪問者がクリックしたときにファイルを受け取れるようにします。ファイルをダウンロード… を選択した後、ファイルを選択 をクリックして ファイルを選択 ダイアログを開きます。このダイアログでは、ワークスペースの既存のダウンロードを名前で検索したり、新しいファイルをアップロード をクリックしてその場でファイルを追加したりできます。ファイルを選択すると、その名前が表示され、ボタンは ファイルを変更 に変わります。
- 新しいタブで開く（ダウンロードの代わりに） チェックボックスをオフのまま (デフォルト) にすると、ダウンロードが強制されます。ファイルは同じタブのまま訪問者のデバイスに保存されます。
- 新しいタブで開く（ダウンロードの代わりに） をオンにすると、ファイルはダウンロードされずに新しいブラウザタブで開いて表示されます (例: PDF はブラウザの PDF ビューアーで開きます)。
エディタからのファイルのアップロードやリードマグネットの配信といったユースケースを含む詳しい手順については、「ボタンをファイルのダウンロードに変える」の記事を参照してください。

画像アクションの設定

画像要素の追加

ページエディタで、要素を配置したい場所に セクション を追加します。
そのセクション内に行を追加します。
行内にあるオレンジ色の + プラス または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
メディア カテゴリから画像要素を選択します。
画像要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。歯車 ⚙️ アイコン をクリックするか、要素を直接クリックして設定パネルを開きます。
リンクアクションまたはURL オプションまでスクロールして、画像のアクションを設定します。

使用可能な画像アクション

リンクアクションまたはURL フィールドでは、ユーザーが画像をクリックしたときに何が起こるかを指定できます。いくつかの定義済みアクションから選択するか、カスタム URL またはページ URL の相対パスを入力できます。使用可能なオプションは次のとおりです。

#open-popup: 画像をクリックすると、ページのポップアップが開きます。
#submit-form: 画像をクリックしたときにオプトインフォームを送信します。
?next_funnel_step=true: 画像をクリックすると、ユーザーはファネルの次のページにリダイレクトされます。
#close-popup: すでに開いているポップアップを閉じます。ポップアップを開くアクションと逆の働きをします。
?page_action=mark_complete: コースのレッスンエディタで画像を使用している場合、このアクションを選択すると、クリック時にレッスンが完了としてマークされます。

オプションで、ターゲット フィールドを 同じウィンドウ または 新しいタブ に設定できます。新しいタブ を選択すると、アクションまたは URL がブラウザの新しいタブで開きます。

テキストアクションの設定

ClickFunnels のテキストアクションとは、テキストにハイパーリンクを設定して、ブログ記事へのリダイレクト、セクションへの移動、ポップアップの表示など、特定のユーザー操作を実行することを指します。これらのアクションは、見出し、サブ見出し、段落、箇条書きリストなどのさまざまなテキスト要素に適用できるため、ページデザインの中でユーザーのエンゲージメントを柔軟かつ効果的に誘導できます。

テキストアクションを設定する手順

ハイパーリンクを設定するテキストを選択します。
テキストエディタのツールバーにある リンク (チェーン) 🔗 アイコンをクリックします。
URL またはアクションを リンクURL… フィールドに貼り付けます。
矢印アイコンをクリックして、リンクを同じタブで開くか新しいタブで開くかを選択します。
カラーピッカー を使用してハイパーリンクの色を変更し、デザインに合わせます。
選択したテキストにリンクが設定されている場合は、リンク解除テキスト (チェーン) アイコンをクリックしてハイパーリンクを削除します。
ベルアイコンをクリックすると、リンクのクリック追跡のオン/オフを切り替えられます。ツールチップには クリックイベントを追跡中 または クリックイベントを追跡していません と表示されます。

カスタムアクション:

#open-popup: テキストをクリックすると、ページのポップアップが開きます。
#submit-form: テキストをクリックしたときにオプトインフォームを送信します。
?next_funnel_step=true: テキストをクリックすると、ユーザーはファネルの次のページにリダイレクトされます。
#close-popup: すでに開いているポップアップを閉じます。ポップアップを開くアクションと逆の働きをします。
?page_action=mark_complete: このアクションを追加すると、テキストのクリック時にレッスンが完了としてマークされます。
?page_action=next_lesson: コースレッスンでこのアクションを追加すると、テキストがクリックされたときに、現在のレッスンを完了としてマークせずに、コースのアウトライン順で次のレッスンに受講者を移動します。
#scroll-[ID]: リンクまたはテキストのアクションとして #scroll-[ID] を追加すると、ページ上の指定したコンテンツまでスムーズにスクロールできます。[ID] は、必ずコンテナ (セクション、行、フレックス、または要素) の実際の ID に置き換えてください。たとえば、セクションの CSS コード領域に移動して IDを生成 し (例: #id-6Z-8oepNL-481)、テキストを #scroll-id-6Z-8oepNL-481 にリンクすると、そのセクションまでスクロールできます。スムーズスクロールを正しく機能させるには、システムが生成した ID を割り当てることが不可欠です。コンテナにカスタム ID を入力すると、スムーズスクロール機能は意図したとおりに動作しません。カスタム ID が必要な場合は、代わりにボタンを使用できます。

Click-to-Call リンクと E メールリンクの追加

ClickFunnels では、テキスト、ボタン、画像にアクションを追加して、ユーザーが要素をクリックするだけで電話をかけたり、メールを直接送信したりできるようにすることができます。ユーザーが電話番号のリンクをクリックすると、デバイスのダイヤルアプリが自動的に開き、番号が入力された状態ですぐに発信できます。同様に、メールのリンクをクリックすると、ユーザーのデバイスでデフォルトのメールクライアントが起動し、指定したメールアドレスがあらかじめ入力されます。これらの機能により、ユーザーのエンゲージメントを高め、すばやく手間のかからないコミュニケーションを実現できます。

電話番号リンク: tel:+1234567890 を使用して、クリックで発信するアクションを作成します。+1234567890 は目的の電話番号に置き換えてください。
メールリンク: mailto:email@domain.com を使用してメールリンクを作成します。email@domain.com は送信先のメールアドレスに置き換えてください。
テキストメッセージ (SMS) リンク: sms:+1234567890 を使用すると、電話番号が入力された状態でメッセージアプリが開きます。メッセージ本文もあらかじめ入力するには、?&body= に続けてメッセージを追加し、スペースは %20 と記述します (例: sms:+1234567890?&body=Hello%20there)。電話番号を省略すると (sms:?&body=Hello%20there)、訪問者が送信先を選択できます。

これらのリンクは、テキスト、ボタン、アイコン、画像などのクリック可能な任意の要素に適用できるため、ユーザーは通話、テキストメッセージ、メールの機能に簡単にアクセスできます。リンクを入力する場所は要素によって異なります。

ボタンとアイコン: アクションを 移動先… に設定し、カスタムアクションリンク を選択して、リンク全体 (例: tel:+1234567890) を入力します。
画像: リンクアクションまたはURL フィールドにリンクを入力します。
テキスト: テキストを選択し、リンク (チェーン) 🔗 アイコンをクリックして、上のスクリーンショットのように リンクURL… フィールドにリンクを入力します。

コンテナータイトルの変更

ページエディタで、コンテナ (セクション、行、フレックス、または要素) にカーソルを合わせます。
コード <> アイコンをクリックします。
コードエディタで、CSS情報 セクションに移動します。
タイトルフィールドに、コンテナの タイトル を追加します。

明確で簡潔な命名規則 (例: Section-hero、Row-slider、Element-checkout など) を使用すると、特定のセクションまでスクロールするようにボタンアクションを設定したり、カスタム CSS コードで要素を参照したりするなど、さまざまな場面でコンテナを識別しやすくなります。
更新をクリックして変更を保存します。