「このデザインで作って」とプロンプトを送ったのに、なんか違う——Rork を使い始めた人が最初につまずくのは、だいたいここだと思います。
私自身も最初はそうでした。頭の中にイメージはあるのに、生成されたUIがどこかズレています。再度プロンプトを送ってみても、今度は別の方向に変わってしまう。この「試行錯誤の泥沼」から抜け出せなくなる感覚、経験した方も多いのではないでしょうか。
実はこの問題、Rork の能力の問題ではなく、プロンプトの「伝え方」の問題であることがほとんどです。いくつかのパターンを意識して書き方を変えるだけで、生成精度がぐっと上がります。ここでは私が実際に経験した失敗と、それを改善したプロンプトのパターンを3つご紹介します。
パターン1：「なんとなくいい感じに」は通じない — 抽象表現をやめる
最もよくある失敗が、抽象的な言葉でデザインを指示することです。
❌ うまくいかないプロンプト例
「おしゃれなホーム画面を作ってください」
「シンプルで使いやすいUIにしてください」
「モダンなデザインにしてください」
「おしゃれ」「シンプル」「モダン」は人によってイメージが違います。Rork の AI も同様で、こうした言葉では出力がブレやすくなります。
改善のポイントは、視覚的・構造的な具体性を持たせることです。
✅ 改善したプロンプト例
「ホーム画面は以下の構成にしてください：
- 上部：挨拶テキスト（ユーザー名入り）+ アバター画像
- 中央：今日のタスク一覧（最大5件、チェックボックス付き）
- 下部：固定のタブバー（ホーム・追加・プロフィールの3タブ）
背景は白、アクセントカラーは青系（#2563EB）で統一してください」
要素の配置・数・色・UI部品名を具体的に書く。これだけで生成結果が安定します。
「シンプル」と言いたいなら「要素数を少なくして、余白を多めに取ってください」と言い換えてみましょう。主観的な形容詞を、客観的な仕様に変換するのがコツです。
パターン2：1度のプロンプトで全部やろうとしない — 分割して指示する
「ログイン画面・ホーム画面・詳細画面・設定画面を全部作ってください」という指示を送ったことがあります。結果は、どの画面も中途半端な出来でした。
Rork の AI は、複数の画面や複雑な要件を1つのプロンプトで処理しようとすると、各要素への注意が分散してしまいます。
❌ 一度に詰め込みすぎた例
「会員登録フロー（メール・パスワード・プロフィール設定の3ステップ）と
ホーム画面（タイムライン・フィード・通知バッジ付き）と
プロフィール画面（編集・フォロワー数表示・投稿一覧）を
全部作ってください。デザインはミニマルで。」
これは3画面分の指示を1つに詰め込んでいます。改善するには、1プロンプト・1画面を基本にします。
✅ 分割した例（ステップ1）
「まず会員登録の1画面目（メールアドレスとパスワードの入力フォーム）
だけを作ってください。
- 入力フォームは中央に配置
- 「登録する」ボタンは画面下部、横幅いっぱい
- エラーメッセージ表示エリアを各フォームの下に用意
- 配色：背景白・ボタン紺（#1E40AF）・テキスト濃いグレー」
画面が完成したら「次に2画面目のプロフィール設定画面を作ってください。1画面目と同じデザイントーンで」と続けます。前の文脈を引き継いでくれるので、デザインの統一感も保てます。
アプリ全体を一気に作ろうとするより、小さく確実に積み上げていく方が、最終的に早くて質が高いものができる——これは Rork に限らず、AI を使った開発全般に言えることかもしれません。
パターン3：「なんか違う」ではなく「どこがどう違うか」を伝える — 修正指示の精度を上げる
生成されたUIが気に入らないとき、「もっとよくして」「やり直して」という指示を送ってしまいがちです。でも、これが一番変化が読めない指示です。
❌ 曖昧な修正指示
「このデザイン、なんか微妙です。もっといい感じにしてください」
「デザインを改善してください」
「全体的に見直してください」
こうした指示を送ると、Rork は独自の解釈で「改善」を試みますが、あなたが求める方向とは違う変更が加えられることがほとんどです。
修正指示は**「現状 → 問題点 → 期待する状態」**の三点セットで書くのが効果的です。
✅ 具体的な修正指示の例
「現状：カードコンポーネントのタイトルテキストが小さすぎます
問題：一覧画面で見たとき、内容が読み取りにくい状態です
修正してほしいこと：
- タイトルのフォントサイズを 14px → 18px に変更
- タイトルとサブテキストの間の余白を 4px → 8px に増やす
- カード全体の高さが変わっても、一覧のレイアウトは崩さないでください」
最初は「こんなに細かく書かないといけないの？」と思うかもしれませんが、慣れてくると自然とこの形式で書けるようになります。そして、修正のやり取りが劇的に減ります。
3パターンをまとめて使う：実際の改善例
以上の3パターンを組み合わせると、こんな流れになります。
シナリオ：メモアプリのホーム画面を作る
# Step 1（最初の指示 — 具体的・分割）
「メモアプリのホーム画面を作ってください。
構成：
- ナビゲーションバー：左にアプリ名「QuickNote」、右に「+」ボタン
- メモ一覧：カード形式、1枚ずつタイトル・日付・本文プレビュー（2行）を表示
- 空状態：メモが0件のとき、中央に「メモがありません」と表示
配色：背景 #F9FAFB、カード背景 #FFFFFF、テキスト #111827
フォント：タイトル 16px bold、本文プレビュー 14px regular」
# Step 2（修正指示 — 三点セット）
「現状：カード間の余白が狭くて窮屈に見えます
問題：複数のカードが並ぶと視認性が下がっています
修正：カード間の余白を 8px から 16px に増やしてください
他の部分は変更しないでください」
「他の部分は変更しないでください」という一文を添えるのも、意図しない変更を防ぐ小技です。
プロンプト改善でよく聞かれること
「毎回こんなに長く書かないといけないですか？」
慣れてきたら短くなります。最初の画面を丁寧に作ると、以降の指示で「さっきと同じトーンで」「既存のカードコンポーネントを流用して」という短い指示が使えるようになります。コンテキストが積み上がるにつれて、指示は自然と短くなっていきます。
まず1つのプロンプトを書き直してみる
プロンプトの改善は、難しい技術を習得するより、「書き方の癖を変える」作業に近いと思います。最初から完璧を目指さなくていいです。
今作っているアプリで「なんか違うな」と感じている画面があれば、まず1つだけ、今日紹介した3つのパターンで書き直してみてください。生成結果がどう変わるか、きっと体感できるはずです。
より体系的なプロンプト設計や、複雑なアプリ構造の指示方法については、Rork AI プロンプトエンジニアリング完全マスターガイドでも詳しく解説しています。