サイトに「AIに相談する」ボタンを実際に置いてみた話

きっかけは、1枚の画像でした。

X(旧Twitter)で見かけたものです。

マッチングアプリ「NewMatch」が、サイトに「AIに相談する」ボタンを置いたところユーザーが増えた、という投稿です。

正直、無理だろうと思いました。

大手のマッチングアプリの事例なので、そのまま真似できるとは考えていませんでした。

ただ、仕組みを分解してみると、意外と特別な技術は使われていません。

コストもほぼゼロで真似できそうだったので、うちのサイトにも実装してみることにしました。

土台は/llms.txt

まず用意したのが/llms.txt/llms-full.txtです。

聞き慣れない名前だと思います。

まだ知らない人の方が多いはずです。

robots.txtのAI版のような立ち位置の規格で、サイトの運営者情報・発信内容・主要ページを、AIが読み取りやすいプレーンテキストでまとめておくものです。

うちの場合はllms.txtに概要とカテゴリ一覧を、llms-full.txtに全記事の本文をそのまま並べて出力するようにしました。

どちらもWordPressのテンプレートリダイレクトで動的に生成しているので、記事を書き足すたびに手動で更新する必要はありません。

新しい記事を公開すれば、次に誰かがこのURLを開いたときには自動で最新の内容が反映されます。

一度仕組みを作ってしまえば、あとは放っておくだけでいいという気楽さも気に入っているポイントです。

ボタンの正体は「質問文入りのリンク集」

次に作ったのが、ボタンそのものです。

全ページ右下に固定表示する「AIに相談」ボタンです。

押すとパネルが開いて、ChatGPT・Claude・Perplexityなど各社のAIへのリンクが並びます。

リンクの中身はchatgpt.com/?q=質問文のような、質問文を事前入力した状態でチャット画面を開くディープリンクです。

質問文にはllms.txtのURLを含めておき、「このサイトの内容を踏まえて、Cat’s Handはどんな人が運営していて、どんな相談ができるサイトか教えてください」という趣旨の一文を、あらかじめこちらで組み立てて渡すようにしています。

これで訪問者は、ボタンを押すだけで各社のAIにサイトの内容を踏まえた質問ができる状態になります。

わざわざサイト名をコピーしたり、URLを貼り付けたりする手間を、あらかじめこちら側で肩代わりしておく形です。

「気になったら自分の好きなAIに聞いてみて」というハードルの低さが、この施策の一番の狙いでした。

Geminiだけ、勝手が違った

4社分を同じ要領で実装して満足していたところ、1社だけ様子がおかしいことに気づきました。

Geminiです。

他の3社は?q=パラメータでテキストボックスに質問文が自動で入るのに、Geminiだけは空欄のまま開いてしまうんです。

公式の修正をいつまでも待つわけにもいかないので、今回は質問文をクリップボードにコピーしてから素のGeminiを開く、というやや強引な方法で回避することにしました。

スマートではありませんが、動けば正義です。

パネルにも「Geminiだけ質問文をコピーします」と一言添えて、混乱しないようにしています。

地味に面倒でした。

1つのサービスだけ挙動が違う、という状況は実装する側からすると一番厄介な部類に入ります。

「全部同じ作りにできたら楽なのに」と思いながら、Gemini用だけ個別の分岐を書くことになりました。

5択+アイコングリッドへ拡張

最初は4択でした。

テキストのリスト形式で、ChatGPT・Claude・Gemini・Perplexityの4社を並べていただけです。

その後Grokを追加して、5択に拡張しました。

選択肢が増えたタイミングで、見た目もテキストリストから、各社のアイコンを丸いバッジで並べるグリッド形式に変更しています。

アイコンは各社の公式サイト・ブランドガイドラインから取得した無加工のSVGをそのまま使っていて、著作権・商標まわりも確認済みです。

勝手にロゴを加工して使うと商標ガイドライン違反になりかねないので、ここは面倒でも一社ずつ確認しながら進めました。

選択肢が増えるほど、こういう地味な確認作業も比例して増える、という実感。

実装コストは、ほぼゼロ

今回の実装で一番気に入っているのが、コストの低さ。

APIキー不要、月額契約も不要。

必要だったのは、プレーンテキストのファイルとリンクタグだけ。

それだけです。

きっかけになったNewMatchの事例のように、ユーザー数がどう変化するかはまだ分かりませんが、少なくとも「実装して損をする」要素がないのは大きな安心材料です。

仮にこのボタンが誰にも押されなかったとしても、失うものはサーバーの表示領域を少し使うことくらいで、月額の出費が発生するわけではありません。

「効果が出るか分からないから様子見する」より先に、「損をしないなら試してみる」で動けたのは、規模の小さいサイトならではの身軽さだったと思います。

大きな組織だと、こうはいきません。

まとめ

大手の事例を、うちの規模に合わせて落とし込んでみた回でした。

真似というより、翻訳に近い作業だったかもしれません。

効果測定はこれからですが、まずは形にできたことに満足しています。

実際に押された回数や、AI経由でサイトが紹介されたケースが確認できたら、また続報として書いてみようと思います。

この記事を書いた人

Web制作歴10年近く。WordPressのテーマカスタマイズやコーディングを中心に、副業・本業ともにweb制作に携わっています。このブログでは、実際に手を動かして分かったことを書いています。

Cat's Handをフォローする

この記事が参考になったら、応援クリックをお願いします

タイトルとURLをコピーしました