AvatarFAQ - キャラクター接客チャットボットメーカー

【目的・ターゲット】中小企業・店舗・士業・スクールが、コールセンターや問い合わせ対応の負担を減らすため、自社サイトに埋め込めるFAQチャットボットをノーコードで作成できる業務支援ツール。プログラミング知識不要で、可愛い/フォーマルなキャラクターアバターが接客してくれる体験を数分で構築できる。

【主要機能】
1. ボット作成ウィザード：ボット名・ようこそメッセージ・4種のアバターテーマ(フォーマル秘書/ロボット案内人/マスコット/和風案内人)を選択
2. FAQ管理画面：質問・回答・キーワード・カテゴリをCRUD登録。CSV一括インポート対応
3. キーワード類似度マッチングエンジン(PHP実装、形態素簡易分割+スコアリング)でユーザー入力に最も近いFAQを検索し回答
4. 埋め込みウィジェット：発行された<script>タグを自社サイトに貼るだけで、右下にアバター吹き出し型チャットが表示。タイピングアニメーション、Web Audio APIによる通知音・受信音を自動生成再生
5. 未解決質問ログ・ヒット率ダッシュボード：回答できなかった質問を一覧化し、そこからFAQを追加登録できる改善サイクル
6. 公開デモページ：オーナー以外でもチャット体験できる共有URL、SNSシェア用OGPカード自動生成

【画面構成】
・ランディングページ(サービス説明・アバター紹介・デモ体験ボタン)
・ダッシュボード(ボット一覧・新規作成)
・ボット編集画面(基本設定/FAQ管理タブ/埋め込みコード発行タブ/ログ分析タブ)
・チャットウィジェット(埋め込み用、吹き出しUI、アバター表情変化)
・公開デモページ(bot_id指定で誰でも試せる)

【データ構造】
・bots(id, owner_token, name, theme, avatar_type, welcome_message, created_at)
・faqs(id, bot_id, question, keywords, answer, category, hit_count, created_at)
・chat_logs(id, bot_id, session_id, user_message, matched_faq_id, matched_score, is_resolved, created_at)
・widget_configs(bot_id, primary_color, position, sound_enabled)

【デザイン方向性】フラットで柔らかいコーポレートデザイン。ネイビー×パステルのアクセントカラー、丸みのある線と柔らかい影。キャラクターは正面向きの親しみやすいマスコット風。チャット吹き出しは角丸カード、アバターは軽いバウンスアニメーションで生き生きとした印象を演出する。

## ビジュアル品質要件
- 生成済み素材を仕様内の用途・表示場所で実際に使用し、未使用素材を残さない
- 画風・配色・キャラクター比率を全画面で統一し、文字はHTML/CSSで重ねる
- PC・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する