ノーコードでAIアプリを作る最初の一歩 — Rorkを5日間使い続けて気づいたこと

最初の3日間は、正直なところ何も形になりませんでした。

「画面を作って」「ボタンを追加して」と入力するたびに、RorkのAIはすぐに何かを生成してくれます。でも出来上がったものは見た目がちぐはぐで、タップするとエラーが出て、どこを直せばいいのかも分からありません。「ノーコードなら誰でも作れる」という言葉を信じて始めたはずなのに、想定よりずっと難しいと感じていました。

それが変わったのは4日目です。変わったのはツールではなく、自分の指示の出し方でした。

最初につまずくのは「アイデアより先に手を動かすこと」

Rorkを始めたばかりの人がよくやるのが、頭の中に薄いイメージだけ持って、とりあえずAIに投げてみるパターンです。私もそうでした。

「カロリー計算アプリを作って」とRorkに伝えると、AIはそれらしい画面を出してくれます。でも自分が本当に欲しかったのは「食事の写真を撮るだけでカロリーが自動で表示されるアプリ」だったりします。この差は、生成物を見るまで自分でも気づかないことが多いんです。

ノーコードAI開発でつまずく人の多くが、ここで「AIが思い通りのものを作ってくれない」と感じます。でも実際には、AIが読み取れる情報が不足していることがほとんどです。

準備として、手を動かす前に次の3つを紙に書いてみてください。

誰が使うか: 自分？特定の誰か？スマホ初心者？
何が解決されるか: どんな手間や不便がなくなるか？
使い終わった後、何が変わっているか: 1週間後のユーザーの生活

このイメージが固まってから初めてRorkに指示を出すと、生成されるものの質が別物になります。

「誰の何を解決するか」で、AIへの指示が変わる

4日目に壁を乗り越えられた理由は、プロンプトの書き方を変えたことです。

具体的には、「何を作るか」ではなく「誰がどう使うか」を先に決めてから指示を出すようにしました。

変える前のプロンプト例:

カロリー計算画面を作って、見た目をきれいにして

変えた後のプロンプト例:

食事の名前を入力するテキストフィールドと送信ボタンだけのシンプルな画面を作って。
ボタンを押すと、画面の下に推定カロリーが数字で大きく表示される。
背景は白、テキストフィールドはグレーのボーダー、余計な装飾は不要。

前者は抽象的すぎて、AIが自分の想像で補完してしまいます。後者は「画面に何があるか」「操作したらどうなるか」「見た目の方針」を具体的に伝えています。これだけで生成結果がはっきり変わります。

Rorkへのプロンプトの書き方については、Rork AIへの効果的なプロンプト作成ガイドでさらに詳しくまとめています。

RorkのAIが生成するコードを少し覗いてみる

「ノーコードなのにコードの話？」と思う方もいるかもしれません。

使いこなすためにコードを書く必要は全くありません。ただ、Rorkが生成したコードを少し眺めてみると、アプリの仕組みへの理解が深まり、次の指示が出しやすくなります。

たとえば、シンプルな入力画面をRorkに作らせると、こんなReact Nativeのコードが生成されます。

// 食事名を入力してカロリーを表示する画面（Rork生成コード例）
import { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';
 
export default function CalorieScreen() {
  const [food, setFood] = useState('');
  const [calories, setCalories] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
 
  const handleSearch = async () => {
    if (\!food.trim()) return;
    setLoading(true);
    try {
      // AIによるカロリー推定（実際はAPIに接続）
      const result = await estimateCalories(food);
      setCalories(result);
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="食べたものを入力（例：ご飯 1杯）"
        value={food}
        onChangeText={setFood}
      />
      <TouchableOpacity style={styles.button} onPress={handleSearch}>
        <Text style={styles.buttonText}>
          {loading ? '調べています...' : 'カロリーを調べる'}
        </Text>
      </TouchableOpacity>
      {calories \!== null && (
        <Text style={styles.result}>約 {calories} kcal</Text>
      )}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 24, justifyContent: 'center', backgroundColor: '#fff' },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 8, marginBottom: 12 },
  button: { backgroundColor: '#333', padding: 14, borderRadius: 8, alignItems: 'center' },
  buttonText: { color: '#fff', fontWeight: 'bold' },
  result: { fontSize: 32, fontWeight: 'bold', textAlign: 'center', marginTop: 24, color: '#222' },
});

コードの意味を全部理解しなくても大丈夫です。「TextInput」が入力欄で「TouchableOpacity」がタップできるボタンだと分かれば、「ボタンの背景色を青にして」「ローディング中はボタンを押せないようにして」という具体的な指示が出せるようになります。

実際に試してみると分かりますが、コードの構造が少し見えているだけで、修正の精度がぐっと上がります。

Rork Companionで実機確認するまでの流れ

生成したアプリをiPhoneやAndroidで実際に動かすには、Rork Companionアプリを使います。これがRorkの体験の中で、個人的に一番「おお！」となった瞬間でした。

Rorkで画面を作り、プレビューボタンを押すと、Companionアプリをインストールしたスマホに数秒でアプリが表示されます。Xcodeもビルドも不要です。

ただ、実機確認で気をつけたいのが実機とシミュレーターで動作が違う場合がある点です。特にカメラ・マイク・位置情報などの機能は、シミュレーターではテストできないことがあります。最初は実機での確認を早めに行うことをおすすめします。

5日間でできたこと、できなかったことを正直に書く

5日間の経験を振り返って、正直に書きます。

できたこと:

シンプルな入力→表示のアプリの骨格（カロリーメモ）
画面遷移（リスト画面 → 詳細画面）
端末内へのデータ保存（AsyncStorage相当）
Rork Companionを使ったiPhone実機確認

できなかったこと（次のステップ）:

Supabaseとの連携（セットアップに時間がかかった）
App Store提出（証明書まわりで詰まった）
プッシュ通知（まだ手をつけていない）

5日間でアプリ全体が完成すると思っていたので、「まだそこか」と少し落ち込みました。でも振り返ると、5日間でアプリの骨格と実機確認まで行けたのは、従来の開発と比べると相当速いんです。XcodeやFlutterをゼロから学ぶなら、環境構築だけで1〜2日かかることもあります。

Rorkは「速く動くものを作れる」という点でとても優れています。ただ、「すぐ完成品ができる」ではなく「素早くプロトタイプを作れる」というイメージの方が、最初から持っておくとギャップが少ないです。

アプリを公開するための具体的な手順は、Rorkアプリ公開ガイドにまとめています。

まず今日、これだけやってみてください

Rorkを始める前に長々と準備する必要はありません。

今日の目標はシンプルに一つだけです。「動く画面を1枚作る」。

Rorkを開いて、自分が日常で「あったら便利」と思うものを一つ思い浮かべてください。完璧でなくて構いません。それをRorkに伝えて、最初のプロンプトを打ってみてください。

うまくいかなくても大丈夫です。むしろ、うまくいかなかった時に「どう指示を変えたら良くなるか」を観察することが、最初の大切な学習です。私自身、最初の3日間の失敗があったからこそ、4日目に一気にコツが掴めました。

より具体的なステップで最初のアプリ作りを進めたい方は、30分で最初のアプリを作るガイドも参考にしてみてください。まず動くものを作る体験が、次の一歩を加速させてくれます。