はじめに
個人開発でプロダクトを作成しました。Claude CodeでのVibe Codingで開発したので自分では1行もコードを書いていません。
Webサイトに導入する形のプロダクトなのですが、複数ユーザーが利用できる形にする前に自分のサイトに導入しようということで不完全なままリリースしました。自分しか利用できない形でリリースしているのでベータ版でなく、アルファ版となっています。プロダクトの完成度を高める前にコンセプトの検証を優先した次第です。
以下では、作成したプロダクトの紹介をしていきます。
ちなみにプロダクト名はまだ決まってないので、本記事では「プロダクト」と呼称します。
機能紹介
サイトへのAIリンクボタンの導入
以下のような形式のスクリプトをサイトに埋め込むことで画面の右下にボタンが表示されるようになります。
<script data-api-key="your_api_key" src="script_url"></script>
このボタンをクリックすると、AI（ChatGPT or Claude）が選択肢として出ます。
これらはリンクになっていて、どちらかをクリックするとそのAIのサイトに飛べます。
サイト中のテキストを選択すると、ボタンが目立つようになります。
この状態で先ほどと同じようにボタンをクリックし、AIを選択しサイトに飛ぶと以下のように選択テキストについて説明するようにチャットの入力欄に入力されています。
質問文が入力されているので、後はボタンをクリックするだけでAIに説明するように指示を投げることができます。
ダッシュボード
サイトでのAIリンクボタンのクリックは記録されています。ダッシュボードでは、クリックに関して以下の記録を見ることができます。
- 日時
- AIプロバイダー（ChatGPT or Claude）
- ページパス（どのページか）
- 選択テキスト（選択なしも含む）
これらのデータをもとにデータ分析ができるようになっています。
表示の種類はグラフ表示とテーブル表示です。
グラフ表示では、以下の4種類があります。
時系列クリック推移
人気ページランキング（Top10）
AIプロバイダー別クリック割合
ユーザーアクション分析
テーブル表示では、分析用にフィルター機能が付いています。
メリット
このプロダクトをサイトの閲覧者と運営者の両方にメリットがあります。
サイト閲覧者
- ページを読んでいて疑問点があったらすぐにAIに質問できる
サイト運営者
- 閲覧者が自身で疑問を解決することでお問い合わせを減らせる
- 閲覧者がページのどこで疑問をもったのかがわかるのでコンテンツの改善に役立つ
ターゲット
チャットbotを導入したいが、以下の理由から導入を見送っているサイト運営者
- チャットbotが料金が高い
- 設定がむずかしい
なので、具体的には大企業ではなく、中小企業がターゲットになります。
本当はより業界などを詳細に絞りたいですが、今後の検証により進めていきたいです。
問題点
自分のサイトに導入した後で、以下の問題点に気づきました。
- 自分のブログはほぼ技術ブログなので、ターゲットからズレる。
- どうやってターゲットにリーチするか
一般にチャットbotは企業のホームページ、製品ページなどに導入されます。一方で自分が導入したサイトは技術ブログなので、プロダクトが有効なのかの検証になりません。あくまで動作テストの域を出ていません。
また、ターゲットの中小企業のサイトに導入してもらうための策が現状では思いついていません。
おわりに
現状はまだアルファ版ではありますが、十分に動作はしますのでページの右下にあるリンクボタンから機能を使っていただけるとありがたいです。
使ってみて気づいたことやご意見などはXでお気軽にDMください。
