ジェンスパーク(Genspark)で開発する際の手順：構想から運用までの実践ガイド

はじめに

「ジェンスパーク(Genspark)を使えば、プログラミング経験がなくてもアプリが作れる」

これは半分正しく、半分間違っています。確かにジェンスパークは強力ですが、正しい手順を踏まないと、すぐに混乱します。

このシリーズでは、ジェンスパークが嘘をつく、忘れる、バグを埋め込む、固まるという4つの問題を取り上げてきました。

今回は総集編として、私がWebサイトを開発する中で確立した、ジェンスパークを使った開発の実践的なワークフローをご紹介します。このプロセスに従えば、初心者でも挫折せずにプロジェクトを完成させられます。

AI開発の全体フロー

構想 → AI Drive保存 → プロトタイプ → 仕様書作成
→ クイックリファレンス → 本開発 → 継続的な更新

それぞれのステップを詳しく見ていきましょう。

ステップ1: 構想をチャットに入力

まず、あなたのアイデアをジェンスパーク(Genspark)に伝えます。この段階では、細かい技術的な詳細は不要です。

良い構想の伝え方

「ジェンスパーク開発奮闘記」というブログサイトを作りたいです。

目的：
- GenSparkやAI技術に関する情報を発信
- 開発の体験談を共有
- 読者に役立つ技術情報を提供

機能：
- メインサイト（genspark-dev.net）: 1500-2000字の記事を公開
- はてなブログ連携: 要約を週3回自動投稿
- 記事カテゴリ: 開発体験談、ジェンスパーク機能紹介、
  開発ツール紹介、AI技術一般

技術スタック：
- フロントエンド: React + TypeScript + Vite
- バックエンド: Cloudflare Pages Functions
- データベース: Cloudflare D1
- ストレージ: Cloudflare R2

予算：
- 年間$12程度（Cloudflare無料枠+ドメイン代）

参考：
- 以前作ったWebサイトのコードを70-80%再利用したい

ポイント

what（何を）：作りたいもの
why（なぜ）：目的・背景
how（どう）：技術的な方向性
参考情報：既存プロジェクトやイメージ

曖昧な部分があっても大丈夫。AIとの対話で詰めていけます。

ステップ2: 構想をAI Driveに保存

ジェンスパーク(Genspark)との対話で構想が固まったら、すぐにGenSpark AI Driveに保存します。

保存する理由

チャット画面が消えても、構想は残る
後から見返して、初心の確認ができる
新しいチャット画面でも、すぐに状況共有できる

保存コマンド例

今までの会話を元に、「プロジェクト構想書」を作成して、
以下のパスに保存してください：

/ジェンスパーク開発奮闘記/00_AI指示書.md

含めるべき内容：
- プロジェクトの目的
- 主要機能
- 技術スタック
- 予算と制約
- 参考情報
- AI（あなた）の役割
- 開発スケジュール

ジェンスパークが作成した内容を確認し、修正があれば追加で指示します。「保存しました」という報告を鵜呑みにせず、必ず内容を確認してください。

ステップ3: プロトタイプを作る

いきなり完璧なものを作ろうとせず、まず動くものを作ります。

プロトタイプの目的

技術的な実現可能性を確認
開発環境のセットアップ
基本的なフロー全体のつながりを検証

プロトタイプの範囲（例）

【フェーズ1: 最小限のプロトタイプ】

✅ プロジェクトの初期セットアップ（React + Vite）
✅ Cloudflare Pagesへのデプロイ
✅ 1つの記事を表示するページ
✅ 記事データをD1から取得

【まだ作らない】

❌ 管理画面
❌ はてなブログ連携
❌ 自動投稿機能
❌ 複雑なデザイン

プロトタイプは2-3日で完成させることを目標にします。

プロトタイプ開発の依頼方法

プロトタイプを作成します。以下の機能を実装してください：

1. React + TypeScript + Viteのプロジェクト作成
2. 記事を1件表示するページ
3. Cloudflare D1から記事データを取得するAPI
4. Cloudflare Pagesにデプロイできる設定

一度に全て実装せず、1つずつ進めましょう。
まず、プロジェクトの初期セットアップからお願いします。

段階的に進めることが重要です。

ステップ4: 仕様書をAI Driveに作成

プロトタイプが動いたら、次は詳細な仕様書を作成します。

なぜ仕様書が必要か

ジェンスパーク(Genspark)は忘れる：チャットを変えると、前の会話を覚えていない
人間も忘れる：1週間後に「何を決めたっけ？」となる
変更管理：仕様変更の履歴を残す
新規参加者：他の人がプロジェクトを理解できる

仕様書の構成例

# プロジェクト仕様書 v1.0

## 1. プロジェクト概要
[プロジェクトの目的、背景]

## 2. システムアーキテクチャ
[技術スタック、システム構成図]

## 3. データベース設計
### 3.1 articlesテーブル
| カラム名 | 型 | 説明 |
|---------|-----|-----|
| id | INTEGER | 主キー |
| title | TEXT | 記事タイトル |
| content | TEXT | 本文 |

## 4. API仕様
### 4.1 記事一覧取得
- エンドポイント: GET /api/articles
- レスポンス: { articles: [...] }

## 5. 画面遷移
[ユーザーの動線]

## 6. 開発フェーズ
[Phase 1-5の詳細]

ステップ5: クイックリファレンスを作成

仕様書が大きくなると、ジェンスパーク(Genspark)は全てを読み込まなくなります。

クイックリファレンスの役割

仕様書が50ページになっても、最も重要な情報を1-2ページにまとめたものです。

クイックリファレンスの例

# クイックリファレンス

## プロジェクト基本情報
- 名称: ジェンスパーク開発奮闘記
- URL: genspark-dev.net
- 技術: React + TS + Cloudflare
- 予算: $12/年

## 重要な制約・決定事項
1. はてなブログのみ使用（Twitterは使わない）
2. メインサイトリンクは3回に1回
3. 記事は月・水・金に投稿
4. コードはWebアプリから70-80%再利用

## よくある問題と解決策
### 問題1: 環境変数が読めない
→ wrangler.tomlと.dev.varsの両方を設定

### 問題2: D1への接続エラー
→ binding名が正しいか確認（DB）

## 次のタスク
- [ ] 記事管理API実装
- [ ] はてなブログ連携
- [ ] 自動投稿機能

クイックリファレンスの使い方

新しいチャット画面で最初に実行：

以下のファイルを読み込んで、プロジェクトを把握してください：

1. /プロジェクト名/01_設計資料/クイックリファレンス.md
2. /プロジェクト名/02_作業記録/最新.md

読み込み後、要約を教えてください。

これで5分以内にAIが状況を理解します。

ステップ6: AIが忘れた時の対処法

開発を進めていると、ジェンスパーク(Genspark)がこう言い出します：

ジェンスパーク：「申し訳ありません。そのプロジェクトの詳細が分かりません」

これは正常です。ジェンスパークは忘れる生き物なので、思い出させます。

思い出させるコマンド

【パターン1: 基本情報を忘れた】
「/プロジェクト名/01_設計資料/クイックリファレンス.md を読み込んで、
プロジェクトの概要を教えてください」

【パターン2: 技術的な詳細を忘れた】
「/プロジェクト名/01_設計資料/技術仕様書_v1.0.md の
『データベース設計』セクションを読み込んで、articlesテーブルの
構造を教えてください」

【パターン3: 過去の決定事項を忘れた】
「/プロジェクト名/02_作業記録/2025-12-03.md を読み込んで、
Twitter API問題をどう解決したか教えてください」

部分的な読み込みがポイント

仕様書全体を読ませると、重要な部分が埋もれます。必要な部分だけを指定して読ませるのがコツです。

ステップ7: 仕様書を常に更新する

開発中に仕様が変わったら、すぐに仕様書を更新します。

更新のタイミング

✅ 新機能を追加した
✅ 既存機能の仕様を変更した
✅ 重要な問題を解決した
✅ データベーススキーマを変更した
✅ API仕様を変更した

更新方法

仕様書を更新してください：

ファイル: /プロジェクト名/01_設計資料/技術仕様書_v1.0.md

更新内容：
- 「3. データベース設計」セクションに、新しい
  `hatena_post_counter` テーブルを追加
- カラム: id (INTEGER), counter (INTEGER), updated_at (DATETIME)

更新後、変更内容を要約してください。

実践例：Webサイトから始まったプロジェクト

私の実際のワークフローを紹介します。

Day 1: 構想とAI Drive保存

チャットで「Webアプリを作りたい」と相談
対話を通じて機能を詰める（3時間）
構想を/占いプロジェクト/00_AI指示書.mdに保存
👉 この時点でチャット画面を一度リセット

Day 2: プロトタイプ作成

新しいチャット画面で00_AI指示書.mdを読み込み
React + Viteの基本セットアップ
占い結果を1つ表示するページを作成
Cloudflare Pagesにデプロイ成功
作業記録を/占いプロジェクト/02_作業記録/2025-11-01.mdに保存

Day 3-5: 仕様書作成と本開発

詳細な仕様書を作成（技術仕様書_v1.0.md）
データベース設計
Twitter API連携の実装
👉 この段階でAIが「プロジェクトを忘れる」問題が発生
クイックリファレンスを作成

Day 6-10: クイックリファレンスで効率化

新しいチャット画面で開発再開
最初に必ずクイックリファレンスを読み込ませる
効率的に開発が進む
作業記録を毎日更新

Day 11-: 運用と継続的改善

デプロイ完了
問題が発生したら、トラブルシューティングドキュメントに記録
仕様変更があれば、すぐに仕様書を更新

まとめ：AI開発の7つの鉄則

AI開発の7つの鉄則：

構想はチャットで詰めて、すぐAI Driveに保存 - 消える前に保存が基本
プロトタイプで実現可能性を早期検証 - 2-3日で動くものを作る
仕様書は詳細に、AI Driveで管理 - 後から見返せる「設計図」
クイックリファレンスで素早く思い出させる - 1-2ページの要点まとめ
ジェンスパーク(Genspark)が忘れたら、必要な部分だけ読み込ませる - 全文読ませると埋もれる
仕様書は変更のたびに更新 - 古い情報は混乱の元
作業記録を毎日AI Driveに保存 - チャットが消えても大丈夫

このワークフローに従えば、ジェンスパークの「嘘をつく」「忘れる」「バグを埋め込む」「固まる」といった問題を最小化できます。

AI開発は、人間とAIの協働作業です。ジェンスパークの弱点を理解し、適切なツール（GenSparkのAI Drive）を活用することで、初心者でも本格的なアプリケーションを完成させることができます。

このシリーズで学んだことを活かして、あなたも実際にAI開発に挑戦してみませんか？ジェンスパークを使えば、構想から実装まで、全てをAIとの対話で進められます。