ボタン: ユーザーにアクションの送信を許可する

ボタンテンプレートオプションを使用すると、事前にデザインされたさまざまなテンプレートから選択して、ボタンのスタイルをすばやく設定できます。これらのテンプレートは、シンプルなフラット デザインからグラデーション、境界線、3D 効果まで、さまざまなスタイルを提供し、ワンクリックでページのデザインに最も適した外観を選択できます。

テンプレートを適用するには、ボタン設定の [テンプレート] タブに移動し、好みのスタイルを選択します。適用すると、[設定] タブと [詳細設定] タブでボタンの外観をカスタマイズでき、色、フォント、その他のプロパティを調整して、完全にカスタマイズされた外観にすることができます。

このフィールドでは、ボタンに表示されるメインテキストとサブテキストを定義できます。 [編集] をクリックすると、追加のオプションが使用可能になります。

• ボタンテキスト: このフィールドでは、ボタンに表示されるプライマリテキストを入力できます。「送信」、「無料ガイドを入手」、オファーに関連する行動喚起など、ユーザーに実行してもらいたいアクションに合わせてカスタマイズします。
  

• サブテキスト: このオプションフィールドを使用すると、メインボタンのテキストの下にテキストを追加できます。必要に応じて、追加のコンテキストや情報を提供するために使用します。

• Aria-Label: この属性は、ボタンの目的に関する追加情報をスクリーン リーダーに提供することで、アクセシビリティを向上させます。視覚障害のあるユーザーがボタンの機能を理解できるように説明を入力します。 MDN documentationのariaラベルについて詳しく知る。

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

1. 何も起こらない: [ 何も起こらない ] オプションを選択しても、ボタンをクリックしても何も起こりません。

2. 移動先: [アクションに移動] を選択すると、2 つの追加フィールドが表示され   、リダイレクト用の [カスタム URL] と [カスタム アクション リンク] のどちらかを選択できます。

   1. カスタム URL: このオプションを使用すると、クリック時にボタンがリダイレクトされる特定の URL (「ハード リンク」) を入力できます。これは、外部 Web サイトまたはユーザーに送信する任意の URL にすることができます。

   2. カスタム アクション リンク: ハードコードされた URL に直接リンクする代わりに、 相対パス または カスタム アクション コマンド ( #open-popup や /terms-and-condition など) を使用できます。この柔軟性により、ポップアップを開いたり、同じドメインに関連付けられたパス名に一致するページに移動したりするなどのアクションをトリガーする動的リンクをページ内に作成できます。

   3. ストアページ: このオプションは、ファネルの接続されたストア フロントページに直接リンク 。これは、ユーザーを商品リストやショップ関連コンテンツに誘導する必要があるボタンに役立ちます。 新しいウィンドウで開く を有効にして、新しいタブでストアページを起動できます。

   4. ブログホームページ: このオプションは、ユーザーをサイトのメイン ブログ ページにリダイレクトします。ブログ コンテンツを宣伝したり、リンクしたりするのに最適です。[新しいウィンドウで開く  チェックボックスは、ブログを別のタブで開く場合にも使用できます。

3. フォームの送信: ボタンアクションとして 注文/フォームの送信 を選択すると、リ ダイレクトの上書きを有効にする オプションを使用して送信後のリダイレクトを制御できます。

   • デフォルトの動作: [ リダイレクトの上書きを有効にする] ボックスをオフのままにすると、ボタン アクションはデフォルトの動作に従い、ユーザーを ClickFunnels ファネルの次のステップに進めます。ファネルに次のステップがない場合は、フォームが送信され、ページが現在の URL にリロードされます。

   • リダイレクトの上書きを有効にする: このボックスをオンにすると、 カスタム URL またはページ URL への 相対パス をフィールドに入力できます。有効にすると、ボタンは、ファネルの次のステップに進むのではなく、フォーム送信後にこの指定されたURLにユーザーをリダイレクトします。
     

4. スクロール先: ボタン アクションとして [スクロール先 ] を選択すると、ボタンがクリックされたときにページの特定の部分にスクロールすることで、スムーズなナビゲーションを作成できます。 [スクロール先] を選択すると、ドロップダウン メニューが表示され、 セクション、 行、特定の 要素などのターゲット要素を選択できます。この機能は、ユーザーを同じページ上の関連コンテンツに誘導し、手動スクロールの必要性を減らすことでユーザー エクスペリエンスを向上させるのに役立ちます。

5. 表示/非表示: 表示/非表示 アクションを使用すると、ボタンがクリックされたときにページ上の特定の要素の表示を切り替えることができます。 [表示/非表示] を選択すると、次の 2 つのドロップダウン メニューが表示されます。

   1. 表示...: ボタンをクリックしたときに表示される要素、セクション、または行を選択します。

   2. 非表示...: ボタンをクリックしたときに非表示になる要素、セクション、または行を選択します。
      

6. ポップアップを開く: ページポップアップウィンドウを開き、追加情報、フォーム、または行動喚起を含めることができます。

7. ポップアップを閉じる: アクティブなポップアップウィンドウを閉じます。

8. 完了としてマーク: コース内の現在のレッスンを完了としてマークし、ユーザをシーケンス内の次のレッスンに自動的に進めます。

9. 前のレッスンに戻る : このアクションを選択すると、ユーザはコースフロー内で以前に表示したレッスンに戻ることができます。このアクションは、現在のレッスンの完了ステータスを変更しないため、進行状況をリセットせずに以前のコンテンツに再アクセスする場合に便利です。

10. レッスンの再開: このアクションは、現在のレッスンをリロードし、関連するすべての進行状況をリセットします。これは、ユーザーが理解を深めるために教材を最初から繰り返す必要があるコースレッスンで特に役立ちます。
    コースページの編集とカスタマイズの詳細については、「 Using the Page Editor to Design Your Course」を参照してください。

11. 次のステップにリダイレクトする: ボタンをクリックすると、ユーザーは自動的にファネルシーケンスの次のステップに移動します。これは、URL を手動で指定することなく、訪問者にファネルの進行を案内する簡単な方法です。

    手記：

    [ 次のステップにリダイレクト ] アクションは、 フォーム送信を対象としていません。このアクションを選択しても、フォームデータは送信されません。クリックしたときにのみ、次のファネルステップへのリダイレクトがトリガーされます。ユーザーを進める前にフォーム情報をキャプチャする必要がある場合は、代わりに [フォームの送信] アクションを選択すると、データが適切に送信され、指定されたとおりにユーザーに誘導されます。

[サイズ] と [間隔] の設定では、コンテナ内のボタンのサイズと位置を制御できます。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルでサイズと間隔を個別に設定できます。モバイル配置が指定されていない場合、デフォルトでデスクトップ配置が継承されます。各オプションの仕組みは次のとおりです。

• 全幅: このトグルを使用すると、コンテナの幅全体にまたがるようにボタンを設定できます。有効にすると、ボタンが伸びて利用可能なスペースを水平方向に埋め、目立つ全幅の外観が作成されます。無効にすると、ボタンはその内容に基づいて必要なだけスペースのみを占有します。

• サイドのパディング: ボタンの左右のパディングを調整します。この値を大きくすると、ボタンがコンテナ内の中央に保たれながら幅が広がります。
  

• 縦方向のパディング: ボタンの上下のパディングを調整します。この設定は、ボタンの高さを制御し、垂直方向に大きくまたは小さく表示するのに役立ちます。

ボタンスタイル設定を使用すると、ユーザーは事前定義されたスタイルを適用およびカスタマイズしたり、特定の調整のために上書きしたりできます。これらの設定を使用するためのガイドは次のとおりです。

1. スタイルの選択: ページ上の 3 つの定義済みスタイル (1、2、3) からグローバルに選択できます。これらのスタイルのいずれかを選択すると、プリセットの外観がボタンに適用されます。

2. スタイルの編集: [スタイルの編集] をクリックすると、選択したスタイルのプロパティをエディター内で直接編集できます。このオプションは、スタイルをグローバルに調整し、それを使用するすべてのボタンに影響を与えます。

3. オーバーライド: 他のボタンに影響を与えずに特定のボタンインスタンスのスタイルをカスタマイズする場合は、[ オーバーライド ] オプションを選択できます。これにより、ボタン スタイルのプロパティのロックが解除され、個別のカスタマイズが可能になります。オーバー ライド を有効にすると、追加のスタイル設定にアクセスできるようになり、次のセクションに分かれています。

ボタンの状態

[ボタンの状態] 設定では、さまざまな操作状態でのボタンの表示方法を定義できます。

• デフォルト: アイドル状態のときのボタンの通常の外観。たとえば、背景を青に設定し、白のテキストと灰色のサブテキストの色を使用して、ボタンをすっきりとした標準的な外観にすることができます。

• ホバー: ユーザーがボタンにカーソルを合わせたときのボタンの外観。この状態には、対話性を示すための背景、テキストの色、またはサブテキストの色の変更を含めることができます。たとえば、ユーザーがボタンの上にマウスを移動すると、背景が暗い青の色合いに変わり、テキストの色が明るい白になり、サブテキストが太字に切り替わり、ボタンがクリック可能であることを示す場合があります。

• 押された: ボタンがクリックまたは押されたときのボタンの外観で、ユーザーに視覚的なフィードバックを提供します。この状態では、背景を濃い灰色に設定し、テキストの色を白に変更し、サブテキストの色を赤に切り替えることで、アクションが登録されたことを明確にフィードバックすることができます。

各状態では、背景、テキストの色、サブテキストの色をカスタマイズして、まとまりのあるレスポンシブなデザインを作成できます。各ボタンの状態 (デフォルト、ホバー、および押下) には、背景、テキストの色、およびサブテキストの色をカスタマイズするための設定が含まれており、インタラクション状態ごとに異なる外観を作成できます。

• バックグラウンド： この設定は、各状態のボタンの背景色を制御します。たとえば、デフォルト状態には青などの原色を選択し、ホバーには濃い青の色合いを選択し、押された状態には灰色などの中間色を選択できます。各状態の背景色を調整すると、インタラクティブ性を視覚的に伝えることができます。

• テキストの色: この設定により、ボタンの本文の色が変わります。たとえば、デフォルト状態では、色付きの背景に対して読みやすくするために、テキストの色を白に設定できます。ホバー状態では、テキストをより目立たせるために少し明るい色合いや対照的な色合いを選択し、押された状態では、視認性を維持するために背景とよく合う色を選択できます。

• サブテキストの色: この設定は、ボタンに表示されるサブテキストの色を制御します。たとえば、デフォルト状態に微妙な灰色を設定し、ホバーでより太い色合いに切り替えてインタラクティブ性を強調し、押されたときに赤などの明確な色を使用してボタンがアクティブになったことを示すことができます。

プライマリ テキスト スタイル

[ プライマリ テキスト スタイル] セクションは、 メイン ボタン テキストの外観を制御します。各オプションでは、カスタマイズして明確で魅力的な行動喚起を作成できます。

1. ボタンフォント: プライマリボタンテキストのフォントタイプを選択します。ClickFunnels はさまざまな Google フォントを提供しており、[ ワークスペース設定] > [マイ アセット] > [フォント] に移動してカスタム フォントをアップロードすることもできます。アップロードされたフォントが選択リストに表示されます。

2. 太さ: プライマリ ボタン テキストの太さを、[細い]、[通常]、[太字] などのオプションで定義します。インパクトを生み出すために大胆な太さを選択し、より繊細な外観にするには軽い重量を選択してください。

3. フォントサイズ: スライダーを使用してテキスト サイズを調整するか、特定の値を手動で入力できます。さらに、サイズ測定には 2rem や 32px など、rem または px  から選択できます。 また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。

   • Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem を選択し、スタイルガイドでデスクトップ用の基本フォントサイズを 16px に指定した場合、結果のテキストサイズはデスクトップビューで 32px になります (つまり、2rem × 16px = 32px)。

   • Px は絶対測定値であり、テキスト サイズを正確に制御できます。

4. 文字間隔: 主テキストの文字間の間隔を制御します。値を大きくすると間隔が広がり、文字間隔が狭くなる場合は値を小さくします。

5. 行の高さ: これは、ボタンのテキストに複数の行がある場合に便利な、行間の垂直方向の間隔を調整します。線の高さを高くすると間隔が広くなり、線の高さを低くすると線が近くなります。

6. テキストの大文字と小文字: プライマリ ボタン テキストの小文字、大文字、タイトル ケースから選択して、表示を制御します。

7. 装飾: 下線、取り消し線、斜体などのオプションを使用してプライマリ テキストのスタイルを設定し、目立たせたり、特定の要素を強調したりします。

サブテキストスタイル

[サブテキスト スタイル] セクションでは、プライマリ ボタン テキストの下に表示される 2 次テキストの外観をカスタマイズします。各オプションの概要は次のとおりです。

1. 上マージン: プライマリテキストとサブテキストの間の垂直方向のスペースを調整します。この値を大きくすると、サブテキストがさらに下に移動し、2 つのテキスト要素間の分離が大きくなります。

2. ボタンフォント: ボタンのサブテキストのフォントタイプを選択します。ClickFunnels はさまざまな Google フォントを提供しており、[ ワークスペース設定] > [マイ アセット] > [フォント] に移動してカスタム フォントをアップロードすることもできます。アップロードされたフォントが選択リストに表示されます。

3. 太さ: サブテキストの太さを定義し、繊細で軽量な外観または大胆で強調された外観のオプションがあります。

4. フォントサイズ: スライダーを使用してテキスト サイズを調整するか、特定の値を手動で入力できます。さらに、サイズ測定には rem または px から選択できます( 2rem または 32pxなど)。

   • レム は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem を選択し、スタイルガイドでデスクトップ用の 16px の基本フォントサイズを指定した場合、デスクトップビューでは 32pxになります(つまり、2rem × 16px = 32px)。

   • ピクセル は絶対測定値であり、テキストサイズを正確に制御できます。

5. フォント サイズ モバイル: 最適な読みやすさを確保するために、モバイル デバイス用の特定のサブテキスト フォント サイズを設定します。

6. 文字間隔: サブテキスト内の文字間の間隔を調整して、よりオープンまたは要約されたプレゼンテーションを可能にします。

7. 行の高さ: サブテキストの行間の垂直方向の間隔を制御し、複数行のサブテキストに特に役立ちます。線の高さを高くすると線間のスペースが広がり、線の高さを低くすると線が近くなります。

8. テキストの大文字と小文字: 小文字、大文字、またはタイトルの大文字と小文字のオプションを使用してサブテキストの大文字と小文字を調整し、プレゼンテーションに柔軟性を与えます。

9. 装飾: 下線、取り消し線、斜体などのスタイルを使用してサブテキストを強調し、強調を加えてテキストを目立たせます。