[個人開発] YouTubeでいつもの勉強が「楽しみ!!」に変える配信にする Web アプリ
🌱 はじめに
今回は、個人開発で YouTube ライブ勉強配信をちょっと楽しくなる Web アプリを開発しました。
その内容についてご紹介します。
こちらは、Youtube の実際の配信画面です。
画面左下に表示されている"Focus tracker"が今回作成したアプリです
下記リンクから YouTube ライブ配信の様子を確認できます。
🌱 サービスコンセプト
いつもの勉強が「楽しみ!!」に変えるには、
多くの方が抱える悩み TOP3 を解消する必要があると考えております。
自分も社会人になってからちゃんと勉強するようになりました。
その時からこの TOP3 悩みには苦労しました...
1. 勉強の取り掛かりに時間がかかる
いざ、勉強しようと机に座り、教材を開くが...
- スマホを触っちゃう
- いつも気にならないものが気になる
- ○○ したら勉強する（後回し）
2. 集中力が続かない
いざ、始めたのがいいけど...
- 10 分で飽きたり
- 他の事が気になる
3. 勉強が習慣化しない
一昨昨日も昨日も勉強出来たけど、3 日目の勉強ができない= 三日坊主になる
2 日間勉強しても...
- 誰からも褒めてくれない
- 学校みたいに仲間がいるわけではないため、孤独感を感じやすい
🌱 サービス説明
1. 「集中した時間」を計測できる
チャット欄に「start」のみを入力すると、約 1 分後に配信画面の左下に
「名前, アイコン, 現在の継続時間」が表示されています
勉強/作業が終了や一時休憩の場合は、同様に
チャット欄に「end」のみを入力すると、約 1 分後に配信画面の左下に
Focusing => Finished に切り替わり、計測が終了します。
2. 「Bot くん」が累計時間の通知と褒めてくれる
チャット欄に「end」のみを入力すると、モデレーターの「Bot くん」からコメントが貰えます
- これまでの配信での集中した 累計時間
- 褒め言葉 (ex. 素晴らしい努力ですね, 熱心に取り組まれていますね)
3. 「Monthly Challenge」でみんなで挑戦!!
みなさんの集中した時間がお花を育てることができます。
毎月 月末に「来月の目標時間」のアンケートを実施しております。
本来の目標(大学受験、資格合格)に向けてみなさん頑張っていると思います。
しかし、その目標に心がつぶされたり、目をそらしたい時があると思います。
そこで 違うもの目標があれば、気分転換や達成感を得て
勉強のやる気に繋がればいいなと考えております。
🌱 開発動機や背景
1. 以前から勉強や教育が楽しくなるWeb アプリを作りたい思いがあった
個人開発をすると、下記を 1 から考える必要があります。
- インフラの知識
- DB 周りの知識
- アプリのデザイン案
- 運用コストや料金
- 詳細設計
- データの管理(セキュリティ)など
実際に作業に着手するのにとても億劫になりました。
結局、「作りたいな～。こうゆうのがあればいいのかな～」と思いを時間が過ぎました。
2025 年にClaude Codeの AI コーディングが登場しました。
(日本語で指示したら Web アプリを作成してくれるようになりました)
Claude Codeの登場により、重かった腰が上がりました!!
とりあえず、動く Web アプリを作成してから色々考える → 作り直すを繰り返して開発をしました。
また、ローカルでサーバーを起動すれば、サーバー代がかからないので良いと考えました。
2. 勉強配信の中で機能的な配信が少なかった(ブルーオーシャン)
たまたま、Twitchでコーディング配信（HTML/CSS）をやっている海外の方がいました。
その配信には 10 人程度の視聴者が集まり、「意外とマニアックな配信を見る人もいるんだな」と衝撃を受けました。
YouTubeで「勉強配信」って調べると意外と配信されている方もいて
「Study With Me」という文化もそこで知りました。
いくつかの「勉強配信」や「Study With Me」を観ると、Night botやポモドーロタイマー
を表示するだけの配信ばかりで機能的な配信が少ない事を気づきました
※1 Night botは、定数なコメントに対して返答やクーロン処理が主な機能でした。
ここでYouTube APIを活用した機能を実装したら、頭一つ抜けた配信になる!!
と思い開発を始めました。
🌱 仕様工夫ポイント
1. 勉強や作業に専念できるようにユーザーから操作を最小限にする
Chat 欄に入力できるコマンドを増やせば、出来る事の幅が増えます。
(ex. 豆知識を教えて!, 今日の天気を教えて!)
しかし、あえてやらなかったです。
この配信は 「いつもの勉強が「楽しみ!!」に変える配信」 なので
コマンドで遊んで本質の勉強をしないという状態を望まない。
また、他の視聴者の邪魔にならないようにも注意を払いました!
2. 勉強が継続する仕組みを導入
多くの方に長く この配信を活用して欲しいと考えております。
そこで「大人のやる気ペン」のサイクルを参考しました。
上記のサイクルを実現できるように各機能をデザインしました!
3. 視聴者同志の競争性を生まないようにする
最初は視聴者で「ランキング形式」にしたら面白いかな？と考えておりましたが、やめました。
時間が長さが本来の目的ではないからです。
大学受験や資格勉強の合格することなどが本来の目的です。
画面に表示される以上、比較をしようと思えば比較はできますが
時間の長さでソート順にせず、データが更新されたら最後尾に並び替えるようにして
競争性を生まないようにしました。
4. 王冠機能
配信中に 「30 分以上」「60 分以上」 集中した方には、
アイコンの上に王冠 👑 を贈呈する仕様にしております。
狙いとしては、「短い時間でも参加して欲しいと考えております。」
（むしろ、長時間を 1 日より短時間を毎日を勉強する姿勢の方がいいと考えております。）
また、下記記事によると平均時間が13分なので30分以上勉強した方は平均以上です!!
5. 言葉選び
開発初期は「studying」と表示しておりました。
しかし、これでは「勉強する人しか参加できないの？」と思われて
使われないのはもったいないです。
そこで色んな方にも使ってほしいので「Focusing」としました。
🌱 悩んだけど、実装しなかった機能案
1. 24 時間配信/無人配信
「24 時間配信/無人配信」を実装すれば、いくつかメリットがあります。
しかし、個人的な方針と反すると思い実装しませんでした。
理由は下記の通りです。
2. 視聴者の週間/月間の時間を Bot くん通知する
その週や月間をどのぐらい頑張ったのかを視聴者に教えたいと思いましたが、
次の週や来月になるとリセットされるは、上記のサイクルから抜けるプロセルになるため
あえて実装しなかったです。
3. 視聴者の週間/月間のグラフ化
こちらも同様に頑張りをグラフ化し、視聴者に伝えたかったですが、
競争性やサイクルの離脱を考慮して実装しなかったです。
🌱 技術選定
システム全体図
Next.js
フロントエンドエンジニアを目指しております。
2023 年頃から「Next.js」勉強していて何度も挫折しており、
今度こそ理解したいと思い選定しております。
TypeScript
今の会社でもTypeScriptは使っており、Next.jsでも使えるので選定しました。
Tailwind CSS
Next.jsのオプションで使え、個人的にも勉強しているので選定しました。
SQLite
個人の学習時間を記録するだけなため、軽量なSQLiteを選定しました。
今のデータであれば、100 万件記録出来そうなので、運用面でも大丈夫だと思います。
🌱 最後に
2025 年の年内で登録者 1000 人を目指しております!!
本チャンネルに「ご興味がある方」や「一緒に勉強をしてくれる方」はチャンネル登録をよろしくお願いいたします!!
また、収益化したら、高くてなかなか買えない技術の書籍(O'Reilly 本など)を買う経費にしたいと考えております。(私のおこづかいは 5,000 円/月)
2025/08/25 時点の全期間のアナリティクス画像です。
Discussion
悩みを解決するサービスを開発しているのはすごいですね！
記事で課題とされていた「三日坊主」対策へのアレンジとして、
各ユーザーの連続記録として初日から連続3日目までのstart時に
Botくんから追加の応援フレーズが入ると言うのはどうでしょうか？
例）
1日目「さあ、始めましょう!」
2日目「今日も継続、素晴らしいですね!」
3日目「習慣化が始まっていますね!」
hidaoさん コメントありがとうございます。
おっしゃる通りユーザーの連続記録を賞賛することはとても良いと感じており、
実は、各ユーザーの連続記録を賞賛する機能をいくつか考えておりました！
ユーザーの連続記録を賞賛する機能
しかし、上記の機能には、デメリットと障害があり、あえて実装しなかったです。
デメリット
→また0からリセットされ、そもそも配信に来てくれなくなる可能性がある
機能を維持するための障害
どんな背景のユーザーでも参加しやすく、快適に感じてもらえる配信を目指していた為このような結論にさせて頂きました。
しかし、視聴者からBotくんからモチベが上がるフレーズを言ってほしいという要望が上がっており、
いい感じにシステムに導入できないか検討中です。
丁寧なご返信ありがとうございます！
「どんな背景のユーザーでも参加しやすく、快適に感じてもらえる勉強配信」という
コンセプトと、システムの制約を踏まえた設計思想がよく理解できました。
モチベアップがいい感じにシステムに導入されることを楽しみにしています！