【🏠家でゲームしながら作るスタディ成果共有ウェブサイト】~ 📄プロンプト一発、🎮ゲーム一戦、🚄高速開発の秘訣 ~

# 【家でゲームしながら作るスタディ成果共有ウェブサイト】
## ~ プロンプト一発、ゲーム一戦、そして高速開発の秘訣 ~

- 「スタディの成果を記録したい、開発全体のプロセスを効率化したい」
- 「家でゲームや趣味活動をしながらも成果を出したい」
- 「最小コスト・最大効率で運用したい」

そんな悩みを持つ方に役立つ内容です。

---

# 🧭 TL;DR
- 定期スタディ成果を記録・共有するウェブサイト
- 明確なプランとAPI設計書に基づく高速開発
- コマンド一発、コードチェック一回でウェブサイト構築可能
- Nuxt3, Pinia, Vuetify, TypeScriptなど最新スタック
- 無料/低コストなデプロイ構成で運用費最小化
- 実際のコード/構成は下記参照

---

# 💡 きっかけ
定期的に行うスタディの成果を記録し、
チームメンバーや外部に簡単に共有できるページが必要でした。

また、家でスタディやゲーム・趣味活動をしながら、
「コマンド一発 → ゲーム一戦 → コードチェック」
という気軽な開発スタイルを目指しました。

---

# 🚩 なぜGCP/Firebaseを選んだのか？

## フロントエンド専用ホスティング（Vercel等）との違い

| 項目 | フロントエンド専用ホスティング（Vercel等） | GCP/Firebaseベース構成 |
|------|-----------------------------------|-----------------------|
| サーバー直接運用 | 不可（サーバーレス関数のみ） | 可能（VM, Functions, App Engine等） |
| DB直接運用 | 不可（外部DB連携のみ） | 可能（Cloud SQL, Firestore等） |
| リアルタイム/持続接続 | 不可（WebSocket等制限） | 可能（Firebase Realtime DB等） |
| 大容量/複雑演算 | 不可（サーバーレスの限界） | 可能（サーバー/関数拡張） |
| ファイルアップ/ダウンロード | 外部ストレージ必要 | Firebase Storage等直接連携 |
| コスト構造 | 無料プラン（100GBトラフィック等） | 無料/有料プラン、細かい拡張 |

- **Vercel等は静的/SSR/サーバーレスに最適化されているが、常時稼働サーバーや複雑なDB、リアルタイム処理には限界がある**
- **GCP/Firebaseはサーバー、DB、ストレージ、リアルタイムなど全てのバックエンド機能を直接設計・運用可能**

## 実際の選択理由
- スタディ成果共有という目的上、単なる静的ページを超えて
  - 活動/ポートフォリオ/インサイトなど多様なデータ管理が必要
  - 多言語、リアルタイム更新、ファイルアップロードなど動的機能が必要
- 常時稼働サーバー、DB、ストレージ、リアルタイム機能を一気に、柔軟に活用できるGCP/Firebaseが最適
- 無料プラン範囲内で十分運用可能、必要時の拡張も容易

---

# 📱 作ったサービス: YSQUARE VISION
- **メイン機能：**
  - スタディ活動、インサイト、ポートフォリオなど成果を一目で見られるメインページ
  - 各項目ごとの詳細ページとデータ管理
  - レスポンシブUI、多言語対応（日/英/韓）
- **技術スタック：**
  - Nuxt3, Vue3, TypeScript, Pinia, Vuetify3
  - サーバーレス, GCP, Firebase Hosting, Firebase Functions, Firebase Storage
  - API設計書ベースのデータ構造
  - Git, Sourcetree
- **特徴：**
  - 明確な設計書ベースの高速開発
  - 最小コスト（無料）で運用可能
  - 誰でも簡単にカスタマイズ可能

---

# 🛠️ 使用技術/ツール

| ツール/サービス | 役割 | 使用目的/場所 | コスト |
|-------------|------|----------------|-------------------|
| Nuxt3/Vue3/TS | フロントエンド | 全体実装 | 無料 |
| Pinia/Vuetify3 | 状態管理/UI | 全体実装 | 無料 |
| Github | ソース管理/CI/CD | 全体 | 無料 |
| Firebase Hosting | デプロイ/ホスティング | 運用 | 無料 |
| Firebase Functions | サーバーレスバックエンド | 動的処理 | 無料/低コスト |
| Firebase Storage | ファイル保存 | 画像/添付ファイル | 無料/低コスト |
| GCP | インフラ拡張 | 必要時 | 無料/有料 |
| Cursor/AI | コード自動化/補助 | 開発 | 無料/低コスト |

---

# 💰 実際の運用コスト

| 項目 | コスト（記入者入力） | 備考 |
|------|------------------|------|
| Github | 無料 | プライベートリポジトリ可 |
| Firebase Hosting | 無料 | 小規模トラフィック十分 |
| Firebase Functions | 無料 | 月20万回呼び出し等 |
| Firebase Storage | 無料 | 月1GB保存等 |
| ドメイン | Whois | 必要時別途購入(7千円、3千円代でも可能) |
| その他 | なし | |

---

# 🚀 開発/運用構成の特徴

| 項目 | 説明 |
|------|------|
| 明確な設計書 | API/プラン等を事前に文書化し、開発方針明確化 |
| 高速開発 | 設計書ベース、コンポーネント化、Cursorによる自動化で開発速度UP |
| 最小コスト | 無料プランで運用費0円可能 |
| 簡単な保守 | コード/設計分離、カスタマイズ容易 |
| ゲームしながら開発 | プロンプト一発、コードチェック一回で進行可能 |
| 動的機能拡張 | サーバー/DB/ストレージ/リアルタイム等自由に拡張可能 |

---

# 📊 なぜ無料運用が可能なのか（コスト構造表）

| サービス | 無料条件/制限 | 実際の使用量 | 備考 |
|---------|----------------|-------------------------|------|
| Github | Public/Private無制限 | 小規模プロジェクト向き | |
| Firebase Hosting | 月10GBトラフィック等 | スタディ/個人十分 | |
| Firebase Functions | 月20万回呼び出し等 | スタディ/個人十分 | |
| Firebase Storage | 月1GB保存等 | スタディ/個人十分 | |
| GCP | Always Free/無料クレジット | クレジット消費はほぼ発生せず | |

---

# 📝 開発フロー

1. **プラン/設計書作成**
   - API、データ構造、画面フロー等を事前にCursorで文書化
2. **プロンプト一発実行**
   - 例：`設計書に基づいて◯◯ページのデザインを作成して`
3. **スタディ進行 / ゲーム一戦 / 読書など**
   - ゲームの合間に開発チェック（主：趣味活動、副：開発、逆も可）
4. **コードチェック/修正**
   - AI/自動化ツール活用、迅速なフィードバック
5. **デプロイ**
   - Firebase Hosting, Firebase Functionsデプロイ

---

# 📁 実装済みページ構成

## YSQUARE-VISIONのページリンク
https://ysquare.vision

### メインページ（`/pages/index.vue`）
- 活動、インサイト、ポートフォリオを統合したダッシュボード
- 最新アップデートや主要コンテンツのハイライト
- レスポンシブグリッドレイアウト
- 全ページ多言語対応（日/英/韓）

![01.home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075081/69693d94-71eb-487f-821b-ff88ff8d190c.png)


### チーム紹介（`/pages/about.vue`）
- チームメンバーのプロフィールと紹介
- 主な技術スタックの可視化
- 連絡先情報

![02.about.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075081/6792b208-6848-4fec-814e-b93024183e6c.png)


### 活動内容（`/pages/activities.vue`）
- 主な活動分野
- カテゴリ別タグ
- 詳細内容マークダウンレンダリング

![03.activities.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075081/fb87ef1f-5c9f-4db3-8153-68e8d6de0861.png)

### インサイト（`/pages/insights.vue`）
- ブログや研究資料のグリッド表示
- サムネイル画像対応
- タグベースのフィルタリング
- 作成者/日付情報

![04.insightspng.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075081/1da1e13d-002d-4e30-b3fc-ded4a3934c81.png)


### ポートフォリオ（`/pages/portfolio.vue`）
- プロジェクトギャラリービュー
- 詳細情報モーダル
- 技術スタックタグ
- 作業時間表示

![05.portfolios.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075081/191410bf-7578-4139-bec3-6af698fa5c8d.png)



### 管理者エリア
- ダッシュボード（`/pages/admin/dashboard.vue`）
  - 訪問者統計
  - コンテンツ状況
  - システム状態
- ポートフォリオ管理（`/pages/admin/portfolios.vue`）
  - プロジェクトCRUD
  - JSONで多言語対応（内容作成→JSONコピー→GPT翻訳→JSON貼り付け）
  - 画像アップロード
  - 状態管理
- インサイト管理（`/pages/admin/insights.vue`）
  - コンテンツCRUD
  - JSONで多言語対応（内容作成→JSONコピー→GPT翻訳→JSON貼り付け）
  - メディア管理
  - タグ管理
- 認証処理（`/pages/admin/auth-success.vue`, `/pages/admin/auth-error.vue`）
  - ログイン成功/失敗処理
  - 権限検証

【画像アップロード制限により、ポートフォリオ編集画面のみ表示】
![08.portfolio-regi-edit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4075081/4e23c90d-f6fe-4f7a-8dc0-9f3195b25330.png)

> 全ページはNuxt3, Vue3, TypeScriptで実装され、Firebaseと連携しています。

---

## Cursor活用による開発時間短縮効果

このプロジェクトの各開発段階でCursor（及びAI自動化ツール）を活用することで実際に短縮された時間を以下の表にまとめます。
従来の手作業/伝統的な開発手法と比較して、約80%以上の時間節約効果を経験しました。

以下にかかった時間は物理的な時間ですが、各作業に投資した時間は実質的にプロンプト入力、結果確認、分析、問題解決に
合計**6〜8時間**程度に過ぎません。

### ① Cursor/AI 使用時間 + 実際の作業内容
| 開発フェーズ | Cursor/AI使用時間 | 実際の作業内容 |
|--------------------------|--------------------|----------------|
| 企画/ビジネスプラン | 0.25時間 | AIプロンプトで企画書/ビジネスプラン自動生成、核心要件整理 |
| 詳細設計書作成 | 0.75時間 | データ構造、API、DB、ストレージ、全体フローなど設計書をマークダウンで作成 |
| UI設計書作成 | 0.5時間 | UI/UX設計、色/配置/ボタンなど具体化、マークダウン設計書作成 |
| プロトタイプ開発 | 0.5時間 | Nuxt/Vuetifyベースのメインレイアウト、コンポーネント構造、データ連携実装 |
| 動的システム実装 | 2時間 | Pinia/Firebase連携、状態管理/DB/APIなど動的データ処理、主要機能実装 |
| 管理者システム実装 | 6時間 | 管理者UI/権限/データ管理機能実装、複雑ロジック自動化 |
| 静的ページビルド/デプロイ | 1時間 | `npm run generate`で静的ビルド、Firebase Hostingデプロイ |
| アーキテクチャ再設計 | 2時間 | 構造改善、問題解決、コードリファクタリング及び最適化 |
| 再設計後の開発及びテスト | 6時間 | コード修正、デザイン変更、各種エラー対応、機能別テスト |
| 最終テスト | 2時間 | 実際のサービス環境で機能/デザイン/レスポンシブ/多言語など最終点検 |
| 本番環境確認 | 1時間 | 実際のドメイン/デプロイ環境で最終確認、運用準備 |
| **合計** | **22時間** | - |

### ② 従来手法の予想時間 + 予想される作業内容
| 開発フェーズ | 従来手法の予想時間 | 予想される作業内容 |
|--------------------------|-------------------|----------------|
| 企画/ビジネスプラン | 8時間 | 手作業で企画書作成、要件整理、ページごとの用途定義 |
| 詳細設計書作成 | 10時間 | 設計書フォーマット準備、データ/DB/API/ストレージ/フローなど手作業で作成 |
| UI設計書作成 | 8時間 | UIデザイン企画、UX設計、Figma等でUI/UX設計、色/配置/ボタンなど反復作業 |
| プロトタイプ開発 | 16時間 | レイアウト/コンポーネント直接実装、反復修正 |
| 動的システム実装 | 20時間 | データ連携、状態管理/DB/API作成及び連携、機能別手作業実装 |
| 管理者システム実装 | 25時間 | 管理者UI/権限/データ管理機能直接実装、反復デバッグ |
| 静的ページビルド/デプロイ | 1時間 | 手動ビルド/デプロイ、デプロイスクリプト作成及び反復確認 |
| アーキテクチャ再設計 | 8時間 | 構造改善、問題解決、コードリファクタリング反復 |
| 再設計後の開発及びテスト | 15時間 | コード/デザイン修正、エラー対応、機能別手動テスト |
| 最終テスト | 2時間 | 実際のサービス環境で手動点検、QA |
| 本番環境確認 | 1時間 | 実際のドメイン/デプロイ環境で最終手動確認 |
| **合計** | **114時間** | - |

### ③ 時間削減率 + 主な効率化要因
| 開発フェーズ | 時間削減率 | 主な効率化要因 |
|--------------------------|------------|-----------------|
| 企画/ビジネスプラン | 97% | 文書自動化 |
| 詳細設計書作成 | 93% | 設計書作成自動化 |
| UI設計書作成 | 94% | デザイン/UX設計自動化、反復作業短縮 |
| プロトタイプ開発 | 97% | コード自動生成、フレームワーク変換 |
| 動的システム実装 | 90% | モジュール化、再利用性、自動化実装 |
| 管理者システム実装 | 76% | 複雑なUI/ロジック自動化 |
| 静的ページビルド/デプロイ | 0% | - |
| アーキテクチャ再設計 | 75% | 問題解決/構造改善自動化 |
| 再設計後の開発及びテスト | 60% | コード修正及びデザイン変更、各種エラー対応 |
| 最終テスト | 0% | - |
| 本番環境確認 | 0% | （構成確認は手動必要） |
| **平均** | **81%** | - |

### ④ 実際のプロンプト入力/テスト/エラー対応/物理的待機-作業/従来手法作業予想時間比較
| 区分 | 時間 | 具体的な作業内容 |
|---------------------|----------|--------------------------------------------------|
| Cursor/AI 自動化 | 約1時間 | プロンプト入力及び分析 |
| Cursor/AI 自動化 | 約4時間 | テスト/結果確認 |
| Cursor/AI 自動化 | 約3時間 | エラー対応及び関連内容学習 |
| Cursor/AI 自動化 | 約15時間| 全体自動化/ビルド/デプロイ/作業待機時間 |
| 従来手法(手作業) | 約114時間| 伝統的な手作業全所要時間(企画〜デプロイ) |

> 実際の動きとしては、可動部分は8時間弱！


---

# 🙌 まとめ

「ゲームや趣味活動をしながらも、明確な企画と設計で、簡単にウェブサイトを作れる」

# 一言

- 分野問わず一緒に勉強するメンバー募集中（オンライン）
- 投稿はトラブルシューティング／プロジェクト企画・完了／各種開発インサイトがメイン

---

## 参考：以前のQiita投稿

- [友人のウェブサイトを超短期間で作り上げてリリースした話（Cursor活用事例）](https://qiita.com/YSQUARE/items/bd9ae8dfc2e9917427e7)