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

​
1. ファネルを作成

まずLPを格納するファネルを作成します。 
curl -X POST "https://api.utage-system.com/v1/funnels" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "商品プロモーション"
  }'
レスポンス
{
    "data": {
        "id": "fn_abc123",
        "name": "商品プロモーション"
    }
}
レスポンスの id を以降のリクエストで使います。

​
2. ステップを作成

ファネル内にステップを作成します。 
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"
  }'
レスポンス
{
    "data": {
        "id": "st_def456",
        "name": "LP",
        "funnel_id": "fn_abc123"
    }
}

​
3. 要素タイプを確認

ページで使用できる要素タイプを確認します。 
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を使います。 
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セクション構成です。 
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_src": "https://example.com/images/main-visual.jpg",
                    "image_alt": "講座イメージ"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "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",
                    "button_text": "今すぐ申し込む",
                    "button_url": "https://example.com/register",
                    "button_color": "#e74c3c",
                    "button_text_color": "#ffffff",
                    "button_size": "lg",
                    "button_block": true
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }'
レスポンス
{
    "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/p/xxxxx/?page_id=pg_ghi789"
    }
}
ボタン要素には必ず button_color を指定してください。未指定の場合、デザインが適用されず質素な表示になります。

​
要素構造の解説

上記のJSONは以下の構成です。
セクション要素説明
1textヘッダー。ダークな背景色に白文字
2imageメインビジュアル画像
3text本文テキスト
4buttonCTAボタン。背景色付きセクションで目立たせる
各セクションが section > row > col > コンテンツ要素 の階層に従っています。

​
5. ページURLを確認

作成したページの公開URLはレスポンスの step_url で確認できます。 ステップ一覧APIからも取得可能です。 
curl -X GET "https://api.utage-system.com/v1/funnels/fn_abc123/steps" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"
レスポンス
{
    "data": [
        {
            "id": "st_def456",
            "name": "LP",
            "funnel_id": "fn_abc123",
            "step_url": "https://utage-system.com/p/xxxxx/"
        }
    ]
}
step_url にブラウザでアクセスすると、作成したLPが表示されます。
ページを更新する場合はページ更新APIを使用します。変更箇所だけでなく全フィールドを含めて送信してください。更新前にページ取得APIで現在の値を取得することを推奨します。

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

2カラムレイアウトを作る場合は、1つのrowに複数のcolを配置し col_width で幅を指定します。 
{
    "type": "section",
    "children": [
        {
            "type": "row",
            "children": [
                {
                    "type": "col",
                    "col_width": 6,
                    "children": [
                        {
                            "type": "image",
                            "image_src": "https://example.com/images/photo.jpg"
                        }
                    ]
                },
                {
                    "type": "col",
                    "col_width": 6,
                    "children": [
                        {
                            "type": "text",
                            "content": "<p>テキストが右側に表示されます</p>"
                        }
                    ]
                }
            ]
        }
    ]
}
col_width は12分割グリッドです。2カラム均等なら各6、3:1なら9と3のように指定します。

​
次のステップ

登録フォームを作成する

フォーム付きLPの作成手順

エラーハンドリング

エラーの種類と対処方法