カウントダウン: ページにカウントダウンタイマーを表示する

ClickFunnels の カウントダウン 要素は、緊急性を生み出し、訪問者からの迅速な行動を促すように設計された強力なツールです。特定のイベントや期限までカウントダウンする時を刻む時計を表示することで、コンバージョンを促進し、ユーザー エンゲージメントを高めることができます。この記事では、カウントダウン要素を効果的に追加、構成、使用する方法について説明します。

---

必要条件

• アクティブなClickFunnelsアカウント

• ワークスペースで作成されたページ

---

ページエディタでのカウントダウン要素の追加

1. ページエディター内で、カウントダウンを配置する セクション を追加します。

2. そのセクション内に 行 を追加します。

3. 行内のオレンジ色の +（プラス）または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。

4. カウントダウンタイマー カテゴリから、カウントダウン 要素を選択します。
   

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

---

テンプレートからのデザインの選択

カウントダウン要素には、クリックするだけで要素に適用できる事前にデザインされたカウントダウン スタイルが用意されています。これにより、設定を手動で調整することなく、カウントダウンの外観をすばやくカスタマイズできます。使用方法は次のとおりです。

1. ページにカウントダウン要素を追加したら、歯車 ⚙️ アイコンをクリックしてその設定にアクセスします。

2. 設定メニューで、上部の テンプレート タブに切り替えます。

3. 利用可能なテンプレートを参照し、ニーズに最も適したものを選択してください。選択すると、デザインが自動的にカウントダウンに適用されます。
   

4. テンプレートを適用した後、色、フォント、表示オプションなどの要素の設定を調整して、デザインをさらに調整できます。

---

カウントダウン要素のカスタマイズ

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

上マージン

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

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

タイマーの種類

タイマー設定 グループの タイマーの種類 設定では、ページでのカウントダウンの機能をカスタマイズできます。デフォルトは カウントダウン です。各オプションの詳細な説明は次のとおりです。

カレンダーイベント:

このオプションは、カウントダウンファネルアプリのカウントダウンイベントで設定したイベントの日時と同期したカウントダウンタイマーを自動的に表示するように設計されています。カウントダウンファネルアプリのカウントダウンイベントからイベントデータから直接取得するため、手動で日付や時刻を入力する必要はありません。これは、ウェビナー、製品発表会、予定された販売などのイベントに最適で、タイマーがイベント スケジュールに動的に一致するようにします。

重要:

カウントダウン ファネル アプリでカウントダウン イベントを作成し、ファネル ステップにイベントを添付する必要があります。カウントダウンカレンダーイベントを作成し、それをファネルステップに添付する方法の詳細については、記事 How to Create and Manage Countdown Events および How to Add a Countdown Calendar Event in a Funnel Stepをご覧ください。

カレンダーイベント では、有効期限切れアクション で選択できるのは コンテンツを表示/非表示 のみです。ファネルステップに添付したカウントダウンイベントに 過去の期限リダイレクトURL が設定されている場合、期限後にページを開いた訪問者はその URL にリダイレクトされます。

カウントダウン：

このタイプでは、カウントダウンの有効期限が切れる特定の日時を手動で設定できます。ファネルイベントに関連付けられていないため、タイマーの期間を完全に制御できます。構成には次のものが含まれます。

• 終了日: カウントダウンを終了する日付を選択します。デフォルトは要素を追加した日です。

• 終了時間: カウントダウンが終了する時刻を 30 分単位で設定します。

• タイムゾーン: 正確性を確保するために、タイムゾーン(EST、PST、CST、MST、JST)を設定します。

エバーグリーン:

エバーグリーン タイマーは、訪問者のページとのやり取りに基づいて特定の時間までカウントダウンするように設計されています。このタイマーは、設定した頻度(日次、週間、月次、ページロード時)に従ってリセットされます。この機能は Cookie によって強化されており、システムが訪問者のセッションを追跡して記憶できるようにします。訪問者が同じブラウザを使用してページに戻り、Cookie がそのまま残っている場合、カウントダウンは中断したところから再開されるか、設定に基づいてリセットされます。主な設定は次のとおりです。

• 時間リセット: タイマーがリセットされる頻度を選択します。デフォルトは 月次 です。

  • 月次: 月の特定の日(リセット日)の設定した時刻(リセット時間)にリセットされます。たとえば、毎月のプロモーションでは、毎月 1 日の午前 12:00 にリセットするように設定できます。

  • 週間: 特定の曜日(リセット日)の選択した時刻(リセット時間)にリセットされます。たとえば、毎週月曜日の午前 9:00 にリセットするように設定すると、訪問者にはカウントダウンが毎週再開されます。

  • 日次: 毎日指定した時刻(リセット時間)にリセットされます。たとえば、カウントダウンは毎日午前 6:00 に再開され、訪問者に毎日新しいオファーが表示されます。

  • ページロード時: 訪問者がページを読み込んだときに、時間、分、秒 で設定した期間(たとえば 2 時間)でカウントダウンを開始します。再訪問した訪問者には残り時間が表示され、時間切れ後の動作は ポリシー 設定によって決まります。

• リセット時間 は 30 分単位で設定します。月次、週間、日次 では タイムゾーン(EST、PST、CST、MST、JST)も選択します。

有効期限切れアクション

タイマーアクション グループの 有効期限切れアクション 設定は、カウントダウンがゼロに達したときの動作を決定します。この機能は、訪問者の次のステップを定義し、スムーズな移行を確保し、エンゲージメントを維持するのに役立ちます。次のオプションから選択できます。

コンテンツを表示/非表示:

ページ上の特定の要素を選択して、タイマーの有効期限が切れたときに表示または非表示にします。これは、次の場合に役立ちます。

• 「オファーの有効期限が切れました」や「今後のイベントにご期待ください」などの新しいメッセージまたはセクションを表示します。

• オファーの終了後に行動を促すボタンまたはフォームを非表示にする。

設定するには:

1. 表示 または 非表示 ドロップダウンメニューをクリックします。
   

2. 有効期限が切れた後に表示または非表示にするセクション/行/要素を選択します。

URLにリダイレクト:

カウントダウンが終了すると、訪問者を別のページまたはWebサイトに自動的にリダイレクトします。これは、次の場合に最適です。

• ユーザーを「ありがとう」ページに誘導する。

• 新しいオファーまたはキャンペーンにリダイレクトします。

設定するには:

1. 有効期限切れアクション ドロップダウンメニューから URLにリダイレクト を選択します。
   

2. リダイレクトURL フィールドに、http:// または https:// で始まる目的の URL を入力します。

ポリシー

タイマーの種類 で エバーグリーン を選択した場合は、再訪問アクション グループの ポリシー 設定を構成できます。

ポリシー 設定は、再訪問した訪問者に何が表示されるかを決定します。訪問者が初めてページを開くと、その訪問者の期限がブラウザに保存されます。訪問者がページを表示している間にタイマーがゼロになった場合は、有効期限切れアクションが実行されます。利用可能なオプションは次のとおりです。

• 自動リセットタイマー(デフォルト): 期限が過ぎた後に訪問者が戻ってきた場合、時間リセット 設定に基づく新しい期限でタイマーが再び開始され、有効期限切れアクションは実行されません。

• 自動でX日後に有効期限切れ: 訪問者の期限は、有効期限日数(0〜365)で設定した日数のあいだ保存されます。期限が過ぎた後、その期間内に戻ってきた場合は有効期限切れアクションが実行されます。期間が過ぎると、新しいタイマーが開始されます。

• 有効期限なし: 訪問者の期限は最大 365 日間保存され、タイマーはリセットされません。期限が過ぎた後に戻ってきた場合は、有効期限切れアクションが実行されます。

表示設定

表示設定 グループでは、年を表示、月を表示、週間を表示、日を表示、時間を表示、分を表示、秒を表示 を使って、カウントダウンタイマーに表示する時間単位を決定できます。デフォルトでは時間、分、秒が表示されます。時間のコロンを表示 を選択すると、時間、分、秒の間にコロンが表示されます。これにより、キャンペーンのニーズに合わせて時間をどのように表現するかを制御できます。仕組みは次のとおりです。

• 時間単位のカスタマイズ: キャンペーンのコンテキストに基づいて特定の時間単位を表示することを選択できます。例えば：

  • カウントダウンが数か月にわたる場合は、「月」を有効にして残り月数を表示することができます。

  • 数時間で終了するキャンペーンなど、短いキャンペーンの場合は、「時間」と「分」のみを表示できます。

• 動的計算: タイマーは動的に調整され、選択した単位を使用して残り時間を表示します。例えば：

  • 「日」と「時間」のみを表示することを選択した場合、キャンペーンが数週間または数か月にわたる場合でも、タイマーは残り時間を計算し、これらの単位に変換します。

  • 「月」を選択すると、カウントダウンが計算され、有効期限までの残り月数が表示されます。

時間

時間コンポーネントを使用すると、カウントダウンに表示される時間単位の外観をカスタマイズできます。この機能により、タイマーがブランドやデザインの好みに確実に合致します。時間コンポーネント内では、次のことができます。

• 上マージン: 要素コンテナの上部から時間単位の上マージンを調整します。

• タイポグラフィ: ページのデザインに合わせて、時間単位のフォント サイズ、スタイル、太さを変更します。

• 色と不透明度: 時間単位の色と透明度をカスタマイズして、目立たせたり、ページにシームレスに溶け込ませたりします。

• テキストシャドウ: テキストシャドウ効果を有効にし、オフセット、ぼかし、シャドウの色などのパラメータを調整して、視覚的な魅力を高めます。

これらの設定により、時間単位の表示方法を完全に制御できるため、プロフェッショナルで一貫したデザインを維持しながら注目を集めることができます。

時間コンテナ

時間コンテナ 設定では、時間単位を格納するボックスまたはコンテナのカスタマイズ オプションが提供されます。これらの設定は、デザイン要件に合わせてカウントダウンの構造とレイアウトのスタイルを設定するのに役立ちます。タイムコンテナ内では、次のことができます。

• パディング: コンテナ内の間隔を調整して正確に配置します。

• 背景: 背景色を設定して、コンテナを視覚的に区別します。

• ボーダー: カスタマイズ可能なスタイル、色、太さで境界線を追加して、額縁の外観にします。

• シャドウ: シャドウ効果を適用して、コンテナに奥行きと強調を加えます。

• コーナー: コンテナの角を丸くして、より柔らかい外観にします。

これらのオプションを使用すると、カウントダウン タイマーの全体的な外観と操作性を調整し、一貫したデザインを維持しながら注目を集めることができます。

カウントダウンコンテナ

カウントダウンコンテナ 設定では、時間単位とラベルを格納するボックスまたはコンテナのカスタマイズ オプションが提供されます。これにより、ページデザインに合わせて単位とラベルコンテナのスタイルを設定し、配置できます。カウントダウンコンテナ内では、次のことができます。

• パディング: コンテナ内のスペースを調整して、バランスの取れたレイアウトを作成します。

• 背景色: コンテナの背景色を設定して、ページの背景と区別します。

• 幅: サイズ(0〜10 em)でラベルの最小幅を設定し、各単位の幅をそろえます。

• ボーダー: スタイルと色を調整できるボーダーを追加して、コンテナの輪郭を描きます。

• シャドウ: シャドウ効果を適用して深みを加え、カウントダウンを目立たせます。

• コーナー: コンテナの角を丸くして、より柔らかく、よりモダンな外観にします。

これらの設定により、カウントダウンの外側のコンテナが視覚的にまとまりがあり、さまざまなデザイン ニーズに適応できるようになります。

ラベル

ラベルコンポーネントを使用すると、「時」、「分」、「秒」などの時間単位の下に表示されるラベルをカスタマイズできます。このコンポーネントは、ラベルがデザインやブランドの要件に確実に適合するように柔軟性を提供します。ラベルコンポーネント設定でできることは次のとおりです。

• 表示: 目のアイコンを使用して表示を切り替えることで、ラベルの表示または非表示を選択できます。非表示にすると、カウントダウンには数値のみが表示されます。

• タイポグラフィ: ラベルのフォント スタイル、サイズ、太さをデザインに合わせて調整します。

• 色と不透明度: ラベルの色と透明度をカスタマイズして、デザインにシームレスにフィットさせます。

• 背景: 必要に応じて、ラベルセクションの背景色を追加して、視覚的な区別を改善します。

• テキスト効果: テキストシャドウを有効にするか、ボーダーとコーナーを追加して、ラベルの外観を向上させます。

これらの設定により、ラベルは読みやすさと視覚的な魅力を維持しながら、カウントダウン タイマーの全体的な外観を補完します。

コンテナ

コンテナ グループには、カウントダウンタイマー要素の間隔と配置を制御するオプションが用意されています。これらの設定により、レイアウトを微調整し、視覚的なバランスを向上させることができます。このグループには、以下で説明する パディング、背景、ボーダー、シャドウ、コーナー の設定も含まれています。レイアウト設定の仕組みは次のとおりです。

ギャップ設定

• 日付/時間のギャップ: 日付部分と時間部分の間隔を調整します。

• 日付アイテムのギャップ: 「日」や「週間」など、個々の日付単位の間隔を変更します。

• 時間アイテムのギャップ: 「時間」や「分」などの時間単位の間隔を制御します。

• 金額/ラベルのギャップ: 数値とそのラベル(「時間」など)の間のスペースを定義します。

金額/ラベルの順序

金額/ラベルの順序 設定では、時間の数値とそのラベルの配置方法を選択できます。

• 金額ファースト: 数値をラベルの上に表示します。

• ラベルファースト: ラベルを数値の上に表示します。

日付/時間の方向

日付/時間の方向 設定では、日付単位(年、月、週、日)と時間単位(時間、分、秒)の並べ方を設定します。

• 行: 横に並べます。

• カラム: 縦に積み重ねます。

デスクトップとモバイルで別々の値を設定できます。

これらのオプションにより、カウントダウンタイマーを柔軟に表示できるため、デザインの好みに確実に合わせ、読みやすさが向上します。

Countdown Texts

要素の設定の コンテナ の下にある Countdown Texts セクションでは、各単位に表示されるラベル(年、月、週間、日、時間、分、秒)を変更できます。独自の文言を入力してラベルを置き換えます。たとえば、ラベルを別の言語で表示する場合に使用できます。

パディング

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

パディングオプション:

• 上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。

• 下部: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。

• 左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します 。

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

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

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

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

背景

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

ボーダー

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

1. スタイルプリセット(1、2、3): スタイルガイドで定義済みの境界線スタイルから選択します。これらのプリセットは、ページ全体で一貫した境界線スタイルを提供し、要素にすばやく適用できます。

2. スタイルを編集: スタイルガイドでプリセットの罫線スタイルを変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択して、グローバル設定でデザインを調整します。

3. 上書き: 上書き オプションを使用して、グローバルスタイルガイド設定に影響を与えることなく、この要素専用の境界線設定をカスタマイズします。

4. ボーダー: 要素のどの辺に境界線を表示するかを選択します。オプションには、上、下、左、右の境界線の任意の組み合わせが含まれます。

5. ボーダースタイル: デザインの好みに合わせて、実線、破線、点線などの境界線の線のスタイルを選択します。

6. 色： カラーピッカーを使用して、境界線の色を選択します。スタイル ガイドから色を選択するか、カスタム色を選択して、境界線の色がデザイン スキームに一致するようにすることができます。

7. ストロークサイズ: 境界線の太さは、ストロークサイズ スライダーを使用するか、特定のピクセル値を入力して調整でき、細い輪郭から太いフレームまであらゆるものを作成できます。

シャドウ

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

1. スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。

2. シャドウ スタイル: インセット (要素内の影) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。

3. X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。

4. Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。

5. ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。

6. スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。

7. 色: カラーピッカーを使用して、影の色の設定を選択します。

コーナー

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

1. スタイルプリセット(1、2、3): スタイルガイドで設定されている定義済みのコーナースタイルから選択します。これらのプリセット (1、2、または 3) は、ページ全体のデザインに合わせたクイック スタイリング オプションを提供します。

2. スタイルを編集: スタイルガイドでスタイルを直接変更するには(そのスタイルを使用するすべての要素に影響します)、スタイルを編集 をクリックして、グローバル設定でプリセットを調整します。

3. 上書き: スタイルガイドを変更せずにカスタムコーナー設定を適用するには、上書き をクリックします。これにより、この特定の要素に対してのみコーナー半径を調整できます。

4. すべての角: スライダーを調整するか、特定の値をピクセルまたはパーセンテージで入力して、四隅すべてに均一な境界線の半径を設定します。

5. エッジを分ける: エッジを分ける を有効にして、各コーナーを個別に調整します。左上、右上、左下、右下 の各コーナーに異なる値を設定して、独自の形状を実現できます。

コントロールパネル

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

• すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。

• デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。

• モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。

• 目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。

• コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。

• ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。

詳細設定

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

• 詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。

• 詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。

• 詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。