ホーム 自己紹介 作品 ブログ お問い合わせ
作品一覧に戻る

社内トレーニング用Webアプリ

My Sports Teamは、社内トレーニングプロジェクトとして開発されたチーム管理向けWebアプリケーションです。 4名のメンバーでチームを組み、複数名のメンターのサポートを受けながら、実務に近い開発フローを意識して制作しました。

2025
社内トレーニング用Webアプリ

プロジェクト概要

要件のヒアリングから設計、実装、レビューまでをチームで一貫して進めることで、
短期間で多くの学びを得ることを目的としたプロジェクトです。

チーム管理、ユーザー管理、認証機能など、
業務システムに必要な基本機能を実装し、
実践的な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)

タグ