Rork Max で複雑な画面を一発で作るプロンプトの書き方

Rork Max でシンプルな画面を作るのはとても簡単です。でも「タブ付きダッシュボード」「フォームバリデーション付きの入力画面」「フィルタリングできるリスト」のような複雑な画面になると、プロンプトの書き方次第で生成される品質に大きな差が出ます。

何十回も試した経験から、「これを書くとうまくいく」というパターンが見えてきたので整理してお伝えします。

失敗するプロンプトのパターン

まず、うまくいかないプロンプトの典型例から見てみます。

ダッシュボード画面を作って。売上グラフと最近の注文リストを表示する。

このプロンプトで生成されるものは大体こうなります。売上グラフのエリアはあるけど実データがありません。注文リストはハードコードされたダミーデータが3件。レイアウトはシンプルすぎて実用的でありません。

なぜ失敗するか: Rork Max が「何を作るべきか」は理解できても、「どの品質・仕様で作るべきか」が曖昧なため、最もシンプルな解釈で実装してしまいます。

効果的なプロンプトの4要素

1. 役割とコンテキスト

最初に「このアプリは何で、画面は何のためにあるか」を宣言します。

あなたはShopifyのようなECサービスの管理アプリを開発しています。
この画面は店舗オーナーが毎朝確認する「本日のサマリー」ダッシュボードです。

2. データ構造の明示

使用するデータの型を TypeScript で書いて渡すのが最も効果的です。

// このデータを使って実装してください
interface DashboardData {
  todayRevenue: number;
  todayOrders: number;
  pendingOrders: number;
  recentOrders: {
    id: string;
    customerName: string;
    amount: number;
    status: 'pending' | 'processing' | 'shipped' | 'delivered';
    createdAt: string;
  }[];
  revenueByHour: {
    hour: number;
    revenue: number;
  }[];
}

型を見せることで、Rork Max は「何を表示すべきか」を正確に理解できます。

3. UIコンポーネントの指定

具体的な UI 要素を箇条書きで指定します。

以下のUI要素を実装してください:
- 上部に3つのサマリーカード（本日売上・注文数・保留中）
- 中央に時間別売上の折れ線グラフ（recharts使用）
- 下部に直近5件の注文リスト（ステータス別の色付きバッジ付き）
- プルリフレッシュ対応
- ローディング中はスケルトンUI表示

4. 品質基準

「普通に動けばいい」なのか「本番品質で作りたい」なのかを明示します。

品質要件:
- TypeScript で型を付ける
- エラー状態と空の状態のハンドリングを含める
- iOS/Android 両対応のスタイリング
- React Native の StyleSheet を使う（インラインスタイル禁止）

完全なプロンプト例

上記の4要素を組み合わせた実際のプロンプト例です。

ECアプリ管理者向けダッシュボード画面を React Native で実装してください。

## コンテキスト
店舗オーナーが毎朝使う売上確認画面です。一目で重要な数値が把握できるシンプルさを重視します。

## 使用するデータ型
interface DashboardData {
  todayRevenue: number;        // 例: 128500
  yesterdayRevenue: number;    // 前日比計算用
  todayOrders: number;
  pendingOrders: number;
  recentOrders: Array<{
    id: string;
    customerName: string;
    amount: number;
    status: 'pending' | 'processing' | 'shipped' | 'delivered';
    createdAt: string;
  }>;
}

## UIコンポーネント
1. ヘッダー: 今日の日付と「おはようございます」の挨拶
2. サマリーセクション（横並び3カード）:
   - 本日売上（前日比の矢印表示付き）
   - 本日注文数
   - 保留中注文数（赤いバッジ）
3. 直近注文リスト（5件）:
   - ステータス別のカラーバッジ（pending=yellow, processing=blue, shipped=green, delivered=gray）
   - 金額と顧客名
4. 画面下部に「すべての注文を見る」ボタン

## 品質要件
- TypeScript、型を全箇所に付ける
- ローディング状態はActivityIndicatorで
- 注文が0件の場合の空状態UIを含める
- StyleSheetを使う、インラインスタイル禁止
- アクセシビリティ: accessibilityLabel を主要要素に設定

## モックデータ
コンポーネント内にサンプルデータを用意して動作確認できる状態にしてください。

このレベルのプロンプトを書くと、最初の生成物がかなり使える状態になります。

反復改善のコツ

一発で完璧な画面ができることはほぼないので、反復改善のプロンプトの書き方も重要です。

悪い反復プロンプト（具体性がない）:

なんかもっとかっこよくして

良い反復プロンプト（具体的な差分を指示）:

以下の修正をしてください:
1. サマリーカードの角丸を8から12に変更
2. 前日比の矢印アイコンを react-native-vector-icons の Ionicons に変更（up-arrow/down-arrow）
3. ステータスバッジのフォントサイズを10から11に
4. ローディング時のActivityIndicatorをカスタムのスケルトンUIに変更（各カードの高さに合わせた灰色のプレースホルダー）

変更箇所を番号付きリストで渡すと、Rork Max が的確に差分を当ててくれます。

プロンプトの長さと品質のバランス

長いプロンプトが必ずしも良いわけではありません。経験上、以下のバランスが効果的です。

200文字以下のプロンプトでは、ほぼ必ずシンプルすぎる実装が返ってきます。400〜800文字のプロンプトがベストゾーンで、詳細すぎず、でも必要な情報が揃っています。1000文字を超えると、Rork Max が指示に忠実すぎて冗長なコードを生成することがあります。

データ型の TypeScript 定義を含めることで文字数は増えますが、それは有益な追加なので例外です。

全体を振り返って

Rork Max はプロンプトを「設計書」として渡すことで本領を発揮します。「作ってほしいものの形」を具体的に伝えるほど、手直しの回数が減ります。最初の10〜20回のプロンプトで試行錯誤するより、最初から丁寧に書いたほうが結果的に速い——これを実感してから、プロンプト設計に時間をかけることに躊躇がなくなりました。

12年の個人開発で見えてきたこと

リリース直後にチェックしているもの

クラッシュレポートの上位エラーを24時間ごとに確認しているか
AdMob/StoreKit の収益ダッシュボードに異常検知が出ていないか
ユーザーレビューに技術的な指摘が含まれていないか