POPSOPH

WORKS

STUDYRECO

StudyReco スタディレコ

■概要

学習継続の難しさに対して、従来の「学習内容の記録」ではなく、 “学習へのモチベーションを可視化することで行動を促す”という仮説のもとアプリを設計・実装しました。
モチベーションの変化を捉え、さらに記録行為そのものの負担を減らすことで、 学習を継続しやすい状態を作ることを目的としています。

■課題

既存の学習記録では、科目や時間などの入力が必要であり、 この記録行為が継続の負担になっていると感じました。
また、記録後に十分な達成感やフィードバックが得られず、 学習へのモチベーションの変化が可視化されないため、 継続的な行動につながりにくい状態があると考えました。

■仮説

継続できない主因は「入力コスト」と「行動後の報酬の弱さ」にあると仮定。
行動心理学の観点から、行動と報酬の距離を最小化することで習慣化が促進されると考えました。

■解決策

・タイマー計測による自動記録(手入力ゼロ)
・科目別ランキングによる達成感と学習バランスの可視化
・カレンダーと週次リストを連動させた振り返り導線の最適化
・記録直後にAIフィードバックを返す設計(200文字以内のポジティブコメント)
これにより、記録のための操作を排除し、「行動 → 記録 → 報酬」が一体化した体験を実現しました。

■成果・価値

・記録に必要な操作を削減(手入力 → 自動記録)し、学習への集中を阻害しないUXを実現
・記録直後にフィードバックを返すことで、「記録する理由」を設計し、行動の継続を促進
・自身の利用において、従来よりも記録頻度・継続日数の向上を確認
・「入力の手間」と「報酬設計」が継続率に直結することを検証

■実装

React / TypeScript によるSPAとして構築。状態は App コンポーネントに集約し、 Single Source of Truth を意識した設計としました。
Firebase(Auth / Firestore / Hosting)を採用し、バックエンド構築を簡略化しつつ 開発速度と運用コストの最適化を実現しています。
また、Gemini 2.5 Flash API を活用し、記録直後にフィードバックを生成することでUX向上に繋げました。

■工夫した点(UX・技術)

・Date.now() の差分計算による高精度なタイマー実装(バックグラウンドでもズレない設計)
・Screen Wake Lock API によるスリープ防止
・localStorage によるタイマー状態の永続化
・useMemo による集計処理の最適化(不要な再計算の防止)
→ 技術選定・実装はすべてUXの一貫性と継続性の担保を目的としています

■改善プロセス

初期設計では学習時間を分(Float)で管理していたため、計算誤差により NaN バグが発生。
原因分析を行い、データを秒(Integer)に統一する設計へ変更しました。
この改善により、表示・集計・保存の整合性を担保し、データ設計の重要性を実務レベルで理解しました。

■今後の課題

・Firestoreセキュリティルールの強化
・APIキーのサーバーサイド管理への移行
・ユーザー行動ログに基づく継続率の定量的改善

THANK YOU FOR VISITING MY PORTFOLIO.
THANK YOU FOR VISITING MY PORTFOLIO.
THANK YOU FOR VISITING MY PORTFOLIO.
THANK YOU FOR VISITING MY PORTFOLIO.
THANK YOU FOR VISITING MY PORTFOLIO.