Quiet Online Study Room

class25

ひとりだけど、ひとりじゃない集中空間。

class25は、25分だけ誰かと一緒に集中するための静かなオンライン自習室です。教室の席に座り、同じ時間に作業している人の存在を感じながら、勉強や制作に取り組める場所をWeb上に作りました。

  • RolePlanning / UI / Web Development
  • TypeFocus / Web Service
  • StackReact / TypeScript / Three.js / Cloudflare
  • Linkclass25.net
class25の3Dオンライン教室と座席画面

Background

ひとりで勉強や作業を続けると、タイマーを動かしていても途中で集中が切れやすくなります。一方で、Zoom自習室や作業通話は会話や視線の負担が大きく、毎日使うには少し重いと感じました。

そこで、監視や強制ではなく、同じ場所で誰かも集中している感覚だけを静かに共有できるオンライン自習室を考えました。

Approach

25分の集中と5分の休憩を軸に、3D教室、座席選択、在室ユーザー、今日の利用状況、着席時間を一つの画面にまとめました。自分の席と他の利用者の存在が自然に分かるよう、教室を斜め上から見る構成にしています。

集中中は教室を静かに保ち、チャットは休憩時間に開く設計にしました。交流を主役にせず、集中へ戻りやすい距離感を重視しています。

Result

座席への着席・退出、在室表示、集中と休憩のタイマー、利用状況表示、休憩中チャットを備えたWebサービスとして公開しました。単なるタイマーではなく、「場所に入って集中する」体験を、ブラウザからすぐ使える形にできました。

リアルタイムに変化する教室状態を扱うことで、UI表現だけでなく、複数ユーザーが同じ空間を共有するための状態設計も経験しました。

class25の静かなオンライン教室に入る。

class25.netを開く