WORKS 02

ともべや

誰かと机を並べているような感覚で集中できる、オンライン自習室アプリ

実際に使ってみる(公開中)

ともべや のメイン画面

種別

Webアプリケーション(PWA対応)

使用技術

Laravel / MySQL / Alpine.js / Tailwind CSS

制作期間

約3週間(企画〜公開)

担当

企画・設計・開発・公開(AIと協働)

つくった理由

一人で勉強していると、どうしても続かない。図書館やカフェのように「誰かがそばにいる」状態を、オンラインで再現できないかと考えたのが出発点です。時間を測るだけのアプリは既にありますが、続かない理由は時間管理ではなく孤独だと考えました。
もうひとつの目的は、企画から公開・運営までを一人で通せることの確認です。デザイン、データベース、スマホ対応、安全対策、サーバーへの公開までを、実際に手を動かして行いました。

できること

座席と部屋

共通の座席と、自分で作れる勉強部屋。座ると学習時間の計測が始まります

自分だけの机

ポモドーロ、付箋、メモ、BGM。カードの並び順は自由に入れ替えできます

記録とやる気

履歴、連続日数、目標日までのカウントダウン、週間目標

つながる

応援、友達、チャット、写真つきのメッセージ、ランキング

安全に運営する

18歳以上の確認、NGワードと連絡先交換の検知、通報・ブロック・利用停止

運営者向けの管理画面

通報の確認、利用状況、ピーク同時着席の推移を1画面で

画面

座席一覧(みんなが座っている様子)
座席一覧(みんなが座っている様子)
自分の机(付箋・メモ・ポモドーロ)
自分の机(付箋・メモ・ポモドーロ)
管理者ダッシュボード(利用状況・ピーク同時着席)
管理者ダッシュボード(利用状況・ピーク同時着席)

スマホ表示

スマホでは、画面下のタブで移動できます。ホーム画面に追加すると、ブラウザの枠なしで、アプリのように起動します(PWA)。

ホーム
ホーム
座席
座席
自分の机
自分の机
メニュー
メニュー

つくり方

Laravel(PHP)とMySQLで開発し、画面はサーバー側で組み立てつつ、チャットの自動更新や座席の表示など、動きが必要な箇所だけAlpine.jsで動かしています。設計・実装・レビュー・不具合の調査にはAI(Claude)を併用しました。仕様を決める時間に集中できた一方で、動作の確認は自動テスト(282件)と実際の画面で行っています。
公開はレンタルサーバーで行い、本番と同じ構成での事前確認や、設定ファイルが外から見えないことの確認まで実施しました。

こういうものを、作れます。

「自分の仕事だとこう使えそう」が浮かんだら、その段階でご相談ください。実現できるかどうかからお答えします。

相談してみる