はじめに
Laravelを使って、タスク管理とモチベーション維持を両立できるアプリを作りました。
その名も「Motivation Quest」。
タスクを完了するたびに経験値（XP）を獲得し、レベルアップしていく“ゲーミフィケーション”型のアプリです。
プログラミング学習のモチベーション維持にも最適で、ポートフォリオとしても見栄えする仕上がりを目指しました。
開発の目的
ただのタスク管理アプリでは、続かない。
「毎日少しでも進歩を感じたい」という思いから、
ゲーム風のXP（経験値）システムとレベルアップ通知を組み込みました。
✅ タスクを1つ完了するとXPを獲得
✅ XPが一定値に達するとレベルアップ！
✅ 進捗バーとグラフで成長を“見える化”
使用技術
Laravel 12
最新のLaravel環境を採用し、ルーティング・Eloquent・シーディングなどの基本設計を徹底的に整理。
artisan コマンドで開発効率を最大化しました。
Tailwind CSS + Alpine.js
TailwindでUIを一から設計し、Alpine.jsでポップアップやトランジションを実装。
VueやReactを使わずとも、軽量で動的な動作を表現できます。
Chart.js
XPの増減をグラフで可視化。
モチベーションを「数字」で感じられる仕組みを追加しました。
Laravel Breeze
ログイン／新規登録画面をベースに、デザインをカスタマイズ。
シンプルでセキュアな認証機能を最短で構築できます。
SQLite
開発用として軽量なSQLiteを採用。
設定も最小限で、database/database.sqlite だけで動作します。
Vite
Tailwindと連携し、ホットリロードで即時反映。
開発中のCSS修正がリアルタイムに確認できる快適な環境です。
主な機能
タスク管理
- タスクの追加・完了・削除
- 締切日設定・一覧表示
レベルアップシステム
- タスク完了でXPを獲得
- 一定のXPに達すると自動でレベルアップ
- ポップアップで達成感を演出
XP推移グラフ
- Chart.js で直近7日間のXP増加を可視化
- 自分の成長がひと目でわかる
進捗画面
- 現在のレベル・XP・次レベルまでの残りXPを表示
- ゲームのようなカラフルな進捗バー
技術的ポイント
1️⃣ Laravel Breezeによる認証機能
ログイン・新規登録を簡潔に実装。
UIをTailwindでカスタマイズして、既製テンプレート感を消しました。
2️⃣ 経験値とレベルの自動更新
$user->xp += $task->xp_reward;
if ($user->xp >= $nextLevel->xp_required) {
$user->level = $nextLevel->id;
}
copy
レベルごとの閾値は levels テーブルで柔軟に管理できるように設計。
3️⃣ XP履歴（グラフ用）モデル
XpHistory::create([
'user_id' => $user->id,
'xp_gained' => $task->xp_reward,
'recorded_at' => now()->format('Y-m-d'),
]);
copy
直近7日間をChart.jsで描画。成長を数字で実感できます。
今後の拡張予定
- バッジ・実績システム
- 週間レポート自動生成
- デイリーミッション機能
- スマホアプリ化（React Native or Flutter連携）
まとめ
このプロジェクトを通じて学んだこと👇
- Laravel × Tailwind でのUI構築の柔軟さ
- Eloquentによるデータ構造設計の重要性
- 小さな達成感を積み重ねるUXデザインの大切さ
「タスク管理」から「自己成長体験」へ。
Motivation Quest は、そんなアプリです。
🔗 GitHub
✍️ 最後に
このアプリを通じて、
“コードを書くこと自体をモチベーションに変える” 感覚を味わいました。
「やる気が続かない自分をレベルアップさせたい」
そんな人にこそ触ってもらいたいアプリです。
コメント