はじめに

SiteKit でできること

SiteKit は、できあがった静的サイト（HTML）に後から付ける部品です。サイトをどう作ったかは問いません。AI に作らせた HTML でも、手で書いた HTML でも同じように使えます。

付けられるものは3つです。

• お店の人が直せる箇所（CMS） — 営業時間・お知らせ・写真など、HTML に印を付けた箇所を、お店の人が管理画面から直せます
• お問い合わせフォーム — 送信の受付・保存、お店へのメールと Slack の通知、お客様へのお礼メール（自動返信）
• 流入元（UTM）の記録と GTM の読み込み — 広告から来た人の utm_* などを覚えておき、フォームの送信に添えます

サイト側で JavaScript は書きません。hidden 項目を足す必要もありません。script を1行入れて、HTML に属性を付けるだけです。

CMS が止まってもサイトは止まりません。 値が届かないときは、HTML に書いた静的な文言がそのまま表示されます。だから HTML の文言は、それだけ読んで意味が通る内容にしておきます。

5分で動かす

1. サイトを登録して、サイト ID を受け取る 近日

登録すると、無料の Dev プランでサイトが1つ作られ、サイト ID（例: hanaya）が決まります。セルフサービスの登録画面は準備中です。開発用・プレビュー用のドメイン（localhost や *.pages.dev など）で動かせます。詳しくは プランと上限。

2. script を1行入れる

</body> の直前か、<head> に defer 付きで入れます。data-site にサイト ID を書きます。

<script src="https://cdn.sitekit.example/sitekit.js" data-site="hanaya" defer></script>

3. 属性を付ける

フォームは、<form> に data-sitekit-form を付けるだけです。送信処理は script が行います。

<form data-sitekit-form="contact">
  <label>お名前 <input name="name" required></label>
  <label>メール <input type="email" name="email" required></label>
  <label>お問い合わせ内容 <textarea name="message"></textarea></label>

  <!-- ボット対策。人には見えない場所に置く（必須） -->
  <input type="text" name="_hp" tabindex="-1" autocomplete="off"
         style="position:absolute;left:-9999px" aria-hidden="true">

  <button type="submit">送信する</button>
</form>

<div data-sitekit-success role="status" aria-live="polite" hidden>お問い合わせありがとうございました。</div>
<div data-sitekit-error role="status" aria-live="polite" hidden></div>

お店の人に直してもらう箇所には data-cms を付けます。中の文言は、値が届かないときにそのまま出る既定の文言です。

<dl>
  <dt>営業日</dt>
  <dd data-cms="hours.days">月〜土</dd>
  <dt>時間</dt>
  <dd data-cms="hours.time">10:00 - 18:00</dd>
</dl>

4. schema.json で「何を直せるか」「どんなフォームか」を決める

上の HTML に合わせると、こう書きます。forms[].key がフォームの data-sitekit-form の値と、fields[].key が入力の name と一致している必要があります。

{
  "locales": ["ja"],
  "groups": [
    { "key": "hours", "label": "営業時間", "fields": [
      { "key": "days", "label": "営業日", "type": "text" },
      { "key": "time", "label": "時間", "type": "text" }
    ] }
  ],
  "forms": [
    { "key": "contact", "label": "お問い合わせ", "fields": [
      { "key": "name", "label": "お名前", "type": "text", "required": true },
      { "key": "email", "label": "メールアドレス", "type": "email", "required": true },
      { "key": "message", "label": "お問い合わせ内容", "type": "textarea" }
    ] }
  ]
}

書き方の全体は schema.json の書き方。schema.json をサイトに反映する手段（管理画面でのサイト追加、CLI の schema push、MCP）はセルフサービス版とあわせて提供します 近日。

5. 管理画面で確かめる

管理画面 にログインすると、schema.json に書いた項目が入力欄として並びます。値を直して公開すると、最長1分でサイトに反映されます（サイトの再デプロイは要りません）。フォームから送ったお問い合わせも、管理画面の一覧に届きます。

値をサーバー側で HTML に埋め込むには、Cloudflare Pages の中継（Pages Functions）を使います。ほかのホスティングでは script の data-embed で表示時に埋め込みます。違いは 中継とホスティング にあります。

用語

次に読む

• script タグ — 属性の一覧と、script だけで動くもの
• 直せる箇所の印（CMS） — テキスト・写真・お知らせの一覧・多言語
• フォーム — 表示・通知・自動返信・テスト送信
• AI エージェントに渡す — Claude Code や Cursor にそのまま貼れる指示文