◈ Rork入門/2026-06-19中級

Rork のプロンプトの書き方 — 思い通りのアプリを作るための指示のコツ

Rorkに出すプロンプトの基本構造を、機能要件・デザイン・技術要件の3つの層に分けて解説します。家計管理アプリなどの具体例を通じて、UIの指定方法や修正の頼み方を示し、同じ依頼で毎回違う結果が返ってくる問題を減らす書き方を紹介します。実例のプロンプトはそのまま流用できます。

Rork⁵⁴⁸ プロンプト⁹ 書き方コツアプリ設計⁶ UI⁹ 指示

✦ プレミアム記事

個人開発でアプリを作っていると、Rork に同じような指示を出しても、ある日は理想に近い画面が返ってきて、別の日は妙に平凡なものが出てくる、ということがあります。私自身、服薬管理アプリの画面を作っていたとき、まったく同じ機能を二度頼んで別物が返ってきた経験があり、しばらく原因が分かりませんでした。

行き着いた答えは単純でした。Rork は「指示の隙間」を自分の判断で埋めるツールだ、ということです。隙間が多いほど、返ってくるものは一般的で無難になります。

逆に言えば、隙間を減らす書き方さえ身につければ、出力は驚くほど安定します。ここからは、私が個人開発の現場で実際に使っているプロンプトの組み立て方を、具体例と失敗例を交えてお伝えします。

プロンプトの基本構造

良いプロンプトには「構造」があります。

テンプレート：

# アプリの全体概要
[簡潔な説明]

## 機能要件
- [機能1]
- [機能2]
- [機能3]

## デザイン
- [UIスタイル]
- [色合い]
- [レイアウト]

## 技術要件
- [使うテクノロジー]
- [特別な要件]

## 詳細な指示
[特に大切な指示]

では、具体例で見ていきましょう。

例 1: 家計管理アプリ

悪いプロンプト例

家計管理アプリを作ってください。

この指示の問題点：

UI イメージが伝わらない
「何ができるアプリ」なのか不明確
Rork が「一般的な家計管理アプリ」を作ってしまう

良いプロンプト例

# 家計管理アプリ "My Budget"

シンプルで使いやすい家計管理アプリ。日々の支出を記録し、月ごとの予算管理ができます。

## 主な機能
- 支出の登録（金額、カテゴリ、日時、メモ）
- カテゴリ別の支出合計表示
- 月ごとの支出グラフ表示
- 予算設定と超過警告

## 画面構成
### ホーム画面
- 当月の総支出（大きく表示）
- 予算との比較（プログレスバー）
- 最近の支出リスト（5件表示）

### 支出登録画面
- 金額入力欄
- カテゴリ選択（食費、交通費、娯楽、その他）
- 日付選択
- メモ入力
- 登録ボタン

### 分析画面
- 円グラフ（カテゴリ別支出）
- 棒グラフ（月別推移）
- カテゴリ別の詳細表示

## デザイン要件
- カラースキーム：青と白をメイン、アクセントに緑
- フォント：シンプルで読みやすい
- ボタン：角丸、タップしやすい大きさ
- 配置：シンプルで直感的

## 特に重要な点
- ユーザーが頻繁に支出を登録するので、登録画面は3タップで完了できるように
- 予算超過時は警告をしっかり表示（赤色）
- モバイル優先のデザイン

## 技術要件
- React Native/Flutter で実装
- ローカルストレージにデータ保存

この指示の良い点：

画面構成が明確
各画面の要素が具体的
デザインのトーンが伝わる
ユーザーの利用シーンが見える

✦

ここまでお読みいただきありがとうございます。

この記事の続きを読む

この先には、実装コードやベンチマーク結果など、実務でお役に立てる内容をご用意しています。このサイトは広告を掲載しておらず、サーバーや開発にかかる費用はメンバーの皆様のご支援で成り立っています。もしお役に立てていましたら、ご支援いただけますと大変ありがたいです。

この記事で得られること

✦出力がぶれる原因を『判断の余白』として捉え、指示前に潰す4つの問い（状態・順序・結果・境界）

✦既存の作り込みを壊さずに直す『1指示1関心事』のスコープ設計と、変更禁止範囲の書き方

✦音声入力（Typeless）と個人辞書を組み合わせ、長いプロンプトの作成時間を短縮する実運用フロー

Stripe による安全な決済 · いつでもキャンセル可能

✦

この記事を購入する

この先の内容をすべてお読みいただけます。一度のご購入で、いつでも何度でもアクセスできます。このサイトは広告を掲載しておらず、皆さまのご支援がサーバー費用などの運営を支えています。

または

メンバーシップなら全記事が読み放題 →

例 2: SNS シェアボタン付きメモアプリ

悪いプロンプト

メモアプリを作ってください。SNS シェア機能も付けて。

良いプロンプト

# シンプルメモアプリ "Quick Notes"

思いついたことをすぐに記録でき、SNS で友達とシェアできるメモアプリ。

## 主な機能
- テキストメモの作成・編集・削除
- メモの保存と表示
- Twitter / LINE / Facebook へのシェア
- メモの色分け（重要度別）
- 検索機能

## メイン画面
- 上部：新規メモボタン（大きく）
- 中央：メモ一覧（カード形式、3列グリッド）
- 各カード：
  - メモのプレビュー（最初の100字）
  - 色分けバー（赤=高優先度、黄=中、緑=低）
  - 作成日時
  - シェアボタン、編集ボタン、削除ボタン

## メモ編集画面
- 上部：タイトル入力欄
- 中央：本文入力欄（大きく、スクロール可）
- 下部：
  - 優先度選択（ドロップダウン）
  - 保存ボタン
  - キャンセルボタン

## シェア機能
- 各メモに「シェア」ボタン
- クリックするとシェア先を選択（Twitter/LINE/Facebook）
- メモのテキスト + アプリのリンクを自動生成
- テキストも編集できるように

## デザイン要件
- ミニマリスト的、白背景
- アクセント色：オレンジ
- タイポグラフィ：モダンで読みやすい
- ボタン：グラデーション、ホバー時に薄くなる
- レスポンシブ対応

## 特に重要
- メモ保存は自動保存（ユーザーは「保存」ボタンを押さなくても自動で保存）
- シェア機能は複雑にしない（1クリックでシェア画面へ）
- 検索は即時反応（入力するたびにリアルタイム検索）

修正指示の書き方

作成してもらったアプリが「思ったのと違う」場合、修正指示が大切です。

悪い修正指示

もっとかっこよくして

問題点：

「かっこいい」が何を意味するか不明確
Rork が何をしたらいいか判断できない

良い修正指示

以下の修正をお願いします：

1. ボタンの色
   - 現在：青
   - 希望：深いオレンジ色（#FF6B35）
   - 理由：アプリ全体をもっと暖かみのある印象に

2. メモカードのレイアウト
   - 現在：3 列グリッド
   - 希望：メモをカード型で、1 行に 2 個（モバイルでは 1 個）
   - 理由：もっと空間的に見やすく

3. 検索バー
   - 現在：上部に小さく
   - 希望：もっと目立つように、ページ上部に大きく配置
   - 理由：検索を重視したいので

4. メモ削除時
   - 現在：即座に削除
   - 希望：「本当に削除しますか？」の確認ダイアログを表示
   - 理由：誤削除を防ぐため

この指示の良い点：

現在の状態と希望が明確
理由が説明されている
具体的な要素が指定されている

UI/UX指定のコツ

Rork で高品質なアプリを作るには、UI の指示が重要です。

色指定の方法

悪い例：

見た目を青系に

良い例：

カラースキーム：
- メイン色：#0066CC（深い青）
- サブ色：#E8F4F8（薄い青）
- アクセント色：#FF6B35（オレンジ）
- テキスト：#333333（濃いグレー）
- 背景：#FFFFFF（白）

使い方：
- ボタン：メイン色
- ホバー時：メイン色を少し濃くした色
- 警告：赤色（#FF4444）

レイアウト指定の方法

悪い例：

見やすくしてください

良い例：

レイアウト：
- ヘッダー：固定、高さ60px
- メイン：ヘッダー下から画面下まで
- フッター：画面下部に固定

要素の配置：
- タイトルと検索バー：ヘッダー内
- コンテンツ：メイン領域
- ナビゲーション：フッター

余白：
- 要素間：16px
- ページ端：20px

フォント指定の方法

悪い例：

読みやすいフォントで

良い例：

フォント指定：
- 見出し：Bold, 24px, 行高さ 1.2
- 本文：Regular, 16px, 行高さ 1.5
- ボタン：Bold, 14px

フォントファミリー：
- 見出し：Montserrat (モダン)
- 本文：Open Sans (読みやすい)

機能指定のコツ

悪い機能指定

メモを共有できるようにして

良い機能指定

メモ共有機能：

1. シェア方法
   - 各メモの「シェアボタン」をクリック
   - 共有先を選択（メール、LINE、Twitter）

2. 共有内容
   - メモのテキスト全文
   - メモのタイトル
   - 「このアプリで作成しました」という署名とリンク

3. ユーザー体験
   - ワンクリックで共有ダイアログ表示
   - 共有前にテキスト編集可能
   - キャンセルボタンで戻れる

4. 制限
   - 1000文字以上のメモはプレビューのみ共有（全文は不可）

段階的な開発フロー

Rork を最大限活用するには、一度に全要件を言わず、段階的に開発するのが効果的です。

フェーズ 1: 基本機能

プロンプト：

基本的なメモアプリの MVP（最小限の実装可能版）を作成してください。

機能：
- メモ新規作成
- メモ表示
- メモ編集
- メモ削除

UI は最小限でいいです。機能が動くことを優先。

フェーズ 2: UI 改善

プロンプト：

基本的な機能は完成しました。
次に UI を改善してください。

指定：
- デザイン：モダンで、青と白
- レイアウト：シンプルなグリッド表示
- 色：メイン色 #0066CC

以下のファイルの UI を改善してください：
- メイン画面
- メモ編集画面

フェーズ 3: 高度な機能

プロンプト：

デザインも完成しました。
次に以下の機能を追加してください：

- メモの検索
- メモの色分け
- SNS シェア

この段階的アプローチにより、各フェーズで高品質な修正ができます。

よくある間違いと対策

間違い 1: 指示が曖昧すぎる

「いい感じに」「カッコよく」「使いやすく」

対策：具体的に。色番号、サイズ、位置を数字で指定。

間違い 2: 要件を詰め込みすぎる

100個の機能を一度に指示

対策：段階的に。基本 → UI → 高度な機能。

間違い 3: 修正指示が短すぎる

「ボタンを赤にして」（赤の定義なし）

対策：色番号（#FF0000）など、正確に。

間違い 4: 否定文を使ってしまう

「ボタンを大きく見せないで」

対策：肯定文で。「ボタンを medium サイズで」。

実践例：本当の修正フロー

では、実際の修正フロー（例）を示します。

初期プロンプト：

家計管理アプリを作ってください。
支出登録、月別グラフ表示、カテゴリ別集計ができます。

最初の修正（Rork が作成）： 基本的なアプリができるが、UI が「一般的」。

修正指示 1：

以下の UI 改善をお願いします：

1. ホーム画面の「今月支出」
   - 現在：小さなテキスト
   - 希望：画面の 40% を使って大きく表示
   - フォントサイズ：48px
   - 背景：グラデーション（#0066CC → #00D4FF）

2. カテゴリアイコン
   - 食費：🍔 のような絵文字
   - 交通費：🚗
   - 娯楽：🎬
   - その他：📦

修正指示 2：

ナビゲーションを改善してください：

1. 画面下部に固定タブ追加
   - ホーム
   - 分析
   - 登録
   - 設定

2. 現在のページはハイライト表示

修正指示 3：

支出登録画面で、よく使うカテゴリを上部に表示してください。

実装：
- ユーザーが登録したカテゴリの中で、「よく使う Top 3」を上部に
- クイック登録できるように
- その下に「全カテゴリ」選択肢を配置

このように、段階的に修正していくことで、最終的に「思い通りのアプリ」ができます。

プロンプトを書く速度を上げる — 音声入力という選択肢

ここまで読んで、「良いプロンプトは長い」と感じた方もいらっしゃるかもしれません。

実際、画面構成やデザイン要件まで丁寧に書くと、1回の指示が数百字になることは珍しくありません。個人開発では仕様書を書く相手も自分だけですから、つい省略してしまいがちです。私自身、頭の中ではアプリの完成像が見えているのに、それを文字にする段階で手が止まってしまうことがよくありました。

そこで取り入れているのが、AI音声入力アプリ「Typeless」を使った下書きづくりです。

話した内容が「そのまま使える指示」になる

Typeless は単に音声を文字へ変換するだけではありません。「あの〜」「えっと」といったフィラーを自動で取り除き、句読点まで整えた状態のテキストにしてくれます。

話した言葉：
「あのね、えっと、ユーザーが商品を検索するときに、キーワード以外に、あ、カテゴリーでもフィルターできるようにしたいんですよ」

変換後のテキスト：
「ユーザーが商品を検索するときに、キーワード以外にカテゴリーでもフィルターできるようにしたい」

変換後の文章は、そのまま Rork に貼り付けて通じる品質になっています。

個人辞書に開発用語を登録しておく

Rork、Figma、Supabase といったツール名や、プロジェクト固有の機能名は、一般的な音声認識では誤変換されがちです。Typeless には個人辞書の機能があり、よく使う用語を登録しておくと認識精度が上がります。

私は新しいプロジェクトを始めるたびに、画面名と主要機能の名前を先に登録するようにしております。これだけで誤変換を直す手間がかなり減りました。

使い分けの目安 — 音声が向く場面・キーボードが向く場面

ただし、すべてを音声にすればよいわけではありません。使ってみて感じた向き不向きを整理します。

音声入力が向く場面：

アプリの全体概要や機能要件など、文章で説明する部分
「シェアボタンを押したときの動き」のような挙動の説明
散歩中や移動中に思いついた修正アイデアのメモ

キーボードが向く場面：

カラーコード（#0066CC）やフォントサイズ（48px）などの正確な数値
テンプレートの見出し構造そのもの
コード片を含む指示

つまり、本記事で紹介したテンプレートの「枠」はキーボードで用意しておき、各項目の中身を音声で流し込む、という組み合わせが実用的です。要件を話して埋めたあと、数値だけ手で直す。この流れにしてから、プロンプト作成にかかる時間は体感で半分以下になりました。

Typeless は iOS / Android の両方で無料から使えますので、長いプロンプトを書くのが億劫に感じている方は一度試してみてください。

なぜ同じ指示でも結果がぶれるのか

Rork を使っていて最初に戸惑うのは、出力の「ぶれ」です。

同じ機能を頼んでも、丁寧な画面が返ってくる日と、ありふれた画面が返ってくる日があります。これは Rork の気まぐれではありません。指示の中に「Rork が自分で決めてよい余白」がどれだけ残っているか、その差です。

たとえば「リスト画面を作って」とだけ伝えると、Rork は次のような問いに自分で答えを埋めます。

1件あたり何の情報を出すのか
並び順は新しい順か、名前順か
データが空のときに何を表示するのか
件数が増えたときにページ送りをするのか

ここを埋めずに渡すほど、返ってくるものは「平均的なアプリ」に寄っていきます。私が個人開発で痛感したのは、プロンプトの巧拙とは語彙の問題ではなく、この余白をどれだけ意識的に潰せるかだということでした。

余白を見つける4つの問い

指示を送る前に、私は次の4点を自分に問いかけるようにしております。

状態: データが0件・1件・大量のとき、それぞれ画面はどう見えるか
順序: 何を基準に並べるか
操作の結果: ボタンを押した後、画面はどう変わるか
境界: 入力が長すぎる・通信が失敗したとき、どうなるか

この4つを一文ずつ添えるだけで、出力の安定感がはっきり変わります。凝った形容詞を足すより、はるかに効きます。

スコープを区切る — 1回の指示で動かすのは1つの関心事だけ

長いプロンプトが良いと書いてきましたが、これは「一度に多くを変える」という意味ではありません。むしろ逆です。

Rork は1回の指示で広い範囲に手を入れようとすると、すでに気に入っていた部分まで作り替えてしまうことがあります。色を直すついでにレイアウトが変わってしまった、という経験をされた方は多いはずです。

そこで私は、1回の指示で触る対象を「1つの関心事」に絞るようにしております。

✅「ホーム画面の配色だけを変える」
✅「登録フォームのバリデーションだけを足す」
❌「配色とレイアウトと新機能をまとめて頼む」

そして、変えたくない部分は明示的に守ります。

今回はホーム画面の配色だけを変更してください。
レイアウト・コンポーネント構成・既存の機能には触れないでください。

変更内容:
- メイン色を #0066CC から #1B7F5C へ
- ボタンの文字色は白のまま

「触らないでほしい場所」を書くのは一見くどいのですが、これがあるかないかで、余計な作り替えの頻度が大きく変わります。

観葉植物の水やり記録アプリを作っていたときも、この「1指示1関心事」に切り替えてから、納得できる画面に着地するまでの修正回数が体感で半分ほどに減りました。急がば回れ、を地で行く感覚でした。

個人開発でアプリを App Store に出すところまで一人でこなしていると、修正のやり直しが積み重なるほど消耗します。だからこそ、凝った言い回しを覚えるより、まず「1指示1関心事」と「変更禁止範囲の明記」を先に習慣化することをお勧めします。私自身、新しい画面に着手する前には、この2つだけは必ず守ると決めており、これは強く推奨したい運用ルールになっております。