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",
"order": 1
}
}
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_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"
}
]
}
]
}
]
}
]
}'
レスポンス
{
"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"
}
}
ボタン要素には必ず
button_color を指定してください。未指定の場合、デザインが適用されず質素な表示になります。要素構造の解説
上記のJSONは以下の構成です。| セクション | 要素 | 説明 |
|---|---|---|
| 1 | text | ヘッダー。ダークな背景色に白文字 |
| 2 | image | メインビジュアル画像 |
| 3 | text | 本文テキスト |
| 4 | button | CTAボタン。背景色付きセクションで目立たせる |
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",
"step_url": "https://utage-system.com/p/xxxxx/",
"order": 1
}
]
}
step_url にブラウザでアクセスすると、作成したLPが表示されます。
ページを更新する場合はページ更新APIを使用します。更新は部分更新で、変更したいフィールドだけを送信すれば、未指定のフィールドは現在の値が維持されます。
マルチカラムレイアウト
2カラムレイアウトを作る場合は、1つのrowに複数のcolを配置しcol_width_1 で幅を指定します。
{
"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>"
}
]
}
]
}
]
}
col_width_1 は12分割グリッドです。2カラム均等なら各6、3:1なら9と3のように指定します。次のステップ
登録フォームを作成する
フォーム付きLPの作成手順
エラーハンドリング
エラーの種類と対処方法