AI相談ボタンをつくる

サイトの右下に置く「AI相談」ボタンを、入力するだけで作れます。
種類を選べば、相談テーマも自動で入ります。
Claude Code を使っている方は、下の1行を渡すだけでも作れます。

1どんなページに置きますか

選ぶと、そのページに合った相談テーマが自動で入ります。あとから直せます。

2名前とドメイン

ここに書いた名前とドメインが、AIへの質問文に入ります。これがAIに読みに行かせる合図になります。

3相談の中身

種類を選ぶと入ります。そのままでも、書き換えてもOKです。

ここが効きます。AIは、いつもページを読めるとは限りません(2026-08-15の実測で、ClaudeとPerplexityが取得に失敗しました)。読めなかったAIは、推測でそれらしい嘘を書きます。
料金・条件・断っていること——間違えられたら困ることだけここに書いておくと、読めなくても正しく答えられます。

押した人が自分で選ぶ形にしておくと、こちらが答えを誘導せずに済みます。 質問文の最後には「まずページを開いて読んでください。開けなかったときは、推測で答えず『開けませんでした』と最初に言ってください」が自動で入ります。 AIが聞き返してこないうえ、読めていないのに読んだふりをするのも防げます

4見た目

迷ったらそのままで大丈夫です。

5安全チェック

この仕組みは、悪用の手口とまったく同じ形をしています。だから機械で毎回確かめます。

入力を待っています。

なぜチェックするのか。「記憶して」「今後は〜として振る舞って」のような、相手のAIの設定を書き換える言葉を入れると、悪意ある人が送るリンクと見分けがつかなくなります。良い目的でも使わない、と決めておくのが、いちばん強い守りです。

6できたコード

サイトの </body> の直前に貼ってください。

  1. コピーする
  2. サイトのHTMLを開く(WordPressなら「フッター」や「カスタムHTML」)
  3. </body> の直前に貼って保存する
  4. サイトを開き直すと、右下にボタンが出ます

いちばん短い形。何も設定しなくても、この1行だけで動きます。名前はページのタイトル、ドメインは今いるサイトが自動で入り、汎用の相談テーマが4つ付きます。
<script src="https://ai-sodan.pages.dev/site.js"></script>

7できあがり(さわれます)

下の枠の右下にボタンが出ます。押して、質問文を確かめてください。

Claude Code を使っている人へ

上のコードを貼る代わりに、自分のPCで実装してもらえます。ページの中身に合わせた相談テーマまで、勝手に考えてくれます。

この1行を、自分の Claude Code に貼るだけです。

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

何が起きるか。あなたのClaude Codeが指示書を読み、サイトのHTMLを見て、そのページに合った相談テーマを考え、実装まで済ませます。安全ルール5つのセルフチェックも指示書に入れてあるので、危ない質問文にはなりません。
自分のサイトにファイルごと取り込む方法(配布元に依存しない形)も、指示書に書いてあります。