Zenn
💻

#01 なぜ「集中分析アプリ」を作るのか？FocusSenseiの企画背景と技術選定

に公開
Firebase
React
TypeScript
GPT
開発記録
tech

こんにちは！
この記事は、私が現在開発中のWebアプリ「FocusSensei」の企画背景と技術選定についてまとめたものです。

「集中力が続かない」「勉強はしているけど手応えがない」ーー
そんな日々の学習に**AIの力で“先生”をつけてみたら？**という発想から、このプロジェクトはスタートしました。

👤 ターゲットユーザー

このアプリは、以下のような方を想定して開発しています：

  • 日本語・プログラミング・資格勉強などを自己学習している大学生・社会人
  • 一人で勉強していて、集中力の維持やモチベーション管理が難しい人
  • 学習の習慣化や記録管理をしたい人
  • 日本語UIに慣れている or 日本語を学習中の外国人ユーザー

💡 FocusSenseiが提供する価値

  • 📊 学習時間の自動記録と可視化
  • 🧠 GPTによるやさしい自然言語フィードバック
  • 🌍 多言語対応UI（日本語・英語・韓国語）
  • 🔐 Firebase認証によるセキュリティ管理

✨ MVP機能（最小限プロトタイプ）

機能 説明 優先度
⏱️ タイマー ポモドーロ / フリーモード対応 ★★★★★
🧠 GPTフィードバック 学習内容に応じたコメント自動生成 ★★★★★
📊 学習の可視化 日・週・月の集中時間分析 ★★★★☆
🌍 多言語対応UI 日本語・英語・韓国語 ★★★★☆
🎨 ダークモード UX向上と目の負担軽減 ★★★☆☆

📱 今後の拡張アイデア

  • 学習目標の設定と進捗表示
  • モチベーション別「名言」自動表示（例：「今日もよく頑張ったね！」）
  • リマインダー通知（アプリ化の際に実装予定）
  • 分野別ランキング（例：Python、JLPTなどのカテゴリ別）
  • 友達機能・スタンプ・アイコンなどの遊び要素も検討中

🧭 画面構成（ワイヤーフレーム初期案）

ページ 内容
🏠 ホーム 今日の集中時間 / GPTフィードバック / グラフ要約
⏱️ タイマー タイマー本体 / タグ選択 / 集中中アニメーション
📊 統計 日/週/月の記録・タグ別分析・傾向
👤 認証 Firebaseログイン / 新規登録
⚙️ 設定 言語切替 / ダークモード / ログアウトなど

🛠️ 技術スタック（初期構成）

分野 使用技術
フロントエンド React + TypeScript + Tailwind CSS
状態管理 Zustand
バックエンド FastAPI（Python）
AI連携 OpenAI GPT-3.5 API
認証・DB Firebase（Auth + Firestore）
多言語対応 i18next + react-i18next
デプロイ Vercel（フロント）＋ Render（バックエンド）

📁 ディレクトリ構成（予定）

FocusSensei/
├── frontend/ # Reactアプリ
├── backend/ # FastAPIサーバー
├── docs/ # Zenn用下書きなど
├── .github/ # Issueテンプレートなど
└── README.ja.md # 日本語版README

🌍 多言語対応の戦略

  • デフォルト：日本語（ja）
  • その他：英語（en）、韓国語（ko）
  • JSON翻訳ファイルは public/locales/xx/translation.json に配置
  • 言語切替は設定ページから、初回はブラウザ言語を自動検出

🔧 初期準備To-do（進行中）

  • GitHubレポジトリ作成
  • ViteでReactアプリ初期化
  • Firebaseプロジェクト作成
  • GPT APIキーの.env管理
  • Zennシリーズ立ち上げ「FocusSensei開発記録」

✏️ おわりに

今後は2週間ごとに機能開発 + 記事公開というサイクルで進めていきます！
次回は、React + Tailwindで集中タイマー機能を作る工程をまとめていく予定です ⏱️

📘 Zennシリーズ: FocusSensei開発記録（近日公開）
🐙 GitHub: https://github.com/your-id/FocusSensei（準備中）
📘 Qiita : https://qiita.com/hyeon/items/dae416268957c734f7fe

Discussion