Umapoi Owners Club
Umapoi Owners Club
Umapoi Owners Club様の会員向けプレミアムポータルサイトです。日本の競馬ファンに向けて、限定コンテンツ、コミュニティ機能、一人ひとりに合わせたユーザー体験を届けることを目的に構築しました。フロントエンドはNext.js、管理画面はLaravel＋FilamentPHPで開発しています。
担当領域
UI実装＆フロントエンド開発（Next.js）
レスポンシブWebデザイン
バックエンド開発（Laravel）
管理ダッシュボード（FilamentPHP）
AWSへのデプロイ
パフォーマンス最適化
課題
単なる紹介サイトではなく、実用的で安全、そして直感的に使える会員限定システムとして機能させる必要がありました。プレミアム会員の認証から限定コンテンツ、快適な管理画面、洗練されたUIまで、あらゆる層で堅牢さとブランドとの一貫性が求められました。さらに、そのすべてをAWS上で無理なくスケールさせる必要がありました。
アプローチ
Next.jsによるフロントエンド開発
サーバーサイドレンダリングと高速な静的生成を活かすため、フロントエンド全体をNext.jsで構築しました。Tailwind CSSを用いて、パフォーマンスと美しさを両立するクリーンなレスポンシブインターフェースを設計しています。タブ切り替え、通知、ダッシュボードといったインタラクティブな要素は、分かりやすさと使いやすさを重視して作り込みました。
Laravelによるバックエンド構築
バックエンドはLaravelで構築し、会員データ、コンテンツロジック、アクセス制御を堅牢かつ安全に扱えるようにしました。事業の成長に合わせてスケールでき、他の社内システムともスムーズに連携できる設計としています。
FilamentPHPによる管理画面
社内運用をシンプルにするため、FilamentPHPでカスタム管理ダッシュボードを実装しました。会員管理、コンテンツ更新、レース関連のお知らせ配信までを、直感的でモダンなUIから操作できます。導入時の教育コストもほとんどかかりません。
AWSへのデプロイ
システム全体をAWS上に構築し、スケーラブルなアプリ実行環境としてEC2、アセット保管にS3、データベース管理にRDSを活用しました。本番環境での速度・安定性・セキュリティを確保するため、デプロイパイプラインと環境設定も整備しています。
成果
Umapoi様のハイエンドなブランド観に沿った、高速かつモバイル最適化されたプラットフォーム
完全レスポンシブでアクセシブルなユーザーインターフェース
ロールベースの明快なアクセス制御を備えた、安全でスケーラブルなバックエンド
コンテンツ管理と会員管理を簡素化する管理画面
AWSインフラ上での安定したクラウド運用
制作の舞台裏
大きな課題は、会員と管理者という性質のまったく異なる2つのユーザー像に対して、シームレスな体験を用意しながら、コードベースをモジュール化して保守しやすく保つことでした。 また、サーバーサイドレンダリングとAWSのチューニングにより、読み込み速度の最適化とTime to First Byte（TTFB）の短縮にも力を入れました。その結果、どのデバイスでもプレミアムな印象を保つ、高速で将来にも耐えるサイトが実現しました。
今後の展開
今後は、リアルタイム更新（WebSocketまたはAWS AppSyncの活用）、多言語対応、さらなる分析ツール連携の追加を検討しています。Umapoi様のチームが会員のエンゲージメントをより深く把握できるようにすることが狙いです。