ページレイアウトの作成

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

---

必要条件

• 有効な ClickFunnels アカウント

• ワークスペースで作成済みのページ

---

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

ClickFunnels エディターは、構造化された階層でページのコンテンツを整理し、デザイン時のわかりやすさと柔軟性を確保します。

1. セクションの追加

   • セクションは最上位のコンテナ（緑色で表示）で、ページの主要なレイアウトブロックとして機能します。各セクションには複数の行を含めることができ、行にはコンテンツの要素が入ります。

   • セクションを追加するには、セクションを追加 ボタンをクリックし、ページ上の必要な場所に配置します。新しく追加した空のセクションは全幅です。幅を変更するには、セクションの設定を開き、幅 で XS から XL までのいずれかを選択します。セクションは「親」コンテナであり、その中の行と要素は「子」コンポーネントです。
     💡 詳しくはこちら: ページエディタ:セクションの追加

2. 行の追加

   • 行はセクション内に追加され（青色で表示）、コンテンツをさらに構造化します。行には列が含まれ、要素を横方向に整理するのに役立ちます。各セクションには複数の行を追加でき、縦に積み重ねて構造化されたレイアウトを作成できます。

   • 行を追加するには、セクション内の 行を追加 をクリックし、目的の列レイアウト（例: 1 列、2 列など、最大 6 列）を選択します。これにより、各セクション内でコンテンツをどのように配置するかをカスタマイズできます。行の追加について詳しくは、ページエディタ:行の追加 の記事をご覧ください。

3. 要素の追加

   • 要素は、テキスト、画像、ボタン、入力フィールドなど、ページを構成する個々のコンテンツ（オレンジ色で表示）です。要素は行の中に配置され、ページレイアウトをカスタマイズする最後の層となります。

   • 要素を追加するには、行内の 要素を追加 をクリックし、追加したいコンテンツの種類を選択します。要素は行の「子」であり、これで階層が完成します。
     💡 詳しくはこちら: ページエディタ:要素の追加

---

フレックスコンテナを使用したレイアウトの作成

フレックスコンテナは、セクションと行の固定された構造を超えてレイアウトの可能性を広げる、非常に汎用性の高いツールです。CSS の display: flex プロパティを活用して、動的でレスポンシブなレイアウトを作成できます。セクション、行、要素とは異なり、フレックスコンテナは固定の階層に従わず、デザインの必要に応じてそのいずれとしても機能します。

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

• セクションとして: フレックスコンテナを使用して、ヒーローセクションのような大きなコンテンツ領域をまとめます。テキストやボタンを動的に配置したい場合に適しています。

• 行として: 従来の行の代わりにフレックスコンテナを使用し、子要素の配置、間隔、レスポンシブ性をより細かく制御します。

• 要素として: 行の中にフレックスコンテナを追加して、利用可能なスペースに応じて動的に調整される商品カードなどの入れ子のレイアウトを作成します。

フレックスコンテナの入れ子

フレックスコンテナを別のフレックスコンテナの中に入れ子にして、高度なレイアウトを作成することもできます。例:

• 商品グリッドでは、親のフレックスコンテナを使用して複数の商品カードを整列できます。

• 各商品カードをそれぞれフレックスコンテナにして、画像、タイトル、価格、ボタンを動的に整列できます。

• 小さな画面では、親のフレックスコンテナが商品カードを折り返し、利用可能なスペースに応じて行または列にレスポンシブに表示できます。

💡 詳しくはこちら: Flex: Flex コンテナを使用したフレックスレイアウトの追加

---

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

レイアウトがモバイルデバイスでもスムーズに機能するようにすることは、優れたユーザー体験を提供するうえで非常に重要です。ClickFunnels エディターには、小さな画面向けにページを最適化するためのツールや設定がいくつか用意されています。

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

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

デバイスごとの表示設定

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

• すべて: これがデフォルトの設定です。セクション、行、要素は、デスクトップ、タブレット、モバイルデバイスを含むすべてのデバイスで表示されます。

• デスクトップのみ: 有効にすると、セクション、行、要素は幅771px以上の画面でのみ表示され、モバイルデバイスでは非表示になります。

• モバイルのみ: 有効にすると、セクション、行、要素は幅770px以下の画面でのみ表示され、デスクトップでは非表示になります。

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

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

フレックスコンテナは、モバイル向けの最適化に特に効果的です。

• フレックスの方向: モバイルではレイアウトの方向を列に切り替えて、コンテンツが縦に積み重なるようにし、読みやすくします。

• 折り返し: ラップ プロパティを有効にすると、小さな画面でスペースが足りない場合に子要素が次の行に折り返されます。

• コンテンツの並べ替え: 行の逆順または列の逆順のプロパティを使用して、モバイルでコンテンツの並び順を変更します。たとえば、見出しを行動喚起（CTA）ボタンの上に移動して、小さなデバイスでより直感的な流れにできます。

プレビューと調整

モバイル向けの調整を行ったら、次の操作をします。

• エディターでデスクトップ表示、タブレット表示、モバイル表示を切り替えて、さまざまなデバイスでのレイアウトをプレビューします。タブレット表示は幅750pxのキャンバスでページを表示し、モバイル表示と同じモバイルの値を使用します。
  

• モバイル固有の設定を微調整して、最適化されたレスポンシブなデザインにします。

---

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

ClickFunnels エディターでは、セクション、行、要素をテンプレートとして保存し、別のページや同じページ内で簡単に再利用できます。この機能によりデザイン作業が効率化され、統一感のあるレイアウトを作成したり特定のコンテンツを再利用したりする際の時間と手間を節約できます。

保存済みコンテンツの使い方

• セクション、行、要素を保存する: デザインをカスタマイズしたら、後で使えるようにテンプレートとして保存できます。
  

• 保存済みコンテンツをインポートする: エディターの 保存済み セクションに移動して、保存したセクション、行、要素を別のページにインポートするか、同じページで再利用します。

保存済みコンテンツは、オプトインフォーム、お客様の声、プロモーションバナーなど、再利用可能なコンポーネントの作成に最適です。

💡 詳しくはこちら: セクション、行、および要素を保存およびインポートする方法

---

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

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

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

• ユニバーサルとして保存する: セクション、行、要素をデザインした後、ユニバーサルテンプレートとして保存できます。
  

• 他のページに追加する: ユニバーサルテンプレートを他のページにインポートするか、同じページで再利用します。

• 一度の更新ですべてに反映: ユニバーサルコンテンツを 1 か所で変更すると、ワークスペース内でそれが使用されているすべてのページが自動的に更新されます。

ユニバーサルコンテンツは、ファネル全体でヘッダーやフッターを統一するなど、複数のページ間で一貫性を保つのに最適です。

💡 詳しくはこちら: ユニバーサルブロックの追加

---

入れ子のレイアウト

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

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

💡 詳しくはこちら: ネストされた行: ネストされた行を使用してネストされたレイアウトを作成する

---

ページ全体のレイアウトの表示

ClickFunnels エディターの レイアウト タブでは、ページ構造全体をまとめて確認できます。ページ上のすべてのセクション、行、列、要素を階層形式で表示・管理できるため、レイアウトの構成を把握しやすく、効率的に調整できます。

レイアウトタブを開く方法

1. 上部のナビゲーションパネルに移動します。

2. カスタマイズ（歯車）アイコンをクリックします。

3. その他 の下にある レイアウト をクリックします。ファネル外のページでは、上部バーにある レイアウト を直接クリックします。
   

4. レイアウトのサイドパネルが開き、ページのすべてのコンポーネントが入れ子の構造で表示されます。

レイアウトパネルの機能

• 階層表示: パネルにはセクション、行、列、要素の階層がわかりやすく表示され、それらの関係を視覚的に把握できます。

• コンポーネントによる絞り込み: 表示 ドロップダウンメニューを使用して、セクション、行、フレックスなど、特定の種類のコンポーネントに絞り込みます。たとえば、フレックス を選択すると、レイアウトで使用されているすべてのフレックスコンテナを表示できます。

• デバイス表示インジケーター: 各コンポーネントには、デスクトップのみ、モバイルのみ、すべてのデバイスで表示のいずれに設定されているかを示す表示アイコンがあります。これにより、レイアウトがデバイスごとにどのように適応するかを確認できます。

• 設定へのクイックアクセス: 一覧内の任意のコンポーネントをクリックすると、その設定に直接アクセスでき、エディター内を移動せずにすばやく変更できます。コンポーネントによっては、メニューに 複製、コード、保存、名前を変更、上に移動、下に移動、削除 もあります。

• 表示の管理: デスクトップとモバイルのアイコンをオン・オフすることで、レイアウトパネルから直接コンポーネントをデスクトップのみまたはモバイルのみに設定できます。両方をオフにすると、コンポーネントは非表示になります。特定のデバイス向けにレイアウトを調整したり、コンテンツの非表示、再表示、表示を管理したりする場合に特に便利です。

レイアウトタブのメリット

• 効率的な管理: エディターを手動でスクロールしなくても、ページ構造全体を 1 か所で表示・管理できます。

• スムーズな調整: 設定へのすばやいアクセス、デバイスごとの表示の管理、要素の並べ替えを簡単に行えます。

• 集中しやすい: 特定の種類のコンポーネントに絞り込んで、フレックスコンテナや行など、最も重要なものに集中できます。