Rork でアプリを完成させて TestFlight に入れて、仲のいいデザイナーの友人に見せたことがあります。機能的にはほぼ完成していて、自分ではかなり満足していました。
でも、友人の第一声はこうでした。
「機能は面白いけど、なんか業務ツールっぽいね」
この言葉が刺さりました。「業務ツールっぽい」というのはデザインの世界ではやんわりと「センスがない」と言われているのとほぼ同じです。機能が良くても、見た目で第一印象を損ねていたんです。
そこから1ヶ月、プロンプトの書き方を試行錯誤し続けました。最終的にたどり着いたのは、「機能のプロンプト」と「デザインのプロンプト」は完全に別物だという認識でした。その気づきと具体的な改善方法を実例とともに整理しました。
なぜ Rork のデフォルト出力は「業務ツールっぽく」なるのか
Rork の AI は、機能的な要件を伝えると、その機能を動かすことを最優先にコードを生成します。ユーザーの指示が「タスク管理アプリを作って」なら、タスクの追加・削除・完了管理が動くものを作ってくれます。それは正しいアプローチです。
ただ、デフォルトのスタイリングは「標準的なReact Nativeのコンポーネント」に近い見た目になりやすいという特徴があります。白い背景、グレーのボーダー、標準フォントサイズ。これらの組み合わせが「業務ツールっぽさ」を生み出しているんです。
悪いわけではないんですが、ユーザーが App Store で目にするようなアプリと比べると、どうしても垢抜けない印象になります。
これは Rork の欠点ではなく、「機能の指示」しか出していない側の問題です。
「見た目の指示」は機能の指示とは別に出す
最初に変えたのは、プロンプトの構造でした。
以前は:
タスク管理アプリを作って。タスクの追加・削除・完了チェックができること。
このように機能と見た目を混在させるか、見た目の指示を省略していました。
変えた後:
タスク管理アプリを作って。タスクの追加・削除・完了チェックができること。
【デザイン指示】
- ダークモードベース、背景は #0F0F0F、アクセントカラーはインディゴ (#6366f1)
- フォントは SF Pro Display を意識した太めのウェイトを使用
- カードコンポーネントは角丸大きめ（radius: 16）、背景は #1C1C1E
- 余白は広め（padding: 20px以上）でゆったりとしたレイアウト
- ボタンはテキストのみのフラットデザインは避け、塗りつぶしを使う
この一手間を加えるだけで、生成結果が別物になりました。
参照するデザインシステムを言葉で伝える
さらに効果があったのが、既存の有名なデザインシステムやアプリを「参照先」として伝えることです。
Apple の Human Interface Guidelines のデザイン原則に従って、
iOS らしいネイティブな見た目にしてください。
グループ化されたリスト、セルの区切り線、
ナビゲーションバーのスタイルは標準の iOS に合わせること。
あるいは:
Notion や Linear のようなミニマルでシャープなデザイントーンで。
余白多め、色使いは控えめ（ほぼモノクロ）、
インタラクションがあるものだけにアクセントカラーを使う。
このように「どんなアプリに近い見た目にしたいか」をアプリ名や会社名で伝えると、Rork の AI はそのスタイルの特徴を理解して反映してくれます。ただし、特定アプリのコピーを作るわけではなく、あくまで「雰囲気の参照」として使うのがポイントです。
色・タイポグラフィ・余白の3点セットで指定する
デザインの質を上げる要素は、突き詰めると「色」「タイポグラフィ」「余白」の3つに集約されます。この3つを明確に指定するだけで、生成されるUIのレベルが上がります。
色の指定:
プライマリカラー: #3B82F6（ブルー）
バックグラウンド: #F9FAFB（ライトグレー）
テキスト（ダーク）: #111827
テキスト（セカンダリ）: #6B7280
エラー: #EF4444
成功: #10B981
HEXコードを直接渡すのが最も確実です。「青みがかった〜」のような曖昧な表現より、具体的な数値の方が意図通りに反映されます。
タイポグラフィの指定:
ページタイトル: 24px, weight: 700
セクション見出し: 18px, weight: 600
本文: 15px, weight: 400, line-height: 1.6
キャプション・補足: 13px, weight: 400, color: セカンダリ
このように階層を意識したサイズ設定を伝えると、文字情報に視覚的な優先度が生まれます。
余白の指定:
コンテンツエリアの水平パディング: 20px
セクション間の垂直マージン: 32px
カード内のパディング: 16px
ボタンの高さ: 50px 以上
「余白は広め」だけでは AI の解釈にブレが出ます。数値で指定する方が確実です。
before / after の実例：タスクアプリのホーム画面
同じ機能要件でプロンプトを変えた場合の違いを簡略化してまとめます。
before（機能のみ）:
タスクのリストを表示する画面。完了済みと未完了を切り替えられる。
→ 生成結果: 白背景・グレーボーダーのリスト。Checkbox はデフォルト。タイトルテキストは標準サイズ。全体的に業務システムに近い印象。
after（機能＋デザイン指示）:
タスクのリストを表示する画面。完了済みと未完了を切り替えられる。
【デザイン】
- ダークモード。背景 #111111、カード背景 #1E1E1E
- タスク名は 16px / weight 500、期限は 12px / weight 400 / グレー
- 完了チェックは円形で、未完了は外枠のみ、完了はアクセントカラー (#6366f1) の塗りつぶし
- リスト間の区切り線は省略し、カード間に 8px のギャップを設ける
- 右上の追加ボタンは FAB（Floating Action Button）スタイル
→ 生成結果: モダンなダーク系UI。カードがはっきりと区切られ、チェックマークに色が付いてインタラクティブな印象。明らかに「ちゃんとしたアプリ」に見える。
同じ機能でも、見た目の指示があるかないかでこれほど変わります。
プロンプトをテンプレート化して再利用する
毎回このような詳細なデザイン指示を書くのは手間です。そこでおすすめなのが、「自分用デザインプロンプトテンプレート」を作っておくことです。
【デザインシステム（全画面共通）】
- カラーパレット: プライマリ #4F46E5、背景 #FAFAFA、テキスト #1F2937
- フォント: SF Pro / システムフォント、タイトル 20px/700、本文 15px/400
- 角丸: カード 12px、ボタン 8px
- 余白: 水平パディング 20px、セクション間 24px
- シャドウ: 軽め（shadow-sm 相当）
- インタラクション: タップ時に軽いスケールアニメーション (0.97)
このようなブロックをどこかにメモしておいて、新しいアプリを作るたびに冒頭に貼り付けるだけです。
プロンプトの書き方についてより体系的に学びたい方は、Rork のプロンプトで UI を生成するパターンを解説した記事もあわせて読んでみてください。
全体を振り返って：見た目の指示を「機能の指示」と同じだけ丁寧に
Rork は機能を動かすのが得意ですが、見た目をどうするかは使い手の指示に依存します。
今すぐできる一歩は、次のアプリを作るとき、プロンプトの末尾に5行だけデザイン指示を追加してみることです。色・フォントサイズ・余白の数値を書くだけで、生成結果は明らかに変わります。
「業務ツールっぽい」と感じているなら、機能は完成しているということです。あとは見た目の指示を加えるだけで、そのアプリはずっと使いたくなるものに近づきます。
さらにデザイン品質を上げるプロンプト技術については、プロンプトエンジニアリングでアプリデザインを改善する方法で詳しく解説しています。ぜひ参考にしてみてください。