はじめに

ノーコードビルダーやAIエージェントを開く前に最も価値のある習慣は、まずアプリを描くことです。このレッスンでは、ページ、ユーザーフロー、データ構造を視覚的にマッピングする方法を学び、AIエージェントへのプロンプト、Airtableの接続、ダッシュボード構築など、その後のすべてのステップに明確なブループリントを持たせます。この段階を飛ばすことは、ノーコードプロジェクトが途中で頓挫する最大の理由です。

ページと画面のマッピング

まずアプリに必要な画面をすべてリストアップします。画面とは、ユーザーがアクセスするすべてのものです。ランディングページ、ログインフォーム、ダッシュボード、設定ページ、注文詳細画面などが含まれます。ホワイトボードやMiro、FigJam、紙に書き出してください。関連する画面をグループ化します。例えばマーケットプレイスアプリの場合、パブリックページ（ホーム、検索、商品詳細）、認証済みページ（ダッシュボード、メッセージ、プロフィール）、管理ページ（ユーザー管理、支払い）といった具合です。

目標は、すべての画面について一つの質問に答えることです。「ユーザーは何を見て、何ができるのか？」各画面の一文の目的を書いてください。例：「商品詳細ページ — ユーザーが写真、価格を確認し、『出品者に連絡』をクリックする。」この一文が、後でAIエージェントにUI生成をプロンプトする際の仕様書になります。

ユーザーフローを描く

ページをリストアップしたら、ユーザー間の動線を矢印でつなぎます。ユーザーフローとは、入口から目標までのステップの連続です。最初に描くべき最も重要なフローは「正常系（ハッピーパス）」です。これは、アプリを通る最もシンプルで成功する動線です。

Landing Page
  -> Click "Sign Up"
  -> Sign Up Form
  -> Submit
  -> Dashboard
  -> Click "Create Listing"
  -> New Listing Form
  -> Submit
  -> Listing Detail Page (live)

正常系の後、分岐エッジを追加します。ログイン失敗時、フォームにエラーがある場合、ユーザーが権限を持っていない場合のフローを描きます。これらの分岐により、早期にエッジケースが明らかになります。エラーのパスを描けないなら、まだアプリが何をすべきか理解できていないことになります。構築前に戻って明確化してください。

データ構造の設計

すべての画面はデータを表示し、そのデータはどこかに保管する必要があります。通常はAirtable、Notion、Supabaseです。ツールを接続する前に、テーブルとそのフィールドをスケッチしてください。よくある間違いは、巨大な一つのテーブルから始めることです。代わりに、概念ごとに別々のテーブルに分け、それらの関係を定義してください。

Users
  - id (auto)
  - email
  - name
  - created_at

Listings
  - id (auto)
  - user_id  -> links to Users.id
  - title
  - description
  - price
  - status (draft / live / sold)

Messages
  - id (auto)
  - listing_id -> links to Listings.id
  - sender_id  -> links to Users.id
  - body
  - sent_at

パターンに注目してください。各テーブルにはid、いくつかの人間可読フィールド、他のテーブルへのリンクする外部キーフィールドがあります。これはリレーショナルモデルと呼ばれ、すべてを一つのシートに詰め込むよりもはるかにスケールします。ビジュアルマップでは、各テーブルをフィールドを列挙したボックスとして描き、テーブル間の関係にはすべての矢印を引いてください。

ビジュアルプランの活用

ページ、フロー、データがスケッチできたら、その後のステップすべてを推進するドキュメントができあがります。AIエージェントにランディングページの構築をプロンプトするとき、一文の目的を貼り付けます。Airtableを設定するとき、描いた通りに正確にテーブルを作成します。アプリをテストするとき、各ユーザーフローを最初から最後まで歩いてチェックボックスを埋めます。後で新機能が要求されたら、まずマップに追加し、その後構築します。決して逆ではありません。

実践的なヒント：このビジュアルプランは、プロジェクトの全員が編集できる単一の共有ボードに保管してください。Miro、Whimsical、Googleスライドなどのツールが適しています。ボードを信頼できる唯一の情報源（source of truth）として扱ってください。実際のアプリとボードにずれが生じたら、ボードを更新してください。

まとめ

ビジュアルプランニングは、あいまいなアイデアを構築可能な仕様へと転換します。ビルダーを開く前に、ページをリストし、ブランチを含むエラー経路を含むユーザーフローを描き、リレーショナルデータ構造を設計する方法を学びました。規律はシンプルです。まず描き、次に構築し、現実が変わったら図面を更新する。これ以降のすべてのレッスンは、この成果物が存在することを前提とします。