AIでCRMを構築する方法

シンプルなCRMは、あらゆる営業プロセスを一度にモデル化しようとしない方がうまくいきます。まずは、チームが関係性と次のアクションを追える最小限から始めましょう。

最初のバージョンでは、次の内容を定義します。

• ユーザー: 自分だけ、または小規模な社内チーム
• 主要レコード: 連絡先、企業、案件
• 操作: 作成、編集、検索、絞り込み、メモ追加
• 画面: ダッシュボード、連絡先、企業、案件、連絡先詳細

各画面で何をするのかを書き出しましょう。

実用的な最初の画面構成は、次のようになります。

• ダッシュボード: 連絡先数、進行中の案件数、今月クローズ予定の案件数
• 連絡先: 名前、会社、メール、電話、ステータス、次回フォロー日を含む表
• 企業: 業種と担当者を含む企業一覧
• 案件: ステージと金額を含むパイプライン形式の一覧、またはシンプルな表
• レコード詳細: メモ、最近のアクティビティ、関連企業または案件

また、バージョン1に入れなくてよいものも決めておきます。よくある例は、メール連携、カレンダー連携、権限管理、インポート機能、そしていくつかのサマリーカードを超えるレポートです。

AIは最初の画面案を書くのは得意ですが、最初からデータ構造が明確だと、アプリを改善しやすくなります。

軽量なCRMなら、スキーマはシンプルに保ちましょう。

• contacts: id, first_name, last_name, email, phone, company_id, status, next_follow_up, notes
• companies: id, name, industry, website, owner, notes
• deals: id, name, company_id, contact_id, stage, value, expected_close_date, notes

複数人でCRMを使うなら、サインインを追加し、created_by や assigned_to のような所有者フィールドも検討しましょう。

CRMが社内利用のみで、顧客に課金しないのであれば、Stripe はおそらく不要です。Stripe が必要になるのは、CRM自体に有料アクセス、請求書、またはチェックアウトフローが必要な場合だけです。

ここは、Web優先かモバイル優先かを決めるポイントでもあります。ほとんどのCRM作業はデスクトップで確認しやすいため、Webサイトから始めるのが自然です。Moremadeでは、Webサイトは実際の React + Tailwind コードとして生成されます。

最初のプロンプトでは、製品、主要画面、スタイル、動作を説明します。生成されたアプリに十分な構造を持たせつつ、プロンプトを書く時間がテスト時間より長くならない程度に具体的にしましょう。

良い最初のプロンプトには、次の要素を含めます。

• アプリの種類
• 利用者
• 主要なエンティティ
• 画面
• 表示するフィールド
• 見た目のスタイル
• まずモックデータを使うか、すぐ実データに接続するか

最初のプロンプト例:

小規模な営業チーム向けの、シンプルな社内CRM Webアプリを作成してください。左サイドバーと上部の検索バーを備えた、クリーンでプロフェッショナルなレイアウトにしてください。Dashboard、Contacts、Companies、Deals、Contact Detail の画面を作成してください。まずはモックデータを使用してください。Contacts には name、company、email、phone、status、next follow-up date を含めてください。Companies には name、industry、website、owner を含めてください。Deals には name、company、contact、stage、value、expected close date を含めてください。レコードの作成・編集フォームに加えて、検索とフィルターのコントロールも追加してください。実務向けのビジネスUIとして React と Tailwind を使ってください。

Moremadeでは、アプリを自然な言葉で説明すると、AIエージェントがソースコードを書き、すぐにライブプレビューを確認できます。

最初のバージョンは、たいてい下書きであって完成形ではありません。役立つ習慣は、レイアウト、テーブル列、フォーム、ナビゲーション、レコード詳細など、1回に1つの領域だけを変えることです。

Moremade にはライブプレビュー、要素を指して変更できるビジュアルインスペクタ、そしてコードビューがあります。これにより、全体の説明をやり直さずにUIを詰めやすくなります。

短く具体的な追加プロンプトを使いましょう。例:

• "Contacts 画面を、name、company、status、next follow-up date でソートできる、より密度の高いテーブルレイアウトに変更してください。edit と view の行アクションは残してください。"
• "連絡先行をクリックしたときに詳細ドロワーを追加してください。notes、関連企業、関連案件、モックの最近のアクティビティのタイムラインを表示してください。"
• "Deals ページを、Lead、Qualified、Proposal、Negotiation、Won の列を持つカンバンボードにしてください。リスト表示を好むユーザー向けにテーブル切り替えも残してください。"

この段階での実用的な確認ポイントは次の通りです。

• 画面間でラベルは一貫しているか？
• 作成フォームと編集フォームで同じフィールド名を使っているか？
• 人名と企業名の両方で検索できるか？
• 重要情報を、毎回レコードを開かなくても確認できるか？
• マーケティングサイトではなく、社内ツールらしく見えるか？

1つのコンポーネントだけがおかしいなら、全体の再構築を頼むのではなく、その箇所だけ修正を依頼しましょう。

モックデータ版がしっくりきたら、実データに接続します。Moremade には Supabase 用の組み込みコネクタがあり、データベース、サインイン、ファイル保存をカバーできます。

多くのCRMでは、永続的なレコードと何らかの認証が必要になるため、Supabase が次の自然なステップです。

この段階では、次を依頼しましょう。

• contacts、companies、deals 用の Supabase テーブル
• レコードの作成・更新に紐づくフォーム
• データ取得に紐づく一覧ページ
• 複数人で使うなら基本的なサインイン
• 連絡先が企業に属する、といったレコード関係

最初の認証設定はシンプルに保ちましょう。社内CRMならメール/パスワードで十分なことが多いです。

Stripe を追加するのは、アプリに本当に支払いが必要な場合だけです。社内CRMでは通常不要です。クライアント向けCRMや有料ポータルを作るなら、Moremade で設定した価格に応じた Stripe checkout を接続できますが、明確な要件がない限り、デフォルトの構築に含めるべきではありません。

主な利用はデスクトップでも、電話番号を確認したり、案件を更新したり、会議後にメモを追加したりするために、スマートフォンでCRMを開くことはよくあります。

プレビューで、現実的なタスクをいくつか実行してみましょう。

• 新しい連絡先を追加する
• 企業を検索する
• 案件のステージを更新する
• 次回フォロー日を編集する
• レコード詳細ページを開いてメモを追加する

モバイルでは、基本を重視します。

• ナビゲーションにたどり着けるか
• テーブルが読めなくならないか
• 可能な範囲で横スクロールなしに主要アクションが見えるか
• フォームがタッチ操作で使いやすいか
• 日付フィールドとドロップダウンがタップしやすいか

モバイル対応が特に重要なら、小さい画面向けにレイアウトを調整するようAIに依頼してください。後で専用のモバイルアプリが必要になった場合、Moremade は React Native (Expo) アプリも生成できますが、多くのチームはまずWebアプリとしてCRMを検証するべきです。

アプリが使える状態になったら公開しましょう。Moremade なら、無料の yourname.moremade.ai サブドメインにワンクリックで公開できます。有料プランではカスタムドメインを接続でき、ドメインは Moremade 内で購入することもできます。

公開前に、次を確認してください。

• ページタイトルとナビゲーションラベル
• 連絡先や案件がないときの空状態
• フォームのエラー状態
• テストデータがまだ表示されていないか
• 非公開データにサインインが必要か

よくあるミスは次の通りです。

• 最初から大きくしすぎる: チームは最初の段階で、パイプライン、レポート、権限、インポート、自動化まで求めがちです。まずはきれいな中核を作りましょう。
• データモデルを省く: 連絡先と企業が明確に定義されていないと、UIはすぐに不整合になります。
• 曖昧なプロンプトを使う: "もっと良くして" のような表現より、正確な画面名と変更内容を指定した方が結果は良くなります。
• 理由なく支払いを追加する: Stripe は必要なときに便利ですが、多くのCRMでは不要です。
• モックデータのまま公開する: 社内で共有する前に、実際の Supabase データに切り替えましょう。

ソースコード全体はいつでも ZIP でエクスポートでき、GitHub にプッシュすることもできるため、アプリを Moremade の中だけに閉じ込められるわけではありません。