> ## 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.

# LPを作成する

> APIを使ってランディングページを作成するステップバイステップガイド

このガイドでは、ヘッダー・画像・本文・CTAボタンを含むLPをAPIで作成する手順を説明します。

## 1. ファネルを作成

まずLPを格納するファネルを作成します。

```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": "商品プロモーション"
  }'
```

```json レスポンス theme={null}
{
    "data": {
        "id": "fn_abc123",
        "name": "商品プロモーション"
    }
}
```

レスポンスの `id` を以降のリクエストで使います。

## 2. ステップを作成

ファネル内にステップを作成します。

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

```json レスポンス theme={null}
{
    "data": {
        "id": "st_def456",
        "name": "LP",
        "order": 1
    }
}
```

## 3. 要素タイプを確認

ページで使用できる要素タイプを確認します。

```bash theme={null}
curl -X GET "https://api.utage-system.com/v1/element-types/funnel" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"
```

レスポンスには `text`、`image`、`button` 等の利用可能な要素タイプが含まれます。各要素のプロパティを確認するには、要素プロパティAPIを使います。

```bash theme={null}
curl -X GET "https://api.utage-system.com/v1/element-types/funnel/properties?types=text,image,button" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"
```

## 4. ページを作成

要素付きのページを作成します。ヘッダー・メイン画像・本文・CTAボタンの4セクション構成です。

```bash theme={null}
curl -X POST "https://api.utage-system.com/v1/funnels/fn_abc123/steps/st_def456/pages" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "商品LP",
    "page_title": "今だけ特別価格！オンライン講座のご案内",
    "pc_width": 800,
    "elements": [
      {
        "type": "section",
        "background_color": "#1a1a2e",
        "padding_top": 60,
        "padding_bottom": 60,
        "children": [
          {
            "type": "row",
            "children": [
              {
                "type": "col",
                "children": [
                  {
                    "type": "text",
                    "content": "<h1 style=\"text-align: center; color: #ffffff;\">あなたのビジネスを<br>次のステージへ</h1><p style=\"text-align: center; color: #cccccc;\">3ヶ月で売上を2倍にするオンライン講座</p>"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "section",
        "padding_top": 40,
        "padding_bottom": 40,
        "children": [
          {
            "type": "row",
            "children": [
              {
                "type": "col",
                "children": [
                  {
                    "type": "image",
                    "image_url": "https://example.com/images/main-visual.jpg"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "section",
        "padding_top": 40,
        "padding_bottom": 40,
        "children": [
          {
            "type": "row",
            "children": [
              {
                "type": "col",
                "children": [
                  {
                    "type": "text",
                    "content": "<h2 style=\"text-align: center;\">講座の特徴</h2><p>この講座では、実践的なマーケティング戦略を学べます。初心者の方でも安心のステップバイステップ形式で、すぐにビジネスに活用できる内容です。</p>"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "section",
        "background_color": "#f8f9fa",
        "padding_top": 50,
        "padding_bottom": 50,
        "children": [
          {
            "type": "row",
            "children": [
              {
                "type": "col",
                "children": [
                  {
                    "type": "button",
                    "content": "今すぐ申し込む",
                    "link_url": "https://example.com/register",
                    "button_color": "btn-red"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }'
```

```json レスポンス theme={null}
{
    "data": {
        "id": "pg_ghi789",
        "title": "商品LP",
        "content_type": "elements",
        "pc_width": 800,
        "step_url": "https://utage-system.com/p/xxxxx/",
        "page_url": "https://utage-system.com/page/pg_ghi789"
    }
}
```

<Warning>
  ボタン要素には必ず `button_color` を指定してください。未指定の場合、デザインが適用されず質素な表示になります。
</Warning>

### 要素構造の解説

上記のJSONは以下の構成です。

| セクション | 要素     | 説明                      |
| ----- | ------ | ----------------------- |
| 1     | text   | ヘッダー。ダークな背景色に白文字        |
| 2     | image  | メインビジュアル画像              |
| 3     | text   | 本文テキスト                  |
| 4     | button | CTAボタン。背景色付きセクションで目立たせる |

各セクションが `section > row > col > コンテンツ要素` の階層に従っています。

## 5. ページURLを確認

作成したページの公開URLはレスポンスの `step_url` で確認できます。

ステップ一覧APIからも取得可能です。

```bash theme={null}
curl -X GET "https://api.utage-system.com/v1/funnels/fn_abc123/steps" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"
```

```json レスポンス theme={null}
{
    "data": [
        {
            "id": "st_def456",
            "name": "LP",
            "step_url": "https://utage-system.com/p/xxxxx/",
            "order": 1
        }
    ]
}
```

`step_url` にブラウザでアクセスすると、作成したLPが表示されます。

<Tip>
  ページを更新する場合は[ページ更新API](/api-reference/funnel/page-update)を使用します。更新は部分更新で、変更したいフィールドだけを送信すれば、未指定のフィールドは現在の値が維持されます。
</Tip>

## マルチカラムレイアウト

2カラムレイアウトを作る場合は、1つのrowに複数のcolを配置し `col_width_1` で幅を指定します。

```json theme={null}
{
    "type": "section",
    "children": [
        {
            "type": "row",
            "children": [
                {
                    "type": "col",
                    "col_width_1": 6,
                    "children": [
                        {
                            "type": "image",
                            "image_url": "https://example.com/images/photo.jpg"
                        }
                    ]
                },
                {
                    "type": "col",
                    "col_width_1": 6,
                    "children": [
                        {
                            "type": "text",
                            "content": "<p>テキストが右側に表示されます</p>"
                        }
                    ]
                }
            ]
        }
    ]
}
```

<Note>
  `col_width_1` は12分割グリッドです。2カラム均等なら各6、3:1なら9と3のように指定します。
</Note>

## 次のステップ

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

  <Card title="エラーハンドリング" icon="triangle-exclamation" href="/guides/error-handling">
    エラーの種類と対処方法
  </Card>
</CardGroup>