確認: 指図確認とサマリーの照会

注文確認要素は、顧客が購入を完了した後に注文の詳細と確認情報を表示するために特別に設計されています。この要素は、ファネルまたはストアの注文確認ページに配置できるため、購入後のエクスペリエンスの重要な部分になります。この記事では、注文確認要素で使用できる設定と、ブランドに合わせてカスタマイズする方法について説明します。

必要条件

アクティブなClickFunnelsアカウント
ファネルページまたは店舗確認ページ

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

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

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

確認要素の仕組み

ClickFunnels の注文確認要素は、購入完了後に確認ページにアクセスしたときに、顧客の注文の詳細を自動的に表示するように設計された動的ツールです。要素がページに追加されると、顧客の最近の取引に基づいて製品情報、注文額、その他の関連データが表示されます。つまり、ページに注文確認要素を追加し、ブランドの外観に合わせてスタイルを調整するだけで済みます。顧客が購入を完了すると、ClickFunnelsは、購入した製品に関係なく、追加の構成を必要とせずに、注文の詳細を動的に取得して表示します。

注文確認要素はどこで使用できますか?

ファネルページ内: ファネル内の 専用の注文確認 ページで[注文確認]要素を使用します。このページは通常、チェックアウトページの後に表示され、顧客は注文を完了するか、ファネル内のアップセル/ダウンセルページを進めると表示されます。
ストアの注文確認ページ: 注文確認要素は、ストアの注文確認ページでも使用でき、ストアレイアウト内のeコマース設定で購入を確認できます。 ストアアプリ » ストアのカスタマイズ » 注文確認 ページに移動して、確認要素を追加できます。

確認要素のカスタマイズ

When you hover over an element, its border will be highlighted in orange. To access an element's settings, click on the gear ⚙️ icon or click directly on the element.

上マージン

「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

確認ヘッダー

確認ヘッダーは、注文確認ステータスのタイトルと視覚的なインジケーターを提供します。「目👁️」アイコンをクリックして、注文確認要素のヘッダーを表示または非表示にします。確認要素のヘッダー部分のスタイルを設定するには、「確認ヘッダー」コンポーネント内の設定を変更します。

アイコンのプロパティ: ショッピングカートやチェックマークなどのヘッダーアイコンを選択します。 サイズ、 モバイルサイズ、 色の設定を使用して、ブランドに合わせてアイコンのサイズと色をカスタマイズします。
タイポグラフィ： ヘッダーテキストのフォントファミリー、サイズ、太さ、色を調整して、ブランドのスタイルとの明確さと整合性を実現します。
手記：
タイポグラフィ設定は、確認ヘッダー、製品、フッター、合計セクションなど、注文確認要素のさまざまな領域に一貫して適用されます。各タイポグラフィプロパティの全般と、調整がテキストの外観に与える影響の詳細については、この記事のタイ ポグラフィ の専用セクションを参照してください。
テキストシャドウ: 視覚的な魅力を高める影効果を適用して、テキストに立体感と強調を加えます。この機能を使用すると、影の位置、柔らかさ、色を調整して、微妙な背景でも大胆な輪郭でも、希望の外観を実現できます。
手記：
テキストシャドウ設定は、注文確認要素内の複数のコンポーネントで利用されます。各テキストシャドウプロパティの包括的な説明については、この記事の専用の テキストシャドウ セクションを参照してください。

確認製品

「注文確認」要素の 「確認製品 」コンポーネントには、製品名、数量、価格など、顧客の注文内の各製品に関する詳細情報が表示されます。このセクションは、テキストスタイル、レイアウト、間隔をカスタマイズして、注文した製品のプレゼンテーションを強化できるように設計されています。

パッド: 製品容器の内部パッドを調整します。上、下、左 + 右のスライダーを使用して、商品の詳細の周囲に間隔を空けて、よりクリーンで視覚的に魅力的なレイアウトにします。
ギャップ: ギャップ設定は、商品画像とテキストの詳細 (商品名、数量、価格) の間のスペースを制御します。ギャップを大きくすると、これらの要素がさらに離れ、ギャップを小さくすると、これらの要素が近づきます。
幅とモバイル幅: コンテナ内の商品画像の幅を定義します。標準ビューとモバイルビューのパーセンテージ値を設定して、画像が製品コンテナ内で占めるスペースの量を制御します。商品設定に画像が追加されていない場合、商品画像はレンダリングされません。
タイポグラフィ: このコンポーネントには 2 つのタイポグラフィ設定があり、製品タイトルと追加の製品情報 (数量や価格など) に対してテキストスタイルを個別にカスタマイズできます。これには、タイトルと詳細がブランドと一致するようにするためのフォントファミリ、フォントの太さ、フォントサイズ、文字間隔、色の設定が含まれます。
手記：
タイポグラフィ設定は、確認ヘッダー、製品、フッター、合計セクションなど、注文確認要素のさまざまな領域に一貫して適用されます。各タイポグラフィプロパティの全般と、調整がテキストの外観に与える影響の詳細については、この記事のタイ ポグラフィ の専用セクションを参照してください。
テキストシャドウ: タイポグラフィと同様に、2つのテキストシャドウ設定があります。1 つは製品タイトルに適用され、もう 1 つは数量と価格のテキストに適用されます。これらの設定は、影効果を作成することでテキストに深みを加え、位置、ぼかし、色を調整して希望の外観を実現できます。
手記：
テキストシャドウ設定は、注文確認要素内の複数のコンポーネントで利用されます。各テキストシャドウプロパティの包括的な説明については、この記事の専用の テキストシャドウ セクションを参照してください。

確認フッター

注文確認要素の確認フッターコンポーネントには、小計、税金、配送料、割引、および注文のコスト内訳に関連するその他の関連詳細が表示されます。このフッターは注文された製品のリストの下に表示され、ユーザーに支払われるべき合計金額または支払われた合計金額の明確な概要を提供します。

タイポグラフィ： 確認フッターには 2 セットのタイポグラフィ設定が含まれており、セクションタイトル (「小計」や「税金」など) とその横に表示される値 (金額など) の両方をカスタマイズできます。フォントファミリ、サイズ、太さ、文字間隔、色、その他のテキストプロパティを調整して、ブランドスタイルとの明確さと一貫性を確保できます。
手記：
タイポグラフィ設定は、確認ヘッダー、製品、フッター、合計セクションなど、注文確認要素のさまざまな領域に一貫して適用されます。各タイポグラフィプロパティの全般と、調整がテキストの外観に与える影響の詳細については、この記事のタイ ポグラフィ の専用セクションを参照してください。
テキストシャドウ: タイポグラフィと同様に、確認フッターには、深みと強調を加えるためのテキストシャドウオプションが用意されています。 2 つの「テキストシャドウ」 設定を使用すると、タイトルと値に異なるシャドウを適用できるため、テキストの視覚的な表示方法をより詳細に制御できます。
手記：
テキストシャドウ設定は、注文確認要素内の複数のコンポーネントで利用されます。各テキストシャドウプロパティの包括的な説明については、この記事の専用の テキストシャドウ セクションを参照してください。

確認合計

確認 合計コンポーネント には、最終注文金額が注文確認ページに表示されます。このコンポーネントは、 タイポグラフィ と テキストシャドウ の設定を通じてスタイリングオプションを提供し、カスタマイズして合計量がブランドのスタイルに合致するようにすることができます。

タイポグラフィ: テキストの総量に対して、スタイル、サイズ、太さ、色などのフォントプロパティを調整できます。これにより、合計が目立ち、読みやすくなります。モバイル固有のフォントサイズ設定も利用でき、小さな画面で最適に表示できます。
手記：
タイポグラフィ設定は、確認ヘッダー、製品、フッター、合計セクションなど、注文確認要素のさまざまな領域に一貫して適用されます。各タイポグラフィプロパティの全般と、調整がテキストの外観に与える影響の詳細については、この記事のタイ ポグラフィ の専用セクションを参照してください。
テキストシャドウ: 視覚的に強調するには、合計値のテキストにシャドウ効果を追加します。影の位置、ぼかし、色を変更して奥行きを強調し、合計量を目立たせることができます。
手記：
テキストシャドウ設定は、注文確認要素内の複数のコンポーネントで利用されます。各テキストシャドウプロパティの包括的な説明については、この記事の専用の テキストシャドウ セクションを参照してください。

タイポグラフィ

タイポグラフィ設定では、要素内のテキストの外観を制御できます。これらの設定では、2 つのビューが提供されます。定義済みのスタイル (小、中、または大) を選択して、ページ全体に一貫したデザインを適用できます。定義済みのスタイルを上書きすることを選択した場合は、追加の設定が使用可能になり、文字の外観を手動でカスタマイズできます。

フォントファミリ: このオプションを使用すると、テキストのフォントタイプを選択できます。ClickFunnels は、Google Fonts ライブラリからさまざまな人気のあるフォントを提供します。さらに、ワークスペース設定 > マイアセット > フォント に移動して、独自のカスタムフォントをアップロードして使用できます。アップロードすると、カスタムフォントが選択リストに表示され、使用できるようになります。
太さ: このオプションは、テキストの太さを定義します。希望する強調に応じて、薄型、[規則]、または太字のオプションから選択できます。細いフォントは微妙な外観を提供し、太字のフォントはより視覚的なインパクトを生み出します。
フォントサイズ: スライダーを使用するか、特定の値を手動で入力してテキストサイズを調整できます。さらに、サイズ測定には 2rem や 32px など、rem または px から選択できます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。
- Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem に選択し、スタイルガイドでデスクトップ用の基本フォントサイズを 16px に指定した場合、結果のテキストサイズはデスクトップビューで 32px になります (つまり、2rem × 16px = 32px)。
- Px は絶対測定値であり、テキストサイズを正確に制御できます。
文字間隔: 個々の文字間のスペースを調整します。スライダーを使用して値を増減するか、特定の値(レム単位で測定)を入力できます。間隔を長くすると文字が広がり、間隔を小さくすると文字が近づきます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの文字間隔値を個別に設定することもできます。
行の高さ: テキストの行間の垂直方向のスペースを制御します。これは通常、フォントサイズのパーセンテージとして表されます。パーセンテージを大きくすると、行間のスペースが増え、特に大きなテキストブロックの場合、読みやすさが向上します。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで行の高さの値を個別に設定することもできます。
色: カラーピッカーを使用して、テキストの色を選択します。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。さらに、2 番目のスライダーを使用して不透明度(アルファ値)を調整できます。左に動かすと不透明度が下がり、色がより透明になり、右に動かすと完全に不透明になります。
太字: [色] オプションと同様に、テキストの太字状態の色を選択できます。この色は、テキストが太字に設定されている場合に適用され、通常のテキストと視覚的に区別できます。
リンク: [色] オプションと同様に、ハイパーリンクを含むテキストに特定の色を適用できます。テキストがハイパーリンクされている場合は、選択した色を使用してリンクのスタイルを設定し、目立たせます。
アイコンの色: アイコンの色 (該当する場合) を選択して、ページ全体のデザインと一致していることを確認します。
テキストの大文字と小文字: テキストの大文字と小文字の表示方法を選択します。
- 小文字: すべてのテキストが小文字です。
- 大文字: すべてのテキストが大文字です。
- 大文字にする: 各単語の最初の文字を大文字にします。
装飾: 次のようなテキスト装飾を追加します。
- 下線: テキストの下に線を引きます。
- 取り消し線: テキストを水平線で取り消します。
- オーバーライン: テキストの上に線を描きます。
不透明度: テキストの不透明度を調整します。スライダーを使用すると、テキストを多かれ少なかれ透明にすることができます。スライダーを左に動かすと(0)、不透明度が下がり(テキストの透明度が高くなります)、右に動かすと(1)、テキストが完全に不透明になります。
整列: コンテナ内のテキストの配置を設定します。ページのデザインに基づいて、テキストを左、中央、または右に揃えることを選択できます。

テキストシャドウ

テキスト シャドウ セクションは、テキストの背後に微妙な影を追加し、奥行きを生み出し、読みやすさを向上させます。次のパラメータを制御できます。

オフセット-xとオフセット-y:影の水平方向と垂直方向の位置を調整します。
ぼかし: 影の表示のぼかしやシャープさを設定します。
色: ページデザインに一致または対照する影の色を選択します。

心地

[パディング] 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペースを制御します。この内部間隔により、コンテンツに呼吸する余地を確保し、視覚的にバランスが取れているように見えます。Use スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

パディングオプション:

上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。
下部: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。
左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します。
ギャップ：アコーディオンなどの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。

デスクトップとモバイル(🖥️ & 📱)カスタマイズ:

パディング設定を使用すると、 デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。

境

「境界線」設定を使用すると、要素の周囲に境界線を追加してスタイルを設定し、ページ上の視覚的な定義と分離を強化できます。

スタイルプリセット(1、2、3): スタイルガイドで定義済みの境界線スタイルから選択します。これらのプリセットは、ページ全体で一貫した境界線スタイルを提供し、要素にすばやく適用できます。
スタイルを編集: スタイルガイドでプリセットの罫線スタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 を選択して、グローバル設定でデザインを調整します。
オーバーライド： [ オーバーライド ]オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用の境界線設定をカスタマイズします。
国境： 要素のどの辺に境界線を表示するかを選択します。オプションには、上、下、左、右の境界線の任意の組み合わせが含まれます。
ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などの境界線の線のスタイルを選択します。
色：カラーピッカーを使用して、境界線の色を選択します。スタイルガイドから色を選択するか、カスタム色を選択して、境界線の色がデザインスキームに一致するようにすることができます。
ストロークサイズ: 境界線の太さは、[ ストロークサイズ] スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

隅

コーナー設定では、要素のコーナーの丸み(境界線半径)を調整でき、丸みを帯びたエッジまたはシャープなエッジを柔軟に作成できます。

スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイックスタイリングオプションを提供します。
スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイル を編集 をクリックして、グローバル設定でプリセットを調整します。
オーバーライド： スタイルガイドを変更せずにカスタムコーナー設定を適用するには、[ オーバーライド]をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。
すべてのコーナー: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、四隅すべてに均一な境界線の半径を設定します。
エッジを分離する: エッジ を分離(Separate Edges )を有効にして、各コーナーを個別に調整します。左上隅、右上隅、左下隅、右下隅に異なる値を設定して、独自の形状を実現できます。

影

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

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

バックグラウンド

[背景] セクションでは、要素の背景色を設定できます。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

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

詳細設定

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

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