> ## Documentation Index
> Fetch the complete documentation index at: https://docs.utage-system.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 基本コンセプト

> UTAGEのファネル・ステップ・ページの階層構造とページ要素の仕組み

## ファネルの階層構造

UTAGEのファネルは、以下の4層構造で構成されています。

```
ファネル
└── ステップ（公開URLを持つ）
    └── ページ（A/Bテスト時に複数可）
        └── 要素（section > row > col > コンテンツ要素）
```

### ファネル

ファネルは、LP・セールスページ・サンクスページなどのWebページ群をまとめる最上位の単位です。1つのファネルに複数のステップを含めることができます。

```bash theme={null}
curl -X POST "https://api.utage-system.com/v1/funnels" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name": "プロモーションファネル"}'
```

### ステップ

ステップは、ページをグループ化する単位です。各ステップは固有の公開URLを持ちます。

例えば「LP」「サンクスページ」「セールスページ」のように、ファネル内の各段階をステップとして作成します。

```bash theme={null}
curl -X POST "https://api.utage-system.com/v1/funnels/{funnel_id}/steps" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name": "LP"}'
```

### ページ

ページは、実際に表示されるWebページです。通常はステップに1つのページを作成しますが、A/Bテスト時には同じステップに複数のページを作成できます。

ページには2つの作成方式があります。

| 方式         | 説明                | 用途                  |
| ---------- | ----------------- | ------------------- |
| `elements` | 要素の階層構造で構築（デフォルト） | 通常のページ作成に推奨         |
| `raw_html` | HTMLを直接入力         | 既存HTMLの流用や高度なカスタマイズ |

<Tip>
  特別な理由がない限り `elements` 方式を使用してください。要素の追加・変更・削除がAPI経由で柔軟に行えます。
</Tip>

## 要素の階層構造（elements方式）

elements方式のページでは、要素を以下の階層で構成します。

```
section       ← 最上位のコンテナ
└── row       ← 行
    └── col   ← 列
        └── コンテンツ要素（text, image, button, video, form 等）
```

### section

最上位のコンテナ要素です。背景色やパディングを設定できます。ページには複数のsectionを配置できます。

### row

行要素です。section内に配置します。横幅の制御を行います。

### col

列要素です。row内に配置します。`col_width_1` で列幅の比率を指定し、マルチカラムレイアウトを実現できます。

### コンテンツ要素

col内に配置する実際のコンテンツです。主な要素タイプ:

| 要素タイプ       | 説明              |
| ----------- | --------------- |
| `text`      | テキスト（HTML形式で指定） |
| `image`     | 画像              |
| `button`    | ボタン（リンク付き）      |
| `video`     | 動画              |
| `form`      | 登録フォーム（メルマガ登録等） |
| `divider`   | 区切り線            |
| `countdown` | カウントダウンタイマー     |

<Note>
  利用可能な全要素タイプは[要素タイプAPI](/api-reference/funnel/element-types)で取得できます。フォーム・決済・イベント要素はincludeパラメータで追加取得します。
</Note>

### 要素構造のJSON例

```json theme={null}
[
    {
        "type": "section",
        "children": [
            {
                "type": "row",
                "children": [
                    {
                        "type": "col",
                        "children": [
                            {
                                "type": "text",
                                "content": "<p>こんにちは</p>"
                            }
                        ]
                    }
                ]
            }
        ]
    }
]
```

<Warning>
  要素の階層ルールは厳密に守る必要があります。`elements` 直下には `section` のみ、`section` の子は `row` のみ、`row` の子は `col` のみ配置可能です。違反するとバリデーションエラーになります。
</Warning>

## 配信アカウント

配信アカウントは、メール配信やLINE配信を行うためのアカウントです。フォーム付きページを作成する際に必要になります。

| タイプ         | 説明              |
| ----------- | --------------- |
| `mail`      | メール配信アカウント      |
| `line`      | LINE配信アカウント     |
| `mail_line` | メール・LINE併用アカウント |

```bash theme={null}
curl -X POST "https://api.utage-system.com/v1/accounts" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name": "メイン配信", "type": "mail"}'
```

## シナリオ

シナリオは、ステップメールなどの配信シーケンスを管理する単位です。配信アカウントの中に作成します。

フォーム要素でシナリオを指定すると、フォーム登録時にそのシナリオの配信が開始されます。

```bash theme={null}
curl -X POST "https://api.utage-system.com/v1/accounts/{account_id}/scenarios" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "メルマガ登録"}'
```

## 次のステップ

<CardGroup cols={2}>
  <Card title="LPを作成する" icon="palette" href="/guides/create-lp">
    画像やボタンを含むLPの作成手順
  </Card>

  <Card title="登録フォームを作成する" icon="rectangle-list" href="/guides/create-form">
    メルマガ登録フォーム付きLPの作成手順
  </Card>
</CardGroup>