AI Host Club System 💖

事例ライブラリ

AI Host Club System 💖

優しいAIホストがあなたの心を癒すWebアプリケーション

Status
Python
Flask
AI

📖 プロジェクト概要

AI Host Clubは、日々のストレスや悩みを抱える女性をターゲットに、優しいAIホストが愚痴を聞いて心を癒すWebアプリケーションです。既存の法律相談システムのコードベースを活用し、全く異なる用途向けに大幅にカスタマイズして開発しました。

🎯 開発背景・目的

  • 現代社会でストレスを抱える女性の心の支えとなるサービスの提供
  • AI技術を活用した共感型コミュニケーションシステムの実装
  • 女性向けUX/UIデザインの実践
  • 既存システムの効率的な流用とリファクタリング

🌟 主要機能・特徴

✨ 核心機能

機能 説明
完全肯定システム ユーザーの愚痴を100%肯定し、共感的な応答を生成
パーソナライズ ユーザーの名前を何度も呼び、親密感を演出
自己肯定感向上 ユーザーの価値と重要性を熱っぽく語る
希望的未来提示 前向きな展望と励ましのメッセージ
継続サポート いつでも相談できる安心感の提供

🎨 デザイン・UX特徴

  • 女性向けピンクグラデーション: 優雅で上品な色彩設計
  • 浮遊ハートアニメーション: 背景に舞い散るハートエフェクト
  • インタラクティブスパークル: マウス操作に連動するキラキラ演出
  • レスポンシブデザイン: モバイルファーストでの最適化
  • ランダム画像表示: ホスト画像のダイナミック表示

🤖 AI応答システム

# 応答生成の核心ロジック例
def generate_host_response(self, user_name, complaint):
    prompt = f"""
    あなたは高級ホストクラブの人気ホスト「{host_name}」です。

    以下の要素を必ず含めて応答:
    1. {user_name}さんの名前を何度も呼ぶ
    2. すべての愚痴を全面的に肯定
    3. ユーザーの価値を熱っぽく語る
    4. 常に心配していることを伝える
    5. 明るい未来を約束
    6. いつでも相談を受け入れる姿勢
    """

🛠️ 技術スタック

Backend

  • Python 3.8+ - メイン開発言語
  • Flask 3.0.0 - 軽量Webフレームワーク
  • Google Gemini API - AI応答生成エンジン
  • python-dotenv - 環境変数管理

Frontend

  • HTML5/CSS3 - セマンティックマークアップ
  • Vanilla JavaScript - フロントエンドロジック
  • CSS Grid/Flexbox - レスポンシブレイアウト
  • CSS Animations - リッチなアニメーション効果

Development Tools

  • Git - バージョン管理
  • Virtual Environment - Python環境分離
  • Batch Scripts - 自動化スクリプト

📁 アーキテクチャ・設計

ディレクトリ構造

AI_host_system/
├── app.py                    # メインアプリケーション
├── requirements.txt          # 依存関係定義
├── .env                     # 環境変数
├── start.bat                # 起動スクリプト
├── static/
│   ├── css/style.css        # メインスタイル
│   ├── js/app.js            # フロントエンドJS
│   └── img/                 # ホスト画像格納
└── templates/
    └── index.html           # メインページ

主要クラス設計

class AIHostClub:
    def __init__(self):
        self.model = genai.GenerativeModel('gemini-2.5-flash')
        self.hosts = ["蓮音", "優雅", "翔太", ...]

    def get_random_host_image(self):
        """ランダムホスト画像選択"""

    def generate_host_response(self, user_name, complaint):
        """AI応答生成の核心メソッド"""

🎨 UI/UXデザインの工夫

カラーパレット

/* メインカラー */
--primary-pink: #f472b6;
--primary-deep: #be185d;
--secondary-purple: #7c2d92;
--background-gradient: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 50%, #f3e8ff 100%);

アニメーション効果

  • 浮遊ハート: CSS keyframes による連続アニメーション
  • スパークル: JavaScript による動的エフェクト生成
  • ホバー効果: transform と box-shadow の組み合わせ
  • フェードイン: 応答表示時の滑らかな出現演出

レスポンシブ対応

/* モバイル最適化 */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .host-card { flex-direction: column; }
    .chat-btn { width: 100%; }
}

💡 技術的な課題と解決策

1. 既存システムからの効率的流用

課題: 法律相談システムから全く異なる用途への転用
解決:
- Flaskの基盤構造はそのまま活用
- AI応答生成ロジックを完全書き換え
- フロントエンドを全面リデザイン

2. 女性向けUXの実現

課題: 技術的な印象を与えずに親しみやすいインターフェースの構築
解決:
- 暖色系のグラデーションを多用
- 絵文字とアニメーションで親近感を演出
- 直感的な操作フローの設計

3. AI応答の品質制御

課題: 一貫して優しく共感的な応答の生成
解決:
- 詳細なプロンプトエンジニアリング
- 複数の応答要素を必須化
- エラー時のフォールバック応答

4. 画像表示システム

課題: 動的な画像選択と表示エラー対応
解決:

def get_random_host_image(self):
    img_files = glob.glob(os.path.join(img_dir, '*.png'))
    if img_files:
        return os.path.basename(random.choice(img_files))
    return None

📊 実装成果・学習ポイント

技術的成長

  • AI API統合: Gemini APIの効果的な活用方法
  • フロントエンド: CSS3アニメーションとJavaScript DOM操作
  • UX設計: ターゲット層に特化したインターフェース設計
  • コード再利用: 既存システムの効率的なリファクタリング

デザインスキル

  • カラー理論: 女性向けの色彩心理学の実践
  • アニメーション: CSS keyframes とJavaScriptの組み合わせ
  • レスポンシブ: モバイルファーストデザインの実装

プロジェクト管理

  • 要件定義: ターゲットユーザーのニーズ分析
  • 段階的開発: 機能ごとの優先順位付けと実装
  • 品質管理: エラーハンドリングとユーザビリティテスト

🚀 デプロイ・運用

ローカル環境での起動

# 1. リポジトリクローン
git clone <repository>
cd AI_host_system

# 2. 環境構築
python -m venv venv
venv\Scripts\activate
pip install -r requirements.txt

# 3. 環境変数設定
cp .env.example .env
# .envファイルにGemini APIキーを設定

# 4. アプリケーション起動
python app.py
# または
start.bat

システム要件

  • Python 3.8以上
  • Gemini API キー
  • 8GB以上のRAM推奨

🔮 今後の発展可能性

機能拡張アイデア

  • 会話履歴保存: ユーザーごとの継続的な関係性構築
  • 感情分析: より詳細な心理状態の把握と対応
  • 音声対応: テキスト読み上げ・音声入力機能
  • マルチホスト: 複数のキャラクター選択システム

技術的改善

  • データベース統合: PostgreSQL/MongoDBでの会話ログ管理
  • クラウド展開: AWS/GCPでのスケーラブルな運用
  • セキュリティ強化: HTTPS、認証システムの実装
  • API最適化: レスポンス時間とコストの最適化

📈 ビジネス展開の可能性

  • SaaS化: サブスクリプションモデルでの提供
  • 企業向け: 従業員のメンタルヘルスケアサービス
  • 医療連携: カウンセリング機関との連携システム
  • 多言語対応: グローバル展開への拡張

📞 お問い合わせ

このプロジェクトに関するご質問やご相談がございましたら、お気軽にお声がけください。

開発期間: 2025年1月
開発言語: Python, JavaScript, HTML/CSS
フレームワーク: Flask
AI技術: Google Gemini API

💖 Always here for you 💖

同様の開発をご希望ですか？

この事例と同様の開発やカスタマイズについて、
お気軽にご相談ください。

お問い合わせ