アイコン: アイコンを追加してコンテンツを強化する

ClickFunnels の アイコン 要素を使用すると、ユーザーはアイコンをページに直接挿入できるため、視覚的な魅力が高まり、ユーザーの注意を誘導できます。主要な機能を強調する場合でも、コンテンツに視覚的な区切りを追加する場合でも、この要素はユーザー エンゲージメントを向上させるための強力なツールです。この記事では、ページにアイコンを追加し、その設定をカスタマイズする方法を学びます。

---

必要条件

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

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

---

ページエディタでのアイコン要素の追加

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

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

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

4. [コンテンツ] カテゴリから、[アイコン] 要素を選択します。
   

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

---

アイコン要素のカスタマイズ

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

上マージン

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

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

アイコン設定

アイコン設定では、ページ上のアイコンの外観と動作を調整できます。利用可能な設定の内訳は次のとおりです。

• アイコンピッカー: このオプションを使用すると、リストからアイコンを選択できます。 チェックマーク、矢印、封筒などのさまざまなアイコンから、デザインのニーズに合わせて選択できます。アイコンは Font Awesome ライブラリから読み込まれ、デザインの好みに合わせて多数のアイコンにアクセスできます。

• アイコンサイズ: デザインに合わせてアイコンのサイズを調整します。スライダーを使用して、サイズを px または rem で増減します。 モバイル デバイスに特定のアイコン サイズを設定して、さまざまな画面サイズで読みやすくします。これにより、モバイルデバイスでアイコンサイズを個別に制御できます。

• 整列: アイコンの配置を選択します。オプションには、コンテナ内で必要に応じてアイコンを配置するための左、中央、または右の配置が含まれます。

• アイコンの色: ブランドやページ デザインに合わせてアイコンの色をカスタマイズします。

• 不透明度: アイコンの透明度を調整します。不透明度を低くするとフェード効果が生じ、不透明度を高くするとアイコンが完全に見えるようになります。

アイコンのクリック時のアクション

アイコンのクリック時のアクション 設定では、ユーザーがアイコンをクリックしたときに何が起こるかを指定できます。いくつかの定義済みアクションから選択することも、カスタムURL を挿入することもできます。利用可能なオプションの内訳は次のとおりです。

• 何も起こらない: 何も起こらない オプションを選択すると、アイコンをクリックしても何も起こりません。

• リンクなし: このオプションもドロップダウンに表示されます。

• 移動先…: 移動先… アクションを選択すると 2 つ目のドロップダウンが表示され、カスタムURL、カスタムアクションリンク、ストアページ、ブログホームページ のいずれかを選択できます。

  • カスタムURL: このオプションを使用すると、クリック時にアイコンがリダイレクトされる特定のURL(「ハードリンク」)を入力できます。これは、外部 Web サイトまたはユーザーに送信する任意の URL にすることができます。このフィールドは入力した内容の先頭に必ず https:// を追加するため、Web アドレスにのみ使用してください。電話、テキストメッセージ、メールのリンク (tel:、sms:、mailto:) には、代わりに カスタムアクションリンク を使用してください。「新しいウィンドウで開く」オプションを選択することもできます。これは、アイコンをクリックすると、ブラウザの新しいタブでリンクが開くことを示します。

  • カスタムアクションリンク: ハードコードされたURLに直接リンクする代わりに、相対パス または カスタムアクションコマンド (#open-popup や /terms-and-condition など) を使用できます。この柔軟性により、ポップアップを開いたり、同じドメインに関連付けられたパス名に一致するページに移動したりするなどのアクションをトリガーする動的リンクをページ内に作成できます。リンクは入力したとおりに保存されるため、tel:+1234567890 などの電話、テキストメッセージ、メールのリンクもここに入力します。「新しいウィンドウで開く」オプションを選択することもできます。これは、アイコンをクリックすると、ブラウザの新しいタブでリンクが開くことを示します。

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

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

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

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

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

• 1クリックアップセル: ファネルステップのページでのみ使用できます。選択した後、製品を追加 をクリックして、提供する製品を選択します。

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

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

  • 表示: アイコンをクリックしたときに表示される要素、セクション、または行を選択します。

  • 非表示: アイコンをクリックしたときに非表示になる要素、セクション、または行を選択します。
    ボタンまたはアイコンをクリックしてコンテンツを表示および非表示にする方法の詳細については、「ボタンクリックでコンテンツを表示/非表示にする」の記事を参照してください。

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

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

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

• 次のレッスンへ進む…: 完了済みかどうかに関係なく、コースのアウトライン順で受講者がアクセスできる次のレッスンに移動します。現在のレッスンは完了としてマークされません。最後のレッスンでは、コースページに移動します。

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

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

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

  注:

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

• ファイルをダウンロード…: 訪問者がアイコンをクリックしたときに受け取るファイルを添付します。ファイルを選択 をクリックして、ワークスペースのダウンロードからファイルを選ぶか、新しいファイルをアップロードします。新しいタブで開く（ダウンロードの代わりに） をオンにすると、ファイルはダウンロードされずに新しいブラウザタブで開きます。詳しくは、「ボタンをファイルのダウンロードに変える」の記事を参照してください。

パディング

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

パディングオプション:

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

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

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

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

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

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

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

背景

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

コントロールパネル

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

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

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

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

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

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

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

詳細設定

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

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

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

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