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

Posted at 2025-06-14

【家でゲームしながら作るスタディ成果共有ウェブサイト】

~ プロンプト一発、ゲーム一戦、そして高速開発の秘訣 ~

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

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

🧭 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/無料クレジット	クレジット消費はほぼ発生せず

📝 開発フロー

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

📁 実装済みページ構成

YSQUARE-VISIONのページリンク

メインページ（`/pages/index.vue`）

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

チーム紹介（`/pages/about.vue`）

チームメンバーのプロフィールと紹介
主な技術スタックの可視化
連絡先情報

活動内容（`/pages/activities.vue`）

主な活動分野
カテゴリ別タグ
詳細内容マークダウンレンダリング

インサイト（`/pages/insights.vue`）

ブログや研究資料のグリッド表示
サムネイル画像対応
タグベースのフィルタリング
作成者/日付情報

ポートフォリオ（`/pages/portfolio.vue`）

プロジェクトギャラリービュー
詳細情報モーダル
技術スタックタグ
作業時間表示

管理者エリア

ダッシュボード（/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）
- ログイン成功/失敗処理
- 権限検証

【画像アップロード制限により、ポートフォリオ編集画面のみ表示】

全ページは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活用事例）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up