WebサイトやSNS（X/Instagramなど）、名刺・ポスターのQRコードから手軽に設置・共有できる自動応答Webチャットサービス「チャポット (chapot.net)」を作りました！
- URL: https://chapot.net/
💡 なぜ作ったのか（開発のきっかけ）
「お店や個人のサービスサイトにチャットボットを導入したい」と思ったとき、既存のエンタープライズ向けツールだと設定が複雑だったり、導入コストが高かったりすることが多いと感じていました。
そこで、以下のような特徴を持つ「とにかく手軽で、マルチデバイス対応のチャットツール」を目指して開発をスタートしました。
- 爆速導入: アカウントを作成して埋め込みコードを貼るだけ（URLやQRコード単体での公開も可能）
- AIを活用したFAQ作成: お店やサービス情報を入力するだけで、AIが挨拶やよくある質問（FAQ）の自動応答を一括生成
- 豊富なカスタマイズ性: テーマカラー変更、手書き・写真・音声読み上げ機能、メール通知機能など
🛠️ 主な機能と工夫したポイント
1. AIによる自動応答データの一括作成
チャットボットの導入で一番面倒な「Q&A（自動応答）の初期登録」を楽にするため、プロンプトを活用して普段お使いのAI（ChatGPT等）で生成した回答データをチャポットへ一括登録できるようにしました。
2. 多様な入力・操作体験（手書き・写真・音声）
通常のテキストチャットだけでなく、スマホやタブレットからの利用を想定して以下の機能を組み込みました。
- 写真・手書き入力: 端末から直接イラストやメモを書いて送信できる機能
- 音声読み上げ / 返信機能: ユーザー体験を損なわないよう、音声インターフェースにも対応
3. 様々な設置パターンに対応
Webサイトへのiframe埋め込みはもちろん、SNSのプロフィール欄に貼れる短縮URLや、店頭ポスター・名刺に印刷して読み込ませるためのQRコード表示機能を標準搭載しています。
💻 採用した技術スタック（※ご自身の環境に合わせて修正してください）
- フロントエンド: HTML5 / CSS3 / JavaScript
- バックエンド: PHP 等
🚀 今後の展望・やってみたいこと
- チャットボットの回答精度の向上
- アナリティクス機能（どんな質問が多く届いているかの可視化）
- ユーザーからのフィードバックをもとにしたUI/UXの改善
おわりに
「チャポット」は、ログイン不要で触れるデモチャットもトップページに用意しています。
もしよろしければ、ぜひ実際に触ってみていただき、「こういう機能があったら嬉しい」「画面のここが少し分かりづらい」といったフィードバックやアドバイスをコメント欄やSNSでいただけると非常に嬉しいです！
- チャポット: https://chapot.net/