Codex開発プランナー v0.1.0　公開URL:
https://codex-development-planner-published.vercel.app

ローカルにダウンロードしてセットアップすることなく、ネット上で直接機能を確認できます。

アプリ概要

Codexを使ってアプリ開発を始めたい初心者・個人開発者向けに、作りたいアプリのアイデアを整理し、Codexに渡しやすい開発プロンプトを生成するWebアプリです。

できること:

- アプリ案の整理

- 必要機能・画面構成の整理

- Codex用プロンプト生成

- 生成履歴の保存

- 履歴の復元・削除

-ユーザー登録・ログイン機能
　各履歴は、ユーザー毎に保存しています。

構成

• Next.js App Router

• TypeScript

• Tailwind CSS

• Supabase Auth

• Supabase Postgres

• Prisma

• Vercel

参考

• Codex アプリの設定方法：手を動かして学ぶ初心者向けハンズオン

• Expo Goで始めるReact Native超入門

アプリを作ってみたいと思っても、最初に困るのは「Codexにどう指示すればいいのか」です。

たとえば、家計簿アプリ、読書記録アプリ、学習管理アプリのような小さなアプリを作りたい場合でも、Codexに伝えるべき内容は意外と多くあります。

• どんなアプリを作りたいのか

• 誰が使うのか

• どんな機能が必要なのか

• どんな画面が必要なのか

• データを保存するのか

• どの技術構成で作るのか

• READMEや起動手順も必要なのか

これらを整理しないままCodexに依頼すると、出力されるコードが期待とずれたり、必要な機能が抜けたりしやすくなります。

そこで作成したのが Codex開発プランナー です。

Codex開発プランナーとは

Codex開発プランナーは、作りたいアプリのアイデアを整理し、Codexアプリに貼り付けやすい開発プロンプトを生成するWebアプリです。

このアプリ自体がコードを生成するわけではありません。

役割は、Codexに渡すための「開発指示書」を作ることです。

入力した内容をもとに、以下のような情報を整理したプロンプトを生成します。

• アプリ名

• アプリの目的

• 使う人・利用シーン

• アプリの種類

• 技術構成

• 必要機能

• 画面構成

• 保存方式

• エラー処理

• README作成指示

• 最終的に出力してほしい内容

生成されたプロンプトをCodexアプリに貼り付けることで、最初の開発依頼をしやすくなります。

想定しているユーザー

Codex開発プランナーは、特に以下のような人を想定しています。

• Codexアプリを使ってアプリ開発を始めたい初心者

• 個人開発で小さなアプリを作りたい人

• プログラミング経験は少ないが、自分用アプリを作りたい人

• 副業や学習目的でアプリを作ってみたい人

• 作りたいものはあるが、Codexアプリへの指示の書き方が分からない人

いきなり技術名やDB設計を考えるのではなく、「何を作りたいか」から整理できるようにしています。

初心者向けにした理由

開発経験が少ない人にとって、最初から以下のような項目を選ぶのは難しいです。

• アプリの種類

• 開発環境

• 使用するAI

• 保存方式

• 必要機能

• 画面構成

そこで、初期リリースでは入力モードを複雑にせず、初心者向けの流れだけに絞っています。

最初に「作りたいものに近いカード」を選ぶと、必要そうな機能や画面構成が自動で候補として表示されます。

たとえば「記録・管理アプリ」を選ぶと、以下のような候補が出ます。

• データ登録

• 一覧表示

• 編集

• 削除

• 検索

• カテゴリ分け

• 履歴保存

• 集計表示

ユーザーは必要なものをチェックするだけで、Codexに渡す内容を整理できます。

主な機能

1. 目的別プリセット

作りたいアプリに近いものをカードから選べます。

例:

• 記録・管理アプリ

• 予約・受付アプリ

• 学習・練習アプリ

• 管理画面・業務ツール

• AI活用ツール

• まだ決まっていない

選んだプリセットに応じて、機能候補や画面候補が自動で切り替わります。

2. アプリ案の入力

アプリ名、実現したいこと、使う人・利用シーンを入力します。

ここでは難しい技術用語を書く必要はありません。

たとえば、以下のような文章で十分です。

毎日の支出を記録し、月ごとの合計やカテゴリ別の支出を見返せる家計簿アプリを作りたい。

3. 必要機能のチェック

候補の中から必要な機能をチェックできます。

候補にない機能は、自由入力で追加できます。追加した機能はすぐにチェックリスト上に表示され、選択済みとして扱われます。

4. 画面構成のチェック

ホーム、入力画面、一覧画面、詳細画面、設定画面など、必要そうな画面を選べます。

こちらも、候補にない画面を自由に追加できます。

5. 詳細設定

初心者は触らなくても進められるように、技術構成は折りたたみの詳細設定にしています。

必要な場合だけ、以下を変更できます。

• アプリの種類

• 開発環境

• 使用するAI

• 保存方式

初期値では、Next.js + TypeScript + Tailwind CSS、SQLite + Prisma を使う構成になっています。

6. Codexアプリ用プロンプト生成

入力内容をもとに、Codexアプリへ貼り付けるための開発プロンプトを生成します。

生成結果には、実装要件、エラー処理、README作成指示、最終出力してほしい内容まで含めています。

7. 生成履歴の保存

生成したプロンプトはSQLite + Prismaで保存されます。

最新5件の履歴を表示でき、クリックすると入力内容を復元できます。

生成したプロンプトの使い方

生成されたプロンプトは、Codexアプリに貼り付けて使います。

基本的な流れは以下です。

1. Codex開発プランナーでアプリ案を入力する

2. Codex用プロンプトを生成する

3. 生成結果を確認する

4. コピーする

5. Codexアプリで新しい作業を開く

6. コピーしたプロンプトを貼り付ける

7. Codexアプリの出力を見ながら、必要に応じて改善指示を追加する

生成結果は完成した仕様書ではなく、最初の実装を依頼するための下書きです。

まず基本機能版を作り、そこから改善していく使い方を想定しています。

Codex開発プランナーV1.00コードのダウンロード

Codex開発プランナーPre-releaseのコードは、以下のGitHubページで公開しています。

GitHub：
https://github.com/omo-y/Codex-Development-Planner/releases/tag/V1.0.0

このページから、ツールに必要なファイル一式をダウンロードできます。

ダウンロードする場合は、上記のGitHubページを開き、「Source code（zip）」 をクリックしてください。ZIPファイルとして、完成コード一式をPCに保存できます。

ダウンロード後は、ZIPファイルを解凍し、展開したフォルダ内にある README.md の手順に沿ってセットアップを進めてください。

セットアップが完了すると、作りたいアプリのアイデアと要件・機能・画面構成・開発環境を選択することで、Codexアプリに貼り付けられる開発プロンプトを生成できます。

まとめ

Codex開発プランナーは、アプリ開発そのものを自動化するツールではありません。

作りたいアプリのアイデアを整理し、Codexに渡すための開発プロンプトを作るためのツールです。

特に、Codexを使ってアプリ開発を始めたい初心者にとって、最初の一歩を軽くすることを目的にしています。

「何を作りたいか」はあるけれど、「Codexにどう頼めばいいか分からない」。

そんなときに、Codex開発プランナーを使うことで、開発の入口を整理しやすくなります。

参考

• Codex アプリの設定方法：手を動かして学ぶ初心者向けハンズオン

• はじめてのGit入門～手を動かしながら覚えるGitコマンド