Rork AI で画面を生成していると、「イメージ通りの UI がなかなか出てこない」と感じる瞬間が必ずあります。何度もやり直して、最終的に妥協したレイアウトで手動調整に入る — これを繰り返していると、生成 AI の意味がどこにあるのかわからなくなりますよね。
私もしばらく同じループにハマっていたのですが、プロンプトの書き方を「意図中心」から「制約中心」に切り替えた瞬間から、生成結果の精度が明らかに変わりました。今回は、私が Rork AI を日常的に使っている中で効果を実感した7つのプロンプトテクニックを、失敗例と改善例のペアで紹介します。
1. 「どんな画面か」より先に「何を制約したいか」を書く
まず最初に伝えるべきは、画面の目的ではなく制約条件です。Rork AI は自由度が高いので、制約を最初に与えないと勝手な判断で要素を増やされることがあります。
❌ 「商品詳細画面を作って。写真と値段と購入ボタンが必要」
✅ 「スクロールなしでファーストビューに収まる商品詳細画面。
カード構成は上から：ヒーロー画像（高さ画面の40%）、
タイトル、価格、1行の説明、購入ボタン。それ以外の要素は追加しない」
下の書き方だと、AI は要素を勝手に増やしません。「レビュー欄も入れとくね」「関連商品もあった方がいいよね」という余計な親切を止めさせるには、明示的な境界線が必要です。
2. 固定値は単位まで指定する
色・サイズ・間隔を指示するときは、必ず単位を添えてください。「大きめ」「余白多め」のような曖昧語は、Rork AI がデフォルト値を推測してしまう温床になります。
❌ 「ボタンは大きめにして」
✅ 「ボタンは高さ 52px、パディング 上下12/左右20、
角丸 12px、フォントサイズ 16px」
数値で伝えると、生成結果を手動で微調整する回数が劇的に減ります。私は自分のデザインシステムの「ボタンサイズ基準」をメモ帳に常備しておいて、プロンプトにそのまま貼り付けるようにしています。
3. 「よくあるパターン」を参照名で呼ぶ
Rork AI は有名なデザインパターンを名前で認識できます。具体的なアプリ名やパターン名を出すと、ゼロから説明するよりも精度が上がります。
✅ 「Instagram のフィード風のカードレイアウト。
上部アバター＋ユーザー名、中央に画像、下部にアクションアイコン（ハート・コメント・シェア・保存）」
✅ 「iOS の設定アプリ風のセクション型リスト。
グレー背景のセクションヘッダーと、白背景の行をグループ化」
これは一種のリファレンス共有で、ゼロから要素を並べるよりも意図が正確に伝わります。ただし、「〜風」と言いすぎると似すぎて権利的に怪しくなるので、あくまで構造パターンの参照に留めるのがコツです。
4. 「入らない要素」も明示する
良いプロンプトは、入れる要素だけでなく「入れない要素」も伝えます。AI は空白を埋めたがる傾向があるので、意図しない追加を防ぐには明示的な否定が効きます。
✅ 「ローディング画面を作って。
画面中央に回転するスピナーと『読み込み中』の文字のみ。
ロゴ、進捗バー、キャンセルボタンは含めない」
私は複雑な画面ほど「〜を含めない」リストを長く書くようにしています。これは引き算のデザインを AI に守らせる唯一の確実な方法です。
5. レスポンシブの挙動を具体的に書く
「レスポンシブ対応で」と書くだけでは、AI が各画面サイズで何をするか分かりません。ブレイクポイントと各画面での挙動を明示してください。
❌ 「レスポンシブ対応の画面を作って」
✅ 「2カラムレイアウト。
- 画面幅 768px 以上：左カラム 60%／右カラム 40%
- 画面幅 768px 未満：1カラムに縦積み、右カラムが下に来る」
モバイルアプリに限っていえば、「横向き・縦向き」で挙動を分ける指示も頻繁に使います。タブレット対応を謳うアプリでは特に、AI に任せきりだと iPad での見栄えが崩れがちです。
6. インタラクションは「前・中・後」の3状態で伝える
ボタン・スワイプ・長押しなどのインタラクションは、状態遷移を3つに分解して伝えると AI が正確に実装してくれます。
✅ 「購入ボタンのインタラクション：
- 前（通常状態）：青背景、白文字『購入する』
- 中（タップ中）：0.95倍にスケール、透明度 0.8
- 後（決済完了）：緑背景、白文字『✓ 完了』、1.5秒後にモーダルを閉じる」
この書き方をすると、ハプティックフィードバック・トランジション時間・完了後の遷移を含めて整合性のあるコードが出てきます。「タップしたときにいい感じに」ではなく、各フェーズを具体化するのが鍵です。
7. 生成後のチェックリストを自分でも用意する
最後は生成後の話ですが、プロンプトに組み込めます。「出来上がった画面をこの観点で自己検証してください」と指示すると、AI が自分で矛盾を直してくれることがあります。
✅ 「このプロンプトを実行した後、以下を確認して修正してください：
- すべてのテキストは 16px 以上か
- タップ可能な要素は 44x44 以上か
- コントラスト比は WCAG AA（4.5:1）以上か」
これはすべての生成に効くわけではありませんが、アクセシビリティに関わる部分は私の肌感で7割程度の確率で自動修正が入ります。AI 生成 UI のアクセシビリティ不足は実機テストで気づきにくい問題なので、プロンプト段階で釘を刺しておくのは有効です。
全体を振り返ってて使うテンプレート
上記7つを組み合わせたプロンプトのテンプレートを、私は次のような形で常備しています。
【目的】〜
【制約（最重要）】〜
【含めない要素】〜
【固定値】色・サイズ・間隔を単位付きで
【パターン参照】〜風（構造のみ）
【レスポンシブ】各ブレイクポイントの挙動
【インタラクション】前・中・後の3状態
【検証】アクセシビリティ観点で自己チェック
このテンプレートを使うと、Rork AI の生成結果が「8割は使える」状態から「ほぼそのまま使える」状態に変わります。
次に試すこと
最初は全部盛りにせず、まず「1. 制約を最初に書く」と「4. 入らない要素を明示する」だけで試してみてください。この2つだけでも、生成結果の精度は体感で2倍近く変わります。そこから必要に応じて他のテクニックを足していくのが、無理なく身につく順番です。