ClickFunnels ページエディターの機能を調べる

公開日: 2024年11月12日更新日: 2026年10月26日

ClickFunnels Editor は、ファネル、ストア、サイト、ブログ、コースのページをデザインおよびカスタマイズできる多用途ツールです。直感的なドラッグアンドドロップインターフェイスにより、セクション、行、要素を使用してページを簡単に構成できます。この記事では、エディターのコア機能を検討し、すべての ClickFunnels アセットにわたって効果的で視覚的に魅力的なページを構築する方法について説明します。

必要条件

アクティブなClickFunnelsアカウント。
ワークスペースで作成されたページ。

エディターのカスタマイズ

上部のナビゲーションバーでは、重要なツールにすばやくアクセスできます。

ページ名

ページ名が左上に表示されるため、現在編集しているページを簡単に識別できます。

ヘルプ

[ヘルプ] ボタンをクリックすると、サポートウィジェットがページ上で直接開きます。ClickFunnels は AI を活用した支援を提供し、ファネルの構築、ClickFunnels の機能、またはアカウントの問題について即時かつ正確な応答で質問できるようにします。ヘルプウィジェットから直接サポートに問い合わせることもできます。サポートに問い合わせる方法については、 Contacting ClickFunnels Customer Support の記事をご覧ください。

カスタマイズ

エディターのすべてのプロパティは、[カスタマイズ]（歯車）アイコンから管理できます。

設定： [設定] メニューには、背景、タイポグラフィ、コードの追加など、ページのカスタマイズオプションがいくつか用意されています。
- 本文:
  - 表示: セクションの表示を ブロック または フレックス に設定できます。ブロック を選択すると、セクションの高さは自動的に調整されません。フレックス を選択すると、利用可能な高さを埋める がオンになっているセクションが、ビューポートの残りのスペースを埋めるように拡張されます。複数のセクションでこの設定を有効にすると、利用可能なスペースがそれらの間で均等に分配されます。
    💡 詳細: Advanced Settings - Customize Styles
  - 背景: このオプションを使用すると、HTML <body> タグに背景スタイルを適用するのと同様に、ページ全体の背景を設定できます。画像をアップロードしたり、背景の色を選択したりできます。オプションには、 画像スタイル の調整(ページの幅全体を塗りつぶすなど)と 画像のフィット 感(ページ内の配置)が含まれます。背景色を切り替えたり、ビデオを背景として追加してダイナミックな視覚効果を与えることもできます。
    💡 詳細: Adding Background Image and Video to the Page
- タイポグラフィ: このオプションを使用すると、ページのフォント設定をカスタマイズできます。コンテンツフォント のタイプを選択し、ウェイト(Regular や Bold など)を調整して、テキストカラー と リンクカラー を指定できます。[コンテンツフォント] 設定では、ページのメインテキストに使用するプライマリフォントを選択できます。これには本文、見出し、その他の書かれたコンテンツ要素が含まれ、ページ全体で一貫したルックアンドフィールが保証されます。
- コードを表示: [コードを表示] オプションを選択すると、コードエディターが開き、カスタム CSS または JavaScript を追加できます。これにより、より高度なカスタマイズが可能になり、スタイルを調整したり、デフォルトのエディター設定を超えた機能を追加したりできます。
  💡 詳細: Adding Custom CSS Code for Custom Design と Adding Javascript Code for Advanced Feature
- エディター設定: このセクションには、要素がユーザー操作にどのように応答するかを管理するための追加設定が含まれています。
  - 要素ホバータイマー: 要素にカーソルを合わせたときに反応するまでの遅延時間を調整します。
  - ホバーインテント感度: 要素のホバー検出の感度を制御します。
  - ネストされたコレクション: このオプションを使用すると、コレクション要素を別のコレクション要素内に挿入できます。
    💡 詳細: Collections
    
    ネストされたコレクションは、公開中のページには推奨されません。まだ開発中の機能です。
ポップアップ: 各ページに 1 つのポップアップを含めることができます。ポップアップを表示または編集するには、[ポップアップ] メニューをクリックし、[ポップアップを表示] を選択します。[設定を編集] を選択すると設定パネルが開き、コンテンツの追加、デザインの調整、ポップアップモーダルのさまざまなプロパティの変更を行うことができます。
💡 詳細: Adding a Popup
その他:
- マイ資産: [マイ資産] では、ユニバーサルセクションや ClickFunnels の既製セクションなど、以前に保存したすべてのセクションにアクセスできます。マイ資産内の検索機能を使用して、ページに必要な保存済みセクションをすばやく見つけることができます。
- スタイルガイド: [スタイルガイド] は、ページをグローバルスタイルにリンクします。リンクされたスタイルがポップアップモーダルで開き、ページエディタを終了することなく、ページエディタ内から直接グローバルスタイルを編集できます。
- レイアウト: [レイアウト] では、 セクション、行、列、要素を整理してページを構造化できます。ClickFunnels エディターでは、 セクション がプライマリコンテナとして機能し、各セクション内に行が配置され、コンテンツを構築するために行内に要素が追加されます。複数のセクションを追加すると、ページが長くなり、特定のコンテンツを見つけるのが難しくなる可能性があります。[レイアウト] では、ページ内の各セクション、行、要素の位置が明確に表示され、レイアウトを効率的に移動できます。セクション、行、要素に名前を割り当てることで、それらを簡単に識別して管理できます。[レイアウト] をクリックし、調整したい項目を見つけて、目的の位置にドラッグするだけで、各コンテンツを直接編集せずにページを再編成できます。
情報: [情報] ボタンは、ページ上に確認が必要な内容がある場合にのみ上部バーに表示されます。ボタンの色は、最も重要なメッセージのレベル(情報、警告、エラー(赤))を示します。たとえば、テキスト領域の入力要素を追加しても、入力タイプの設定やカスタムのタイプ名の指定に失敗した場合、[情報] からこの見落としが通知されます。ボタンをクリックすると、特定の問題に関する詳細なメッセージが表示されるため、問題に迅速に対処し、ページデザインにおける潜在的なエラーを回避できます。
デスクトップビュー: デスクトップビューアイコンをクリックすると、ページのデスクトップのレイアウトを表示します。パディングなど、デスクトップとモバイルで別々の値を持つ設定の場合、このビューではデスクトップの値を編集します。
タブレットビュー: タブレットビューアイコンをクリックすると、幅750pxのキャンバスでページを表示し、タブレットなどモバイルの境界よりわずかに狭い画面での見え方を確認できます。タブレットビューはモバイルビューと同じモバイルの値を使用するため、ここでモバイルの値を変更すると、モバイルビューでも変更されます。
モバイルビュー: モバイルビューアイコンをクリックすると、スマートフォンサイズのキャンバスでページを表示します。デスクトップとモバイルで別々の値を持つ設定の場合、このビューではモバイルの値を編集し、その値は幅770px以下の画面に適用されます。
元に戻す： 元に戻すアイコンを使用すると、前のアクションを元に戻して、変更が加えられる前の状態にデザインを復元できます。
やり直す： やり直しアイコンを使用すると、以前に元に戻したアクションを再適用して、元に戻す操作後の状態にデザインを復元できます。
プレビュー： プレビューアイコンを使用すると、デザインをリアルタイムでプレビューし、最終出力がどのように表示されるかを確認できます。
保存： 保存アイコンを使用すると、作業内容と変更を保存して、変更内容を確実に保存し、後でアクセスできるようになります。
💡 詳細: Page Editor: Saving and Previewing Your Work

セクション、行、および要素を含むレイアウトの作成

ClickFunnels エディターでは、ページレイアウトの作成には、 セクション、行、要素などのコンテナの階層が含まれ、それぞれがページ上のコンテンツを整理する上で特定の役割を果たします。

セクションの追加
Section titled “セクションの追加”
- セクション は最上位のコンテナ(緑色のラベル)であり、ページの主要なレイアウトブロックとして機能します。各セクションには、コンテンツの要素を保持する複数の行を含めることができます。
- セクションを追加するには、セクションを追加 ボタンをクリックし、ページ上の必要な場所に配置します。新しい空白セクションはフル幅です。幅を変更するには、セクションの設定を開き、幅で XS から XL までを選択します。セクションは「親」コンテナであり、その中の行と要素は「子」コンポーネントです。セクションの追加の詳細については、 Page Editor: Adding Sections 記事をご覧ください。
行の追加
Section titled “行の追加”
- セクション内に行が追加され(青のラベルが付けられ)、コンテンツをさらに構造化します。行には列が含まれており、要素を水平方向に整理するのに役立ちます。各セクションに複数の行を追加し、垂直に積み重ねて構造化されたレイアウトにすることができます。
- 行を追加するには、セクション内の [行を追加 ] をクリックし、目的の列レイアウト (例: 1 列、2 列など、最大 6 列) を選択します。これにより、各セクション内でのコンテンツの配布方法をカスタマイズできます。行の追加の詳細については、 Page Editor: Adding Rows の記事をご覧ください。
要素の追加
Section titled “要素の追加”
- 要素は 、ページを構成するテキスト、画像、ボタン、入力などの個々のコンテンツ部分 (オレンジ色とラベル付け) です。要素は行内に配置され、ページレイアウトのカスタマイズの最終レイヤーを提供します。
- 要素を追加するには、行内の [要素を追加] をクリックし、追加するコンテンツのタイプを選択します。要素は行の「子」であり、階層を完成させます。要素の追加の詳細については、 Page Editor: Adding Elements の記事をご覧ください。

コンテナの階層

ClickFunnels エディターの階層は、一貫性と編集の容易さを維持するために構造化されたレイアウトに従います。

セクション は最上位レベルのコンテナです。
- 各 セクション内に、行 (複数の列を含む) を追加できます。
  - 行の各列内に、要素を配置できます。

ネストされたレイアウト

標準階層に加えて、ClickFunnels はネ ストされたレイアウト もサポートしており、ページ内に複雑で柔軟なデザインを作成します。 ネストされた行 を使用すると、1 つの行または列内に複数の列構造を追加して、レイアウトのカスタマイズのレイヤーを追加できます。たとえば、2 列の行レイアウトから開始する場合、右側の列内にネストされた 3 列の行を追加できます。これにより、右側の列にネストされた行と呼ばれる独自の列のセットが保持される多層レイアウトが作成されます。

ClickFunnels に入れ子になった行を追加すると、エディターは、この入れ子になったコンテンツを囲む新しいセクションを自動的に作成します。このセクションは、ネストされた行のコンテナとして機能し、この構造内のすべての要素とレイアウト調整が個別に整理および含まれるようにします。詳細については、 Nested Rows: Create Nested Layout Using Nested Rows の記事をご覧ください。

ブロック要素を理解する

ClickFunnels エディターの ブロック要素 ウィジェットには、カテゴリ別に整理されたさまざまな事前構築された要素が用意されているため、ページに適したコンポーネントを簡単に見つけることができます。行やフレックスコンテナなどの要素をコンテナ内に追加しようとすると、このウィジェットがページの右側に表示されます。このウィジェットには、基本的なコンテンツ要素から高度なオプションまですべてが含まれており、特定の目標に合わせてページをカスタマイズできます。

さまざまなニーズに合わせてカテゴリ別に要素を探索できます。例えば：

コンテンツ 要素には、メッセージを伝えるための見出し、段落、リスト、アイコンなどが含まれます。
フォーム 要素を使用すると、訪問者から情報を収集できます。
チェックアウト 要素を使用すると、注文をページ上で直接集荷するための支払いオプションを追加できます。

支払い処理用の チェックアウト など、ニーズに合ったカテゴリを選択し、要素をページにドラッグします。このブロック要素のライブラリにより、ファネルの目的に合わせてページを効果的に構築およびカスタマイズできる柔軟性が得られます。

設定へのアクセス

ClickFunnels エディターでは、各コンテナに関連付けられた歯車⚙️アイコンをクリックして、セクション、行、列、および要素の設定に簡単にアクセスできます。これにより、セクション全体の背景の変更、固定幅の設定、透明度の調整、テキストプロパティの変更、アニメーションやカスタムスタイルの追加など、さまざまなプロパティをカスタマイズできる設定パネルが開きます。これらのオプションを使用すると、各ページコンポーネントの外観と機能を完全に制御できるため、デザインビジョンに合わせて正確に調整できます。

すべてのセクション、行、列、要素には、高度なCSS の位置と Zインデックス の隣に回転設定もあります。カスタム CSS を書かずに、バッジや引用カードなどのコンテナを -180 度から 180 度の範囲で傾けることができます。詳細については、詳細設定 - スタイルのカスタマイズの記事をご覧ください。

コンテンツのクローン作成

ClickFunnels エディターを使用すると、コンテンツを簡単に複製できるため、ページを迅速かつ効率的にデザインできます。クリックするだけで**、セクション全体、行、および個々の要素を複製** できます。複製したら、これらの複製されたアイテムをページ上の別の位置にドラッグアンドドロップできるため、デザイン全体の一貫性を維持しながらレイアウトをより迅速に構築できます。

セクション/行/要素をテンプレートとして保存して再利用する

ClickFunnels を使用すると、セクション、行、要素をエディターに直接保存できるため、ページ全体でコンテンツを簡単に再利用できます。保存すると、これらのコンポーネントは保存したギャラリーに保存され、同じページまたはワークスペース内の他のページにインポートできます。この機能を使用すると、要素を最初から再作成することなく、複数のページにわたって一貫したデザインをすばやく構築できるため、ワークフローが合理化され、時間を節約できます。

ユニバーサルセクション/行/要素:ページ間での変更を同期

ClickFunnels では、通常の保存コンテンツに加えて、セクション、行、要素を ユニバーサルコンテンツとして保存することもできます。たとえば、行をユニバーサル行として保存できます。ワークスペース内の複数のページでユニバーサルセクションを使用すると、そのセクションに加えられた変更は、そのセクションが使用されているすべてのページで自動的に更新されます。これは、ヘッダー、フッター、その他の頻繁に再利用されるセクションなどの要素の一貫性を維持するのに非常に役立ちます。

この機能により、コンテンツを 1 か所で編集するだけで、変更がどこにでも反映されるため、更新が簡素化されます。ユニバーサルセクションの設定の詳細については、詳細な記事をご覧ください Adding a Universal Section。