AI Host Club System - 地雷系テーマのAIチャットシステム
📖 プロジェクト概要
AI Host Club System は、地雷系デザインテーマを採用したAIホストクラブシステムです。ユーザーが個性豊かなホストキャラクターとのマルチターンチャットを楽しめる、エンターテインメント性の高いWebアプリケーションです。
🎯 開発背景・目的
- エンターテインメント性: 従来のチャットボットを超えた、キャラクター性重視の対話体験
- 個性化: 5種類の異なるホストタイプによる多様な会話スタイル
- ユーザー体験: 未登録ユーザーでも楽しめるお試し機能から本格利用まで
- 管理効率: 管理者による効率的なコンテンツ管理機能
🛠️ 技術スタック
バックエンド
- Python/Flask: 軽量で柔軟なWebフレームワーク
- SQLAlchemy: データベースORM
- Flask-Login: ユーザー認証システム
- SQLite: 開発・小規模運用に適したデータベース
- Google Gemini AI: 自然言語処理による会話生成
フロントエンド
- HTML5/CSS3: セマンティックなマークアップとレスポンシブデザイン
- Vanilla JavaScript: フレームワークに依存しない軽量な実装
- Fetch API: 非同期通信によるスムーズなUX
インフラ・ツール
- Docker対応: コンテナ化による環境統一
- 自動マイグレーション: データベーススキーマの自動更新
- 環境変数管理: セキュアな設定管理
🎨 UI/UXデザイン
地雷系テーマの採用
- カラーパレット: ピンク（#ff1493）×ブラック×ホワイトの統一
- 視覚効果: グラデーション、グロー効果、アニメーション
- タイポグラフィ: Noto Sans JP による読みやすさとブランド統一
レスポンシブデザイン
/* モバイルファースト設計 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 768px) {
.container {
padding: 0 2rem;
}
}
✨ 主要機能と技術的実装
1. マルチターンチャット機能
技術的特徴
- 最大5ターン制限: リソース管理とユーザー体験の最適化
- 会話履歴保持: SQLAlchemyによる効率的なデータ管理
- リアルタイム応答: 非同期処理による待機時間の最小化
def generate_host_response(self, host, user_name, message, conversation_history=None, turn_number=1):
"""ホストの応答を生成（マルチターン対応）"""
if GEMINI_AVAILABLE:
# 過去の会話履歴を考慮したプロンプト
history_context = ""
if conversation_history:
history_context = "\n\n過去の会話:\n"
for msg in conversation_history[-4:]: # 直近4件
sender = "お客様" if msg.sender == 'user' else "あなた"
history_context += f"{sender}: {msg.message}\n"
prompt = f"""
あなたは高級ホストクラブのホスト「{host.name}」です。
{turn_instruction}
{history_context}
現在のメッセージ: {message}
"""
return model.generate_content(prompt).text
2. キャラクター個性システム
5つのホストタイプ
- ルーク (ミステリアス系) - クールで感情を表に出さない年上
- 響 (ムードメーカー系) - 明るくて一生懸命な弟系
- 桐生 (兄貴系) - 責任感が強く頼れるリーダー
- 麗華 (優雅系) - 美しく上品な女性的ホスト
- 一ノ瀬玲 (インテリ系) - 知的で論理的な大人
データベース設計
class Host(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(50), nullable=False)
personality = db.Column(db.Text) # 性格
speech_style = db.Column(db.Text) # 口調
host_type = db.Column(db.String(50)) # タイプ
image_path = db.Column(db.String(200)) # 写真パス
is_default = db.Column(db.Boolean, default=False)
def get_prompt_personality(self):
"""プロンプト生成用の性格情報を取得"""
return {
'name': self.name,
'personality': self.personality,
'speech_style': self.speech_style,
'host_type': self.host_type
}
3. お試し機能（未登録ユーザー向け）
マーケティング戦略
従来: 訪問 → 登録 → 利用
新導線: 訪問 → ホスト紹介閲覧 → お試し体験 → 登録
技術実装
// 2ターン制限の実装
async function trialChat() {
const turnNumber = data.get('turn_number', 1);
if (turnNumber > 2) {
return jsonify({
'success': False,
'error': 'お試し版は2ターンまでです。続きは登録してお楽しみください。'
});
}
// 会話処理...
}
4. 画像管理システム（v1.7.0の重要改修）
問題発見と解決過程
発見した問題:
アップロード機能: PNG、JPG、JPEG ✅
表示機能: PNG のみ ❌
結果: ユーザーが「アップロードできたのに使えない」と混乱
解決アプローチ:
# 設定の一元管理
SUPPORTED_IMAGE_EXTENSIONS = {
'upload': ['.png', '.jpg', '.jpeg'],
'display': ['*.png', '*.jpg', '*.jpeg', '*.PNG', '*.JPG', '*.JPEG']
}
def get_available_images(self):
"""すべての対応画像形式を取得"""
image_patterns = SUPPORTED_IMAGE_EXTENSIONS['display']
all_image_files = []
for pattern in image_patterns:
files = glob.glob(os.path.join(img_dir, pattern))
all_image_files.extend(files)
return sorted(list(set([os.path.basename(img) for img in all_image_files])))
新UI設計: 2ペインレイアウト
<!-- 効率的な画像管理UI -->
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 2rem;">
<!-- 左側: ホスト選択 -->
<div class="host-selection-area">
<h3>🎭 ホスト選択</h3>
<!-- ホスト一覧 -->
</div>
<!-- 右側: 画像選択（全画像表示） -->
<div class="image-selection-area">
<h3>📸 画像選択</h3>
<!-- 制限なし画像グリッド -->
</div>
</div>
📊 開発プロセスと改善履歴
v1.0.0 → v1.7.0 の進化
段階的機能拡張
- v1.1.0: お試し機能実装（マーケティング強化）
- v1.2.0: メールアドレス任意化（登録障壁削減）
- v1.3.0: 画像管理機能初期実装
- v1.4.0: チャットUI改善（個性化表示）
- v1.5.0: キャラクター刷新（魅力度向上）
- v1.6.0: TOPページ改修（導線最適化）
- v1.7.0: 画像管理UI完全刷新（UX大幅改善）
継続的改善の思想
# 自動マイグレーション機能
def perform_auto_migration():
"""起動時にデータベーススキーマを自動更新"""
if database_needs_migration():
print("AUTO-MIGRATION: Updating database schema...")
migrate_database()
print("AUTO-MIGRATION: Migration completed successfully!")
🎯 重要な学びと技術的洞察
1. 一貫性設計の重要性
教訓: 「アップロード可能 = 表示可能 = 使用可能」の原則
# ❌ 悪い例: 複数箇所で異なる定義
def upload_check(): return file.endswith('.png', '.jpg')
def display_check(): return glob('*.png') # JPGが漏れる
# ✅ 良い例: 一元管理
SUPPORTED_EXTENSIONS = {...} # 一箇所で定義
2. ユーザビリティ設計
期待値管理の重要性
- システムの動作がユーザーの期待と一致する
- エラーメッセージの明確化
- 操作結果の即座フィードバック
UI重複排除の効果
従来: 5つのホスト × 同じ画像グリッド = 無駄な重複表示
改善: 1つのホスト選択 + 1つの画像選択 = 効率的なワークフロー
3. 段階的機能拡張の成功パターン
MVP → 機能拡張 → UI改善
- MVP: 基本的なチャット機能
- 機能拡張: お試し機能、画像管理
- UI改善: ユーザビリティ重視の大幅刷新
🚀 技術的成果と性能
パフォーマンス最適化
- 非同期処理: Fetch APIによる画面遷移なしの更新
- 軽量設計: Vanilla JSによるフレームワーク依存なし
- 効率的DB設計: 適切なインデックスと外部キー設定
セキュリティ対策
# ファイルアップロードのセキュリティ
from werkzeug.utils import secure_filename
def secure_upload(file):
filename = secure_filename(file.filename)
# ファイルサイズ制限
if file_size > MAX_FILE_SIZE:
raise SecurityError("File too large")
# MIME タイプ検証
if file.mimetype not in ALLOWED_MIMES:
raise SecurityError("Invalid file type")
可読性・保守性
- 明確な命名規則: 機能が直感的に理解できる関数名
- 適切なコメント: 複雑な処理の意図を明確化
- モジュール分離: 機能別の適切なファイル分割
💡 今後の展開・拡張性
技術的拡張予定
- AI画像生成: ホスト画像の自動生成機能
- リアルタイム通信: WebSocketによる即時応答
- モバイルアプリ: PWA化による Native App 体験
ビジネス機能拡張
- 課金システム: ターン数制限解除、プレミアム機能
- パーソナライゼーション: ユーザー履歴に基づく会話カスタマイズ
- SNS連携: 会話シェア機能、コミュニティ形成
🔗 技術デモ・リポジトリ
実装技術の詳細
- GitHub: [リポジトリリンク]
- 技術ドキュメント: 詳細な実装ガイド
- API仕様: RESTful API設計書
デモ環境
- 管理者機能: 画像管理、ユーザー管理、統計表示
- ユーザー体験: お試し機能からフル機能まで
- レスポンシブ対応: デスクトップ・タブレット・モバイル
📋 プロジェクト評価
技術的成果
✅ フルスタック開発: Python/Flask + JavaScript + SQLAlchemy
✅ AI統合: Google Gemini APIの効果的活用
✅ UX設計: ユーザー中心設計による継続的改善
✅ 保守性: 一元管理による設定統一と拡張性確保
ビジネス価値
✅ ユーザー体験: 段階的エンゲージメント設計
✅ 運用効率: 管理者機能による効率的コンテンツ管理
✅ スケーラビリティ: モジュール設計による機能拡張性
✅ マーケット適応: 地雷系テーマによる差別化
このプロジェクトは、技術的実装力とユーザー体験設計、そして継続的改善プロセスを統合した、現代的なWeb開発の実践例として位置づけられます。