テスト討伐録

https://github.com/TamemotoHiroki/test-toubatsuroku

Next.js

GitHub

TypeScript

TailwindCSS

科目をボスに見立てて攻略状況を可視化する学習管理のtodoアプリ

爲本 浩貴

かあかあ

推しアイデア

ゲームのボス討伐×テスト勉強という斬新な切り口で、モチベが続かないテスト期間を楽しく乗り越えられる

作った背景

自分たちがテスト期間のモチベ管理に毎回困っていて、ゲーム感覚で勉強できるアプリがあれば続けられると思った

推し技術

Next.jsとlocalStorageを活用したリアルタイムな学習進捗の管理。美咲フォントやAIに生成させた画像、BGMなどの演出にこだわった。

プロジェクト詳細

アプリ概要

テスト期間の科目をRPGのボスに見立て、勉強時間でレベルアップして課題完了でダメージを与えて討伐する学習管理アプリ。科目ごとの攻略状況を可視化することでモチベを維持できる。

ターゲット

テスト期間のスケジュール管理とモチベ維持に悩む理系大学生

ストーリー

なぜこのプロダクトを作ろうと思ったか

自分たちが毎回テスト期間に「やる気がわかない」という課題を抱えていたから。

誰のどんな課題を解決したいか・どんな楽しさを届けたいか

科目が多くて優先順位がつけられない大学生に、ボス討伐というゲーム感覚で勉強を進める楽しさと、達成感を届けたい。

技術構成・アーキテクチャ図など

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Vercel

遊びごころポイント

ターゲットに刺さる機能

科目ごとのボスHPとタスク管理、討伐達成時の演出、全科目クリアまでの進捗一覧

技術的遊び

Tailwind CSSでUIや演出を工夫した。

アプリ画面(スクショや動画など)

image

挑戦・成長したところ

AIを用いたReactアプリのチーム開発を通してClaudeを中心としたAIの活用法やReactのプログラミング、チームワークを学んだ。 コードの完成度は規模間や目的によって変えるのが良いと学んだ。良いコードはもちろん大切だが、わかりやすさもそれ以上に大切なことに気づいた。

チームワーク・チーム開発で工夫したところ

ClaudeとGeminiでお互い使用するAIが異なっていたので、Claudeでコーディング、Geminiでコードの解読やアイデア出し、画像生成などと役割を分担した。二人ともClaudeになった時は、UIとSEなど互いにあまり衝突しない部分を意識して役割分担した。

爲本 浩貴

@2d8f62b7ad59ecc7