「プロンプトを入力したら思ってたのと全然違うUIが出てきた」という経験は、Rork を使い始めたほぼ全員が通る道ではないでしょうか。私も最初の数週間は、生成されたUIをほぼ全部手直ししていました。
転機になったのは、Rork の AI がプロンプトをどう解釈しているかを意識し始めたことです。Rork はプロンプトから「何を作るか」だけでなく「どんなユーザーが使うか」「どんな操作を想定するか」を推定しようとします。その推定を助ける情報を渡してあげると、生成結果が劇的に変わります。
「機能」ではなく「ユーザーの操作」で伝える
最もよくある間違いは、機能の名前だけでプロンプトを書くことです。
❌ うまくいかない例：
タスク管理リストを作って
✅ うまくいく例：
ユーザーが毎日朝に今日やることを3〜5件入力して、
完了したらチェックを入れて消していくリストを作って。
優先度は設定しない。シンプルに使えることが重要。
違いは「誰が・いつ・どう使うか」が含まれているかどうかです。Rork はこの情報を使ってコンポーネントのサイズ感、タップターゲットの大きさ、インタラクションのシンプルさを判断します。
フォーム系 UI のプロンプトに必要な要素
フォームは最もプロンプトの書き方で結果が変わるコンポーネントです。以下の情報を含めるだけで、生成結果が大きく安定します。
必須情報:
- 入力フィールドの種類と数（テキスト、数値、日付、選択など）
- バリデーションが必要かどうか
- 送信後の動作（次の画面に移動、一覧に追加、など）
- フォームを使う文脈（登録フロー途中、設定画面、など）
プロンプト例:
商品の在庫追加フォームを作って。
フィールド：商品名（テキスト・必須）、数量（整数・1以上）、
保管場所（テキスト・任意）
送信すると一覧画面に戻って新しい商品が先頭に追加される。
エラー時はフィールドの下に赤いメッセージを出す。
このように書くと、Rork はバリデーションロジック、エラー表示、送信後のナビゲーションを含む実用的なフォームを一度で生成することが多くなります。
リスト系 UI での「空状態」の指定
リストコンポーネントで Rork が一番よく省略するのが「空状態」の表示です。データが0件のときに何も表示されないと、UIとして未完成に見えます。
購入履歴のリストを作って。
各アイテム：商品名、購入日、金額
タップで詳細画面に遷移する。
履歴がない場合は「まだ購入履歴がありません」とアイコン付きで表示する。
「空の場合は〜」という一文を加えるだけで、Rork は EmptyState コンポーネントを自動的に組み込みます。これを後から追加する手間と比べると、最初から指定した方が明らかに速いです。
カード UI でのレイアウト優先度の伝え方
カードコンポーネントは情報の「重み付け」をプロンプトで伝えるのが重要です。Rork は「何が一番目立つべきか」を明示されないと、全要素を均等なサイズで並べがちです。
レシピカードを作って。
・レシピ名を大きく一番上に（ここが一番重要）
・サムネイル画像を右側に正方形で
・調理時間と難易度を小さいバッジで
・「詳しく見る」ボタンを一番下に
「〜が一番重要」「〜を大きく」のような視覚的な優先度のヒントを入れると、タイポグラフィのサイズ比が意図通りになります。
複数画面の遷移をまとめて指定する
一画面ずつ別々のプロンプトで作るより、関連する複数画面をまとめて指定する方が、Rork の内部で一貫したデータモデルを持てるため、画面間のデータの受け渡しが自動で設計されます。
家計簿アプリの収支入力〜一覧表示の2画面を作って。
画面1（入力）：
- 金額（数値）、カテゴリ（支出/収入の選択）、メモ（テキスト・任意）
- 「記録する」ボタンで画面2に戻る
画面2（一覧）：
- 今月の合計収支をヘッダーに表示
- 入力した記録を新しい順でリスト表示
- 右上のプラスボタンで画面1に遷移
このようにアプリの文脈全体を渡すと、Rork は useState や useEffect の位置、データの持ち方を最初から一貫性を持って設計します。後から「やっぱりデータを共有したい」となってリファクタリングする手間が大幅に減ります。
「これは変えないでほしい」を明示する
生成後に一部だけ修正したいとき、指示が曖昧だと Rork が関係ない部分まで変えてしまうことがあります。
リストアイテムのスタイルだけ変えて。
背景を白、テキストを濃いグレー、左側に細いボーダーライン。
全体のレイアウトとナビゲーションは触らないで。
「〜は触らないで」という制約を添えると、変更範囲が局所化されます。特に既存の動作が正しく動いている部分がある場合、この一文があるかないかで修正の精度が大きく変わります。
プロンプトを再利用可能なテンプレートにする
同じパターンのUIを複数のアプリで使う場合、プロンプトをテンプレート化しておくと作業速度が上がります。
【カテゴリ選択コンポーネントのテンプレート】
[カテゴリ名]のカテゴリ選択UIを作って。
選択肢：[A], [B], [C], [D]
選択後：[次の動作]
スタイル：横スクロール可能なチップ型
未選択時はグレー、選択時はブランドカラーで塗りつぶし
[] の部分を案件ごとに書き換えるだけで使い回せます。私は Notion のテンプレートブロックでこれを管理していて、新しいアプリを作るときの立ち上がりが体感で2倍くらい速くなりました。
試して分かったこと
Rork は「あいまいな指示でも何か作ってくれる」ツールですが、そこで止まっているともったいないです。ユーザーの操作文脈・データの流れ・優先度・空状態 を意識してプロンプトを書くと、生成結果の修正量がかなり減ります。
まず一つ、今作っているアプリの中で「毎回手直ししている部分」のプロンプトを見直してみてください。たいていの場合、「誰が・いつ・どう使うか」の情報を追加するだけで改善します。