Corporate website for MOA Pro — a live stream management company operating in partnership with BIGO LIVE.
Built solo from initial brief to final deployment, handling everything from UX design to implementation based on client feedback and iterative revisions.
🌐 Live site: moapro.jp
MOA Pro approached me with a vague description of what they wanted. I took ownership of the design direction, presented initial concepts, and iterated based on client feedback until final sign-off. All design and development work was handled by a single developer (me).
This was a real client project with actual stakeholder communication, revision cycles, and a live production deployment.
- 🎨 Custom design — Designed from scratch based on client brief, no template used
- 📄 Full corporate site — Company overview, services, and about pages
- 📬 お問い合わせフォーム (Contact form) — Fully functional inquiry form
- 📱 Responsive design — Optimized for mobile and desktop
- ⚡ Performance optimized — Fast load times via Next.js and Cloudflare
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS |
| Deployment | Cloudflare Pages |
- Node.js 18+
git clone https://github.com/yourusername/moapro.git
cd moapro
npm installnpm run devOpen http://localhost:3000 in your browser.
This project involved a full design-to-delivery workflow:
- Discovery — Initial brief from client with loose direction on desired look and feel
- Design — Created full site design independently, balancing client brand expectations with modern web standards
- Implementation — Built out design in code with responsive layout
- Feedback & Iteration — Incorporated client revisions across multiple rounds
- Deployment — Final delivery and deployment to production
All rights reserved. This repository is public for portfolio purposes only. Please do not copy, reuse, or redistribute any part of this codebase without permission.
Client project — delivered 2024, Tokyo
MOA Proのコーポレートサイトです。BIGO LIVEと提携するライブ配信マネジメント会社向けに制作しました。
初回ブリーフから本番デプロイまで、UXデザインからコーディング・実装まで全工程を一人で担当しました。
🌐 サイト: moapro.jp
MOA Proからの依頼は、最初は漠然としたイメージの共有のみでした。そこからデザインの方向性を自分で定め、初稿を提案し、クライアントのフィードバックをもとに繰り返し改善を加えながら最終承認まで進めました。デザインと開発の全工程を一人で担当しています。
実際のステークホルダーとのコミュニケーション、複数回の修正対応、そして本番環境へのデプロイまでを経験した本物のクライアント案件です。
- 🎨 カスタムデザイン — テンプレート不使用。クライアントブリーフをもとにゼロから設計
- 📄 フルコーポレートサイト — 会社概要、サービス、アバウトページを完備
- 📬 お問い合わせフォーム — 完全に動作するお問い合わせフォームを実装
- 📱 レスポンシブデザイン — モバイル・デスクトップ両対応
- ⚡ パフォーマンス最適化 — Next.jsとCloudflareによる高速ロード
| レイヤー | 技術 |
|---|---|
| フレームワーク | Next.js (App Router) |
| 言語 | TypeScript |
| スタイリング | Tailwind CSS |
| デプロイ | Cloudflare Pages |
- Node.js 18以上
git clone https://github.com/yourusername/moapro.git
cd moapro
npm installnpm run devブラウザで http://localhost:3000 を開いてください。
このプロジェクトでは、設計から納品までの全ワークフローを担当しました。
- ヒアリング — クライアントから大まかなイメージをもとに要件を整理
- デザイン — クライアントのブランドイメージとモダンなWeb標準を両立させながら、サイト全体のデザインを独立して制作
- 実装 — レスポンシブレイアウトを含めてコードに落とし込み
- フィードバックと修正 — 複数回にわたるクライアントの修正依頼に対応
- デプロイ — 最終納品と本番環境へのデプロイ
全著作権所有。このリポジトリはポートフォリオ目的で公開しています。許可なくコードの複製、再利用、再配布はご遠慮ください。
クライアント案件 — 2025年納品、東京