Rork の AI にうまく伝わらない？プロンプト失敗パターン FAQ
Rorkの強力な点は、自然言語でアプリを説明するだけで、AIが完全に機能するコードを生成することです。しかし、プロンプトの書き方が悪いと、期待と全く異なるアプリが生成されることがあります。「こんなアプリが欲しかったわけではない」という経験をしたことがある方は多いでしょう。
このFAQでは、Rorkユーザーが最もよく経験するプロンプト関連の7つの問題と、それぞれの解決方法を分かりやすく説明します。プロンプト上手になれば、AIとのコミュニケーションが劇的に改善されます。
Q1: 曖昧な指示を出したら、意図と違うUIが生成されました
A: プロンプトが曖昧だと、AIは独自の解釈でアプリを生成します。結果が期待と異なるのは、プロンプトが十分に具体的ではなかったからです。
曖昧なプロンプトの例
悪い例：「ToDo アプリを作ってください」
これだけではAIは以下のように解釈するかもしれません：
- リスト形式？カード形式？
- 優先度機能は必要？
- 期限設定は？
- リマインダー機能は？
AIはあなたの頭の中を読むことができないため、すべての重要な機能を明示的に指定する必要があります。
解決方法：具体的で詳細なプロンプトを書く
良い例：「シンプルなToDoリストアプリを作ってください。以下の機能が必要です：
1. メイン画面：
- テキスト入力フィールドでタスクを入力
- 「追加」ボタンをクリックするとタスクがリストに追加される
- 各タスクは左にチェックボックス、右に削除ボタンがある
- 完了したタスクは取り消し線が引かれる
2. デザイン：
- シンプルで白いバックグラウンド
- 青い「追加」ボタン
- タスクはリスト形式で表示
- タップしてチェックマークをつけられる
3. 色：
- メインカラー：青（#007AFF）
- テキスト：黒
- 完了済みテキスト：灰色」
:::tip プロンプトを書く際は、以下の要素を必ず含めてください：
- 画面レイアウト（どのように情報が表示されるか）
- ユーザーインタラクション（ボタンを押すと何が起こるか）
- 配色（使用する色）
- ナビゲーション（複数画面がある場合、どのように移動するか） :::
Q2: 複雑すぎる指示を出したら、エラーや部分的な生成になりました
A: 複雑なプロンプト（長すぎる、機能が多すぎる）は、AIが処理しきれず、エラーが発生したり、不完全な出力になります。
複雑すぎるプロンプトの例
悪い例：「ソーシャルメディアアプリを作ってください。ユーザーは投稿を作成でき、
他のユーザーのフィードを見て、いいね、コメント、シェアできます。
リアルタイム通知、プロフィール機能、メッセージング、ストーリーズ機能、
フォロー機能、ハッシュタグ検索、メッセージングスレッド、ビデオアップロード、
画像フィルター、位置情報タグ付け、ブロック機能、...」
AIはこれを処理しきれず、部分的にしか実装されない可能性があります。
解決方法1：段階的に機能を追加する
ステップ1：基本的なアプリを生成
「シンプルなメモアプリを作ってください。ユーザーはメモを作成・編集・削除できます。」
ステップ2：基本的なUIを確認してから、次の機能を追加
「このアプリにユーザー認証（ログイン・サインアップ）機能を追加してください。」
ステップ3：さらに機能を追加
「メモを他のユーザーと共有できる機能を追加してください。」
解決方法2：プロンプトを簡潔にする
良い例：「チャットアプリを作ってください。ユーザーはテキストメッセージを送受信できます。
会話履歴は画面に表示されます。シンプルな白いUIで、左にメッセージ送信フォーム、
上に会話履歴があります。」
重要：最初は基本的な機能だけに絞り、その後で改善を加える
:::warning 1回のプロンプトで5個以上の複雑な機能を要求しないでください。AIは最初の2～3個の機能に焦点を当て、残りは不完全になる傾向があります。 :::
Q3: デザイン指定が反映されません。生成されたUIが希望と異なります
A: デザインに関する指示が曖昧だと、AIは予期しないデザインを生成します。色、レイアウト、サイズなど、すべてを明示的に指定する必要があります。
デザイン指定が反映されないプロンプトの例
悪い例：「モダンなUIを作ってください」
→ AIが考える「モダン」とあなたが考える「モダン」は異なる可能性があります
悪い例：「ボタンを大きくしてください」
→ どの程度大きいのか？モバイル全幅？50%？
解決方法：具体的なデザイン指定
良い例：「以下のデザイン仕様に従ってUIを作成してください：
カラースキーム：
- 背景：白（#FFFFFF）
- メインボタン：青（#007AFF）
- テキスト：濃い灰色（#333333）
- サブテキスト：薄い灰色（#999999）
レイアウト：
- 画面幅いっぱいのボタン（パディング16px）
- テキストは左寄せ
- セクション間のマージン：24px
フォント：
- タイトル：22px、太字
- 本文：16px、通常
- サブテキスト：14px、通常」
:::tip デザインを具体的に指定する際は、以下を含めてください：
- 色コード（RGB値またはカラーコード）
- フォントサイズ（ピクセル単位）
- パディング・マージン（具体的なピクセル値）
- レイアウト（フレックスボックス、グリッドなど）
- 影やボーダー（あれば） :::
Q4: 既存コードの修正指示が通らありません。AIが無視したり、部分的にしか反映されません
A: 既存のコードを修正する場合、AIにどの部分を変更するのか、なぜ変更する必要があるのかを明確に指示する必要があります。
よくあるミス
悪い例：「このコードを改善してください」
→ AIは何を改善すべきかわからない
悪い例：「ボタンの色を赤くしてください」
→ 複数のボタンがある場合、どのボタンを指すのか不明確
解決方法：具体的な指示を与える
良い例：「メイン画面の『送信』ボタンの背景色を赤（#FF0000）に変更してください。
現在は青（#007AFF）です。ボタンのテキストは白のままにしてください。」
または、コードを指定する場合：
「以下のコンポーネントのボタンスタイルを変更してください：
// 現在のコード
<Button style={{ backgroundColor: '#007AFF' }}>
送信
</Button>
// 変更後
<Button style={{ backgroundColor: '#FF0000' }}>
送信
</Button>」
:::warning 修正指示をする際は、「何を」「どのように」変更するのか、できるだけ具体的に指定してください。複数の変更が必要な場合は、番号を付けてリスト化すると良いです。 :::
Q5: データベース連携の指示がうまくいきません。APIコールが実装されていません
A: データベースやAPI連携に関する指示は、接続先のサービス、データスキーマ、認証方法を明確に指定する必要があります。
データベース連携の指示が曖昧な例
悪い例：「ユーザーデータをデータベースに保存してください」
→ どのデータベース？Firebase？MongoDB？PostgreSQL？
→ どの情報を保存？全部？
解決方法：具体的なバックエンド指定
良い例：「Firebase Realtime Database を使用して、以下の実装をしてください：
1. ユーザーがタスクを入力して『追加』をクリックすると、
Firebaseのタスクコレクションに保存されます。
2. 保存するデータ：
{
id: "unique-id",
title: "タスクのタイトル",
completed: false,
createdAt: "2026-03-21T10:00:00Z"
}
3. 初期化：
- Firebase接続情報は環境変数から読み込む
- プロジェクトID: com.example.app
4. エラーハンドリング：
- 保存に失敗した場合、ユーザーに「保存に失敗しました」と表示」
:::tip データベース連携の指示をする際は：
- バックエンドサービス名を明記（Firebase、Supabase等）
- 保存するデータ構造をJSON形式で示す
- 認証方法を指定（APIキー、トークンなど）
- エラーケースをカバーする :::
Q6: アニメーション/ジェスチャーの指定が無視される。静的なUIが生成されました
A: アニメーションやジェスチャーに関する指示は、具体的な動作と期間を指定しないと実装されません。
アニメーション指定が曖昧な例
悪い例：「スムーズなアニメーションを追加してください」
→ どのような動き？フェードイン？スライド？
→ どの要素に？
→ どのくらいの期間？
解決方法：具体的なアニメーション指定
良い例：「以下のアニメーションを実装してください：
1. 画面ロード時：
- リストのアイテムが下からフェードインする
- アニメーション期間：500ms
- 各アイテムは100msずつ遅延
2. ボタンタップ時：
- ボタンが0.9倍にスケールして、0.1秒で元に戻る
- ボタンの背景色が0.3秒かけて変わる
3. スワイプジェスチャー：
- 左右にスワイプしたら画面が切り替わる
- スワイプが終わったら、その方向にスライドアニメーション
- アニメーション期間：300ms」
:::warning アニメーション指定をする際は、以下を含めてください：
- 開始時点と終了時点の状態
- アニメーション期間（ミリ秒）
- イージング関数（easeInOut、linearなど）
- トリガー（ロード時、タップ時など） :::
Q7: 生成されたコードに TypeScript エラーが含まれています
A: Rorkが生成するコードはTypeScript対応ですが、型定義が不完全な場合があります。
TypeScript エラーの一般的な原因
// 悪い例：型が定義されていない
const handlePress = (data) => { // 'data' の型が不明
setData(data);
};
// 型エラー：Property 'name' does not exist on type 'never'
const user = undefined;
console.log(user.name); // エラー解決方法1：AIに型定義を指定する
良い例：「TypeScript を使用してください。以下の型を定義してください：
interface Task {
id: string;
title: string;
completed: boolean;
createdAt: Date;
}
interface User {
id: string;
name: string;
email: string;
}
すべての関数の引数と戻り値に型を指定してください。」
解決方法2：生成後に型エラーを修正する
生成されたコードにTypeScriptエラーが含まれていた場合は、以下のように指示します：
「TypeScript エラーを修正してください：
エラー：Property 'name' does not exist on type 'unknown'
以下のコードを修正してください：
const handleUserData = (data: unknown) => {
console.log(data.name); // エラー
};
修正後：
interface UserData {
name: string;
email: string;
}
const handleUserData = (data: UserData) => {
console.log(data.name); // OK
};」
:::tip TypeScript エラーを回避するため、初期プロンプトで「すべての値に型を指定してください」と明記することが良い習慣です。 :::
全体を振り返って
Rork の AI プロンプトを上手に書くコツは：
- 具体的かつ詳細に — 曖昧さを避け、あなたが望むことをすべて明記する
- 段階的に — 大きな機能を小分けにして、1ステップずつ実装
- デザインを正確に指定 — 色コード、サイズ、レイアウトをすべて数値で指定
- バックエンド要件を明確に — どのサービスを使う、どのデータ構造か
- コード修正には前後比較を — 何をどのように変更するか具体的に示す
- アニメーションは動作を詳述 — 開始・終了状態、期間、トリガーを指定
- 型定義をリクエスト — TypeScript エラーを減らすために、最初から型を指定
これらの原則に従えば、AIが生成するコードの品質が大幅に向上し、修正に費やす時間を大幅に削減できます。プロンプト技法は経験を通じて向上しますので、失敗を恐れずに、試行錯誤を重ねてください。