AIでフィットネスアプリを作る方法
このガイドでは、Moremadeを実例に、AIでフィットネスアプリを作る方法を紹介します。読み終えるころには、シンプルなフィットネストラッキングアプリの設計、すぐ使える最初のプロンプト、そして改善・テスト・公開までの明確な流れが手に入ります。基本的な最初のバージョンなら、トラッキング、サインイン、支払いのどこまで入れるかにもよりますが、30〜90分ほど見ておくとよいでしょう。
まず、アプリに本当に必要なものを決める
何かを生成する前に、最初のバージョンをはっきり定義しましょう。フィットネスアプリは、ワークアウト、栄養、コーチング、支払い、ウェアラブル、コミュニティ機能まで一気に扱おうとして、複雑になりがちです。
最初の構築では、スコープを狭く保つのが大切です。実用的なスターターアプリに必要なのは、たとえば次のようなものです。
- 今日の進捗を表示するホーム画面
- ワークアウト記録画面
- 履歴またはカレンダー画面
- プロフィールまたは設定画面
- ワークアウトを作成・編集する方法
次に、アプリが保存するデータを決めます。シンプルなフィットネストラッカーなら、たとえば次のような項目です。
- ユーザープロフィール
- ワークアウト名
- エクササイズの一覧
- セット数、回数、重量、時間、距離
- ワークアウト日
- メモ
- 完了したセッション
また、アカウントが必要かどうかも決めておきましょう。複数デバイス間で個人の履歴を保存するなら、サインインは理にかなっています。もし単なる試作品や、オフライン寄りの個人用トラッカーなら、認証なしで始めて後から追加することもできます。
コーチングプランやサブスクリプションで課金する予定があるなら、それも早めに書き出しておきましょう。Moremadeには、設定した価格で決済できるStripeコネクタが最初から用意されていますが、バージョン1で本当に必要な場合だけ支払い機能を追加しましょう。
最初のプロンプトは、使える下書きが出るくらい具体的に書く
Moremadeは、アプリを平易な言葉で説明すると最もよく動きます。モバイルアプリの場合は、React NativeとExpoで生成され、ライブプレビューを見ながらチャットで何度でも変更できます。
弱いプロンプトはたいてい曖昧です。たとえば「フィットネスアプリを作って」だけでは不十分です。より良いプロンプトでは、対象ユーザー、主要画面、重要なデータ、操作の雰囲気まで伝えます。
次のようなプロンプトを使ってみてください。
筋力トレーニングを記録したい人向けのモバイルフィットネストラッキングアプリを作ってください。シンプルで見やすいレイアウトにし、大きな文字とわかりやすいボタンを使ってください。画面はHome、Log Workout、History、Profileの4つを作成します。Homeでは今日のワークアウト状況と簡単な統計を表示してください。Log Workoutでは、エクササイズ、セット、回数、重量、メモ、ワークアウト時間を追加できるようにしてください。Historyでは、日付付きの過去のワークアウトをスクロール一覧で表示してください。Profileでは、基本的なユーザー情報とトレーニング目標を表示してください。まずはモックデータで始め、スマホで操作しやすいナビゲーションにしてください。
このようなプロンプトなら、細かい実装の選択をすべて指定しなくても、AIがレビュー可能な下書きを作るのに十分な構造を与えられます。
プレビューを確認して、具体的なフォローアップ指示で改善する
最初の下書きは、完成品ではなく出発点です。ライブプレビューを開き、単なる制作者ではなく、プロダクトレビュー担当の目線でアプリを確認しましょう。
次のような実用面をチェックします。
- 主要なアクションはすぐにわかるか
- 1分以内にワークアウトを記録できるか
- スマホで文字サイズは読みやすいか
- データのまとまり方は、実際のトレーニングの流れに合っているか
- 1画面に項目が多すぎないか
Moremadeにはビジュアルインスペクターがあり、要素を選んで変更できます。生成されたコードを直接確認したい場合は、コードビューも使えます。
よいフォローアップ指示は具体的です。たとえば次のようにします。
- 「Log Workout画面を変更して、各エクササイズをカード表示にし、Add SetとRemove Setボタンを付けてください。モバイル向けにコンパクトなレイアウトにしてください。」
- 「Home画面に、完了したワークアウト数、合計セット数、合計ワークアウト時間を示す週間進捗サマリーを追加してください。」
- 「Profile設定を小さなセクションにまとめ、Historyはワークアウトを週ごとにグループ化して見やすくすることで、ナビゲーションを簡略化してください。」
改善するときは、一度に1つの領域だけ変えましょう。見た目の再設計、データ変更、新機能追加を1回のメッセージでまとめて頼むと、確認が難しくなり、前の変更に対する不具合も見落としやすくなります。
アプリに必要なときだけ、サインインや保存データを追加する
多くのフィットネスアプリでは、データの永続化が必要になります。ユーザーがワークアウト履歴を保存したい、複数デバイスで共有したい、アカウントにひも付けたいなら、バックエンドを追加しましょう。Moremadeには、データベース、サインイン、ファイル保存のためのSupabaseが含まれています。
自然な進め方は次の通りです。
- まずモックデータで始める
- 画面と操作の流れを検証する
- 構成が固まったらSupabaseを追加する
このアプリでSupabaseが役立つのは、たとえば次のような場合です。
- メールまたはアカウントベースのサインインが必要
- ワークアウト履歴を保存したい
- ユーザーごとの目標を持ちたい
- プロフィールデータを保存したい
- 時間の経過とともに進捗を保持したい
たとえば次のように依頼できます。
- 「このアプリをSupabaseに接続してください。サインインを追加し、ユーザーごとにワークアウトを保存し、エクササイズの入力を日付、セット数、回数、重量、時間、メモとともに保存してください。」
Stripeを追加するのは、コーチングのサブスクリプションや有料トレーニングプランなど、何かを販売するときだけにしましょう。Moremadeには、設定した価格で決済できるStripeコネクタが最初からあります。アプリが個人用トラッカーだけなら、支払いは省いて、よりシンプルに保つのがよいです。
この段階では、データ構造について考えることも大切です。ワークアウト記録に複数のエクササイズが入り、各エクササイズに複数のセットが入るなら、生成されるアプリが期待通りにデータを扱えるように、そのことを指示で明確に伝えましょう。
スマホでテストして、粗い部分を直す
フィットネスアプリは、移動中、片手で、明るいジム内で、またはセットの合間に使われます。そのため、多くの社内ツールよりもモバイルテストの重要性が高いです。
次のような典型的な操作を一通り試しましょう。
- ワークアウトを開始する
- エクササイズを追加する
- セットを素早く記録する
- 入力ミスを修正する
- ワークアウトを終了する
- 前回のセッションを確認する
次のようなモバイル特有の問題も確認します。
- ボタンが小さくて親指で押しにくい
- 1画面に文字が多すぎる
- 明るい場所でコントラストが足りない
- 繰り返し入力するにはフォームが遅い
- 重要な統計がページの下に押しやられている
操作がぎこちなく感じるなら、具体的な操作方法を見直しましょう。たとえば、回数や重量の入力が遅いなら、入力コントロールを大きくする、タップ数を減らす、セット追加をもっと速くする、といった指示を出します。
Moremadeはモバイルアプリ向けに実際のReact Native（Expo）コードを生成するので、閉じたモックアップに縛られません。開発をツールの外で続けたいなら、ソースをZIPでエクスポートしたり、GitHubにプッシュしたりできます。
必要ならドメインをつないでアプリを公開する
基本的な体験が動いたら、公開しましょう。Moremadeでは、1クリックで無料のyourname.moremade.aiサブドメインに公開できます。これは、動くプロトタイプの共有、社内レビュー、初期ユーザーからのフィードバック収集に便利です。
有料プランなら、カスタムドメインを接続できます。ドメインはMoremade内で購入することも可能です。
公開前には、短いリリースチェックを行いましょう。
- 画面名とラベルが一貫しているか確認する
- もう不要なプレースホルダーを削除する
- 実データが必要ならモックデータを置き換える
- サインインを有効にした場合は動作を確認する
- Stripeを追加した場合は決済を確認する
- 保存後に正しい画面へ戻るか確認する
自分のリポジトリやチームのワークフローでコードベースが必要なら、完全なソースをZIPで書き出すか、GitHubにプッシュしましょう。Moremadeで生成したアプリコードは、独自ランタイムにロックされません。
よくあるミスを避ける
最もよくある問題は、最初から範囲を広げすぎることです。中途半端なトレーニングプラットフォームより、使えるフィットネストラッカーの方が価値があります。
次のようなミスは避けましょう。
- 曖昧なプロンプトを書くこと。 「フィットネスアプリを作って」では広すぎます。画面、ユーザー、何をどう記録するかを明示しましょう。
- アカウントを早すぎる段階で追加すること。 初日から複数デバイスの履歴が必須でないなら、まずはモックデータで始めましょう。
- 本当の有料機能がないのに支払いを追加すること。 Stripeは、コネクタが使えるからという理由ではなく、実際の提供価値を支えるために使いましょう。
- 記録画面を詰め込みすぎること。 セット間に入力する場面では、見た目の複雑さよりスピードが重要です。
- 1つのプロンプトで変更を盛り込みすぎること。 小さな修正の方がレビューしやすく、以前の成果を壊しにくいです。
- スマホテストを省くこと。 デスクトップのプレビューで問題なく見えても、小さな画面では使いづらいことがあります。
また、利用量にも注意しましょう。MoremadeはBuild Unitsで作業量を計測します。最初のサイト構築は約8ユニット、小さな編集は約1ユニットです。これにより、アプリを改善していく際のおおよそのコスト感がつかめます。
このプロンプトを試す
筋力トレーニングを記録したい人向けのモバイルフィットネストラッキングアプリを作ってください。シンプルで見やすいレイアウトにし、大きな文字とわかりやすいボタンを使ってください。画面はHome、Log Workout、History、Profileの4つを作成します。Homeでは今日のワークアウト状況と簡単な統計を表示してください。Log Workoutでは、エクササイズ、セット、回数、重量、メモ、ワークアウト時間を追加できるようにしてください。Historyでは、日付付きの過去のワークアウトをスクロール一覧で表示してください。Profileでは、基本的なユーザー情報とトレーニング目標を表示してください。まずはモックデータで始め、スマホで操作しやすいナビゲーションにしてください。
よくある質問
MoremadeでAIを使ってフィットネスアプリを作るにはいくらかかりますか？
Moremadeには、10 Build Unitsを30日ごとに使える$0の無料プランがあり、`moremade.ai`サブドメインへの公開とZIPエクスポートが可能です。有料プランはStandardからで、年払いなら$17/month、月払いなら$20です。これには30日ごとに100 Build Units、カスタムドメイン対応、非公開プロジェクトのホスティング、バージョン履歴が含まれます。Proは年払いなら$167/month、月払いなら$200で、30日ごとに750 Build Units、優先生成、無制限プロジェクト、優先サポートが含まれます。有料プランでは、追加のBuild Unitパックも購入できます。
コーディングを知らなくても大丈夫ですか？
はい。アプリを平易な言葉で説明し、ライブプレビューを確認し、チャットで変更できます。ただし、画面、データ、ユーザーフローを明確に考えることは役立ちます。コードがわかるなら、コードビューを使うと確認がしやすくなります。
アプリのコードの所有権はありますか？
いつでも完全なソースをZIPでエクスポートするか、GitHubにプッシュできます。ウェブサイトは実際のReactとTailwindのコードで作られ、モバイルアプリはReact NativeとExpoです。必要なら、Moremadeの外でそのまま開発を続けられます。
ユーザーアカウントや保存されたワークアウト履歴は後から追加できますか？
はい。まずモックデータで始めて、アプリの流れを確認し、その後にサインイン、データベース保存、ファイル保存が必要になったらSupabaseを接続するのが賢い進め方です。そうすれば最初の構築がシンプルになり、最初から構造を詰め込みすぎることを避けられます。
後からもっと複雑な製品に拡張できますか？
はい。ただし、実用的には、まずは中核となる流れを証明する小さなバージョンから始めるのがよいです。ソースをエクスポートしたりGitHubにプッシュしたりできるので、後からより深いカスタム開発、複雑なバックエンドロジック、より広いプロダクトチームのワークフローが必要になっても、行き詰まることはありません。