作品一覧に戻る

でじこんちゃんAI

大学Third-party SaaS API趣味制作VercelNext.jsReact絵GSAPWebApp

東京都市大学デジタルコンテンツ研究会(TCU-DC)の公式マスコットキャラクター「でじこんちゃん」と会話できるAIチャットWebアプリです。サークルの雰囲気や活動内容を気軽に知ってもらうことを目的として制作しました。

技術スタック

  • フレームワーク: Next.js(App Router)/ TypeScript
  • - アニメーション: GSAP(キャラクターの表情・動作演出)
  • - AI: OpenAI ChatGPT API(GPT-4o)
  • - スタイリング: Tailwind CSS

主な機能

  • でじこんちゃんのキャラクターが画面上でアニメーションしながら応答
  • - サークルの活動・行事・加入方法などをAIが回答
  • - スマートフォン対応のレスポンシブUI

工夫した点

GSAPを用いてキャラクターの口パクや感情表現をアニメーションで実装し、単なるテキストチャットではなくキャラクターと会話している体験を演出しました。ChatGPT APIのシステムプロンプトにサークル情報を詳細に組み込み、的確な回答を返せるよう調整しています。