# 店主が自分でサイトを更新できるようにするには？（静的サイトに CMS を後付けする）

お店の人に直してほしい箇所（文言・写真・お知らせの一覧）に data-cms 属性で印を付け、schema.json で宣言し、お店の人を Siteon の管理画面に招待します。お店の人がスマホで直すと、Siteon のホスティングなら15秒以内、いまのホスティングのままなら1分以内に全ページに反映され、サイトのビルドし直しは要りません。直せるのは印を付けた箇所だけなのでデザインは崩れず、本番ドメインでは1サイト月500円からです。

URL: https://siteon.dev/ja/guides/add-cms-to-static-site
更新日: 2026-10-26

## しくみ

- HTML に `data-cms` 属性を付けます。要素の中にもともと書いてある文言が既定値です
- 何を直せるかは schema.json で宣言します。管理画面には、宣言した項目だけが出ます
- 値は配信の前に文字として差し込まれるので、検索エンジンにも更新後の内容が届きます。入力された値が HTML やスクリプトとして動くことはありません
- CMS に届かないときは、HTML に書いた文言がそのまま出ます。CMS のせいでサイトが止まることはありません

## 手順

### 1. script タグを入れる

```html
<script src="https://cdn.siteon.dev/sitekit.js" data-site="hanaya" defer></script>
```

### 2. 直せる箇所に印を付ける

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

<!-- お知らせの一覧: template の中身が記事の数だけ繰り返される -->
<ul class="news">
  <template data-cms-list="news" data-cms-limit="3">
    <li>
      <time data-cms="date">2026-01-01</time>
      <span data-cms="title">記事のタイトル</span>
    </li>
  </template>
  <template data-cms-empty="news"><li>お知らせはまだありません。</li></template>
</ul>
```

### 3. schema.json で項目を宣言して反映する

```json
{
  "locales": ["ja"],
  "groups": [
    { "key": "hours", "label": "営業時間", "fields": [
      { "key": "days", "label": "営業日", "type": "text" },
      { "key": "time", "label": "営業時間", "type": "text" }
    ] }
  ]
}
```

お知らせのような一覧は `collections` で宣言します（[schema.json の書き方](https://siteon.dev/ja/docs/schema)）。

```sh
siteon schema push --site hanaya
```

### 4. 公開して、お店の人を招待する

```sh
siteon deploy ./dist --site hanaya
```

[管理画面](https://app.siteon.dev)で、お店の人をそのサイトのスタッフとしてメールで招待します。スタッフが直せるのは自分のサイトの中身とお問い合わせの確認だけで、請求やほかのサイトは見えません。

## 値の届け方は3つ

| | Siteon のホスティング | Cloudflare Pages の中継 | ほかのホスティング（`data-embed`） |
|---|---|---|---|
| 値を入れるとき | 配信の前 | 配信の前 | 表示の後にブラウザで |
| 直してから反映まで | 15秒以内 | 最大1分 | 最大1分 |
| 記事ごとのページ・タグのページ | 使える | 使える | 使えない |

## 料金

| | Free | Lite | Standard | Business |
|---|---|---|---|---|
| 月額（税抜） | 0円 | 500円 | 1,480円 | 4,980円 |
| CMS の記事 | 通算 20件 | 100件 | 1,000件 | 1万件 |
| 写真 | 100MB | 1GB | 5GB | 20GB |
| AI の翻訳・文章 | お試し 3回 | なし | 月 30記事 | 月 150記事 |

編集する人の数では料金がかかりません。Free では、編集は開発・プレビュー用のドメインと、Siteon のホスティングのサブドメイン（`<名前>.siteun.com`）で使えます。独自ドメインは有料プランです。

## できないこと・近日の機能

- 直せるのは印を付けた箇所だけです。レイアウトやデザインの変更はコードで行います
- `data-embed` は読み込み後に `body` の中身を入れ替えるので、独自の JavaScript があるサイトでは避けます（Siteon のホスティングか中継を使います）
- Siteon のホスティングでの独自ドメイン（近日）

## 関連するドキュメント

- [直せる箇所の印（CMS）](https://siteon.dev/ja/docs/cms): 文言・写真・一覧・記事ページ・多言語
- [schema.json の書き方](https://siteon.dev/ja/docs/schema)
- [ホスティングと配信](https://siteon.dev/ja/docs/hosting)

---

Siteon は、AI で作ったサイトのためのインフラです。AI や手で作った静的サイト（HTML）に、ホスティング・お客さん（お店の人）が直せる CMS・お問い合わせフォーム・アクセス解析・AI エージェントからの操作（CLI・MCP）を足し、そのまま納品できる状態にします。