Skip to main content
このガイドでは、メルマガ登録フォーム付きのLPを作成する手順を説明します。フォーム登録と同時にステップメール配信を開始する構成です。

​
全体の流れ

  1. 配信アカウントを作成
  2. シナリオを作成
  3. ファネル・ステップを作成
  4. フォーム付きLPページを作成
  5. サンクスページを作成

​
1. 配信アカウントを作成

フォーム登録先となる配信アカウントを作成します。 
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"
  }'
レスポンス
{
    "data": {
        "id": "ac_abc123",
        "name": "メルマガ配信",
        "type": "mail"
    }
}
type にはメール配信なら mail、LINE配信なら line、両方なら mail_line を指定します。

​
2. シナリオを作成

配信アカウント内にシナリオを作成します。シナリオはステップメール等の配信シーケンスを管理する単位です。 
curl -X POST "https://api.utage-system.com/v1/accounts/ac_abc123/scenarios" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "無料メール講座"
  }'
レスポンス
{
    "data": {
        "id": "sc_def456",
        "title": "無料メール講座",
        "account_id": "ac_abc123"
    }
}

​
3. ファネル・ステップを作成

LP用とサンクスページ用の2つのステップを含むファネルを作成します。 
# ファネル作成
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": "メルマガ登録ファネル"
    }
}

# LP用ステップ作成
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": "登録ページ"}'
レスポンス
{
    "data": {
        "id": "st_step01",
        "name": "登録ページ",
        "funnel_id": "fn_abc123"
    }
}

# サンクスページ用ステップ作成
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": "サンクスページ"}'
レスポンス
{
    "data": {
        "id": "st_step02",
        "name": "サンクスページ",
        "funnel_id": "fn_abc123"
    }
}

​
4. フォーム付きLPページを作成

フォーム要素を含むページを作成します。フォーム要素は element_types_funnel?include=form で取得できる特殊な要素です。

​
フォーム要素タイプの確認

curl -X GET "https://api.utage-system.com/v1/element-types/funnel?include=form" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"

​
フォーム要素の階層構造

フォーム要素は通常の要素と異なり、内部に子要素を持つ特殊な構造です。 
section > row > col > form
                       ├── form-name     （お名前入力欄）
                       ├── form-email    （メールアドレス入力欄）
                       └── form-button   （登録ボタン）
form要素には scenario_id の指定が必須です。未指定の場合、フォーム登録が正しく動作しません。

​
ページ作成

ヘッダーテキスト + フォームの構成でLPを作成します。 
curl -X POST "https://api.utage-system.com/v1/funnels/fn_abc123/steps/st_step01/pages" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "メルマガ登録LP",
    "page_title": "無料メール講座｜3日間で学ぶマーケティング入門",
    "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;\">無料メール講座</h1><p style=\"text-align: center; color: #cccccc;\">3日間で学ぶマーケティング入門</p>"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "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 style=\"text-align: center;\">メールアドレスを入力して登録ボタンを押してください</p>"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "section",
        "padding_top": 20,
        "padding_bottom": 60,
        "children": [
          {
            "type": "row",
            "children": [
              {
                "type": "col",
                "children": [
                  {
                    "type": "form",
                    "scenario_id": "sc_def456",
                    "children": [
                      {
                        "type": "form-name",
                        "form_label": "お名前"
                      },
                      {
                        "type": "form-email",
                        "form_label": "メールアドレス"
                      },
                      {
                        "type": "form-button",
                        "button_text": "無料で受講する",
                        "button_color": "#e74c3c",
                        "button_text_color": "#ffffff"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }'
レスポンス
{
    "data": {
        "id": "pg_form01",
        "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_form01"
    }
}

​
form要素の主要プロパティ

プロパティ説明
scenario_id登録先シナリオのID（必須）
childrenフォーム内の子要素（form-name, form-email, form-button等）

​
form子要素の種類

要素タイプ説明
form-nameお名前入力欄
form-emailメールアドレス入力欄
form-tel電話番号入力欄
form-button登録ボタン
フォームの子要素タイプと利用可能なプロパティの詳細は、要素プロパティAPIで types=form,form-name,form-email,form-button を指定して取得できます。

​
5. サンクスページを作成

フォーム登録後に表示されるサンクスページを、次のステップとして作成します。 
curl -X POST "https://api.utage-system.com/v1/funnels/fn_abc123/steps/st_step02/pages" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "サンクスページ",
    "page_title": "ご登録ありがとうございます",
    "pc_width": 800,
    "elements": [
      {
        "type": "section",
        "padding_top": 80,
        "padding_bottom": 80,
        "children": [
          {
            "type": "row",
            "children": [
              {
                "type": "col",
                "children": [
                  {
                    "type": "text",
                    "content": "<h1 style=\"text-align: center;\">ご登録ありがとうございます</h1><p style=\"text-align: center;\">ご入力いただいたメールアドレスに確認メールをお送りしました。<br>メールに記載の手順に従って受講を開始してください。</p>"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }'
レスポンス
{
    "data": {
        "id": "pg_thanks01",
        "title": "サンクスページ",
        "content_type": "elements",
        "pc_width": 800,
        "step_url": "https://utage-system.com/p/yyyyy/",
        "page_url": "https://utage-system.com/p/yyyyy/?page_id=pg_thanks01"
    }
}

​
完成したファネル構造

メルマガ登録ファネル (fn_abc123)
├── 登録ページ (st_step01)
│   └── メルマガ登録LP (pg_form01)  ← フォーム付き
└── サンクスページ (st_step02)
    └── サンクスページ (pg_thanks01)
登録ページの step_url にアクセスすると、フォーム付きLPが表示されます。フォームからの登録完了後、シナリオ「無料メール講座」の配信が開始されます。

​
次のステップ

エラーハンドリング

エラーの種類と対処方法

APIリファレンス

全エンドポイントの詳細仕様