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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例 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点を自分に問いかけるようにしております。

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

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

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

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

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

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

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

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

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

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

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

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

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

最終的なアドバイス

Rork でのプロンプト作成は「芸術」に近いです。

「何を言うか」だけでなく、「どう言うか」も大切。

最初は完璧を目指さず、「作ってもらう → 見て修正指示 → また作ってもらう」というサイクルを繰り返してください。

このサイクルの中で、あなたも「いいプロンプトの書き方」を学んでいきます。

ぜひ、試してみてください。