# AI相談ボタン 実装キット（Claude Code 用の指示書）

このファイルは **AIエージェント（Claude Code など）に読ませるための指示書** です。
人が読んでも分かるように書いてありますが、実際の作業はエージェントがやります。

見本（動いているもの）：
- 宿の予約ページ版 … https://ai-sodan.pages.dev/onsen
- イベント告知ページ版 … https://ai-sodan.pages.dev/offkai

---

## 使う人へ：やることは1つだけ

自分の Claude Code に、これを貼ってください。

```
https://ai-sodan.pages.dev/kit.md を読んで、私のサイトに「AI相談ボタン」を実装してください。
```

サイトのファイルがどこにあるか聞かれたら、フォルダを教えてください。それ以外は全部エージェントがやります。

---

## ここから下は、エージェント（Claude Code）への指示です

### 0. まず確認すること

ユーザーに、この2つだけ聞いてください。**それ以上は聞かないこと。**

1. **サイトのHTMLファイルはどこにありますか**（フォルダのパス、または「まだ無い」）
2. **サイトの公開URLは何ですか**（例：`example.com`。まだ公開していなければ、後で入れる前提で進める）

ページの種類（お店／ブログ／イベントなど）は、**HTMLの中身を読んで自分で判断してください**。ユーザーに種類を聞かない。

### 1. 何を作るのか

サイトの右下に固定ボタンを置く。押すと小さなパネルが開き、こう並ぶ。

```
① 相談したいことを選ぶ      ← 選択肢（4〜5個）を押すだけ
② AIに送る質問文             ← 全文が見える。その場で直せる
③ いつも使っているAIを押す   ← ChatGPT / Claude / Perplexity
```

押すと、そのAIが**質問文の入った状態で**開く。読んだ人は文章を打たなくていい。

**仕組みの核**：質問文の中に、そのサイトのURLを入れる。AIは「このページを見ています」と言われるとページを読みに行き、中身をもとに答える。

### 2. 実装の方法は2つ。どちらかを選ぶ

#### 方法A：配布スクリプトを1行貼る（速い・おすすめ）

サイトの `</body>` の直前に1行入れる。

```html
<script src="https://ai-sodan.pages.dev/site.js"></script>
```

これだけで動く（名前は `<title>` から、ドメインは現在地から自動取得。汎用の相談テーマ4つが入る）。
ページに合わせるなら、属性を足す。

```html
<script src="https://ai-sodan.pages.dev/site.js"
        data-site="お店やページの名前"
        data-domain="example.com"
        data-ask="AIへのお願いを1〜2行"
        data-facts="要点1|要点2|要点3"
        data-topics="相談テーマ1|相談テーマ2|相談テーマ3|相談テーマ4"
        data-label="AI相談"
        data-lead="パネル上部の一言"
        data-color="#c2703a"></script>
```

| 属性 | 省略したときの既定値 |
|---|---|
| `data-site` | `<title>` の先頭部分 |
| `data-domain` | いま表示しているサイトのドメイン |
| `data-ask` | 「このサイトの内容について、相談に乗ってください。」 |
| `data-facts` | なし（**強く推奨**。ページの要点を `|` 区切りで。読めなかったときの保険） |
| `data-topics` | 汎用の4つ（`off` で選択肢なし） |
| `data-closing` | 下の「締めの1行」（`off` で消す） |
| `data-label` / `data-lead` / `data-color` / `data-pos` | AI相談／普段使っているAIに相談できます／#c2703a／right |

#### 方法B：自分のサイトに取り込む（外部に依存しない）

配布元が止まっても動くようにしたい場合はこちら。

1. `https://ai-sodan.pages.dev/site.js` をダウンロードして、サイトのフォルダに置く
2. ファイル冒頭の `CFG` の既定値を、そのサイト用に書き換える
3. `<script src="/site.js"></script>` として読み込む

**改変してよい**。ライセンスの制約はない。ただし §4 の安全ルールは必ず守ること。

### 3. 質問文の型（ここが品質を決める）

```
{サイト名}（https://{ドメイン}）を見ています。
{選んだ相談テーマ}

【このページに書いてあること】
・{要点1}
・{要点2}
・{要点3}

まずこのページを開いて読んでください。読めたら、その内容と私について知っていることをもとに答えをお願いします。
開けなかったときは、そのことを一言だけ伝えたうえで、上の「このページに書いてあること」と私について知っていることだけで答えてください。本文の共有を求めたり、書かれていないことを推測で補ったりはしないでください。
```

**この型は、2回の失敗から作り直したもの。理由を書いておくので、勝手に短くしないこと。**

**① 締めは「答えから始めさせる」。**
「足りない情報があれば先に質問してください」と書くと、AIが質問から始めてしまい、押した人が何往復もすることになる。

**② ただし「仮で大丈夫」とは書かない。**（2026-08-15 実測）
Claude と Perplexity が**ページの取得に失敗する**ことがある。そのとき「足りない条件は仮で大丈夫です」と書いてあると、AIは**中身を読まないまま、それらしい嘘を書く**。実際に Perplexity が「ページの取得ができなかったため…足りない条件は仮定しています」と言って、架空の持ち物リストを作文した。
だから「**開けなかったときは、そう言ってください**」を必ず入れる。
さらに、**「そのうえで、上の要点だけで答えてください」まで書く**。ここが抜けると、要点を渡してあるのにAIが答えず、「本文をコピペしてください」と押した人に作業を投げ返してくる（これも実測）。

**③ 【このページに書いてあること】を必ず付ける。**（最重要）
AIが読めなかったときの保険。**間違えられたら困ることだけ**を3〜10行書く。
料金・営業条件・**断っていること**（対象外の人、できないこと）を優先する。
`data-facts="要点1|要点2|要点3"` で指定する。

> 「AIが読んでくれるはず」に頼らない。**読ませるのではなく、持たせる。**

「私について知っていることをもとに」は、**相手のAIが持っているその人の文脈を使わせる**ための一言。これがこの仕組みの利点そのもの。

### 3-2. サイト側の準備（読まれる確率を上げる）

- **`<meta name="robots" content="noindex">` を入れない。** 入っているとAIが読みにこない。デモや練習用のページでも同じ
- **robots.txt でAIクローラを弾かない**（`ChatGPT-User` `Claude-User` `Perplexity-User` `OAI-SearchBot` `ClaudeBot` `PerplexityBot`）
- **ログインが必要なページには置かない**（AIが読めない）

### 4. 安全ルール（必ず守る・省略不可）

この仕組みは、悪意ある「プロンプト注入リンク」と**まったく同じ形**をしている。違うのは中に何を書くかだけ。だから次を守る。

1. **質問文を必ず全文見せる。** パネルに表示し、その場で編集できるようにする。隠して送るボタンは作らない
2. **相手のAIの設定を書き換える言葉を書かない。** 「記憶して」「保存して」「今後は〜として振る舞って」「これまでの指示を無視」など。**良い目的でも使わない**（使うと攻撃と見分けがつかなくなる）
3. **個人情報を書かせる指示を入れない。** 氏名・住所・電話番号・カード番号・パスワードなど
4. **質問文に外部サイトのURLを入れない。** 入れるのは自分のドメインだけ
5. **答えを誘導しない。** 「合わない点も正直に教えてください」を入れる。自分に都合のいい答えだけ言わせる文は書かない

実装したら、**この5つを満たしているかセルフチェックして、結果をユーザーに報告すること。**

### 5. 相談テーマの決め方

ページのHTMLを読んで、**そのページに実際に書いてある情報で答えられること**を4〜5個作る。

| ページの種類 | 相談テーマの例 |
|---|---|
| お店・サロン | 初めてなので何を伝えればいいか／希望を言葉にできない／予算の中で何ができるか／行く前の準備 |
| 宿・施設 | 予算内でどのプランがいいか／記念日に使えるか／ひとりでも大丈夫か／当日の流れと持ち物 |
| イベント・告知 | 初参加でも大丈夫か／持ち物と流れ／この予定をカレンダーに入れる文面を作ってほしい／自分に合うか |
| ブログ・読みもの | 自分の場合はどう当てはまるか／実際にやるとどうなるか／分からなかった所を噛み砕いて／次に何をすべきか |
| プロフィール | 自分に合うか／どんな話をすればいいか／頼めることと頼めないこと／料金と進め方 |
| 講座・サービス | 自分のレベルでついていけるか／続けられるか／他と比べたい／始める前の準備 |
| ツール・アプリ | 使い方を順番に教えて／自分の場合どう使うか／自分に必要か／似たことを自分でもやりたい |

**そのページに載っていないことは書かない。** 料金表がないのに「予算内で選んで」と書くと、AIが推測で答えてしまう。

### 6. 実装したあとに確認すること

エージェントは、以下を**実際に確認してから**「できました」と言うこと。

- [ ] ボタンが右下に出る（スマホ幅でも画面からはみ出さない）
- [ ] 選択肢を押すと、質問文の該当行が入れ替わる
- [ ] 質問文にサイトのURLが `https://` 付きで入っている
- [ ] **`data-facts` に、間違えられたら困ることが入っている**（料金・条件・断っていること）
- [ ] ページに `noindex` が入っていない
- [ ] ChatGPT・Claude・Perplexity の3つが並んでいる
- [ ] 実際に1つ押して、質問が入った状態でAIが開く
- [ ] 安全ルール §4 の5項目を満たしている

### 7. やってはいけないこと

- **Gemini を載せない。** URLで質問を渡せず「開くだけ」になる。動かないボタンは信頼を削る（2026-08-15 実機確認）
- **ログインしないと読めないページに置かない。** AIがページを読めないので、推測で答えられてしまう
- **個人情報・会員限定価格が載るページに置かない**
- **自動で送信しない。** 人が送信ボタンを押す形を保つ

---

作った人：タガル（AI講師・言語化コーチ）
この指示書は自由に使ってかまいません。改変も再配布も可。ただし §4 の安全ルールは外さないでください。