最初のアプリを作る

🔄 前回のおさらい: レッスン3では、ユーザージャーニーのマッピング、デザインシステムの定義、AIデザインツールの活用を学びました。今回は、そのデザインを実際に動くアプリにする構築プロセスを学びます。

説明から動くアプリへ

説明文が動くアプリに変わる瞬間は魔法のようです。やりたいことを入力し、30-60秒待つと、操作できるアプリが目の前に。しかし、構造化されたアプローチがなければ、この魔法は最大限に発揮されません。

ビルドワークフロー

フェーズ1：ファウンデーションプロンプトを書く

AIビルダーへの最初のプロンプトが土台を決めます。5つの要素を含めましょう：

1. WHAT: アプリが何をするか（1文で）
2. WHO: 誰が使い、何が必要か
3. SCREENS: 主要画面のリストと各画面の内容
4. FEATURES: コア機能とインタラクション
5. STYLE: デザインの好みと制約

例——習慣トラッカーアプリ：

毎日の習慣トラッキングアプリを作成。

ユーザー：毎日のルーティンを定着させたい人。

画面：
- オンボーディング：3画面でアプリを説明、その後サインアップ
- ホーム：今日の習慣チェックリスト、現在のストリーク、日付セレクター
- 習慣追加：名前、頻度（毎日/毎週）、リマインダー時間、アイコン
- 習慣詳細：履歴カレンダー、ストリーク数、達成率グラフ
- 設定：プロフィール、通知設定、テーマ（ライト/ダーク）

機能：
- チェックオフで完了マーク
- ストリーク追跡（連続達成日数）
- 毎日のリマインダー通知
- 週間プログレスサマリー
- セッション間でデータ保持

スタイル：クリーン、ミニマル、iOS風。メインカラー：インディゴ(#6366F1)。
成功カラー：エメラルド(#10B981)。白背景、控えめなカードシャドウ。
モバイルファースト、16pxベーススペーシング。

この構造でAIは一貫したアプリケーション全体を生成できます。

フェーズ2：レビューと反復改良

最初の生成結果はラフドラフト。プランと照合してレビューしましょう：

初回生成後のチェックリスト：

• すべての画面が存在するか？
• 画面間のナビゲーションが機能するか？
• コア機能が動作するか（見た目だけでなく実際に）？
• 画面間でデザインが一貫しているか？
• モバイルレイアウトが正しく表示されるか？

改良リクエストは具体的かつ焦点を絞る：

良い例：「ホーム画面の右下にフローティングアクションボタンとして
　　　　習慣追加ボタンを配置して」

悪い例：「もっと良くして」

具体的なリクエストは具体的な結果を生み、曖昧なリクエストは予測不能な変更を引き起こします。

✅ 確認クイズ: しっかりしたプロトタイプに到達するまで何回の反復が必要？（ほとんどのビルダーで3-5回。初回で構造とレイアウト、2-3回目でナビゲーションと機能ロジック、4-5回目でデザインとエッジケースの仕上げ。）

フェーズ3：バックエンドの接続

アプリにはデータの保存先が必要です。主要AIビルダーのバックエンド連携：

重要： バックエンドが実際に接続されているか確認。サインアップフローを実行し、データを作成し、アプリを閉じて再度開く。データが残っていればバックエンドは動作中。消えていればフロントエンドのみのモックアップです。

フェーズ4：実機テスト

ブラウザのプレビューだけでは不十分。実際のデバイスでテスト：

Webアプリ（Lovable、Bolt）： プレビューURLにスマホでアクセスし、タッチ操作、スクロール、フォーム入力をテスト。

ネイティブアプリ（FlutterFlow、Rork）： コンパニオンアプリやシミュレータで確認、テスト版をインストールして実機テスト。

よくある初回ビルドの間違い

1. 一度にすべてを作ろうとする — まずコアフロー（サインアップ→メイン画面→主要アクション→結果）だけ構築。設定、プロフィール、ソーシャル機能はコアが動いてから追加
2. エラー状態を無視する — 「データ取得時のローディング状態、失敗時のエラーメッセージ、データなし時の空状態を追加して」とAIに指示
3. 他の人にテストしてもらわない — アプリを知らない人にスマホを渡して使ってもらう。観察する混乱は、個人テストでは得られない貴重なフィードバック

まとめ

• ファウンデーションプロンプトに5要素（WHAT/WHO/SCREENS/FEATURES/STYLE）を含め、AIに一貫したアプリを生成させる
• 初回生成は95%完成品ではなくラフドラフト——3-5回の反復改良で95%以上の完成度に到達
• 認証は組み込みサービス（Supabase、Firebase）を利用——自前構築は絶対に避ける
• 実機テストが必須——ブラウザプレビューではタッチ操作、パフォーマンス、レイアウトの問題を発見できない
• コアフローを先に構築し、機能は段階的に追加——一度にすべて作ると散漫な結果に

次のレッスン

次は「アプリにAI機能を追加」——チャットボット、パーソナライゼーション、レコメンデーションエンジンでアプリをインテリジェントにする方法を学びます。