S
SEKAI STAY
LP 統合設置ガイド · 明神 洸次郎 宛 · 2026.04.19

SEKAI STAY LP ← 内部ポータル 統合設置ガイド(明神 洸次郎 宛)

sekaistay.com LPに、内部ポータル(japanvillas.kss-cloud.com)と連携する2つのフォームを設置するための手順書です。

所要時間: 約20分(2ブロック設置) 問い合わせ: 吉田 / #claude-japan-villas


何をするか

# 設置するもの 方式 LPに入れるコード
1 HubSpotリード獲得フォーム(問い合わせ/資料請求) LP側でHTMLフォーム実装 + JS送信 <form> + <script>
2 物件診断レポート申請フォーム(3ステップ・自動レポート生成) iframe埋込 <iframe> + <script>

送信された情報がどこに行くか

[LP フォーム]
      ↓
japanvillas.kss-cloud.com の APIエンドポイント
      ↓
  (1) HubSpot Contact 作成(または既存更新)
  (2) HubSpot Deal 作成(Stage=「01 入力済み」)
  (3) HubSpot Ticket 作成(新規・営業キュー化用・※スコープ追加後に有効化)
  (4) Contact ⇄ Deal ⇄ Ticket 自動紐付け
  (5) 内部ポータル `/ops/reports` に記録(レポート申請の場合)
  (6) バックグラウンドでレポート自動生成(レポート申請の場合)

① HubSpotリード獲得フォーム

LPに貼り付けるHTMLサンプルです。このままコピペで動きます。

<!-- SEKAI STAY リード獲得フォーム -->
<form id="sekai-lead-form" novalidate>
  <!-- honeypot(スパム対策・絶対に display:none で隠す) -->
  <label style="position:absolute;left:-9999px;" aria-hidden="true">
    Website(空欄のまま)
    <input type="text" name="website" tabindex="-1" autocomplete="off">
  </label>

  <!-- 必須: メール -->
  <label>
    メールアドレス <span style="color:red">*</span>
    <input type="email" name="email" required placeholder="[email protected]">
  </label>

  <!-- 推奨: 氏名 -->
  <label><input type="text" name="lastname" placeholder="山田"></label>
  <label><input type="text" name="firstname" placeholder="太郎"></label>

  <!-- 推奨: 電話 -->
  <label>電話番号 <input type="tel" name="phone" placeholder="090-1234-5678"></label>

  <!-- 推奨: 物件情報 -->
  <label>物件タイプ
    <select name="property_type">
      <option value="">選択</option>
      <option value="戸建">戸建</option>
      <option value="VILLA">VILLA</option>
      <option value="旅館">旅館</option>
      <option value="マンション">マンション</option>
      <option value="その他">その他</option>
    </select>
  </label>
  <label>エリア <input type="text" name="area" placeholder="ニセコ"></label>
  <label>部屋数 <input type="number" name="room_count" min="1" max="100"></label>
  <label>推定月収(円) <input type="number" name="estimated_revenue" min="0"></label>
  <label>オーナー種別
    <select name="owner_type">
      <option value="">選択</option>
      <option value="個人">個人</option>
      <option value="法人">法人</option>
    </select>
  </label>

  <!-- 自動送信される隠しフィールド(LP側で動的セットするとHubSpotに流入元が記録される) -->
  <input type="hidden" name="lp_url" value="">
  <input type="hidden" name="utm_source" value="">
  <input type="hidden" name="utm_medium" value="">
  <input type="hidden" name="utm_campaign" value="">

  <button type="submit">無料相談を申し込む</button>

  <div id="sekai-lead-status"></div>
</form>

<script>
(function(){
  var form = document.getElementById('sekai-lead-form');
  var status = document.getElementById('sekai-lead-status');

  // URL から UTM / lp_url を自動セット
  var params = new URLSearchParams(window.location.search);
  form.lp_url.value = window.location.href;
  form.utm_source.value = params.get('utm_source') || '';
  form.utm_medium.value = params.get('utm_medium') || '';
  form.utm_campaign.value = params.get('utm_campaign') || '';

  form.addEventListener('submit', function(e){
    e.preventDefault();
    status.textContent = '送信中...';

    var data = {};
    new FormData(form).forEach(function(v,k){ data[k] = v; });

    fetch('https://japanvillas.kss-cloud.com/api/lp/owner-lead', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })
    .then(function(r){ return r.json(); })
    .then(function(d){
      if (d.ok) {
        status.textContent = 'ありがとうございます。担当者よりご連絡いたします。';
        form.reset();
      } else {
        status.textContent = '送信に失敗しました: ' + (d.error || 'unknown');
      }
    })
    .catch(function(e){
      status.textContent = 'ネットワークエラーが発生しました。時間をおいて再度お試しください。';
    });
  });
})();
</script>

動作の仕組み

項目 内容
送信先API POST https://japanvillas.kss-cloud.com/api/lp/owner-lead
CORS許可 sekaistay.com / www.sekaistay.com / lp-ten-gamma.vercel.app は許可済
スパム対策 honeypot(website フィールドが非空でブロック) + レート制限(同一IP 5req/分) + オプションで reCAPTCHA v3(g-recaptcha-response をPOSTに付与すれば検証)
作成されるHubSpotオブジェクト Contact + Deal(Stage=「01 入力済み(フォーム送信完了)」)+ Ticket(新規・※tickets スコープ追加後)
自動付与プロパティ hs_lead_status=NEW / lifecyclestage=lead / hs_analytics_source(UTM mediumから自動判定)/ jv_utm_* / jv_lp_url / jv_form_submitted_at

任意項目(必要に応じて追加)

テストリクエスト(curlでの検証)

curl -X POST -H "Origin: https://sekaistay.com" -H "Content-Type: application/json" \
  "https://japanvillas.kss-cloud.com/api/lp/owner-lead" \
  -d '{"email":"[email protected]","firstname":"テスト","lastname":"洸次郎","property_type":"VILLA","area":"ニセコ","room_count":"5","lp_url":"https://sekaistay.com/"}'

成功時のレスポンス例:

{"ok":true,"contact_id":"473453796075","deal_id":"321352385266","ticket_id":"<id>","ticket_error":null}

② 物件診断レポート申請フォーム(iframe埋込)

LPに貼り付けるコードです。このままコピペで動きます。

<!-- SEKAI STAY 物件診断レポート申請フォーム(ライトテーマ版) -->
<iframe
  id="sekai-report-form"
  src="https://japanvillas.kss-cloud.com/report-request?embed=1"
  title="SEKAI STAY 物件診断レポート申請"
  style="width:100%;max-width:640px;height:1900px;border:none;display:block;margin:0 auto;background:transparent;"
  referrerpolicy="no-referrer-when-downgrade"
  loading="lazy"
></iframe>
<script>
(function(){
  window.addEventListener('message', function(e){
    if (e.origin !== 'https://japanvillas.kss-cloud.com') return;
    if (!e.data || e.data.type !== 'japan-villas-height') return;
    var iframe = document.getElementById('sekai-report-form');
    if (iframe && typeof e.data.height === 'number') {
      iframe.style.height = (e.data.height + 24) + 'px';
    }
  });
})();
</script>

ダークテーマ版(LPの背景が濃色の場合)

LPの背景が黒/濃紺など濃い色の場合は、URLに &theme=dark を付けてください。カード背景・入力欄・文字色がダーク配色に切り替わります。

<iframe
  id="sekai-report-form"
  src="https://japanvillas.kss-cloud.com/report-request?embed=1&theme=dark"
  title="SEKAI STAY 物件診断レポート申請"
  style="width:100%;max-width:640px;height:1900px;border:none;display:block;margin:0 auto;background:transparent;"
  referrerpolicy="no-referrer-when-downgrade"
  loading="lazy"
></iframe>

<script> 部分はライトテーマ版と同一。使い回せます)

動作の仕組み

項目 内容
埋込方式 iframe(?embed=1 クエリでLP埋込モード=ロゴ/フッター非表示・背景透過)
テーマ切替 &theme=dark を追加するとダーク配色へ切替(カード/入力欄/テキスト色)。省略時はライト
高さ自動調整 iframe内から親ページへ postMessage({ type: 'japan-villas-height', height: N }) を送信。親側JSで高さ更新
フロー 3ステップ(①物件情報 ②売上・手数料 ③連絡先+課題)+ 完了画面「診断結果と詳細レポートを送ります」(24時間後の送信予定時刻・カウントダウン・年間損失コスト概算・ミーティング予約導線)
送信先 /api/report-requests/submit → 内部ポータル /ops/reports に記録 → バックグラウンドでレポート自動生成 → 24時間後にメール自動送信(ポータル画面で内容確認・即時送信も可能)
CSP frame-ancestors sekaistay.com / www.sekaistay.com / admin.kss-cloud.com / localhost は許可済

カスタマイズ例

トラブルシューティング

症状 原因 対処
iframeが空白 CSP frame-ancestors に親origin未登録 吉田に連絡
高さが自動調整されない <script> が貼られていない / e.origin で弾かれている <script> をiframe直後に設置 / console [jv] ... ログ確認
スマホでフォーム小 viewport meta欠如 LP <head><meta name="viewport" content="width=device-width, initial-scale=1"> を追加

まとめ:設置後にLPが持つ機能

  1. リード獲得フォーム(HubSpot発火)— 問い合わせ/資料請求でContact+Deal+Ticket自動作成。UTM・流入元・キャンペーン自動記録
  2. レポート申請フォーム(iframe)— 3ステップで物件診断レポートを申込時点に自動生成し、24時間後にオーナー様へメール配信。申込時点で内部ポータルの /ops/reports にも即時記録され、営業担当が事前に内容確認可能

これらはコピペだけで動きます。追加のサーバー実装やデータベース連携は不要です。


動作確認の手順

  1. LPに上記2つのコードを貼る
  2. sekaistay.com をブラウザで開く
  3. リード獲得フォーム: テスト情報(実在しないメール [email protected] 等)を入力→送信→「ありがとうございます」が出ればOK
  4. レポート申請フォーム: 3ステップをすべて進めて送信→「診断結果と詳細レポートを送ります」画面が表示されればOK(ダーク版LPの場合は &theme=dark 付きURLで配色が馴染むか目視確認)
  5. 吉田にHubSpotのContact一覧と /ops/reports を確認してもらう

よくある質問

Q1. 既に lp-ten-gamma.vercel.app がLPとして動いているが、これは置き換わる? → いいえ。/api/lp/owner-lead は両方のLPから同時に受け付けできます。lp-ten-gamma を残したまま、sekaistay.com 配下に新LPを追加できます。

Q2. HubSpot Ticket が作成されない → 現在 HubSpot Private App に tickets スコープが未付与のため、ticket_error: "403: ..." が返ります。レスポンスは ok: true で Contact/Deal は作成されます。Ticketはスコープ追加後に自動で有効化します(コード変更不要)。

Q3. reCAPTCHA は必須? → 任意です。spam被害が出たら <script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY"></script> + grecaptcha.execute(...) を追加してPOSTに g-recaptcha-response を付与してください。RECAPTCHA_SECRET は吉蔵側で設定します。

Q4. フォームのデザインが LPトンマナと合わない → ①リード獲得フォーム: LP側のCSSでそのままスタイリング可能(標準HTML要素)。②レポート申請iframe: iframe内のデザインは固定(SEKAI STAYの内部デザインシステム準拠)。トンマナ調整が必要な場合は吉田に連絡。

Q5. 送信データをSlack通知したい → HubSpot Workflow で設定可能(Contact作成 → Slack通知)。HubSpot側で明神 洸次郎さんが設定すれば良い(吉蔵側の追加実装不要)。

Q6. 申請ごとに「チケット(Ticket)」も自動で作ってほしい → 既にコード実装済。現在はHubSpot Private Appの tickets スコープが未付与のため ticket_error: "403: MISSING_SCOPES" で失敗しますが、Contact/Dealは正常に作成されます。吉田が Private App 設定で tickets スコープを追加してトークンを再発行すれば、コード変更なしで自動有効化します(追加作業不要)。


吉蔵が保証する稼働状況(2026-04-19時点)


最終更新: 2026-04-19 提供元: SEKAI STAY(株式会社セカイチ)/ 吉田