🐯

AIキメラとの会話トレーニングアプリ 『キメ友』をQiitaハッカソンで作った話

に公開
TypeScript
Qiita
ハッカソン
VOICEVOX
生成 AI
idea

こんにちは、Webエンジニアのまさぴょんです！
今回は、Qiitaハッカソン2024の予選で、AIキメラとの会話トレーニングアプリ 『キメ友』を作ったので、ご紹介します🐱

前回作成した作品の紹介記事は、こちらです👀🌟

https://zenn.dev/aiq_dev/articles/89bc61e8bd7d34

https://zenn.dev/aiq_dev/articles/89bc61e8bd7d34

Qiitaハッカソン2024 予選会のテーマは『オープン』

Qiitaハッカソン2024 予選会のテーマは『オープン』でした🌏

『オープン』というテーマからの問題提起・課題設定

オープンというテーマに対して、私たちのチームで連想したのは、次のような問題提起・課題設定のキーワードでした🤔

  1. 引きこもり
  2. あまり外に出ない
  3. コミュニケーション不足
  4. 頭の中(考えや感情)を外に出していない

解決アプローチ

そして、課題解決のアプローチとして考えたのが 「AIとの会話により自分の頭の中(考えや感情)を外に出す」 というものでした🌟
また、ただAIと会話するだけでなく、表情検知による笑顔度や、会話内容の質などを採点する機能を入れたらよりいいプロダクトになると考え、そういった機能も実装することとなりました💪🥺🔥

参加メンバー

今回は、前回の1人参加と違いメンバーを集めてのチーム戦なので、次のような役割分担をした上で、挑みました💪🥺🔥

という感じで、私はハッカソン経験者として、全体の進捗管理の役割(リーダー)と、FrontEndの実装、BackEndの一部Logicの実装を担当しました。

チーム戦ならではの準備について

今回のメンバーは初対面の人も多いので、ハッカソン前にアイスブレイクのMTGを開いたりしました🙆‍♂️
さらに、認識の共有・一致のために、当日はFigjamで次のようなBoardを作成して、認識を一致させた上で開発を進めていきました！

1.アイデアBoard

まず最初は「テーマ」 × 「アイデア」で、ブレストしていきます🤔
その後、人気アイデアが固めて、決選投票をしました🔥

2.テーマに沿った価値提供Board

アイデアが固まったら、
「テーマに沿った価値提供ができているのか？」
「審査基準を満たす内容か？」
などを整理していきます👀

3.Dev Board (要件定義・ざっくり設計)

作るプロダクトのアイデア・方向性が確定したら、ざっくり要件定義と設計を皆で進めます💪🥺🔥

  1. Figjamのセクションをページ
  2. 付箋を1つの機能
    • 青色はFrontEnd機能、緑色はBackEnd機能のような色分け
      として次のように整理しました🌟

AIキメラとの会話トレーニングアプリ 『キメ友』

ここからは、実際に開発したアプリの画面や機能などについて、ご紹介します。
まず、完成したAIキメラとの会話トレーニングアプリ 『キメ友』のデモ動画は、こちらです👀✨

https://www.youtube.com/watch?v=UMw7Bpwo26Q

『キメ友』コンセプト

「キメ友」は、AIキャラクターと話すことで、楽しくコミュニケーションスキルを向上させる新しい学習アプリです🌟
個性豊かな３人の「キメ友」キャラクターが、あなたの話し相手になります🥺
会話を楽しみながら、実践的なフィードバックを受けて、着実に会話力を鍛えることができます！

Topページ: LP・最初のキメ友を選択する

Topページは、LPとしてアプリ説明と、使い方、そして最初のキメ友を3匹のどれかから選択するような構成になっています🌟

『キメ友』とのトークページ

トークしたい『キメ友』を選択すると『キメ友』とのトークページに移動します！
『キメ友』には、性格などの設定がカスタム・プロンプトで用意されており、会話の回答も『キメ友』ごとに違います。
また、Userの音声入力に対して『キメ友』(LLM)も考えて、音声付きで回答してくれます🥺

会話評価ページ: AIキメラからの会話のフィードバック

会話評価ページでは、AIキメラからの会話のフィードバックをBackEndから受け取り表示しています。
表情検知の実装が間に合わなかったので、笑顔度は、LLMが適当に判定しています。。。😭

開発図・アーキテクチャ🌟

開発図・アーキテクチャは、次のとおりです。

【開発に使用した技術】

開発に使用した技術は、以下のとおりです👀🌟

FE：Next.js, React
BE：NestJS, TypeORM, Express
DB：PostgreSQL, sqlite
文章生成AI：GPT4o, LangChain.js
音声合成：VoiceVox

発表資料(Qiitaハッカソン2024の予選会)

こちらが、チーム『ぴゅぴゅまる』の発表資料です🐱

反省・改善点や気づき

今回のハッカソンでの反省・改善点や気づきは、次の3点でした🤔

  1. デプロイして触れるようにすると評価が高いので、デプロイ前提で進めるのがBest👀✨
  2. できれば、AWSなどインフラ構成にも力を入れると技術評価が高く、予選通過の可能性が上がりそうと感じました🌟
  3. BackEndのTemplateにセットでORMも選定して組み込んでおくと実装が楽🐱

まとめ・感想

今回もQiitaハッカソンは、予選敗退でした…😭
だがしかし！楽しかったのでAll OK🌟
今後もQiitaハッカソンに挑みたいと思いました💪🐱🔥

チームメンバーの一人、akiさんが書いてくれた記事は、こちら👀🌟

https://qiita.com/aki-engineer/items/a592a0f5c35457902208

https://qiita.com/aki-engineer/items/a592a0f5c35457902208

あなたも『Let's キメ友🐱』

参考・引用

https://qiita.com/official-campaigns/hackathon/2024

https://qiita.com/official-campaigns/hackathon/2024

https://zenn.dev/aiq_dev/articles/89bc61e8bd7d34

https://zenn.dev/aiq_dev/articles/89bc61e8bd7d34

https://qiita.com/aki-engineer/items/a592a0f5c35457902208

https://qiita.com/aki-engineer/items/a592a0f5c35457902208

🐱 メンターサービス：未経験から AI 駆動開発ができるまで伴走します

最後までお読みいただきありがとうございました！

私は本業で Web アプリ / AI プロダクト開発をしている現役エンジニアです。LLM・AI エンジニア兼 Web エンジニアとして、AI エージェントアプリ開発などを得意としています。

最近は Claude Code と Cursor を毎日使い倒しながら、個人開発でも AI と一緒にアプリ・Bot を作ってきました。「AI とどう会話すれば、思った通りのコードが出てくるのか」を試行錯誤の中で掴んだ感覚を、これから始める方にもお届けしたくてメンターサービスを始めました。

🚀 こんなことをサポートしています

  • AI / LLM の基礎、Cursor / Claude Code の使い方、環境構築
  • 自分のアイデアを「要件 → 仕様 → 実装」まで進める仕様駆動開発
  • Web アプリを 1 つ最後まで作って公開する卒業制作の伴走
  • AI 副業で稼ぐための戦略立案、転職・独立相談

💡 3 つのコースから選べます

コース 内容 向いている方
🚀 しっかり 月 4 回・60 分の 1on1 2 ヶ月で本気でコミットしたい方
🌱 じっくり 月 2 回・60 分の 1on1 本業と両立して無理なく学びたい方
💬 お試し 単発のビデオ通話相談 まずは話を聞いてみたい方

※ Discord でのチャット質問は 無制限、専用カリキュラムも作成します。

🔗 各種リンク

契約前のご相談は無料です。 「自分にできるかな？」「どのくらい時間が必要？」などお気軽にメッセージください☘️

Discussion