AIで習慣トラッカーアプリを作る方法
このガイドでは、Moremadeを例に、AIで習慣トラッカーアプリを作る方法を紹介します。最後まで進めれば、主要画面、習慣データモデル、公開可能なビルドを備えたWebアプリまたはモバイルアプリの試作品が完成するはずです。シンプルな初期版なら、調整量にもよりますが、所要時間は30分から90分程度を見込んでください。
まず、その習慣トラッカーに本当に必要なものを決める
プロンプトを書く前に、最小限で役立つバージョンを定義しましょう。
習慣トラッカーなら、通常は次の要素が必要です。
- 今日の習慣を表示するホーム画面
- 習慣を完了済みまたはスキップとしてマークする方法
- 習慣を作成・編集する画面
- ストリークや週次完了率などの簡単な進捗表示
- 基本設定
次に、各習慣に必要なデータを決めます。できるだけシンプルに保ちましょう。
実用的な初期モデルの例:
- 習慣名
- 色またはアイコン
- 頻度: 毎日、平日、カスタム日
- 目標: 1日1回、複数回、分、コップ数、回数
- 現在のストリーク
- 完了履歴
また、これは次のどれかも決めておきます。
- 個人用の単一ユーザー試作品
- サインインと保存データがあるアプリ
- サブスクリプション付きの有料アプリ
アイデア検証だけなら、まずはアカウントや決済なしで始めるのがおすすめです。その方が初回ビルドが小さくなり、確認もしやすくなります。
最初のプロンプトは、製品情報を明確に書く
Moremadeでは、アプリを自然な言葉で説明すると、AIエージェントがソースコードを書いてくれます。WebサイトならReactとTailwind、モバイルアプリならReact NativeとExpoが生成されます。
習慣トラッカーの最初のプロンプトでは、次の点を含めましょう。
- プラットフォーム: Webアプリかモバイルアプリか
- 中核となる画面
- 主要な操作
- 見た目のスタイル
- データを当面ローカルにするか、バックエンドが必要か
最初のプロンプト例:
Expoを使って、React Nativeでモバイルの習慣トラッカーアプリを作ってください。シンプルで洗練されたUIにして、ホーム画面には今日の習慣をカードで表示し、チェックボックスまたはタップ操作で完了にできます。習慣の作成画面と編集画面も追加してください。各習慣には名前、アイコン、色、頻度、1日あたりの目標回数を持たせてください。現在のストリークと直近7日間の完了状況を表示する進捗画面も入れてください。まずはローカルのサンプルデータのみで、サインインは不要です。落ち着いたミニマルなスタイルで、余白をしっかり取り、タップしやすい大きな操作領域にしてください。
これだけで、細部を指定しすぎずに、まず動く構造を作るのに十分です。
プレビューを確認し、小さなフォローアッププロンプトで調整する
最初の生成後は、ライブプレビューでアプリを確認します。一度の大きな追加依頼で全部直そうとしないでください。画面ごとに進めましょう。
確認するポイント:
- 主要なフローが完成しているか
- 習慣カードが見やすく整理されているか
- モバイルでタップしやすい大きさか
- 進捗情報が理解しやすいか
- ラベルがユーザーの考え方に合っているか
良いフォローアッププロンプトは、具体的で範囲が小さいものです。例えば:
- 「ホーム画面で、習慣をMorning、Afternoon、Eveningのセクションに分けてください。」
- 「完了操作を各習慣カードの右側にある大きめの円形チェックボタンにして、習慣名の下に現在のストリークを表示してください。」
- 「シンプルな7日間グリッドと今週の完了率を表示する週次進捗画面を追加してください。」
Moremadeにはビジュアルインスペクターとコードビューもあるので、どの要素を直すべきか分かっているときに役立ちます。大きな製品変更にはチャットを使い、特定のボタン、カード、余白を指摘したいときはインスペクターを使いましょう。
保存データとサインインは、必要になってから追加する
習慣トラッカーでは、デバイスをまたいで進捗を保存したくなることがよくあります。それが必要なら、基本のUIがしっくり来てからSupabaseを追加しましょう。
ここで適切なのがSupabaseなのは、次の機能をまとめて扱えるからです。
- データベーステーブル
- サインイン
- 後でアバターやアップロードを追加する場合のファイル保存
自然な進め方は次の通りです。
- まずはローカルデータでアプリを作る。
- 画面と操作感を確認する。
- Supabaseを接続する。
- ローカルのサンプルデータを実際の習慣レコードと完了履歴に置き換えるよう、Moremadeに依頼する。
- ユーザーに個人データが必要ならサインインを追加する。
多くの習慣トラッカーでは、最初からStripeは不要です。サブスクリプションや1回限りのプレミアムアップグレードのような、実際に有料製品を作る場合だけStripeを追加しましょう。Moremadeは設定した価格でStripeのチェックアウトに対応していますが、初期版には複雑さが増します。
最初のデータベースモデルはシンプルに保ちましょう。
- users
- habits
- habit_completions
これで、使えるMVPとしては十分なことが多いです。
デザインを整える前に、まずモバイルでテストする
プレビューで見た目が良くても、習慣トラッカーは短時間で何度も使う場面が多いアプリです。テストでは速度と分かりやすさを重視しましょう。
次の点を確認してください。
- 1回のタップで習慣を完了できるか
- 習慣追加の流れは十分短いか
- ストリークや履歴は迷わず読めるか
- ボタンはスマホで押しやすいか
- 習慣が多くなってもアプリの意味が通るか
Expoでモバイルアプリを作るなら、余白、スクロール動作、フォーム入力に特に注意してください。Webアプリなら、細いモバイル幅でもレイアウトが保たれ、親指操作に対応しているかをテストしましょう。
この段階で役立つ改善プロンプト:
- 「新しい習慣を作成するのに必要なタップ数を減らしてください。」
- 「ホーム画面を小さいスマホ幅でも使いやすくし、余白を広めにして、固定の下部ナビゲーションを追加してください。」
- 「今日の完了数を上部に表示し、完了済みの習慣を視覚的に薄くしてください。」
このテスト段階では、見た目の仕上げよりも先に、製品上の問題が見つかることが多いです。
使える状態になったら公開し、必要ならドメインをつなぐ
アプリが実用的になったら、公開しましょう。Moremadeなら、無料の yourname.moremade.ai サブドメインに1クリックで公開できます。これは、デモ、ユーザーテスト、共同作業相手への共有に適したデフォルトです。
ブランドのあるアドレスが必要な場合は、有料プランでカスタムドメインを使えます。ドメインはMoremade内で購入することもできます。
公開前には、短いリリース確認を行いましょう。
- プレースホルダーテキストやダミーのラベルを削除する
- 主要ボタンが動作するか確認する
- Supabase接続を使っている場合は、正しいプロジェクトか確認する
- 有効ならサインインとサインアウトをテストする
- アプリ名と基本メタデータを確認する
Moremadeでは、完全なソースをZIPでエクスポートしたりGitHubにプッシュしたりできるので、公開はロックインを意味しません。Moremade内で継続的に改善してもよいですし、後でコードを別環境に移すこともできます。
初回ビルドで避けたいよくある失敗
よくある問題は技術ではなく、早い段階で作りすぎることにあります。
次のミスは避けましょう。
- アカウント、決済、リマインダー、ソーシャル機能、分析を一度に始めること。 まずは習慣の作成と完了を作りましょう。
- 曖昧なプロンプトを書くこと。 「習慣トラッカーを作って」では広すぎます。画面、操作、データ項目を明示してください。
- 1つのプロンプトで変更を増やしすぎること。 小さな依頼のほうが結果が明確で、確認もしやすくなります。
- 習慣が3つしかない理想的なユーザー向けに設計すること。 10個や20個の習慣がある場合も確認してください。
- エクスポートを忘れること。 安定版に達したら、ZIPをダウンロードするかGitHubへプッシュしましょう。
- バージョン履歴を無視すること。 大きな変更の前には意味のあるチェックポイントを保存してください。
良い初回リリースとは、ユーザーが説明なしで習慣を追加し、完了でき、最近の進捗を理解できるものです。
このプロンプトを試す
Expoを使って、React Nativeでモバイルの習慣トラッカーアプリを作ってください。シンプルで洗練されたUIにして、ホーム画面には今日の習慣をカードで表示し、チェックボックスまたはタップ操作で完了にできます。習慣の作成画面と編集画面も追加してください。各習慣には名前、アイコン、色、頻度、1日あたりの目標回数を持たせてください。現在のストリークと直近7日間の完了状況を表示する進捗画面も入れてください。まずはローカルのサンプルデータのみで、サインインは不要です。落ち着いたミニマルなスタイルで、余白をしっかり取り、タップしやすい大きな操作領域にしてください。
よくある質問
Moremadeで習慣トラッカーアプリを作るには、いくらかかりますか？
Moremadeには、30日ごとに10 Build Units使える無料プランがあります。最初のサイトビルドは約8 units、小さな編集は約1 unitです。有料プランは、30日ごとに100 Build Unitsで、年払いなら月額$17、月払いなら$20からです。カスタムドメイン、非公開プロジェクトホスティング、より多い利用量が必要なら、有料プランが現実的な選択肢です。
コードを書く知識は必要ですか？
いいえ。自然な言葉でアプリを説明し、ライブプレビューを確認しながら、チャットで変更を続けられます。ただし、画面、データ、ユーザーフローを明確に考えることは役立ちます。コードが分かるなら、コードビューとエクスポート機能を使って、内容を確認したり、別の場所で開発を続けたりしやすくなります。
習慣トラッカーアプリのコードは自分のものですか？
完全なソースをいつでもZIPでエクスポートしたり、GitHubにプッシュしたりできます。Webサイトは実際のReactとTailwindのコードで、モバイルアプリはReact NativeとExpoです。つまり、プロジェクトをMoremadeの中だけに閉じ込められるわけではありません。
SupabaseとStripeは最初から追加すべきですか？
通常はいいえです。保存されたユーザーデータ、サインイン、ファイル保存が必要になったらSupabaseを追加しましょう。Stripeは、製品に本当に決済が必要な場合だけ追加してください。最初の習慣トラッカー試作品では、バックエンドの複雑さを加える前に、ローカルデータだけでフローを検証するので十分なことが多いです。
後からMoremadeの外で拡張したり作り直したりできますか？
はい。ソースコードをエクスポートしたりGitHubにプッシュしたりできるので、後で自分のワークフローで開発を続けられます。もっとも自然な進め方は、最初の版をMoremadeで作り、製品を検証し、核となる動作が確かめられてからアーキテクチャを拡張することです。