ページレイアウトの作成

プロフェッショナルでレスポンシブなページレイアウトをデザインすることは、視聴者を効果的に引き付けるための鍵となります。ClickFunnels エディターは、 セクション、行、要素、 フレックスコンテナなどの柔軟なツールを提供することで、このプロセスを簡素化します。この記事では、これらの構成要素の階層、Flex Container の使用方法、モバイルデバイス向けにレイアウトを最適化する方法について説明します。

必要条件

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

セクション、行、および要素を使用したレイアウトの作成

ClickFunnels エディターは、構造化された階層を使用してページコンテンツを整理し、デザイン中の明確さと柔軟性を確保します。

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

Flex コンテナを使用したレイアウトの作成

フレックスコンテナは、セクションと行の固定構造を超えてレイアウトの可能性を拡張する非常に汎用性の高いツールです。CSS display: flex プロパティを利用して、動的でレスポンシブなレイアウトを作成できます。セクション、行、または要素とは異なり、Flex コンテナは固定された階層に従うのではなく、設計のニーズに応じてそれらのいずれかとして機能します。

フレックスコンテナの使用方法

セクションとして: Flex コンテナを使用して、テキストとボタンを動的に配置するヒーローセクションなどの大きなコンテンツ領域をグループ化します。
行として: 従来の行をフレックスコンテナに置き換えて、子要素の配置、間隔、応答性をより正確に制御します。
要素として: 行内にフレックスコンテナを追加して、利用可能なスペースに基づいて動的に調整される製品カードなどのネストされたレイアウトを作成します。

フレックスコンテナのネスティング

また、Flex Container を他の Flex Container 内にネストして、高度なレイアウトを作成することもできます。例えば：

製品グリッドは、親フレックスコンテナを使用して複数の製品カードを整列できます。
各製品カードは、画像、タイトル、価格、ボタンを動的に整列させる独自の Flex コンテナにすることができます。
小さな画面では、親の Flex Container が製品カードをラップし、使用可能なスペースに応じて行または列に応答して表示できます。

Flex Containersの使用方法の詳細については、記事を参照してください Flex: Add Flex Layout Using Flex Container。

モバイルデバイスのレイアウトの最適化

レイアウトがモバイルデバイスでシームレスに機能するようにすることは、優れたユーザーエクスペリエンスを作成するために重要です。ClickFunnels エディターには、小さな画面に合わせてページを最適化するのに役立ついくつかのツールと設定が用意されています。

モバイル固有のプロパティ

特定の要素は、モバイルデバイス用に調整されたプロパティを提供します。たとえば、テキスト要素はフォントサイズを調整して小さな画面でも読みやすくしたり、アイコンサイズをカスタマイズしてアイコンがモバイルレイアウトにうまく収まるようにしたりできます。

デバイスの可視性設定

セクション、行、または要素を特定のデバイスで表示するように設定できます。

すべて: これがデフォルト設定です。セクション、行、または要素は、デスクトップ、タブレット、モバイルデバイスを含むすべてのデバイスに表示されます。
デスクトップのみ: 有効にすると、セクション、行、または要素は大きな画面にのみ表示され、モバイルデバイスでは非表示になります。
モバイルのみ: 有効にすると、セクション、行、または要素は小さな画面にのみ表示され、デスクトップでは非表示になります。

この機能は、デバイスの種類ごとに最適化された個別のレイアウトを作成する場合に特に便利です。

モバイル用のフレックスコンテナのカスタマイズ

Flex Containerは、モバイル最適化に特に強力です。

フレックス方向: レイアウトの方向をモバイルの列に切り替えて、コンテンツが垂直方向に積み重なるようにして読みやすくします。
折り返し: Wrap プロパティを有効にして、小さな画面に十分なスペースがない場合に子要素が次の行に流れるようにします。
コンテンツの並べ替え: [行の反転] または [列の反転] プロパティを使用して、モバイルでコンテンツを並べ替えます。たとえば、見出しを行動喚起ボタンの上に移動すると、小型デバイスでより直感的なフローを実現できます。

プレビューと調整

モバイル向けに調整した後:

エディターでデスクトップビューとモバイルビューを切り替えて、さまざまなデバイスでレイアウトをプレビューします。
モバイル固有の設定を微調整して、最適化されたレスポンシブなデザインを確保します。

保存済みコンテンツの追加

ClickFunnels エディターを使用すると、 セクション、行、要素をテンプレートとして保存できるため、異なるページ間または同じページ内でも簡単に再利用できます。この機能により設計プロセスが合理化され、一貫したレイアウトを構築したり、特定のコンテンツを再利用したりする際の時間と労力が節約されます。

保存したコンテンツの使用方法

セクション、行、または要素を保存する: デザインをカスタマイズしたら、後で使用するためにテンプレートとして保存できます。
保存したコンテンツのインポート: エディターで [ 保存済み ] セクションに移動して、保存したセクション、行、または要素を別のページにインポートするか、同じページで再利用します。

保存されたコンテンツは、オプトインフォーム、お客様の声、プロモーションバナーなどの再利用可能なコンポーネントを作成するのに最適です。詳細な手順については、 How to Save and Import Sections, Rows, and Elementsの記事を参照してください。

ユニバーサルコンテンツの追加

コンテンツをテンプレートとして保存するだけでなく、ClickFunnels エディターを使用すると、コンテンツをユニバーサルとして保存できます。ユニバーサルコンテンツは保存済みコンテンツと同様に機能しますが、ユニバーサルコンテンツに加えられた変更は、ユニバーサルコンテンツが使用されているすべてのページに反映されるという大きな違いがあります。そのため、ヘッダー、フッター、定期的なプロモーションセクションなどの共有コンポーネントに最適です。

ユニバーサルコンテンツの使用方法

ユニバーサルとして保存: セクション、行、または要素をデザインした後、ユニバーサルテンプレートとして保存できます。
他のページに追加: ユニバーサルテンプレートを他のページにインポートするか、同じページで再利用します。
一度更新すれば、どこにでも反映: ユニバーサルコンテンツを 1 か所で変更すると、ワークスペース内で使用されているすべてのページで自動的に更新されます。

ユニバーサルコンテンツは、ヘッダーまたはフッターをファネル全体で均一に保つなど、複数のページ間で一貫性を維持するのに最適です。詳細な手順については、 Adding Universal Contentsの記事を参照してください。

ネストされたレイアウト

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

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

詳細については、記事「Nested Rows: Created Nested Layout Using Nested Rows」を参照してください。

フルページレイアウトの表示

ClickFunnels エディターの [レイアウト] タブには、ページ構造全体の包括的なビューが表示されます。ページ上のすべてのセクション、行、列、要素を階層形式で表示および管理できるため、レイアウトがどのように構成されているかを理解し、効率的に調整することが容易になります。

レイアウトタブへのアクセス方法

上部のナビゲーションパネルに移動し、[ レイアウト] タブまたはアイコンをクリックします。
[レイアウト] サイドパネルが開き、ページのすべてのコンポーネントがネストされた構造で表示されます。

レイアウトパネルの機能

階層ビュー: パネルには、セクション、行、列、要素の明確な階層が表示され、それらの関係を視覚化するのに役立ちます。
コンポーネントによるフィルタリング: 「表示」ドロップダウン・メニューを使用して、セクション、行、フレックス・コンテナなど、特定のタイプのコンポーネントをフィルタします。たとえば、「フレックス・コンテナ」を選択すると、レイアウトで使用されているすべてのフレックス・コンテナを表示できます。
デバイスの可視性インジケーター: 各コンポーネントには、デスクトップのみ、モバイルのみ、またはすべてのデバイスで表示されているかどうかを示す可視性アイコンが含まれています。これは、レイアウトがデバイス間でどのように適応するかを特定するのに役立ちます。
設定へのクイックアクセス: リスト内の任意のコンポーネントをクリックすると、その設定に直接アクセスできるため、エディター内を移動せずにすばやく変更できます。
表示の管理: レイアウトパネルから直接、コンポーネントをデスクトップのみまたはモバイルのみに設定します。これは、特定のデバイスに合わせたレイアウトを調整したり、コンテンツを非表示、再表示、表示するかどうかを管理したりする場合に特に役立ちます。

[レイアウト] タブの利点

効率的な管理: エディターを手動でスクロールすることなく、ページの構造全体を 1 か所で表示および管理できます。
合理化された調整: 設定にすばやくアクセスしたり、デバイスの可視性を管理したり、要素を簡単に再編成したりできます。
フォーカスの強化: 特定のタイプのコンポーネントをフィルタリングして、Flex コンテナや行など、最も重要なものに焦点を合わせます。