AIでモバイルアプリを作る方法
このガイドでは、Moremadeを実例に、AIを使ってiPhoneとAndroid向けのモバイルアプリを作る方法を紹介します。読み終えるころには、動くReact Nativeアプリのたたき台、明確な修正手順、そして公開またはコード書き出しまでの流れがわかるはずです。シンプルな初期版なら、要件の明確さにもよりますが、おおよそ30分から90分を見込んでください。
まず、アプリにやらせる仕事を明確にする
AIビルダーを開く前に、まず基本を平易な言葉で書き出しましょう。
短くまとめるのがコツです。
- アプリの対象ユーザー
- たった1つの主要な役割
- 最初に必要な3〜5画面
- 各画面で表示・収集するデータ
- ユーザーアカウントが必要かどうか
- 決済が必要かどうか
シンプルな習慣トラッカーの例:
- ユーザー: 毎日の習慣を記録したい人
- 主要な役割: 毎日習慣を完了済みにする
- 画面: ホーム、習慣詳細、習慣追加、プロフィール
- データ: 習慣名、目標頻度、完了履歴
- アカウント: 複数端末で同期したいなら必要
- 決済: なし。有料プランを設ける場合のみ必要
このステップが重要なのは、AIは「フィットネスアプリを作って」のような漠然とした依頼より、制約のある指示のほうがうまく動くからです。
最初のプロンプトは、範囲・画面・スタイルを含めて書く
Moremadeでは、アプリを自然な言葉で説明すると、AIエージェントがソースコードを書きます。モバイルアプリはExpoを使ったReact Nativeアプリとして作られます。
最初のプロンプトに含めるべき内容:
- アプリの目的
- 対象ユーザー
- 必要な画面
- 各画面での主な操作
- 見た目のスタイル
- まだ入れないもの
最初の版は狭く絞ってください。完成品ではなく、使えるたたき台を求めましょう。
iPhoneとAndroid向けにHabit Dayというモバイルアプリを作ってください。毎日の習慣を記録するアプリです。Home、Habit Detail、Add Habit、Profileの4画面を作成してください。Homeでは今日の習慣を表示し、わかりやすい完了ボタンを置いてください。Habit Detailでは習慣名、目標頻度、メモ、最近の完了履歴を表示してください。Add Habitでは、名前の入力、dailyまたはweeklyの頻度選択、保存ができるようにしてください。見た目はすっきりしてシンプルにし、タップしやすい大きめの要素とニュートラルな色を使ってください。決済、ソーシャル機能、通知はまだ追加しないでください。
この程度の具体性があると、1行だけの依頼よりも初回の結果がずっと良くなることが多いです。
ライブプレビューを確認し、具体的な変更で磨き込む
最初のビルドが終わったら、ライブプレビューでユーザーの視点からアプリを確認します。足りない状態、わかりにくいラベル、不自然な余白、ナビゲーションの問題を探しましょう。
Moremadeではチャットでアプリを変更でき、ビジュアルインスペクターとコードビューも備えています。特定の要素、たとえばボタンサイズや余白がずれているときはビジュアルインスペクターを使いましょう。挙動や画面をまたぐレイアウト変更ならチャットが向いています。
良い追加プロンプトは具体的です。たとえば:
- 「Home画面では、追加ボタンを固定の下部アクションボタンに移動し、完了済みの習慣を未完了のものより下に表示してください。」
- 「Homeに空の状態を追加して、習慣がまだないときに何をすればいいか説明し、Add Habitを開くボタンを付けてください。」
- 「Profile画面をもっとシンプルにして、アバターのプレースホルダーを削除し、名前、メール、サインアウトボタンだけを表示してください。」
短い修正サイクルが最も効果的です。関連する変更を1まとまりずつ加え、もう一度プレビューを確認してから進めましょう。
データ、サインイン、決済は本当に必要なときだけ追加する
最初のアプリのたたき台には、必ずしもバックエンドは必要ありません。単なるプロトタイプやローカルデモなら、アカウントや決済を追加する前に、操作の流れを検証できる場合があります。
バックエンド機能が必要になったら、MoremadeにはSupabaseとStripeの組み込みコネクタがあります。
Supabaseを使う場面:
- ユーザーのサインインが必要
- アプリのデータ用データベースが必要
- ファイル保存が必要
典型例は、進捗を保存するタスクアプリ、ユーザーアカウント付きのマーケットプレイス、データを永続化したい社内ツールなどです。
Stripeを使う場面:
- 有料サブスクリプションが必要
- 1回限りの購入が必要
- 自分で設定した価格でのチェックアウトが必要
ユーザーフローに実際の支払い手順がないなら、Stripeは追加しないでください。
実用的な指示の例:
- 「Supabaseのメールサインインを追加し、習慣をユーザーごとに保存して、それぞれが自分のデータだけ見られるようにしてください。」
- 「プレミアムプラン用のStripeチェックアウト画面を追加してください。ただし無料版は支払いなしで使えるようにしてください。」
これらの要素は、まずコア画面が動いてから追加しましょう。そうしないと、プロダクトの範囲と連携の細部を同時にデバッグすることになります。
デスクトップのプレビューだけでなく、実機のスマホでもテストする
ブラウザサイズの枠で問題なく見えても、実機ではうまく動かないモバイルアプリは少なくありません。
可能ならiPhoneとAndroidの両方で基本を確認しましょう。
- タップ領域の大きさ
- 小さい画面での文字折り返し
- キーボードが入力欄を隠さないか
- 長いリストとスクロールの挙動
- ローディング状態と空状態
- 戻るナビゲーションの挙動
MoremadeはExpoを使ったReact Nativeでモバイルアプリを作るので、見た目だけのモックではなく、実際のコードベースに向けて作業していることになります。そのため、早い段階で端末テストをする価値があります。
テストしながら、修正は具体的に書きましょう。
- 「Add Habitでキーボードが開くと保存ボタンが隠れます。キーボードの上に常に見えるようにしてください。」
- 「Habit Detailでは、メモ欄と完了履歴リストの間隔をもっと空けてください。」
- 「Androidではヘッダータイトルを短くし、2行に折り返さないようにしてください。」
このあたりで、アプリがしっかりしてきたと感じることが多いです。
動く版を公開し、必要ならドメインを接続する
共有できるレベルの版ができたら、Moremadeから公開できます。
Moremadeでできること:
- 無料の
yourname.moremade.aiサブドメインへワンクリック公開 - 有料プランでの独自ドメイン接続
- Moremade内でのドメイン購入
- 完全なソースコードのZIP書き出しをいつでも実行
- ソースコードをGitHubへ送信
社内レビューや初期フィードバックなら、無料サブドメインで十分なことが多いです。クライアント案件や一般公開なら、有料プランを使って独自ドメインを接続しましょう。
バージョン履歴はStandardとProプランで利用でき、変更が何度も重なる段階では特に便利です。
Moremadeから公開しても、そこで縛られるわけではありません。ソースはZIPで書き出せますし、GitHubにも送れます。
最初のAI製アプリでよくあるミス
問題の多くはツールそのものではなく、スコープと指示の曖昧さから生まれます。
次のようなミスに注意してください。
- 最初のプロンプトで多くを求めすぎる
- プロトタイプの目的と本番要件を混ぜる
- コアの流れが動く前にサインインや決済を追加する
- 「もっとよくして」ではなく、何が問題かを言わないデザイン指示をする
- 実機のスマホでテストしない
- 空リスト、入力エラー、遅い読み込み状態などの例外を忘れる
よりよい進め方は次の通りです。
- 最小限で役立つ版を作る
- プレビューを丁寧に確認する
- 具体的なプロンプトで改善する
- 必要性があるときだけデータや決済を追加する
- 方向性が固まったらコードを書き出す
このやり方なら、アプリを理解しやすく保ちながら手戻りも減らせます。
このプロンプトを試す
iPhoneとAndroid向けにHabit Dayというモバイルアプリを作ってください。毎日の習慣を記録するアプリです。Home、Habit Detail、Add Habit、Profileの4画面を作成してください。Homeでは今日の習慣を表示し、わかりやすい完了ボタンを置いてください。Habit Detailでは習慣名、目標頻度、メモ、最近の完了履歴を表示してください。Add Habitでは、名前の入力、dailyまたはweeklyの頻度選択、保存ができるようにしてください。見た目はすっきりしてシンプルにし、タップしやすい大きめの要素とニュートラルな色を使ってください。決済、ソーシャル機能、通知はまだ追加しないでください。
よくある質問
MoremadeでAIを使ってモバイルアプリを作るにはいくらかかりますか？
Moremadeは利用量をBuild Unitsで管理します。Freeプランは$0で、30日ごとに10 Build Unitsが含まれ、小規模なプロジェクトや初期検証には十分なことがあります。最初のサイト構築は約8 units、小さな編集は約1 unitです。料金体系は利用全体で共通です。Standardは年払いで月額$17、月払いは$20で、30日ごとに100 Build Unitsが含まれます。Proは年払いで月額$167、月払いは$200で、30日ごとに750 Build Unitsが含まれます。有料プランでは追加のBuild Unitパックも購入できます。
コードを書く知識は必要ですか？
いいえ。アプリを自然な言葉で説明し、ライブプレビューを確認して、チャットで変更を依頼できます。ただし、基本的なプロダクト設計は役立ちます。明確な画面、明確なユーザーフロー、具体的なフィードバックがより良い結果につながります。コードがわかる場合は、Moremadeのコードビューも使えます。
コードの所有権はありますか？
完全なソースコードをいつでもZIPで書き出したり、GitHubへ送信したりできます。モバイルアプリはExpoを使ったReact Nativeです。つまり、ロックされたビジュアルファイルではなく、実際のコードベースで作業していることになります。
サインイン、データ、決済は後から追加できますか？
はい。MoremadeにはSupabaseとStripeの組み込みコネクタがあるので、まずコアの製品フローから始めて、アプリが本当に必要とするときにアカウント、データベース機能、ファイル保存、チェックアウトを追加できます。
将来スケールしたい、または後で開発者に引き継ぎたい場合でも使えますか？
はい。出力はエクスポートまたはGitHubへの送信ができるソースコードだからです。現実的な進め方は、AIで初版を作り、プロダクトを検証し、その後に要件が明確になってから開発者がアプリを拡張・堅牢化することです。