チェックアウト (スマート チェックアウトとも呼ばれます) 要素は、ユーザーが自分のページで直接支払いを回収できるようにする ClickFunnels の特殊なコンポーネントです。ページにシームレスに統合され、顧客を購入をガイドするカスタマイズ可能なインターフェイスを提供します。スマート チェックアウトはユーザー エクスペリエンスを最適化するように設計されており、顧客は製品の表示と選択、支払いの詳細の入力、取引の完了をすべて 1 つの要素内で簡単に行うことができます。この記事では、チェックアウト要素で利用可能な設定について説明します。
.png)
必要条件
アクティブなClickFunnelsアカウント
サポートされているページ(例: funnel checkout ページ、 store checkout ページ)
ヒント:
チェックアウト要素を設定してカスタマイズする前に、 ページ設定に商品を追加することをお勧めします。この段階で製品を追加すると、製品プレースホルダーのプレビューがエディターに表示され、Checkout 要素のスタイル設定中に製品レイアウトを視覚化するのに役立ちます。記事の詳細な手順については、 How to Add and Manage Products in a Funnel Stepをご覧ください。
スマートチェックアウトの仕組み
ClickFunnels のスマート チェックアウト要素には、シームレスな支払い回収エクスペリエンスに必要なものがすべて含まれています。事前に構築されたテンプレートとデザインがあり、チェックアウト フォームを手動で作成する必要がなくなります。この要素は、ファネル ステップに追加された製品を動的に表示し、メイン製品とバンプ製品を自動的に区別します。
スマートチェックアウトは、顧客とのやり取りに基づいて適応します。リピーターの場合、入力フィールドが減り、詳細を再入力することなく迅速な支払い承認が可能になります。サブスクリプション製品のアクティブなサブスクリプションを検出し、再購入の代わりにアップグレードまたはダウングレードするオプションを表示します。さらに、顧客が前のファネルステップで購入を完了したばかりの場合、スマートチェックアウトはワンタイムオファー(OTO)状態を有効にし、支払い情報を再入力する必要を回避します。
この適応性のある顧客認識機能が、 スマートチェックアウトと呼ばれる理由です。
ページエディタでの Checkout 要素の追加
ページエディタ内で、要素を 配置するセクション を追加します。
そのセクション内に 行 を追加します。
行内のオレンジ色の + プラスまたは [新しい要素を追加 ] ボタンをクリックして、新しい要素を挿入します。
[ チェックアウト] カテゴリから、[ チェックアウト] 要素を選択します。
.png)
Checkout 要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。
大事な:
Checkout 要素は、ClickFunnels の ストア ページと ファネル ページでのみ使用でき、製品を追加および管理できます。ブログやコースエディタは製品統合をサポートしていないため、使用できません。
ページごとに Checkout 要素は 1 つしか存在できません。
事前設定済みのチェックアウトテンプレートの選択
チェックアウト要素設定の [テンプレート ] タブでは、事前に構成されたさまざまなチェックアウト フォーム デザインから選択して、ブランドのスタイルやカラー パレットにすばやく一致させることができます。これらのテンプレートは洗練されたレイアウトを提供し、美的好みに合ったデザインを選択することでセットアップ プロセスを合理化できます。.png)
各テンプレートには独自のレイアウトと色のオプションが用意されているため、ブランドを最もよく引き立てるテンプレートを見つけることができます。テンプレートを適用した後にデフォルトの外観に戻す場合は、上部の [リセット] ボタンを使用して、テンプレート固有のスタイルをすべて削除します。この機能を使用すると、ページの外観を制御しながら、さまざまなデザイン オプションを探索できます。
チェックアウト要素のカスタマイズ
要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車⚙️アイコンをクリックするか、要素を直接クリックします。
一般的なスタイル
Checkout 要素の [ 一般スタイル ] セクションでは、チェックアウトコンテナと入力フィールドの全体的な外観とレイアウトをカスタマイズできます。これには、テキスト、背景、境界線、影の設定が含まれており、要素のビジュアル デザインを制御できます。
コンテナスタイル:
[一般スタイル] の [コンテナ] タブは、メインのチェックアウトコンテナのスタイルを制御します。
上マージン
Checkout 要素の上のスペースを調整して、他のページ要素との配置方法を制御できるようにします。スライダーを使用すると、余白の正確なピクセル値を設定できます。CTAヘッドライン
このトグルを使用すると、チェックアウト要素の上に 行動喚起 (CTA) の見出しを追加できます。有効にすると、プロモーション メッセージなどのカスタム テキストを入力できます (例: 「今すぐ注文すると送料無料になります!」)。この CTA のフォント スタイル、サイズ、色をカスタマイズすることもできます。.png)
テキストスタイル
テキストサイズ: コンテナ内のすべてのテキストのフォント サイズを調整し、デバイス間での読みやすさを確保します。
テキストの色: 要素内のプライマリテキストの色を設定します。
フォントファミリー: ブランドのタイポグラフィに合わせて、利用可能なフォントから選択できます。
リンクの色: チェックアウト要素内のリンクの色をカスタマイズし、リンクを目立たせてユーザーエンゲージメントを高めます。
サイズと間隔
幅: Checkout 要素の幅をパーセンテージまたはピクセル値で定義します。
側面のパディング: コンテナの左側と右側に内部パディングを設定し、コンテンツの周囲にスペースを追加して視覚的な魅力を高めます。
バックグラウンド
Bg 色: この設定では、Checkout 要素コンテナ全体の背景色が設定され、ページ デザインとブレンドまたはコントラストできるようになります。
国境
罫線の幅: Checkout 要素の周りの罫線の太さを決定します。
境界線の色: コンテナの背景を補完するように境界線の色を設定します。
コーナー: このコントロールはコンテナの角を丸め、より柔らかいエッジやより明確なエッジを作成するのに役立ちます。
影
ザ 影の設定を使用すると、影効果を適用して要素に深みと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
シャドウ スタイル: はめ込み (要素内の影)と アウトセット (要素の外側の影)のいずれかを選択して、目的の影効果を実現します。
X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
Y方向: シャドウの垂直方向の配置を制御します。正の値は影を下に押し、負の値は影を上に引っ張ります。
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
色: カラーピッカーを使用して、影の色の設定を選択します。
入力スタイル
入力設定では、チェックアウト要素内のフォームフィールド、チェックボックス、支払い方法のスタイルを設定することができます。
アクティブカラー: フォーカスされた入力フィールドまたはアクティブな入力フィールドの色を選択すると、ユーザーは情報を入力している場所を簡単に識別できます。
入力見出し: テキストサイズ、色、区切り色、フォントファミリーを設定することで、入力セクションの見出しの外観を制御できます。これにより、情報を視覚的に整理して、明確なユーザーエクスペリエンスを実現できます。
入力背景とテキスト: 入力フィールドの背景とテキストの色を設定して、読みやすさと全体的なデザインとの視覚的な調和を確保します。
入力境界線と角: 入力フィールドの境界線の幅、色、角の丸みを定義して、シャープで構造化されたものでも、柔らかくて丸みを帯びたものでも、目的の外観を実現します。
チェックアウトの手順
[チェックアウトステップ] 設定では、1 ステップ、2 ステップ、または 3 ステップの形式から選択して、チェックアウトプロセスの構造を制御できます。この柔軟性は、チェックアウト エクスペリエンスをビジネス ニーズやカスタマー ジャーニーに合わせて調整するために不可欠です。
その他:
[ストア チェックアウト] ページで使用できるのは 1 ステップのチェックアウトのみです。
.png)
1ステップチェックアウト
1ステップのチェックアウトでは、すべてのフィールド(商品の選択、配送、支払い)が1つの画面に表示されるため、最小限のデータ要件と迅速なチェックアウトプロセスでシンプルな取引に最適です。2ステップチェックアウト
2ステップのチェックアウトでは、連絡先/配送の詳細と支払い情報が別々の画面に分割されます。これは、顧客の詳細を早期に取得するのに役立ち、支払いが完了していない場合に放棄されたカートシーケンスをフォローアップできます。3ステップチェックアウト
3ステップのチェックアウトでは、製品を選択し、連絡/発送、および支払い画面にプロセスを分割します。より詳細な取引に適しており、顧客に各ステップを案内し、支払いが完了する前に終了した場合にリターゲティングを可能にします。
各ステップオプションをいつ使用しますか?
1ステップ: 最小限のフィールドで簡単なチェックアウトに最適です。
2 ステップまたは 3 ステップ: これは、追加情報を事前に収集する必要がある場合に推奨されます。顧客が支払いステップを完了しない場合、これはリターゲティングの取り組み(カート放棄シーケンスなど)に役立ちます。
チェックアウトプレビュー
「 チェックアウトプレビュー」 オプションを使用すると、選択したステップ(1、2、または3ステップ)に基づいてチェックアウトプロセスを表示できます。この機能を使用すると、各ステップの顧客エクスペリエンスをシミュレートできます。
チェックアウトのステップ数を選択します。
チェックアウトプレビューを使用して、各ステップを個別に表示します。
たとえば、3 ステップのチェックアウトを選択した場合、各画面 (商品の選択、配送情報、支払い情報) をプレビューして、レイアウトとコンテンツが意図したフローと一致していることを確認できます。
(2 ステップと 3 ステップ) チェックアウトの追加設定
2 ステップまたは 3 ステップのチェックアウトを選択すると、ユーザーのステップバイステップのエクスペリエンスを向上させるための追加のカスタマイズ オプションが利用可能になります。これらの設定は、ステップのスタイルやラベルから色やテキストサイズまで、チェックアウトプロセスの各段階をパーソナライズするのに役立ちます。
スタイル:
[ スタイル] 設定では、チェックアウト プロセスでのステップ インジケーターの表示方法を選択できます。次の 3 つのオプションがあります。
水平: このオプションは、チェックアウトコンテナの上部にステップを並べて表示し、水平に配置されたページデザインに合わせて表示します。
垂直: チェックアウトの左側に沿ってステップを積み重ね、垂直構造のレイアウトに適しています。
非表示: このオプションは、ステップインジケーターを完全に非表示にし、チェックアウトフィールドのみが表示されるクリーンで簡素化された外観を提供します。より流線型の外観が好まれる場合に役立ちます。
現在のステップスタイル:
現在のステップ インジケーターの外観をカスタマイズします ( 内矢印、 スケールアップなど ) これにより、アクティブなステップが視覚的に目立ち、強調され、ユーザーの焦点が誘導されます。
見出しテキスト:
ステップテキストラベル:ステップごとにラベルを指定できます( 例:製品、 配送、 支払いの選択)。これらの編集可能なラベルを使用すると、視聴者の共感を呼ぶ方法で各ステップを定義できます。
フォントサイズの調整: 見出し、 小見出し、 ステップ番号 のフォント サイズをカスタマイズして、チェックアウト プロセス全体を通じて視覚的にバランスのとれたブランドに沿った外観を維持します。
色:
アクティブなステップと非アクティブなステップの色: アクティブなステップと非アクティブなステップに個別の色設定が使用できるため、明確な色のコントラストを作成できます。この区別により、ユーザーは自分がどのステップに進んでおり、どのステップが残っているかをすばやく識別できます。.png)
背景: アクティブステップと非アクティブステップの背景色を定義します。
見出し: 読みやすさを高めるために、各ステップの見出しの色を調整します。
小見出し: 一貫性を保つために小見出しの色を設定します。
番号の背景 と 番号テキスト: ステップ番号の背景色とテキストの色をカスタマイズして、ステップ間の視覚的な分離を明確にします。
プライバシーテキスト
このフィールドでは、チェックアウトコンテナの下部に「お客様の情報は共有しません」などのプライバシーの免責事項を追加できます。このメッセージは、データ保護について顧客を安心させ、信頼を築くことで完了率を向上させる可能性があります。.png)
プライバシーテキストは、選択したチェックアウトステップ形式に基づいて動的に配置され、チェックアウトプロセス中のデータセキュリティについて顧客に安心感を提供します。
1ステップチェックアウト:プライバシーテキストはメインの送信ボタンのすぐ下に表示され、顧客が情報を入力して1つのステップで購入を完了するとすぐに表示されます。
2 ステップ チェックアウト: 2 ステップ設定では、プライバシー テキストが最初のステップの下部に表示され、顧客は連絡先情報 (名前、電子メールなど) を入力します。これにより、顧客は支払い段階に進む前にプライバシー メッセージを確認できます。
3 ステップ チェックアウト: 3 ステップのチェックアウトの場合、プライバシー テキストは 2 番目のステップに表示され、連絡先情報入力セクションに合わせて表示されます。この配置により、顧客が最終支払いステップに進む前に信頼が強化されます。
お問い合わせフォーム
チェックアウト要素内の お問い合わせフォーム 設定では、名前、電子メール、住所の詳細など、重要な顧客情報が収集されます。このフォームは、顧客の国に基づいてフィールドを動的に調整するように設計されており、スムーズで関連性の高いユーザー エクスペリエンスを保証します。
入力フィールド
お問い合わせフォームには、 名、 姓、 メールアドレス、 住所などの標準フィールドが含まれています。オプションの [電話番号 ] フィールドは、顧客からこの情報を収集するかどうかに応じてオンに切り替えることができます。フォントや色を含むすべての入力スタイルは、 一般スタイル 設定内で調整して、チェックアウト全体でまとまりのある外観を維持できます。
配送情報の見出し
配送情報の見出しセクションでは、配送情報フィールドの上にカスタマイズされたタイトルを追加できます。デフォルトでは、この見出しは「配送情報」に設定されていますが、ブランドの声に合わせて編集できます。さらに、この見出しの色とスタイルは 、一般設定から変更できます。
請求先住所
[ 請求先住所] セクションでは、チェックアウト時に顧客の住所情報を収集する方法を柔軟に選択できます。できることは次のとおりです。
請求先住所フィールドを無効にする: 請求先の詳細を収集したくない場合は、請求先住所フィールドを無効にすることができます。これにより、チェックアウトフォームから請求先住所の要件が完全に削除されます。
住所タイプの選択: 有効にすると、 完全な住所 (住所、市区町村、都道府県など) または 国と郵便番号のみを収集するように請求先住所を構成できます。ビジネス ニーズに基づいて、[ アドレス タイプ] ドロップダウンで適切なオプションを選択します。
見出しテキストのカスタマイズ: このセクションには編集可能な見出しフィールドが含まれており、請求先住所セクションに「請求先情報」または別のカスタム タイトルとしてラベルを付けることができます。
チェックアウト フォームで、デジタル製品を選択すると請求先住所フィールドが表示され、物理的な製品を選択すると配送先住所フィールドが表示されます。物理的な商品の場合、ユーザーは請求に同じ住所を使用するか、別の請求先住所を入力するオプションのチェックを外すことができます。.png)
大事な:
ファネルにチェックアウト要素を含む OTO(ワンタイムオファー) ページが含まれている場合は、請求先住所の設定がファネルの前のチェックアウトページと一致していることを確認してください。たとえば、メインのチェックアウトページで請求先住所フィールドが無効になっている場合、支払い送信エラーを防ぐために、OTOページでも無効にする必要があります。
国に基づく動的フィールド
お問い合わせフォームは、電話番号フィールドの拡張子など、顧客の国に応じて特定のフィールドを自動的に調整し、世界中の視聴者に適応しやすく、使いやすいものにします。この動的な設定により、関連するフィールドのみが表示されるようになり、よりスムーズな顧客エクスペリエンスが生まれます。
手記:
ページにデジタル商品のみが含まれている場合、配送先住所の入力フィールドはチェックアウト時に表示されません。
製品選択
チェックアウト要素の 製品選択 コンポーネントを使用すると、チェックアウトプロセス中に製品が顧客にどのように表示されるかを制御できます。この機能は、製品を表示するためのカスタマイズ可能なインターフェイスを提供し、ブランドに合わせてユーザー エクスペリエンスを向上させる柔軟なオプションを提供します。ページに追加された製品は、このセクションに自動的に表示され、個々の製品のプレゼンテーションをさらにカスタマイズするためのオプションが利用可能です。プレビューの例を次に示します。.png)
製品の編集:
[商品を編集]ボタンを使用すると、ファネルページエディター内で商品を直接管理できます。エディターを離れることなく、新しい製品を追加したり、既存の製品を変更したり、製品を削除したりできます。この機能により製品管理が合理化され、時間が節約され、外出先での製品の更新が簡単になります。
個々の製品のカスタマイズ:
各製品の横にある鉛筆アイコンをクリックすると、その製品に固有のさらにカスタマイズが可能になります。ここでは、次のような設定を調整できます。.png)
商品画像: 好みに応じて商品画像のオンとオフを切り替えます。
ハイライトラベル: 「ベストセラー」などのラベルを追加して、特定の製品を強調し、顧客の注目を集めます。
テキストの色を強調表示する: 強調表示されたテキストの色をカスタマイズして、目立たせるようにします。
製品選択の見出し:
商品選択領域の上に「商品を選択」などの見出しを追加できます。このテキストは、 一般設定でのフォント スタイル、色、サイズの調整など、デザイン設定に合わせて変更できます。「商品選択の見出し」をオフに切り替えることもできます。そうすれば、タイトルが非表示になります。
製品選択:
製品選択機能には、製品を表示するための 3 つの異なるレイアウト オプションが用意されています。チェックアウトフォームで商品セレクターを非表示にする場合は、商品選択オプションを オフに切り替えます 。.png)
クラシック: シンプルなリスト形式で商品を表示する、シンプルで伝統的なレイアウト。
モダン: 洗練された視覚的に魅力的なプレゼンテーションのためのモダンなデザインの更新されたレイアウト。
グリッド: このタイプのディスプレイは製品をグリッド レイアウトで表示するため、視覚的に整理された方法で複数の製品を同時に表示するのに最適です。
詳細設定:
製品選択の詳細 設定 では、各製品カードの外観をさらにパーソナライズできます。
見出しサイズ: 商品見出しのフォント サイズを調整して、視認性と読みやすさを確保します。
製品説明: 製品説明を有効または無効にし、テキスト サイズを設定して、視覚的なバランスと明瞭さを維持します。
商品画像サイズ: レイアウトと視覚的な魅力を最適化するには、各商品カード内の画像サイズを制御し、カード幅の最大 50% を表示します。つまり、商品画像のサイズはカード幅の半分を超えることはできません。「商品画像」オプションをオフにして、商品画像を非表示にすることもできます。
配送オプション
チェックアウト要素内の 配送オプション コンポーネントを使用すると、顧客は好みの配送方法を選択できるため、チェックアウト時の柔軟性と利便性が向上します。このセクションでは、利用可能な配送の選択肢とそれぞれのコストの明確な内訳を提供し、顧客が情報に基づいた意思決定を行えるようにします。.png)
配送オプション Toggle
必要に応じて、 配送オプション を有効または無効にすることができます。有効にすると、 通常 や エクスプレスなどの利用可能な配送方法のリストが表示され、各オプションには対応する価格が表示されます。
配送オプションの見出し
配送オプションの見出し機能を使用すると、このセクションのタイトルをカスタマイズできます。デフォルトでは「配送情報」に設定されていますが、ブランドのトーンに合わせて編集できます。さらに、一般設定でこの見出しの色とスタイルを調整して、チェックアウト ページ全体で一貫した外観にすることができます。
手記:
チェックアウトページが デジタル製品を販売するように設定されている場合、チェックアウト要素は、配送オプションが有効になっていても自動的に非表示になります。これにより、物理的な配送を必要としないデジタル購入の合理化されたエクスペリエンスが保証されます。
配送プロファイルの作成と設定の詳細については、 How to Create and Manage Shipping Profilesの記事をご覧ください。
注文の概要
Checkout 要素の [注文概要 ] コンポーネントには、顧客のカート内の商品と、税金、送料、合計金額の詳細が明確に分類されます。このセクションにより、顧客は購入前に注文を包括的に把握できるようになり、透明性が促進され、カート放棄が減ります。.png)
クーポンフィールド
注文サマリーには、有効または無効にできるオプションの クーポンフィールド が含まれています。有効にすると、顧客は割引コードを入力でき、それを適用して更新された合計を即座に確認できます。このオプションは、顧客がチェックアウト内で直接プロモーションを申し込むことができるようにすることで、購入を完了することを奨励します。
商品の割引コードを作成する方法については、 Getting Started with Discounts - Coupons at Checkout 記事をご覧ください。
展開ビュー
デフォルトでは、[注文の概要] セクションは [展開] に設定されており、すべての詳細が顧客にオープンに表示されます。ただし、注文の概要を最初に折りたたんで表示したい場合は、この設定をオフに切り替えることができ、顧客が注文を詳細に確認したい場合は、この設定を展開するオプションがあります。
手記:
チェックアウトページに Order Summary 要素を含めると、注文の概要はチェックアウトコンテナ内に表示されません。代わりに、注文の概要が計算され、注文の概要要素に表示されます。
お支払い方法
チェックアウト要素の 支払い方法コンポーネントには、 ワークスペースと目標到達プロセス設定で構成された利用可能な支払いオプションが自動的に表示されます。このコンポーネントは、顧客が好みの支払い方法を柔軟に選択できるようにしながら、各オプションの表示と可用性を制御できるように設計されています。.png)
入力テキストサイズとフォントファミリー
[支払い方法] 設定の上部で、[ 入力テキスト サイズ] を調整すると、支払いセクション内のすべての入力フィールドのフォント サイズを変更できます。この設定により、テキストの読みやすさが確保され、ページのデザインと一致します。さらに、ブランドのタイポグラフィに合わせて フォント ファミリー を選択して、チェックアウト ページ全体で一貫した外観を維持できます。
有効な支払い
[有効な支払い] セクションには、ワークスペースと目標到達プロセスの設定に基づいて、利用可能なすべての支払い方法が一覧表示されます。このコンポーネントには、クレジットカード、PayPal、Apple Pay などのオプションがアカウントで設定されている場合は、自動的に表示されます。このセクションでは、次のことができます。
優先度を設定する: 支払い方法を好みの順序にドラッグして調整します。一番上にリストされたオプションがデフォルトの支払い方法になり、顧客を主要なオプションに誘導します。
特定の方法を無効にする: このページで提供したくない場合は、個々の支払い方法をオフに切り替えます。たとえば、このチェックアウトでクレジット カードでのみ支払いを回収する場合は、Apple Pay を無効にすることができます。
ワークスペース、ストア、ファネルでゲートウェイを有効にする方法の詳細については、 How to Use Payments AI within ClickFunnels 記事を参照してください。
注文バンプ
Checkout 要素の Order Bump コンポーネントを使用すると、チェックアウトフロー内で追加の商品を直接提供できます。この機能は、顧客がワンクリックで購入に補完的なアイテムを追加するよう促すことで、注文額を増やす優れた方法です。
製品の編集:
[商品を編集]ボタンを使用すると、ファネルページエディター内で商品を直接管理できます。エディターを離れることなく、新しい製品を追加したり、既存の製品を変更したり、製品を削除したりできます。この機能により製品管理が合理化され、時間が節約され、外出先での製品の更新が簡単になります。
バンプ スタイリング
[バンプ スタイル]トグルを使用すると、順序バンプを表示するためのさまざまなレイアウト スタイルが有効になります。
クラシック: オーダーバンプのためのシンプルでミニマルなスタイル。
モダン: より視覚的に魅力的で更新されたデザイン。
一般的なスタイリング
[ 一般 ] セクションでは、オーダー バンプのさまざまな要素をカスタマイズできます。
背景色: オーダーバンプコンテナの背景色を設定します。
見出しの色: 順序のバンプ内の見出しテキストの色を定義します。
説明の色: 説明テキストの色を調整します。
ボーダーカラー: オーダーバンプの周りのボーダーの色を選択して、目立たせることができます。
リンクの色: 順序バンプテキスト内のリンクの色を設定します。
バンプ矢印
さらに、 バンプ矢印 設定を使用して、順序バンプに注意を向けることができます。
矢印スタイル: 円、天使、シェブロンなどのさまざまな矢印スタイルから選択して、バンプを指します。
矢印の色: 矢印の色をカスタマイズして、背景を補完または対照します。
アニメーション: 必要に応じて、矢印にアニメーションを追加して強調します。
画像
[ バンプ画像の表示 ] 設定を有効または無効にして、注文バンプ内に商品画像を表示します。この視覚的要素は、オファーを強化し、バンプをより目立たせるのに役立ちます。
影
ザ 影の設定を使用すると、影効果を適用して要素に深みと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。
スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
シャドウ スタイル: インセット (要素内の影) とアウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。
X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
色: カラーピッカーを使用して、影の色を選択します。
ボタン
Checkout 要素の [ボタン] 設定では、チェックアウト要素のアクションとスタイルをカスタマイズでき、ボタンのテキスト、スタイル、利用規約やダウンセルオプションの追加リンクを調整するオプションが提供されます。
ボタンテキスト
[ ボタンテキスト] セクションでは、さまざまなアクションボタンに表示されるテキストを指定できます。
ゲスト送信テキスト: ゲストのチェックアウトの場合、通常は「送信」または「注文の完了」というラベルの付いたメイン ボタン テキストが使用されます。
保存されたボタンテキスト: このテキストは、リピーターの場合、またはユーザーが OTO モードでチェックアウトページにアクセスしたときに使用されます。「Rush My Order」などと書かれているかもしれません。
アップグレード/ダウングレードボタンのテキスト: サブスクリプションを変更する顧客の場合、このボタンを「注文の更新」などのテキストでカスタマイズできます。
各ボタンのテキストフィールドの横にある鉛筆アイコンをクリックすると、 メインテキスト (プライマリメッセージ)と サブテキスト (メインテキストの下にあるセカンダリ行、例えば「期間限定オファー」や「セキュアチェックアウト」など)の両方を追加して、ボタンをさらにカスタマイズできます。この柔軟性により、オファーに関する追加の詳細を伝えながら、顧客に行動を促すカスタマイズされたメッセージを作成できます。.png)
リダイレクトの上書きを送信
このオプションを使用すると、ファネルのデフォルトの次のステップではなく、フォーム送信時に特定のURLに顧客をリダイレクトできます。このオプションをオンにすると、ユーザーがチェックアウトフォームを送信した後に到達する絶対URL(例:https://yourdomain.com/thank-you)または相対パス(例:/thank-you)を挿入できます。
利用規約
[ 利用規約] チェックボックスを有効にして、続行する前に顧客の同意を要求できます。このセクションでは、基本的な編集ツール (太字、斜体、リンクなど) を使用して用語テキストを追加および書式設定できるため、注文を確定する前に顧客に用語を確実に知らせることができます。
.png)
ダウンセルリンクテキスト
このオプションを使用すると、メイン アクション ボタンの下にセカンダリ リンクを追加して、顧客に別の選択肢を提供できます。たとえば、「いいえ、これは欲しくない」などのテキストを使用できます。このリンクは、特定のテキストと、次のファネルステップまたは別の指定されたページにつながるURLでカスタマイズでき、プライマリオファーを続行しないことを選択した顧客にオプションを提供します。.png)
このダウンセルリンクは、アップセルページで特に役立ちます。顧客がメインのチェックアウトページで購入を完了し、アップセルオファーに到達した場合、アップセルを希望しない可能性があります。ダウンセル リンクを提供することで、ファネルの次のステップ (ダウンセル オファーを含むチェックアウト ページ) に誘導できます。この機能を設定するには、リンクアクションとして特別なコマンド ?next_funnel_step=true を使用します。このコマンドは、前のセッションの顧客の支払い資格情報を保持するため、ダウンセル ページで支払い情報を再入力せずに続行できます。
ボタンスタイル
ボタンコンポーネント内のこのセクションでは、チェックアウト要素のアクションボタンの外観を完全にカスタマイズできます。これには、ボタンのデフォルト状態のスタイルや、カーソルを合わせたり押したりしたときの外観の設定が含まれます。
パディング垂直
このオプションを使用すると、ボタンの垂直方向のパディングを調整して、ボタンのテキストの周囲の高さと間隔を制御できます。これはピクセル単位で設定できるため、デザインのニーズに合わせて正確に調整できます。
スタイルオプション
いくつかの定義済みのボタン スタイルから選択して、ボタンの全体的なルック アンド フィールを確立します。これらのスタイルは、チェックアウト ページ全体でまとまりのあるビジュアル デザインを作成するのに役立ちます。
各ボタンは、次の 3 つの操作状態に対して一意のスタイルを持つことができます。
デフォルト: 操作前のボタンの標準的な外観。
ホバー: 顧客がボタンにカーソルを合わせたときに表示されるスタイルで、視覚的なフィードバックを提供します。
押された状態: ボタンがクリックまたは押されたときに表示され、触覚的な反応を示すスタイル。
状態ごとに、以下をカスタマイズできます。
背景色: 背景色を設定して、各状態でのボタンの外観を定義します。
テキストの色: ボタンのテキストの色を調整して、読みやすさとブランドの色との一貫性を確保します。
サブテキストの色: 小見出しや説明など、ボタンに表示される追加のテキストをカスタマイズします。
ボタンの色を編集: デザインに応じて、ボタンの境界線の色を変更して、ボタンを目立たせたり、溶け込んだりします。
プライマリ テキスト スタイル
このセクションでは、ボタン テキストのタイポグラフィを制御して、ブランドの美学と確実に一致させることができます。ボタン テキストのカスタム フォントを選択したり、太さを調整して太字にしたり、軽くしたりして、デスクトップとモバイルの両方のフォント サイズを設定して、デバイス間で最適な読みやすさを実現できます。文字の間隔と行の高さの調整はテキストのレイアウトを調整するのに役立ち、テキストの大文字と小文字のオプション (大文字やタイトル ケースなど) を使用すると、ブランドのスタイルに合わせることができます。さらに、下線や取り消し線などのテキスト装飾を適用して強調し、機能的で視覚的にまとまりのあるボタンを作成できます。
サブテキストスタイル
このセクションでは、フォント、サイズ、間隔、配置など、ボタン上のサブテキストの外観を調整できます。余白、フォント スタイル、文字間隔、装飾などの詳細を変更して、サブテキストがメイン ボタンのテキストを補完するようにすることができます。
サブテキストシャドウ
この設定を切り替えると、サブテキストに影効果が追加され、視認性が向上し、ボタンのデザインに深みが加わります。
境
[ボーダー] 設定では、ボタンの周囲に境界線を追加できます。色、太さ、スタイルを調整してボタンをフレームに収め、目立たせることができます。
隅
ボタンの角の半径をカスタマイズして、丸みを帯びたエッジまたは正方形のエッジを作成します。すべてのコーナーに均一なスタイルを適用するか、各コーナーを個別に調整するためにエッジ を分離 することができます。
影
ボタン全体に影効果を追加して、レイヤー化された 3D 外観を実現します。この設定により視覚的な魅力が高まり、ページ上でボタンが目立つようになります。
オーバーレイの読み込み
Checkout 要素の Loading Overlay コンポーネントは、支払い処理中に表示されるカスタムオーバーレイ表示を作成します。この視覚的なインジケーターは、取引が進行中であることを顧客に安心させ、時期尚早に離れるのを防ぎます。
.png)
オーバーレイ設定の読み込み
背景色と不透明度: 背景色をカスタマイズし、不透明度を調整してオーバーレイの下にあるページ コンテンツの可視性を制御し、透明度と読み込みメッセージへの焦点のバランスを提供します。
読み込みアイコン
アイコンのスタイルと色: さまざまな読み込みアイコン スタイル (長いバー、ドット、デュアル リングなど) から選択し、ブランドに合った色を選択します。読み込みアイコンは、チェックアウトプロセスが進行中であることを強調します。
タイトルとサブタイトル
タイトル: タイトルはオーバーレイ上のプライマリ テキストで、通常は「支払いの処理中」などのメッセージに使用されます。ブランディングに合わせてテキスト、サイズ、色をカスタマイズします。
サブタイトル: タイトルの下にあるオプションのテキスト行 (例: 「このページを離れないでください!」)で、顧客をさらに誘導します。サイズと色を調整して、読みやすさを確保できます。
ロゴ画像
ロゴの配置: この設定を有効にすると、オーバーレイの左上隅にロゴが表示されます。カスタム画像をアップロードするか、動的ワークスペースのロゴを使用して、他の要素を圧倒することなく表示できるようにサイズを調整できます。
カスタム設定
Checkout 要素の Custom Settings コンポーネントは、特定の顧客とのやり取りや好みに基づいてチェックアウトエクスペリエンスを管理するための追加のコントロールを提供します。
Blur の入力検証を無効にする: 顧客がチェックアウト フォームに記入し、「電子メール」フィールドに電子メール アドレスを入力していると想像してください。通常、ぼかしで入力検証を有効にすると、顧客が電子メール フィールドの外側をクリックするとすぐに、システムは電子メール形式が正しいかどうかを即座にチェックします。正しくない場合、エラー メッセージがポップアップ表示され、顧客が入力をすぐに修正するように案内される場合があります。
.png)
ただし、 ぼかしで入力検証を無効にすると、この即時検証は行われません。代わりに、システムは顧客がフォームを送信するまで待機してエラーをチェックします。この設定により、特に顧客が各フィールドに入力するときに検証プロンプトによって中断されたくない場合に、その場でのエラー メッセージを最小限に抑えることで、よりスムーズなエクスペリエンスを作成できます。
OTP の無効化: このオプションを有効にすると、リピーターのワンタイム パスワード (OTP) 検証が防止されます。デフォルトでは、ClickFunnels はリピーターを認識し、OTP を送信して情報を事前に入力して、より迅速なチェックアウトを実現します。ただし、この設定を無効にすると、リピーターはOTPプロンプトを受信せず、ゲストモードでチェックアウトを進み、情報を手動で入力します。デフォルトでは、OTO オプションは無効になっています。OTPオプションがオンになっているプレビューの例を次に示します。
.png)
サブスクリプションの重複検出を有効にします。 このオプションは、以前にいずれかの商品(サブスクリプション価格)を定期購入したが、後でキャンセルしたリピーターを特定するのに役立ちます。有効にすると、ClickFunnels はチェックアウト時に顧客の情報をチェックして、過去のサブスクリプションを検出します。
一致するものが見つかった場合、顧客にチェックアウトプロセス全体を再度完了するように要求する代わりに、システムはカスタマーセンターから直接以前のサブスクリプションを再アクティブ化するオプションを提供するウェル カムバックメッセージ を表示します。これにより、リピーターの時間を節約し、重複するサブスクリプションを回避することで全体的なエクスペリエンスを向上させることができます。
手記:
このオプションを有効にする場合は、[OTP を無効にする] オプションも オンに切り替え ることをお勧めします。OTP を有効にすると、OTP を確認する顧客には、 Welcome Back メッセージではなく [Saved Checkout] 画面が表示されます。OTP を無効にすると、Welcome Back メッセージが表示され、顧客は意図したとおりにサブスクリプションをすばやく再アクティブ化できます。
大事な:
カスタム設定コンポーネントは、ファネル設定で支払い処理業者として Payments AI が選択されている場合にのみ使用できます。Stripe が決済処理業者として設定されている場合、カスタム設定コンポーネントはチェックアウト要素の設定に表示されません。
テキスト設定
Checkout 要素の Text Settings コンポーネントは、チェックアウトページ全体のすべてのテキストラベルとプレースホルダーを変更および管理するための一元的な場所を提供します。個々のコンポーネントを移動する代わりに、ボタン ラベル、入力フィールド名、セクション見出し、その他の説明テキストを 1 か所で調整できます。
カスタマイズ可能なセクションには次のものが含まれます。
ボタンテキスト: 注文の送信や更新などのアクションのラベルを変更します。
見出し: 「連絡先情報」、「配送情報」、「支払い情報」などのセクション タイトルを変更します。
連絡先入力ラベル: 「名」、「電子メール」、「電話番号」などのフィールドのラベルを調整します。
配送入力ラベル: 「住所」、「市区町村」、「郵便番号」など、配送の詳細に関連するフィールドを更新します。
請求入力ラベル: 配送と同様に、請求情報フィールドのラベルを変更します。
カード支払いテキスト: 「カード番号」、「有効期限」、「CVV」などのフィールド ラベルをカスタマイズします。
概要テキスト: 「税金」、「割引」、「合計」など、注文の概要に関連するラベルを調整します。
オーバーレイの読み込み: 処理中に表示されるタイトルや字幕など、メッセージを読み込むためのテキストを設定します。
その他のテキスト: 「配送オプション」や「ゲストとしてチェックアウト」のプレースホルダなど、追加のカスタマイズ可能なフィールド。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。.png)
ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
デスクトップ (
🖥️ ) アイコン: コンテナはデスクトップ ビューでのみ表示されます。モバイル(
📱 )アイコン:コンテナはモバイルビューでのみ表示されます。目 (
👁️ ) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。コード (</>) アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。
ごみ箱 (
🗑️ ) アイコン: ページ エディターからコンテナーを完全に削除します。
詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
Advanced Settings - Customize Styles: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
Advanced Settings - Customize Animation: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法 を学習 します。
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。
カスタムスロットを使用して Checkout 要素内にブロック要素を追加する
ClickFunnels の Checkout 要素には「カスタム スロット」が含まれており、チェックアウト フロー内にブロック要素を追加することでレイアウトを強化およびパーソナライズできます。これらのカスタム スロットにより、より複雑なネストされた設計が可能になります。ブロック要素を挿入するには、Checkout 要素内の任意のコンポーネントにカーソルを合わせると、オレンジ色の「要素の追加」ボタンが表示されます。このボタンをクリックすると、小見出し、画像、テキストなどのさまざまなブロック要素を追加して、さらにカスタマイズするためのオプションが開きます。
.png)
警告:
checkout-type 要素の追加は避けてください。 Checkout 要素内に別の Checkout タイプの要素 (Add to Cart、Checkout など) を挿入しないでください。ページごとに Checkout 要素は 1 つだけであることに注意してください。
応答性チェック: 要素を追加すると、さまざまなデバイスのレイアウトに影響を与える可能性があります。モバイルビューとデスクトップビューでデザインをテストして、Checkout 要素が応答性とユーザーフレンドリーを維持していることを確認してください。