Codex×Fable 5でコードを書かずにアプリを完成させる方法【指示テンプレ付き】
受け取ってくれてありがとう🙌このテンプレ集は、設計をFable 5、作る作業をCodexに分けて頼む指示テンプレ4本と設計書の型、公開の手順です。
今日からあなたは、コードを一行も書かずに、頼む順番だけでアプリを形にできます。
第1章：アプリ完成までの全体地図
- ステップ1｜アプリを2つ入れる：Codexと、設計担当のClaudeを使える状態にする
- ステップ2｜Fable 5に設計書を作らせる：聞き取りから設計書を1枚にする(テンプレ1)
- ステップ3｜Codexに保存して作らせる：設計書を作業フォルダに置き、アプリを作らせる(テンプレ2)
- ステップ4｜確かめて直す：設計書どおりか点検させ、直したい所だけ直させる(テンプレ3・4)
- ステップ5｜公開する：保存した版を公開して、あなたのURLを発行する
ステップ1｜アプリを2つ入れる
やること：ChatGPTのデスクトップアプリをダウンロードして開き、ChatGPTアカウントでサインインします。次にClaudeアプリも入れてサインインします。
終わった時の手元：Codexを選べるChatGPTアプリと、Claudeアプリの2つ。
Fable 5は有料プラン向けです。無料プランでは使えません。使う時は、モデル選択画面で「Fable 5」を選びます。
ステップ2｜Fable 5に設計書を作らせる
やること：Claudeアプリのモデル選択画面でFable 5を選び、テンプレ1を貼って送ります。6問に答えると設計書ができます。
終わった時の手元：目的・画面・動き・保存する情報が入った設計書1枚。
ここからコピー(この枠の中だけ)
あなたはアプリ作りの設計担当です。利用者はコードを書けません。
【作りたいアプリ(例:家計簿をつけるWebアプリ)】について、1問ずつ質問してください。
質問は、使う人・画面に出す物・ボタンの動き・保存する情報の順に、全部で6問までです。
答えを聞き終えたら、次の型で設計書を1つにまとめてください。
目的(1行)/使う人/画面ごとの部品/ボタンを押した時の動き/保存する情報/今回は作らない物
専門用語は使わず、中学生でも分かる言葉で書いてください。
ここまでコピー
ステップ3｜Codexに保存して作らせる
やること：ChatGPTアプリで作業フォルダを開き、Codexの新しいチャットを開きます。テンプレ2の最後に設計書を貼って送ります。
終わった時の手元：作業フォルダの中の設計書のファイルと、動くアプリ。
アプリが変更内容を見せてきたら、確認して承認します。作業前の承認設定は「Ask for approval」にしておくと、外への接続や作業フォルダの外に触れる前に必ず確認が出ます。
ここからコピー(この枠の中だけ)
あなたはアプリを作る実装担当です。利用者はコードを書けません。
下の設計書を、作業フォルダに「設計書.md」という名前で保存してください。
そのあと、設計書どおりに動くアプリを作業フォルダの中に作ってください。
設計書に無い機能は足さないでください。分からない所は、作る前に1つだけ質問してください。
作り終えたら、作ったファイルの名前と、アプリの開き方を一覧で教えてください。
【設計書(例:Fable 5が作った設計書をここに貼る)】
ここまでコピー
ステップ4｜確かめて直す
やること：まずテンプレ3で点検させます。できていない所が出たら、テンプレ4で1か所ずつ直させます。
終わった時の手元：設計書の項目が全部「できている」になったアプリ。
ここからコピー(この枠の中だけ)
あなたは点検担当です。作業フォルダの設計書.mdを読んでください。
設計書の項目ごとに、アプリがそのとおり動くかを確かめてください。
結果は「できている」「できていない」で一覧にしてください。
できていない物には、原因を1行で添えてください。
この段階ではまだ直さないでください。
ここまでコピー
ここからコピー(この枠の中だけ)
あなたは修正担当です。作業フォルダの設計書.mdを読んでください。
次の1か所だけを直してください:【直したい所(例:保存ボタンを押しても一覧に出ない)】
それ以外は変えないでください。
直したら、変えたファイルと変えた内容を一覧で教えてください。
ここまでコピー
ステップ5｜公開する
やること：ChatGPTアプリのSitesから新規作成するか、今のプロジェクトを選びます。公開候補を保存して中身を確認し、保存した版を公開します。
終わった時の手元：本番用のURL。
Sitesで公開できるのはWebアプリです。ステップ2の【作りたいアプリ】には、Webアプリを選んでおくと迷いません。