AI駆動開発におけるプロンプト作成のポイント

なぜ手戻りが発生するのか

AIに「アプリやウェブサイトを作って」と指示しても、思い通りの結果になるとは限りません。あなたの頭の中にある前提条件をAIが勝手に推測し、一般的で無難な形に仕上がることが多いためです。
開発の手戻りを防ぐには、ターゲット層や必要な機能、デザインの希望をあらかじめ具体的に伝える必要があります。
Replitの公式ドキュメントでも、コードを書かせる前に計画を立てることの重要性が説かれています。
いきなり作業を始めるのではなく、4つの要素を整理して指示を出すことでAIとの認識のズレを大幅に減らせます。

指示を的確にする4つの要素

対象ユーザーの設定

1つ目は、誰が使うのかを定義する「対象ユーザー」の設定です。
年齢層や職種、PCやモバイルといった機器の操作への慣れ、具体的な利用場面を定めます。
たとえば製造現場で働く40代の作業員が工場内でタブレットを使って入力する、といった具合に利用者の姿を明確にします。

ページ構成

2つ目はページ構成です。
たとえば作業管理アプリを作りたいのであれば、その日の作業一覧を見せるホーム画面、日報入力用のフォーム、過去の記録を検索する画面、管理者用の画面など、必要な画面を箇条書きのようにシンプルに書き出します。複雑な文章で説明する必要はありません。

機能要件

3つ目は機能要件です。
アプリで何ができるのかを、動作が分かる形で具体的に記載します。
作業員がQRコードを読み取って製品を登録する、不良数を入力すると自動で不良率を計算して表示する、管理者の権限を持つ人だけが過去のデータを編集できる、といった具合に、動作や制約をひとつずつ定義します。

デザイン要件

最後の4つ目はデザイン要件です。
画面の雰囲気や色合い、使い勝手の基準を伝えます。ここでのコツは、「文字を小さくしないで」のような否定的な表現を避け、文字は18ピクセル以上にしてというように肯定的な言葉で伝えることです。ボタンは最小でも48ピクセルにして指で押しやすくする、配色は白背景にネイビーを合わせるといった具体的な指示を出します。

プロンプトテンプレート

以下に記載したのは、4つの要素を用いたプロンプトのテンプレートです。指示を出す際の参考にしてみてください。
----------
【① 対象ユーザー】
誰が使うか（年齢層・職種・ITリテラシー・利用場面）
例：「製造現場の作業員（40〜50代・スマホ操作に不慣れ）が工場内でタブレットを使って入力する」

【② ページ構成】
必要な画面・ページを箇条書きで列挙
例：
● ホーム（今日の作業一覧）
● 日報入力フォーム
● 過去日報の一覧・検索
● 管理者用ダッシュボード

【③ 機能要件】
「できること」を動詞で具体的に書く
例：
● 作業員がQRコードをスキャンして製品を登録できる
● 不良数を入力すると自動で不良率を計算する
● 日報をPDFで出力できる
● 管理者だけが過去データを編集できる

【④ デザイン要件】
雰囲気・色・UIの制約
例：「ボタンは大きく（指で押しやすい）・文字は16px以上・配色は会社ロゴに合わせてネイビーとオレンジ・参考：〇〇のようなシンプルなUIを目指す」
----------

テンプレートを用いた場合と、用いなかった場合の
構築結果実例

悪い例

テンプレートを用いないで指示を出した場合、以下のような結果になりました。
```
現場で使える日報アプリを作ってください。
```

入力必須の項目に「必須」の記載がなく、ユーザーは「提出する」を押下するまで必須項目であることに気付きません。

テンプレートを用いた例

一方で、テンプレートを活用して指示を出した場合は、以下のような結果になりました。
```
【① 対象ユーザー】
製造ラインの作業員（20〜50代）が、工場内のタブレットでシフト終了時に1人5分以内で入力できるアプリ。

【② ページ構成】
● ホーム：今日の日報が未提出かを一目で確認
● 入力画面：生産数・不良数・作業コメントを入力して送信
● 一覧画面：自分の過去30日分を確認できる

【③ 機能要件】
● どの項目が必須項目か分かるようにする
● 送信後は再編集不可（管理者のみ可）
● 未送信の場合は翌日ホームに警告を表示する

【④ デザイン要件】
● ボタンは最小48px・フォントは18px以上
● 配色：白背景＋ネイビー（#1a3a5c）のシンプル構成
● 入力項目は画面に3つまで（スクロール不要）

```

入力必須の項目すべてに「必須」の記載があり、どの項目が入力必須であるか一目で分かります。

単に「現場で使える日報アプリを作って」と曖昧に指示を出すと、機能が多すぎて操作に迷ったり、ボタンが小さすぎて押せなかったりと、実際の現場に適さないアプリになってしまう場合があります。一方で利用者の姿や画面構成、必要な機能とデザインの条件を整理して伝えれば、操作に迷わない導線と実用的な機能を備えたアプリが出力されます。

さらに開発をスムーズに進めるには、一度の指示で完璧なものを完成させようとせず、段階的に作っていく姿勢が求められます。基本の画面レイアウトを作り、動作を確認してから計算機能を追加し、最後にデザインを微調整する手順を踏めば開発中の不具合を未然に防げます。

言葉だけで画面レイアウトを伝えるには限界があります。手書きのメモや参考になるウェブサイトの画像を添付し、視覚的な情報としてAIエージェントに渡すアプローチも効果的です。必要な機能やデータベースの選び方に迷った時は、いきなりコードを書かせるのではなく、まずはAIエージェントに相談して開発の進め方を提案してもらうやり方も実用的です。