社内トレーニング用Webアプリ
My Sports Teamは、社内トレーニングプロジェクトとして開発されたチーム管理向けWebアプリケーションです。 4名のメンバーでチームを組み、複数名のメンターのサポートを受けながら、実務に近い開発フローを意識して制作しました。
プロジェクト概要
要件のヒアリングから設計、実装、レビューまでをチームで一貫して進めることで、
短期間で多くの学びを得ることを目的としたプロジェクトです。
チーム管理、ユーザー管理、認証機能など、
業務システムに必要な基本機能を実装し、
実践的なWebアプリケーション開発を体験しました。
担当範囲
本プロジェクトにおいて、私は以下の領域を担当しました。
- UI / UXデザイン
- チーム管理機能
- メンバー管理機能
- 認証機能
技術面だけでなく、
メンバー間の役割分担や進捗を意識しながら、
プロジェクトが円滑に進むよう調整を行いました。
チーム開発で意識したこと
チーム内では、実装後にお互いのコードをレビューし合う開発スタイルを採用しました。
自分たちで調べても解決できない点についてはメンターに相談し、
設計の考え方や実装の意図を直接フィードバックとして受け取ることで、
短期間で多くの知識と実践的なノウハウを学ぶことができました。
UI / UX設計のポイント
UI / UX設計では、
「誰が使っても迷わず操作できること」を重視しました。
- 情報量を整理したシンプルな画面構成
- 認証後の画面遷移を意識した導線設計
- チーム・メンバーの状態が直感的に把握できるUI
- 実装を前提とした現実的なデザイン設計
Figmaで画面設計を行い、
実装時もデザインと挙動のズレが出ないよう注意しています。
使用ツール・技術
- UI設計:Figma
- チーム開発:GitLab
- Backend:PHP 8.4
- Framework:Laravel 12
- Frontend:Blade
- CSS:Tailwind CSS / Daisy UI
- Database:MySQL
- Server:Docker
- Deploy:Linux / Nginx
振り返り
このプロジェクトを通して、
チーム開発における「共有」と「レビュー」の重要性を強く実感しました。
コードを書く技術だけでなく、
設計意図を説明すること、
他のメンバーの実装を読み理解することが、
結果として自分自身の成長につながったと感じています。
短期間ではありましたが、
実務に近い形でWebアプリ開発を経験できた、
非常に学びの多い社内トレーニングプロジェクトでした。
デザイン
Figmaデザインはこちら:
Mock up Design (Figma)