ファネルページの構成要素
UTAGEのファネルページは、「セクション」「行」「要素」の3つで構成されています。
ページを自由にデザインするためには、この階層構造を理解しておくことが大切です。
それぞれの役割を知ることで、テキストや画像、ボタンなどの要素を
思い通りに配置・調整することができます。
利用が必要なケース・利用しなくて良いケース
・利用が必要なケース
ファネル機能や会員サイト機能のページデザインを自由に
編集したい場合や、要素の配置・背景設定などを行いたい場合に必要です。
・利用しなくて良いケース
ファネルテンプレートをそのまま使用し、構成やデザインを
変更しない場合には必要ございません。
ページ構成の階層ルールについて
ファネルページは、以下のような階層構造で構成されています。
セクション(黄色の枠) → 行(緑色の枠) → 要素(青色の枠)
この構造を理解しておくと、編集作業がスムーズになります。
UTAGEの編集画面では、構成要素ごとに以下のような色の枠線で囲まれています。
・セクション → 黄色の枠線
・行 → 緑色の枠線
・要素 → 青色の枠線
セクションとは（黄色の枠）
「セクション」は、ページ全体を分割する最上位のエリアです。
例えば、ファーストビューエリア（冒頭のキャッチコピーや画像）や
本文エリア、フッターなど、目的別にセクションを分けて作成します。
・背景色や背景画像をセクション単位で設定可能
・ページのブロック構造を決定する
使用例）
「ファーストビューエリア用のセクション」
「フッターエリア用のセクション」など
行とは（緑色の枠）
「行」は、セクションの中に配置される横並びのグループです。
この「行」の中に「列」が存在し、複数列を設定することで
横並びのレイアウトが可能になります。
・レイアウトの幅をコントロールする役割
・1列、2列、3列…と、レイアウトを柔軟に設定可能
使用例）
「画像とテキストを左右に並べたい」
「3つのメリットを横並びにしたい」など
要素とは（青色の枠）
「要素」は、実際にページ上に表示されるテキストや画像、ボタンなどの中身です。
行の中に配置された列の中に、必要な要素を追加できます。
・テキスト、画像、動画、ボタン、入力フォームなど
様々なコンテンツを配置可能
・各要素は個別に編集・装飾が可能
使用例）
「ヘッドライン要素」
「登録フォーム要素」など
セクション・行をまとめて移動する方法
UTAGEのファネルページ編集では、セクションや行を“かたまり単位”で移動することが可能です。
これにより、ページ全体の構成を後から簡単に組み替えることができます。
・セクションの移動について
セクションはページを構成する最上位のブロックであり、
その全体を矢印ボタンで上下に移動することができます。
たとえば、「ファーストビューのセクションを1つ下に移動したい」
といった場合でも、セクション全体を一括で移動することができます。
・行の移動について
行も同様に、行ごとにまとめて移動することができます。
ただし、行を移動させられるのは同一セクション内のみです。
別のセクションに移動することはできません。
・編集効率アップのポイント
要素（テキストや画像など）を1つずつ移動する必要がなく
まとめて動かせることで、以下のような場面で便利です。
・セクションや行の順番を大きく変更したいとき
・レイアウトを試行錯誤しながら組み替えたいとき
・作成したコンテンツを別の場所に再配置したいとき
編集時の注意点
・セクションに直接要素を配置することはできません。
必ず「行」の中に「要素」を配置してください。
・要素を削除しても、行やセクションは残ります。
不要になった行やセクションも、手動で削除するようにしましょう。
階層構造まとめ
UTAGEのファネルページは、以下のような階層構造で成り立っています。
セクション（全体ブロック）
└ 行（1列～4列）
└ 要素（テキスト・画像・ボタンなど）
この構造を守って編集することで、見た目の整ったページを作成することができます。