チェックアウト: ユーザーが購入を完了できるようにする

公開日: 2024年11月4日更新日: 2026年10月21日

チェックアウト (スマートチェックアウトとも呼ばれます) 要素は、ユーザーが自分のページで直接支払いを回収できるようにする ClickFunnels の特殊なコンポーネントです。ページにシームレスに統合され、顧客を購入をガイドするカスタマイズ可能なインターフェイスを提供します。スマートチェックアウトはユーザーエクスペリエンスを最適化するように設計されており、顧客は製品の表示と選択、支払いの詳細の入力、取引の完了をすべて 1 つの要素内で簡単に行うことができます。この記事では、チェックアウト要素で利用可能な設定について説明します。

必要条件

アクティブなClickFunnelsアカウント
サポートされているページ(例: ファネルのチェックアウトページ、ストアのチェックアウトページ)

スマートチェックアウトの仕組み

ClickFunnels のスマートチェックアウト要素には、シームレスな支払い回収エクスペリエンスに必要なものがすべて含まれています。事前に構築されたテンプレートとデザインがあり、チェックアウトフォームを手動で作成する必要がなくなります。この要素は、ファネルステップに追加された製品を動的に表示し、メイン製品とバンプ製品を自動的に区別します。

スマートチェックアウトは、顧客とのやり取りに基づいて適応します。リピーターの場合、入力フィールドが減り、詳細を再入力することなく迅速な支払い承認が可能になります。サブスクリプション製品のアクティブなサブスクリプションを検出し、再購入の代わりにアップグレードまたはダウングレードするオプションを表示します。さらに、顧客が前のファネルステップで購入を完了したばかりの場合、スマートチェックアウトはワンタイムオファー(OTO)状態を有効にし、支払い情報を再入力する必要を回避します。

この適応性のある顧客認識機能が、 スマートチェックアウトと呼ばれる理由です。

ページエディタでの Checkout 要素の追加

ページエディタ内で、要素を 配置するセクション を追加します。
そのセクション内に行を追加します。
行内のオレンジ色の +（プラス）または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
チェックアウト カテゴリから チェックアウト 要素を選択します。

Checkout 要素を追加すると、ページデザインに合わせて外観をカスタマイズできます。

事前設定済みのチェックアウトテンプレートの選択

チェックアウト要素設定の [テンプレート ] タブでは、事前に構成されたさまざまなチェックアウトフォームデザインから選択して、ブランドのスタイルやカラーパレットにすばやく一致させることができます。これらのテンプレートは洗練されたレイアウトを提供し、美的好みに合ったデザインを選択することでセットアッププロセスを合理化できます。

各テンプレートには独自のレイアウトと色のオプションが用意されているため、ブランドを最もよく引き立てるテンプレートを見つけることができます。テンプレートを適用した後にデフォルトの外観に戻す場合は、上部の [リセット] ボタンを使用して、テンプレート固有のスタイルをすべて削除します。この機能を使用すると、ページの外観を制御しながら、さまざまなデザインオプションを探索できます。

チェックアウト要素のカスタマイズ

要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車**⚙️アイコン**をクリックするか、要素を直接クリックします。

一般スタイル

Checkout 要素の [ 一般スタイル ] セクションでは、チェックアウトコンテナと入力フィールドの全体的な外観とレイアウトをカスタマイズできます。これには、テキスト、背景、境界線、影の設定が含まれており、要素のビジュアルデザインを制御できます。

コンテナスタイル:

[一般スタイル] の [コンテナ] タブは、メインのチェックアウトコンテナのスタイルを制御します。

上マージン
Checkout 要素の上のスペースを調整して、他のページ要素との配置方法を制御できるようにします。スライダーを使用すると、余白の正確なピクセル値を設定できます。
CTA見出し
このトグルを使用すると、チェックアウト要素の上に 行動喚起 (CTA) の見出しを追加できます。有効にすると、プロモーションメッセージなどのカスタムテキストを入力できます (例: 「今すぐ注文すると送料無料になります!」)。この CTA のフォントスタイル、サイズ、色をカスタマイズすることもできます。
テキストスタイル
- テキストサイズ: コンテナ内のすべてのテキストのフォントサイズを調整し、デバイス間での読みやすさを確保します。
- テキストの色: 要素内のプライマリテキストの色を設定します。
- フォントファミリー: ブランドのタイポグラフィに合わせて、利用可能なフォントから選択できます。
- リンクの色: チェックアウト要素内のリンクの色をカスタマイズし、リンクを目立たせてユーザーエンゲージメントを高めます。
サイズと間隔
- 幅: Checkout 要素の幅をパーセンテージまたはピクセル値で定義します。
- パディングサイド: コンテナの左側と右側に内部パディングを設定し、コンテンツの周囲にスペースを追加して視覚的な魅力を高めます。
背景
- 背景色: この設定では、Checkout 要素コンテナ全体の背景色が設定され、ページデザインとブレンドまたはコントラストできるようになります。
ボーダー
- ボーダー幅: Checkout 要素の周りのボーダーの太さを決定します。
- ボーダーの色: コンテナの背景を補完するようにボーダーの色を設定します。
- 角: このコントロールはコンテナの角を丸め、より柔らかいエッジやより明確なエッジを作成するのに役立ちます。
影
影の設定を使用すると、影効果を適用して要素に深みと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。
- スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
- シャドウスタイル: はめ込み (要素内の影)と アウトセット (要素の外側の影)のいずれかを選択して、目的の影効果を実現します。
- X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
- Y方向: シャドウの垂直方向の配置を制御します。正の値は影を下に押し、負の値は影を上に引っ張ります。
- ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
- スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
- 色: カラーピッカーを使用して、影の色の設定を選択します。

入力スタイル

入力設定では、チェックアウト要素内のフォームフィールド、チェックボックス、支払い方法のスタイルを設定することができます。

アクティブカラー: フォーカスされた入力フィールドまたはアクティブな入力フィールドの色を選択すると、ユーザーは情報を入力している場所を簡単に識別できます。
入力見出し: テキストサイズ、色、区切り色、フォントファミリーを設定することで、入力セクションの見出しの外観を制御できます。これにより、情報を視覚的に整理して、明確なユーザーエクスペリエンスを実現できます。
入力背景とテキスト: 入力フィールドの背景とテキストの色を設定して、読みやすさと全体的なデザインとの視覚的な調和を確保します。
入力境界線と角: 入力フィールドの境界線の幅、色、角の丸みを定義して、シャープで構造化されたものでも、柔らかくて丸みを帯びたものでも、目的の外観を実現します。

チェックアウトステップ

[チェックアウトステップ] 設定では、1 ステップ、2 ステップ、または 3 ステップの形式から選択して、チェックアウトプロセスの構造を制御できます。この柔軟性は、チェックアウトエクスペリエンスをビジネスニーズやカスタマージャーニーに合わせて調整するために不可欠です。

1ステップチェックアウト
1ステップのチェックアウトでは、すべてのフィールド(商品の選択、配送、支払い)が1つの画面に表示されるため、最小限のデータ要件と迅速なチェックアウトプロセスでシンプルな取引に最適です。
2ステップチェックアウト
2ステップのチェックアウトでは、連絡先/配送の詳細と支払い情報が別々の画面に分割されます。これは、顧客の詳細を早期に取得するのに役立ち、支払いが完了していない場合に放棄されたカートシーケンスをフォローアップできます。
3ステップチェックアウト
3ステップのチェックアウトでは、製品を選択し、連絡/発送、および支払い画面にプロセスを分割します。より詳細な取引に適しており、顧客に各ステップを案内し、支払いが完了する前に終了した場合にリターゲティングを可能にします。

各ステップオプションをいつ使用しますか?

1ステップ: 最小限のフィールドで簡単なチェックアウトに最適です。
2 ステップまたは 3 ステップ: これは、追加情報を事前に収集する必要がある場合に推奨されます。顧客が支払いステップを完了しない場合、これはリターゲティングの取り組み(カート放棄シーケンスなど)に役立ちます。

チェックアウトプレビュー

チェックアウトプレビュー オプションを使用すると、さまざまな状況で顧客に表示されるチェックアウトをエディター内で確認できます。

ステップ 1 の 3、ステップ 2 の 3 など: 2 ステップまたは 3 ステップのチェックアウトの各ステップをプレビューします。1 ステップのチェックアウトでは、このオプションは ゲストチェックアウト になります。
リピート顧客: 詳細情報が保存済みの顧客に表示されるチェックアウトをプレビューします。
アップグレード / ダウングレード: すでに有効なサブスクリプションを持ち、それを変更できる顧客に表示されるチェックアウトをプレビューします。
一回限りのオファー (OTO): 顧客が購入を完了した直後のワンタイムオファーページでのチェックアウトをプレビューします。

ストアのチェックアウトページでは、ステップのオプションは ゲストチェックアウト のみです。

たとえば、3 ステップのチェックアウトを選択した場合、各画面 (商品の選択、配送情報、支払い情報) をプレビューして、レイアウトとコンテンツが意図したフローと一致していることを確認できます。

(2 ステップと 3 ステップ) チェックアウトの追加設定

2 ステップまたは 3 ステップのチェックアウトを選択すると、ユーザーのステップバイステップのエクスペリエンスを向上させるための追加のカスタマイズオプションが利用可能になります。これらの設定は、ステップのスタイルやラベルから色やテキストサイズまで、チェックアウトプロセスの各段階をパーソナライズするのに役立ちます。

スタイル：

[ スタイル] 設定では、チェックアウトプロセスでのステップインジケーターの表示方法を選択できます。次の 3 つのオプションがあります。

水平: このオプションは、チェックアウトコンテナの上部にステップを並べて表示し、水平に配置されたページデザインに合わせて表示します。
垂直: チェックアウトの左側に沿ってステップを積み重ね、垂直構造のレイアウトに適しています。
非表示: このオプションは、ステップインジケーターを完全に非表示にし、チェックアウトフィールドのみが表示されるクリーンで簡素化された外観を提供します。より流線型の外観が好まれる場合に役立ちます。

現在のステップスタイル:

現在のステップインジケーターの外観をカスタマイズします（内部矢印、スケールアップ など）。これにより、アクティブなステップが視覚的に目立ち、強調され、ユーザーの焦点が誘導されます。

見出しテキスト:

ステップテキストラベル:ステップごとにラベルを指定できます（例: 商品を選択、配送、支払い）。これらの編集可能なラベルを使用すると、視聴者の共感を呼ぶ方法で各ステップを定義できます。
フォントサイズの調整: 見出し、サブ見出し、ステップ番号 のフォントサイズをカスタマイズして、チェックアウトプロセス全体を通じて視覚的にバランスのとれたブランドに沿った外観を維持します。

色：

アクティブなステップと非アクティブなステップの色: アクティブなステップと非アクティブなステップに個別の色設定が使用できるため、明確な色のコントラストを作成できます。この区別により、ユーザーは自分がどのステップに進んでおり、どのステップが残っているかをすばやく識別できます。

背景: アクティブステップと非アクティブステップの背景色を定義します。
見出し: 読みやすさを高めるために、各ステップの見出しの色を調整します。
サブ見出し: 一貫性を保つためにサブ見出しの色を設定します。
数字背景 と 数字テキスト: ステップ番号の背景色とテキストの色をカスタマイズして、ステップ間の視覚的な分離を明確にします。

プライバシーテキスト

このフィールドでは、チェックアウトコンテナの下部に「お客様の情報は共有しません」などのプライバシーの免責事項を追加できます。このメッセージは、データ保護について顧客を安心させ、信頼を築くことで完了率を向上させる可能性があります。

プライバシーテキストは、選択したチェックアウトステップ形式に基づいて動的に配置され、チェックアウトプロセス中のデータセキュリティについて顧客に安心感を提供します。

1ステップチェックアウト:プライバシーテキストはメインの送信ボタンのすぐ下に表示され、顧客が情報を入力して1つのステップで購入を完了するとすぐに表示されます。
2 ステップチェックアウト: 2 ステップ設定では、プライバシーテキストが最初のステップの下部に表示され、顧客は連絡先情報 (名前、電子メールなど) を入力します。これにより、顧客は支払い段階に進む前にプライバシーメッセージを確認できます。
3 ステップチェックアウト: 3 ステップのチェックアウトの場合、プライバシーテキストは 2 番目のステップに表示され、連絡先情報入力セクションに合わせて表示されます。この配置により、顧客が最終支払いステップに進む前に信頼が強化されます。

お問い合わせフォーム

チェックアウト要素内の お問い合わせフォーム 設定では、名前、電子メール、住所の詳細など、重要な顧客情報が収集されます。このフォームは、顧客の国に基づいてフィールドを動的に調整するように設計されており、スムーズで関連性の高いユーザーエクスペリエンスを保証します。

入力フィールド
お問い合わせフォームには、名、姓、 メールアドレス、住所などの標準フィールドが含まれています。電話番号を表示 トグルをオンにすると 電話番号 フィールドが追加されます。このトグルはデフォルトでオンです。電話番号を収集しない場合はオフにしてください。フォントや色を含むすべての入力スタイルは、 一般スタイル 設定内で調整して、チェックアウト全体でまとまりのある外観を維持できます。

連絡先情報の見出し（Payments AI のみ）
1 ステップのチェックアウトでは、連絡先フィールドの上にある見出しの表示・非表示を切り替えたり、編集したりできます。

配送情報の見出し
配送情報の見出しセクションでは、配送情報フィールドの上にカスタマイズされたタイトルを追加できます。デフォルトでは、この見出しは「配送情報」に設定されていますが、ブランドの声に合わせて編集できます。さらに、この見出しの色とスタイルは 、一般設定から変更できます。

請求先住所
請求先住所 セクションでは、チェックアウト時に顧客の住所情報を収集する方法を柔軟に選択できます。使用できるオプションは決済処理業者によって異なります。できることは次のとおりです。

請求先住所フィールドを無効にする（Payments AI のみ）: 請求先の詳細を収集したくない場合は、請求先住所フィールドを無効にすることができます。これにより、チェックアウトフォームから請求先住所の要件が完全に削除されます。
住所の種類を選択する（Payments AI のみ）: 有効にすると、完全な住所（住所、市区町村、都道府県など）または 国と郵便番号 のみを収集するように請求先住所を設定できます。ビジネスのニーズに応じて、住所の種類 で適切なオプションを選択します。
見出しテキストのカスタマイズ: このセクションには編集可能な見出しフィールドが含まれており、請求先住所セクションに「請求情報」などのカスタムタイトルを付けることができます。
Stripe の場合: 一部の支払い方法では請求先住所が必要なため、完全に無効にすることはできません。請求先住所 をオフにした場合は、代わりに 住所の種類 を選択します (Stripe Tax が有効な場合は表示されません)。
- Stripeによる最適化: 支払いの承認率を最適化するために、請求先住所をいつ表示するかを Stripe が判断します。
- 必要な場合のみ: 選択された支払い方法で必要な場合にのみ請求先住所が表示されます。
ファネルの決済ゲートウェイで Stripe Tax が有効になっている場合、この設定がオフでも、税額が正しく計算されるようにチェックアウトで請求先住所が自動的に有効になります。

チェックアウトフォームで、デジタル製品を選択すると請求先住所フィールドが表示され、物理的な製品を選択すると配送先住所フィールドが表示されます。物理的な商品の場合、ユーザーは請求に同じ住所を使用するか、別の請求先住所を入力するオプションのチェックを外すことができます。
請求先住所の設定（住所の種類：完全な住所）と請求先住所の入力欄

国に基づく動的フィールド
お問い合わせフォームは、電話番号フィールドの拡張子など、顧客の国に応じて特定のフィールドを自動的に調整し、世界中の視聴者に適応しやすく、使いやすいものにします。この動的な設定により、関連するフィールドのみが表示されるようになり、よりスムーズな顧客エクスペリエンスが生まれます。

製品選択

チェックアウト要素の 製品選択 コンポーネントを使用すると、チェックアウトプロセス中に製品が顧客にどのように表示されるかを制御できます。この機能は、製品を表示するためのカスタマイズ可能なインターフェイスを提供し、ブランドに合わせてユーザーエクスペリエンスを向上させる柔軟なオプションを提供します。ページに追加された製品は、このセクションに自動的に表示され、個々の製品のプレゼンテーションをさらにカスタマイズするためのオプションが利用可能です。プレビューの例を次に示します。
製品選択の設定でバリアント表示を個別にし、各バリアントを個別の商品として表示
製品を編集:
製品を編集 ボタンを使用すると、ファネルページエディター内で商品を直接管理できます。エディターを離れることなく、新しい製品を追加したり、既存の製品を変更したり、製品を削除したりできます。この機能により製品管理が合理化され、時間が節約され、外出先での製品の更新が簡単になります。

バリアント表示:
複数のバリアントがある製品について、バリアントの表示方法を選択します。まとめて表示（デフォルト）では、製品ごとに 1 枚のカードが表示され、カード内でバリアントを選択できます。個別では、各バリアントがそれぞれ独立した製品カードとして表示されます。

個々の製品のカスタマイズ:
各製品の横にある鉛筆アイコンをクリックすると、その製品に固有のさらにカスタマイズが可能になります。ここでは、次のような設定を調整できます。

商品画像: 好みに応じて商品画像のオンとオフを切り替えます。
ハイライトテキスト: 「BEST SELLING」（デフォルト）などのラベルを追加して、特定の製品を強調し、顧客の注目を集めます。
ハイライトテキストの色: ハイライトテキストの色をカスタマイズして、目立たせるようにします。
背景色、文字色、枠線の色（クラシックレイアウトのみ）: ハイライトされた製品カードの色を設定します。

製品選択の見出し:
商品選択領域の上に「商品を選択」などの見出しを追加できます。このテキストは、 一般設定でのフォントスタイル、色、サイズの調整など、デザイン設定に合わせて変更できます。「商品選択の見出し」をオフに切り替えることもできます。そうすれば、タイトルが非表示になります。

製品選択:
製品選択機能には、製品を表示するための 3 つの異なるレイアウトオプションが用意されています。チェックアウトフォームで商品セレクターを非表示にする場合は、商品選択オプションを オフに切り替えます 。
製品選択のトグルとクラシック・モダン・グリッドのレイアウト

クラシック: シンプルなリスト形式で商品を表示する、シンプルで伝統的なレイアウト。
モダン: 洗練された視覚的に魅力的なプレゼンテーションのためのモダンなデザインの更新されたレイアウト。
グリッド: このタイプのディスプレイは製品をグリッドレイアウトで表示するため、視覚的に整理された方法で複数の製品を同時に表示するのに最適です。

詳細設定:
製品選択の詳細設定では、各製品カードの外観をさらにパーソナライズできます。

見出しサイズ: 商品見出しのフォントサイズを調整して、視認性と読みやすさを確保します。
製品説明: 製品説明を有効または無効にし、テキストサイズを設定して、視覚的なバランスと明瞭さを維持します。
商品画像サイズ: レイアウトと視覚的な魅力を最適化するには、各商品カード内の画像サイズを制御し、カード幅の最大 50% を表示します。つまり、商品画像のサイズはカード幅の半分を超えることはできません。「商品画像」オプションをオフにして、商品画像を非表示にすることもできます。

配送オプション

チェックアウト要素内の 配送オプション コンポーネントを使用すると、顧客は好みの配送方法を選択できるため、チェックアウト時の柔軟性と利便性が向上します。このセクションでは、利用可能な配送の選択肢とそれぞれのコストの明確な内訳を提供し、顧客が情報に基づいた意思決定を行えるようにします。

配送オプションのトグル
必要に応じて、 配送オプション を有効または無効にすることができます。有効にすると、通常や エクスプレスなどの利用可能な配送方法のリストが表示され、各オプションには対応する価格が表示されます。

配送オプションの見出し
配送オプションの見出し機能を使用すると、このセクションのタイトルをカスタマイズできます。デフォルトでは「配送情報」に設定されていますが、ブランドのトーンに合わせて編集できます。さらに、一般設定でこの見出しの色とスタイルを調整して、チェックアウトページ全体で一貫した外観にすることができます。

配送プロファイルの作成と設定の詳細については、配送プロファイルを作成および管理する方法の記事をご覧ください。

注文概要

Checkout 要素の 注文概要 コンポーネントには、顧客のカート内の商品と、税金、送料、合計金額の詳細が明確に分類されます。このセクションにより、顧客は購入前に注文を包括的に把握できるようになり、透明性が促進され、カート放棄が減ります。
注文概要の設定でデフォルトで展開をオフにし、チェックアウトで折りたたまれた注文概要

クーポンフィールド
注文サマリーには、有効または無効にできるオプションの クーポンフィールド が含まれています。有効にすると、顧客は割引コードを入力でき、それを適用して更新された合計を即座に確認できます。このオプションは、顧客がチェックアウト内で直接プロモーションを申し込むことができるようにすることで、購入を完了することを奨励します。

商品の割引コードを作成する方法については、割引を始める - チェックアウト時のクーポンの記事をご覧ください。

デフォルトで展開
デフォルトでは、注文概要は折りたたまれた状態で表示され、顧客は注文を詳しく確認したいときに展開できます。ページの読み込み時から注文概要のすべての詳細を表示したい場合は、デフォルトで展開 をオンにします。

支払い方法

チェックアウト要素の 支払い方法 コンポーネントには、ワークスペースとファネルの設定で構成された利用可能な支払いオプションが自動的に表示されます。このコンポーネントは、顧客が好みの支払い方法を柔軟に選択できるようにしながら、各オプションの表示と可用性を制御できるように設計されています。
チェックアウトの支払い方法設定（入力テキストサイズ、フォントファミリー、有効な支払い）とカード支払いフォーム

入力テキストサイズとフォントファミリー（Payments AI のみ）
支払い方法 設定の上部で 入力テキストサイズ を調整すると、支払いセクション内のすべての入力フィールドのフォントサイズを変更できます。この設定により、テキストの読みやすさが確保され、ページのデザインと一致します。さらに、ブランドのタイポグラフィに合わせて フォントファミリー を選択して、チェックアウトページ全体で一貫した外観を維持できます。

有効な支払い（Payments AI のみ）
有効な支払い セクションには、ワークスペースとファネルの設定に基づいて、利用可能なすべての支払い方法が一覧表示されます。クレジットカード、PayPal、Apple Pay などのオプションがアカウントで設定されている場合は、自動的に表示されます。このセクションでは、次のことができます。

優先度を設定する: 支払い方法を好みの順序にドラッグして調整します。一番上にリストされたオプションがデフォルトの支払い方法になり、顧客を主要なオプションに誘導します。
特定の方法を無効にする: このページで提供したくない場合は、個々の支払い方法をオフに切り替えます。たとえば、このチェックアウトでクレジットカードでのみ支払いを回収する場合は、Apple Pay を無効にすることができます。

エクスプレス支払い方法（Stripe のみ）
Stripe の場合、このセクションには リンクで支払う トグルがあり、Link での支払いをオンまたはオフにできます。

ワークスペース、ストア、ファネルでゲートウェイを有効にする方法の詳細については、ClickFunnels 内での支払い AI の使用の記事を参照してください。

注文バンプ

Checkout 要素の 注文バンプ コンポーネントを使用すると、チェックアウトフロー内で追加の商品を直接提供できます。この機能は、顧客がワンクリックで購入に補完的なアイテムを追加するよう促すことで、注文額を増やす優れた方法です。

製品を編集:
製品を編集 ボタンを使用すると、ファネルページエディター内で商品を直接管理できます。エディターを離れることなく、新しい製品を追加したり、既存の製品を変更したり、製品を削除したりできます。この機能により製品管理が合理化され、時間が節約され、外出先での製品の更新が簡単になります。

バンプスタイリング
バンプスタイリング トグルを使用すると、注文バンプを表示するためのさまざまなレイアウトスタイルが有効になります。

クラシック: オーダーバンプのためのシンプルでミニマルなスタイル。
モダン: より視覚的に魅力的で更新されたデザイン。

一般
一般セクションでは、オーダーバンプのさまざまな要素をカスタマイズできます。

背景色: オーダーバンプコンテナの背景色を設定します。
見出しの色: 注文バンプ内の見出しテキストの色を定義します。
説明の色: 説明テキストの色を調整します。
ボーダーカラー: オーダーバンプの周りのボーダーの色を選択して、目立たせることができます。
リンクの色: 注文バンプテキスト内のリンクの色を設定します。

バンプ矢印
さらに、バンプ矢印 設定を使用して、注文バンプに注意を向けることができます。

矢印スタイル: 円、角度、シェブロンなどのさまざまな矢印スタイルから選択して、バンプを指します。
矢印の色: 矢印の色をカスタマイズして、背景を補完または対照します。
アニメーション: 必要に応じて、矢印にアニメーションを追加して強調します。

画像
バンプ画像を表示 設定を有効または無効にして、注文バンプ内に商品画像を表示します。この視覚的要素は、オファーを強化し、バンプをより目立たせるのに役立ちます。

影
影の設定を使用すると、影効果を適用して要素に深みと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。

スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
シャドウスタイル: インセット（要素内の影）と アウトセット（要素の外側の影）のいずれかを選択して、目的のシャドウ効果を実現します。
X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
色: カラーピッカーを使用して、影の色を選択します。

ボタン

Checkout 要素の [ボタン] 設定では、チェックアウト要素のアクションとスタイルをカスタマイズでき、ボタンのテキスト、スタイル、利用規約やダウンセルオプションの追加リンクを調整するオプションが提供されます。

ボタンテキスト
[ ボタンテキスト] セクションでは、さまざまなアクションボタンに表示されるテキストを指定できます。

ゲスト送信テキスト: ゲストのチェックアウトの場合、通常は「送信」または「注文の完了」というラベルの付いたメインボタンテキストが使用されます。
保存されたボタンテキスト: このテキストは、リピーターの場合、またはユーザーが OTO モードでチェックアウトページにアクセスしたときに使用されます。「Rush My Order」などと書かれているかもしれません。
アップグレード/ダウングレードボタンテキスト: サブスクリプションを変更する顧客の場合、このボタンを「注文の更新」などのテキストでカスタマイズできます。
ステップ 1 ボタンテキスト（3 ステップのチェックアウトでは ステップ 2 ボタンテキスト も）: 複数ステップのチェックアウトで、顧客を次のステップに進めるボタンのテキストです。
送信中のテキスト: 注文の送信中にボタンに表示されるテキストです。デフォルトは「Submitting…」です。

各ボタンのテキストフィールドの横にある鉛筆アイコンをクリックすると、 メインテキスト (プライマリメッセージ)と サブテキスト (メインテキストの下にあるセカンダリ行、例えば「期間限定オファー」や「セキュアチェックアウト」など)の両方を追加して、ボタンをさらにカスタマイズできます。アイコンの前 または アイコンの後 でアイコンを追加することもできます。この柔軟性により、オファーに関する追加の詳細を伝えながら、顧客に行動を促すカスタマイズされたメッセージを作成できます。
チェックアウトのボタン設定（送信中のテキスト、フル幅〔無効〕、パディングサイド、配置を強調表示）と、アイコンの前・アイコンの後を強調表示したゲスト送信テキストの編集

送信リダイレクトオーバーライド

このオプションを使用すると、ファネルのデフォルトの次のステップではなく、フォーム送信時に特定のURLに顧客をリダイレクトできます。このオプションをオンにすると、ユーザーがチェックアウトフォームを送信した後に到達する絶対URL(例:https://yourdomain.com/thank-you)または相対パス(例:/thank-you)を挿入できます。

利用規約
[ 利用規約] チェックボックスを有効にして、続行する前に顧客の同意を要求できます。このセクションでは、基本的な編集ツール (太字、斜体、リンクなど) を使用して用語テキストを追加および書式設定できるため、注文を確定する前に顧客に用語を確実に知らせることができます。

ダウンサルリンクテキスト
このオプションを使用すると、メインアクションボタンの下にセカンダリリンクを追加して、顧客に別の選択肢を提供できます。たとえば、「いいえ、これは欲しくない」などのテキストを使用できます。このリンクは、特定のテキストと、次のファネルステップまたは別の指定されたページにつながるURLでカスタマイズでき、プライマリオファーを続行しないことを選択した顧客にオプションを提供します。

このダウンセルリンクは、アップセルページで特に役立ちます。顧客がメインのチェックアウトページで購入を完了し、アップセルオファーに到達した場合、アップセルを希望しない可能性があります。ダウンセルリンクを提供することで、ファネルの次のステップ (ダウンセルオファーを含むチェックアウトページ) に誘導できます。この機能を設定するには、リンクアクションとして特別なコマンド ?next_funnel_step=true を使用します。このコマンドは、前のセッションの顧客の支払い資格情報を保持するため、ダウンセルページで支払い情報を再入力せずに続行できます。

ボタンスタイル
ボタンコンポーネント内のこのセクションでは、チェックアウト要素のアクションボタンの外観を完全にカスタマイズできます。これには、ボタンのデフォルト状態のスタイルや、カーソルを合わせたり押したりしたときの外観の設定が含まれます。

フル幅

有効を選択するとボタンがチェックアウトの幅いっぱいに広がり、無効を選択するとテキストに合わせたサイズになります。

パディングサイド

このオプションを使用すると、ボタンテキストの左右のパディングを調整できます。

配置

フル幅 が無効の場合、ボタンを左揃え、中央揃え、右揃えのいずれにするかを選択します。

パディング垂直

このオプションを使用すると、ボタンの垂直方向のパディングを調整して、ボタンのテキストの周囲の高さと間隔を制御できます。これはピクセル単位で設定できるため、デザインのニーズに合わせて正確に調整できます。

スタイルオプション

いくつかの定義済みのボタンスタイルから選択して、ボタンの全体的なルックアンドフィールを確立します。これらのスタイルは、チェックアウトページ全体でまとまりのあるビジュアルデザインを作成するのに役立ちます。

各ボタンは、次の 3 つの操作状態に対して一意のスタイルを持つことができます。

デフォルト: 操作前のボタンの標準的な外観。
ホバー: 顧客がボタンにカーソルを合わせたときに表示されるスタイルで、視覚的なフィードバックを提供します。
押された: ボタンがクリックまたは押されたときに表示され、触覚的な反応を示すスタイル。

状態ごとに、以下をカスタマイズできます。

背景: 背景色を設定して、各状態でのボタンの外観を定義します。
文字色: ボタンのテキストの色を調整して、読みやすさとブランドの色との一貫性を確保します。
サブテキストの色: 小見出しや説明など、ボタンに表示される追加のテキストをカスタマイズします。
編集ボタンの色: リピート顧客の保存済みの詳細情報の横に表示される編集ボタンの背景色を設定します。

プライマリテキストスタイル
このセクションでは、ボタンテキストのタイポグラフィを制御して、ブランドの美学と確実に一致させることができます。ボタンテキストのカスタムフォントを選択したり、太さを調整して太字にしたり、軽くしたりして、デスクトップとモバイルの両方のフォントサイズを設定して、デバイス間で最適な読みやすさを実現できます。文字の間隔と行の高さの調整はテキストのレイアウトを調整するのに役立ち、テキストの大文字と小文字のオプション (大文字やタイトルケースなど) を使用すると、ブランドのスタイルに合わせることができます。さらに、下線や取り消し線などのテキスト装飾を適用して強調し、機能的で視覚的にまとまりのあるボタンを作成できます。

サブテキストスタイル
このセクションでは、フォント、サイズ、間隔、配置など、ボタン上のサブテキストの外観を調整できます。余白、フォントスタイル、文字間隔、装飾などの詳細を変更して、サブテキストがメインボタンのテキストを補完するようにすることができます。

サブテキストシャドウ
この設定を切り替えると、サブテキストに影効果が追加され、視認性が向上し、ボタンのデザインに深みが加わります。

ボーダー
ボーダー 設定では、ボタンの周囲にボーダーを追加できます。色、太さ、スタイルを調整してボタンをフレームに収め、目立たせることができます。

角
ボタンの角の半径をカスタマイズして、丸みを帯びたエッジまたは四角いエッジを作成します。すべての角 で均一な値を適用するか、エッジを分ける を有効にして各角を個別に調整できます。

影
ボタン全体に影効果を追加して、レイヤー化された 3D 外観を実現します。この設定により視覚的な魅力が高まり、ページ上でボタンが目立つようになります。

ローディングオーバーレイ

Checkout 要素の ローディングオーバーレイ コンポーネントは、支払い処理中に表示されるカスタムオーバーレイ表示を作成します。この視覚的なインジケーターは、取引が進行中であることを顧客に安心させ、時期尚早に離れるのを防ぎます。

ローディングオーバーレイの設定

背景色と不透明度: 背景色をカスタマイズし、不透明度を調整してオーバーレイの下にあるページコンテンツの可視性を制御し、透明度と読み込みメッセージへの焦点のバランスを提供します。

ローディングアイコン

アイコンのスタイルと色: さまざまな読み込みアイコンスタイル (長いバー、ドット、デュアルリングなど) から選択し、ブランドに合った色を選択します。読み込みアイコンは、チェックアウトプロセスが進行中であることを強調します。

タイトルとサブタイトル

タイトル: タイトルはオーバーレイ上のプライマリテキストで、通常は「支払いの処理中」などのメッセージに使用されます。ブランディングに合わせてテキスト、サイズ、色をカスタマイズします。
サブタイトル: タイトルの下にあるオプションのテキスト行 (例: 「このページを離れないでください!」)で、顧客をさらに誘導します。サイズと色を調整して、読みやすさを確保できます。

ロゴ画像

ロゴの配置: この設定を有効にすると、オーバーレイの左上隅にロゴが表示されます。カスタム画像をアップロードするか、動的ワークスペースのロゴを使用して、他の要素を圧倒することなく表示できるようにサイズを調整できます。

カスタム設定

Checkout 要素の カスタム設定 コンポーネントは、特定の顧客とのやり取りや好みに基づいてチェックアウトエクスペリエンスを管理するための追加のコントロールを提供します。

フォーカスが外れたときの入力検証を無効にする（Payments AI のみ）: 顧客がチェックアウトフォームに記入し、「メールアドレス」フィールドにメールアドレスを入力していると想像してください。通常は、顧客がメールアドレスフィールドの外側をクリックするとすぐに、システムは電子メール形式が正しいかどうかを即座にチェックします。正しくない場合、エラーメッセージがポップアップ表示され、顧客が入力をすぐに修正するように案内される場合があります。

ただし、フォーカスが外れたときの入力検証を無効にする をオンにすると、この即時検証は行われません。代わりに、システムは顧客がフォームを送信するまで待機してエラーをチェックします。この設定により、特に顧客が各フィールドに入力するときに検証プロンプトによって中断されたくない場合に、その場でのエラーメッセージを最小限に抑えることで、よりスムーズなエクスペリエンスを作成できます。
OTPを無効にする（Payments AI のみ）: このオプションを有効にすると、リピーターのワンタイムパスワード (OTP) 検証が防止されます。デフォルトでは、ClickFunnels はリピーターを認識し、OTP を送信して情報を事前に入力して、より迅速なチェックアウトを実現します。ただし、この設定をオンにすると、リピーターはOTPプロンプトを受信せず、ゲストモードでチェックアウトを進み、情報を手動で入力します。デフォルトでは、OTPを無効にする はオフです。OTPオプションがオンになっているプレビューの例を次に示します。
サブスクリプションの重複検出を有効にする（Payments AI のみ）: このオプションは、以前にいずれかの商品(サブスクリプション価格)を定期購入したが、後でキャンセルしたリピーターを特定するのに役立ちます。有効にすると、ClickFunnels はチェックアウト時に顧客の情報をチェックして、過去のサブスクリプションを検出します。

一致するものが見つかった場合、顧客にチェックアウトプロセス全体を再度完了するように要求する代わりに、システムはカスタマーセンターから直接以前のサブスクリプションを再アクティブ化するオプションを提供する お帰りなさい！ メッセージを表示します。これにより、リピーターの時間を節約し、重複するサブスクリプションを回避することで全体的なエクスペリエンスを向上させることができます。

このオプションを有効にする場合は、OTPを無効にする オプションもオンにすることをお勧めします。OTP が有効な場合、OTP で認証した顧客には お帰りなさい！ メッセージではなく保存済みのチェックアウト画面が表示されます。OTP を無効にすると お帰りなさい！ メッセージが表示され、顧客は意図したとおりにサブスクリプションをすばやく再アクティブ化できます。
チェックアウトの遅延読み込み: これをオンにすると、訪問者がチェックアウトの近くまでスクロールしたときにのみチェックアウトが読み込まれます。それまでは、代わりに読み込み中のプレースホルダーが表示されます。このオプションはストアのチェックアウトページでは使用できません。

テキスト設定

Checkout 要素の テキスト設定 コンポーネントは、チェックアウトページ全体のすべてのテキストラベルとプレースホルダーを変更および管理するための一元的な場所を提供します。個々のコンポーネントを移動する代わりに、ボタンラベル、入力フィールド名、セクション見出し、その他の説明テキストを 1 か所で調整できます。

カスタマイズ可能なセクションには次のものが含まれます。

ボタンテキスト: 注文の送信や更新などのアクションのラベルを変更します。
見出し: 「連絡先情報」、「配送情報」、「支払い情報」などのセクションタイトルを変更します。
連絡先入力ラベル（Payments AI のみ）: 「名」、「メールアドレス」、「電話番号」などのフィールドのラベルを調整します。
配送入力ラベル（Payments AI のみ）: 「住所」、「市区町村」、「郵便番号」など、配送の詳細に関連するフィールドを更新します。
請求入力ラベル（Payments AI のみ）: 配送と同様に、請求情報フィールドのラベルを変更します。
カード決済テキスト（Payments AI のみ）: 「カード番号」、「有効期限」、「CVV」などのフィールドラベルをカスタマイズします。
概要テキスト: 「税金」、「割引」、「合計」など、注文の概要に関連するラベルを調整します。
ローディングオーバーレイ: 処理中に表示されるタイトルやサブタイトルなど、読み込みメッセージのテキストを設定します。
その他のテキスト: 「配送オプション」や「ゲストとしてチェックアウト」のプレースホルダなど、追加のカスタマイズ可能なフィールド。
Stripeロケール（Stripe のみ）: Stripe の支払いフィールドはカスタムテキストに対応していません。サポートされているロケールを選択して、表示される言語を設定します。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
設定パネルのヘッダーにあるコード（</>）アイコンと、下部バーの可視性・すべて・デスクトップ・モバイル・目・ゴミ箱アイコン

ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
デスクトップ (🖥️**) アイコン**: コンテナはデスクトップビューでのみ表示されます。
モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。
目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。
コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。
ごみ箱 (🗑️**) アイコン**: ページエディターからコンテナーを完全に削除します。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリングロジックを制御できる詳細設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。

カスタムスロットを使用して Checkout 要素内にブロック要素を追加する

ClickFunnels の Checkout 要素には「カスタムスロット」が含まれており、チェックアウトフロー内にブロック要素を追加することでレイアウトを強化およびパーソナライズできます。これらのカスタムスロットにより、より複雑なネストされた設計が可能になります。ブロック要素を挿入するには、Checkout 要素内の任意のコンポーネントにカーソルを合わせると、オレンジ色の「要素の追加」ボタンが表示されます。このボタンをクリックすると、小見出し、画像、テキストなどのさまざまなブロック要素を追加して、さらにカスタマイズするためのオプションが開きます。