AIに作らせるのではなく、AIと設計する。約6日でCMS Memory Coreを公開するまで
はじめに
実際に公開したアプリ：
CMS Memory Core
https://cms-memory-core.vercel.app/
CMS Memory Coreは、ローカルファースト型のメモ管理アプリです。
主な特徴は以下です。
- ブラウザ内にデータを保存
- サーバー通信に依存しない
- 検索を重視したメモ管理
- PWAとして利用可能
- バックアップ・復元対応
この記事では、このアプリを開発した過程と、AIを開発工程にどのように組み込んだかを紹介します。
今回の開発期間は、
- 設計方針の整理：約2日
- CMS Memory Coreの開発・公開：約4日
合計約6日間でした。
ただし、短期間で公開できた理由は、AIにすべて作ってもらったからではありません。
先に作るものの方向性を決め、その上でAIを開発支援として活用しました。
第1章 CMS Memory Coreとは
CMS Memory Coreは、情報を保存するだけではなく、後から検索・再利用できる状態にすることを目的としたメモ管理アプリです。
一般的なメモアプリでは、
「記録する」
ことが中心になります。
しかし、CMS Memory Coreでは、
記録
↓
整理
↓
検索
↓
再利用
という流れを重視しています。
そのため、単純なメモ入力だけではなく、
- タグ管理
- 検索機能
- 未来利用を考えた評価項目
- バックアップ機能
などを実装しました。
CMS（Creative Memory System）は、このアプリを作る際の設計基準として利用しています。
第2章 AIを開発工程にどう組み込んだか
今回の開発では、AIを単なるコード生成ツールとして扱いませんでした。
それぞれに役割を分けています。
GPT：設計・整理担当
GPTには主に以下を担当してもらいました。
- アイデア整理
- 仕様整理
- 設計レビュー
- 問題点の確認
開発初期では、作りたいものを整理し、実装可能な形へ変換するために利用しました。
Claude Code：実装担当
Claude Codeには以下を担当してもらいました。
- コード生成
- ファイル修正
- 実装作業
- エラー対応
実際の開発作業を高速化する部分で活用しました。
人間：方向性と最終判断
AIから提案された内容をそのまま採用するのではなく、
- 必要な機能か
- 現在の設計方針に合うか
- 継続利用しやすいか
を判断しました。
第3章 技術構成
Next.js + TypeScript
アプリケーション基盤としてNext.jsを採用しました。
理由は、
- Webアプリとして公開しやすい
- PWA対応が可能
- 将来的な拡張性がある
ためです。
TypeScriptは、コード管理や開発中のミス削減を目的として利用しました。
IndexedDBによるローカル保存
データ保存にはIndexedDBを利用しました。
一般的なWebアプリでは、
ユーザー
↓
サーバー
↓
データベース
という構成が多いですが、CMS Memory Coreでは、
ユーザー
↓
ブラウザ内保存
という構成にしています。
これにより、
- サーバー維持コストを抑えられる
- 外部通信を減らせる
- ユーザー自身がデータを管理できる
という特徴があります。
PWA対応
CMS Memory CoreはPWAとして利用できます。
対応内容：
- インストール可能
- アプリ形式で起動可能
- オフライン利用対応
ブラウザ上のページではなく、個人用ツールとして利用できる形を目指しました。
第4章 実装した主な機能
メモ管理
メモには以下の情報を保存します。
- タイトル
- 本文
- ユーザータグ
- あとで役立つ評価
検索機能
CMS Memory Coreでは検索を重要な機能として実装しました。
対応内容：
- タイトル検索
- 本文検索
- タグ検索
- 表記ゆれ対応
保存した情報を必要な時に見つけられることを重視しています。
バックアップ・復元
ローカル保存では、データ管理をユーザー自身が行う必要があります。
そのため、
- JSON形式バックアップ
- 復元機能
を実装しました。
第5章 約6日で公開できた理由
今回の開発で重要だったのは、AIによる高速化だけではありません。
開発前に、
- 作る機能
- 優先順位
- 技術選択
を整理していたことが大きかったです。
AIは実装速度を向上できます。
しかし、方向性が決まっていなければ、提案された内容を判断する時間が増えてしまいます。
そのため、
設計方針を決める
↓
AIで実装を進める
↓
動作確認・改善する
という流れで開発しました。
まとめ
CMS Memory Coreの開発を通して感じたことは、AI時代の個人開発では、
「AIを使うこと」
だけではなく、
「AIを開発工程のどこで活用するかを考えること」
が重要だということです。
AIによって、個人でも以前より大きな開発を進められる環境になりました。
一方で、
何を作るか。
どこを目指すか。
という方向性を決める部分は、人間が担う必要があります。
AIに作らせるのではなく、
AIと設計する。
この考え方で、CMS Memory Coreを開発しました。
GitHub
ソースコード：
実装内容や設計に興味がある方は、ぜひ確認してください。
開発背景について
この記事では、技術構成や開発工程を中心に紹介しました。
設計判断や意思決定の詳細については、別の記事で記録しています。
- なぜこの機能を採用したのか
- なぜ別の案を採用しなかったのか
- AIとの協働でどのように判断したのか