AIアプリ開発の設計図「ブループリント」の作り方！Claude Code・Codexへの頼み方

Claude CodeやCodexのおかげで、プログラミングの経験がなくても、AIに頼めば自分用のアプリやツールを作れるようになりました。その一方で、「思っていたのと違うものができた」「直すたびに別の所が壊れる」という声もよく聞きます。

そこでSNSでも話題になっているのが、作り始める前に、AIに「ブループリント（設計図）」を作ってもらう方法です。当記事では、ブループリントとは何か、AIへの頼み方、設計図に書いておくべきことを、そのまま使える依頼文つきでAI初心者向けにわかりやすく解説します。

AIでアプリ開発するなら、最初に「ブループリント」を作ろう

ブループリントとは？ひとことで言うと「設計図」

ブループリント（blueprint）は、日本語で「青写真」のことです。昔、設計図を複写すると青い紙に白い線で写ったことから、英語では設計図そのものをこう呼ぶようになりました。

AIでのアプリ開発で言うブループリントは、1枚の図に、画面の部品と「押したらどうなるか」のルールを書き込んだものです。たとえば「このボタンを押す前に、確認の表示を出す」「入力が空なら何もしない」といった動きの決まりを、画面の図に番号をふって書き添えます。

開発の世界では昔からの「当たり前」

作る前に設計図を描くのは、新しい技ではありません。家を建てるときに設計図を描くのと同じで、ソフトウェアの開発でも、仕様書や画面の流れの図を作ってから作り始めるのが基本です。

遊技機の開発経験がある編集部から見ても、設計図を作ってから作り始めるのは当たり前の工程です。ただ、AIでいきなり動くものが作れるようになったことで、この「設計」の工程を飛ばしてしまう人が増えました。ブループリントが話題になっているのは、開発の基本が、AIの時代に改めて見直されているからだと言えるでしょう。

「サービスブループリント」との違い

似た言葉に「サービスブループリント」があります。これはサービスデザインの手法で、お客さんの行動、お客さんから見える部分、裏側の処理、それを支える仕組みを段に分けて1枚に描く図です。

この記事で扱うのは、もっと小さな「1つのアプリの画面と動きの設計図」です。考え方は同じで、どちらも「作る前に全体を図にして、関わる人（今回は人とAI）が同じものを見る」ためのものです。

なぜAIでの開発にブループリントが効くのか

ブループリントを作ると、AIに作らせたときの「思っていたのと違う」がぐっと減ります。理由は3つあります。

AIはあいまいな所を推測で埋めてしまう

「家計簿アプリを作って」とだけ頼むと、AIは画面の数、入力する項目、保存の仕方などを推測で決めて作り始めます。その推測があなたの考えと違っていても、AIは気づけません。

設計図を先に見せてもらえば、AIが何を推測したのかを、作る前に目で確かめられます。

直すのが一番安いのは「作る前」

図の段階なら、「この画面はいらない」「ボタンはここ」と言うだけで、すぐに直せます。コードができてから直すと、ほかの部分まで書き直しになり、時間もAIの利用枠も多く使ってしまいます。

人とAIが「同じ図」を見られる

言葉だけのやり取りは、人とAIで受け取り方がずれやすいものです。1枚の図があれば、「②のボタンを押したときの動きを変えて」のように番号で指して話せるため、食い違いが起きにくくなります。途中で会話をやり直したり、別のAIに頼んだりするときも、その図を渡せば同じ前提から始められます。

ブループリントの作り方：AIへの頼み方5ステップ

ここからは、例として「レシートの金額を入力して、月ごとの合計を出す家計簿アプリ」を作る場合で、AIへの頼み方を見ていきます。

1. 作りたいものを3行で伝える

最初に、「誰が」「何のために」「何をする」アプリかを短く伝えます。細かい所まで決めておく必要はありません。

使う人：自分だけ（スマホとパソコンのブラウザで使う）
目的：毎月いくら使ったかをすぐ知りたい
やること：レシートの日付・お店・金額を入力して、月ごとの合計を見る

2. 「コードはまだ書かずに、まず設計図を見せて」と頼む

ここが一番大事なポイントです。「まだコードは書かないで」とはっきり伝えることで、AIがいきなり作り始めるのを防げます。

Claude Codeには、ファイルを読んで計画を出すだけで、承認するまでファイルを書き換えない「プランモード」があります。起動中に「Shift＋Tab」を何回か押して、画面の下に「⏸ plan mode on」と出たら切り替わっています（押すたびにモードが順に変わり、1回目は別のモードになるので、表示を見て確かめましょう）。設計図を作る段階では、このモードを使うと安心です。Codexなど、ほかのAIでも「コードはまだ書かないで」とはっきり頼めば、設計図から始めてもらえます。ただし、これは頼み方での指示なので、プランモードのように仕組みで書き換えを止めるものではありません。

>>Common workflows「Plan before editing」（Claude Code 公式ドキュメント・英語）

3. 図を見て、足りない所・違う所を直してもらう

AIが出してきた設計図を見て、気になる所を番号で指して直してもらいます。たとえば次のような指摘です。

• 「③の削除ボタンは、押す前に『本当に消しますか？』を出して」
• 「金額にマイナスや文字が入ったら、保存しないで注意を出して」
• 「月の合計の画面に、前の月との差も出して」

手書きのラフな絵をスマホで撮って見せるのも有効です。Claude Codeは画像を貼り付けて（MacでもCtrl＋V）「この画面の構成を読み取って」と頼めます。

4. 決まった設計図をファイルに保存する

納得できる設計図になったら、「この設計図を blueprint.md というファイルに保存して」と頼みます。このファイルが、人とAIの両方にとっての「正本（いちばん正しい版）」になります。あとで機能を足すときも、まずこのファイルを直してから作らせると、話がずれません。

5. 「この設計図どおりに作って」と頼み、図と見比べる

最後に「blueprint.md のとおりに作って」と頼みます。できあがったら、設計図の番号ごとに「この動きになっているか」を確かめましょう。違っていたら「設計図の④と違う」と伝えれば、AIも直す場所をすぐに見つけられます。

ブループリントに必ず書いておきたい5つのこと

AIが出してきた設計図に、次の5つが入っているかを確かめましょう。抜けていたら「〜も書き足して」と頼みます。

書くこと	中身	家計簿アプリの例
①画面と部品	どの画面に、何がどこにあるか	入力画面・月の合計の画面・履歴の画面
②操作の流れ	どの順番で操作するか	開く→入力→保存→合計を見る
③状態の見せ方	作業中・完了・失敗をどう見せるか	保存できたら「保存しました」、失敗したら理由を出す
④確認と止めるルール	押す前に何を見せるか、どんなときは実行しないか	削除の前に確認、金額が空なら保存しない
⑤記録	何をしたかをどう残すか	入力と削除の履歴を日時つきで残す

とくに大事なのは「確認と止めるルール」

5つのうち、初心者がいちばん抜かしやすいのが④です。「押す前に必ず変更の中身を見せる」「条件を外れたら何もしない」を設計図に書いておくと、AIが作ったアプリがうっかりデータを消したり、意図しない操作をしたりするのを防げます。

これは、AIそのものを安全に使うときの考え方とも同じです。AIに任せる範囲を決め、危ない操作の前には人が確かめる仕組みを、作る前から組み込んでおきましょう。

▶ 関連記事：プロンプトインジェクション対策は「手」を縛る！Claude Code・Codexの守り方

▶ 関連記事：Claude Codeの権限設定を見直そう！溜まった許可の点検とdenyの書き方

そのまま使えるブループリントの依頼文テンプレート

最後に、Claude CodeやCodexにそのまま貼り付けて使える依頼文を紹介します。【】の中を、作りたいものに合わせて書き換えてください。

これから【家計簿アプリ】を作りたいです。まだコードは書かないでください。

使う人：【自分だけ。スマホとパソコンのブラウザで使う】
目的：【毎月いくら使ったかをすぐ知りたい】
やること：【レシートの日付・お店・金額を入力して、月ごとの合計を見る】

まず、次の5つを入れたブループリント（設計図）を見せてください。
1. 画面と部品（画面ごとに、何がどこにあるか）
2. 操作の流れ（どの順番で操作するか）
3. 状態の見せ方（作業中・完了・失敗をどう表示するか）
4. 確認と止めるルール（押す前に何を見せるか、どんなときは実行しないか）
5. 記録（何をしたかをどう残すか）

画面の図には部品ごとに番号をふり、番号ごとに動きのルールを書き添えてください。
あいまいな所は推測で決めずに、質問としてまとめて最後に挙げてください。

ポイントは最後の1行です。「あいまいな所は推測で決めずに質問して」と頼んでおくと、AIが勝手に決めた部分が見えるようになり、設計図の精度が上がります。

【まとめ】AIに作らせる前に、ブループリントで「同じ図」を見よう

ブループリントは、作る前に画面と動きのルールを1枚の図にする、開発の基本の設計図です。AIに「まだコードは書かないで、まず設計図を見せて」と頼むだけで、思っていたのと違うものができるのを防げます。次にアプリを作るときは、まず設計図から始めてみましょう。