Make 連携

Lovable アプリケーションに Make を統合する方法を学びましょう

​

Make とは？

Make は、アプリ、API、データソース間のワークフローを視覚的に構築できる、強力なノーコード自動化プラットフォームです。

バックエンドロジックをコードで書く代わりに、フローチャート形式のキャンバス上でモジュールをドラッグ＆ドロップしてつなげます。次のようなケースに最適です：

• コードを書かずに自動化したい 非エンジニア
• 高速なプロトタイピングや API を使った拡張性を求める 開発者
• Slack、Airtable、Notion、Calendly、Supabase などのツールを連携させたい チーム

Make を使うと、次のことができます：

• （ボタンがクリックされたときなど）Lovable アプリから アクションをトリガー する
• Webhook や API を使って データを送受信 する
• 1,500以上のツール やカスタム API と接続する
• メール送信、AI 呼び出し、データのエンリッチメント、リマインダーなどのタスクを 自動化 する

​

なぜ Lovable と一緒に Make を使うのか？

このチュートリアルでは、Make が AI 対応のバックエンド として動作し、Lovable がフロントエンドを担当します。その結果、数分で構築できる、完全に自動化されたカスタム CRM を作成できます。

この構成は次のようなケースに最適です：

• 高度なロジックが必要な非開発者
• ワークフローが絶えず変化するセールスチーム
• バックエンドの実装・運用負荷なしで高速に反復したい場合
• リアルタイムに UI に反映される API ベースの自動化

​

ステップバイステップガイド

​

何を作るか

これから、3つのコアデータモデルを持つ CRM を作成します：

• Deals（ステージベースのトラッキング付き）
• Contacts（インライン編集対応）
• Companies（データのリッチ化が可能）

各エンティティは Make 経由でオートメーションと連携します。最後まで終えると、次のことができるようになります：

• Deal を移動してメール送信をトリガーする
• Contact をクリックして AI セールスコールを開始する
• Company をクリックしてリアルタイムデータを取得する
• Supabase Edge Functions を使ってすべてを安全に守る

​

どのように構築するか

独自のCRMを一から作ると、完成までに数か月かかることもあります。Lovable と Make を使えば、1時間もかからずにリリースでき、バックエンドコードを書くことなく営業ワークフロー全体を自動化できます。このステップバイステップガイドでは、次の機能を備えた フル機能のAI搭載CRM の構築方法を学びます。

• ビジュアルな案件パイプライン（ドラッグ＆ドロップ）
• 編集可能なコンタクトおよび企業モーダル
• Vapi を使ったAIコールエージェント
• Apollo.io による企業データのエンリッチメント
• Supabase を使ったメールワークフローとセキュリティ
• Make を使ったリアルタイム自動化

1. Lovable での CRM のセットアップ

   CRMシステムを構築するにあたり、「Deals」「Contacts」「Companies」を用意します。テーマはライトテーマにしてください。
2. 商談ステージを追加する（カンバンビュー）

   
3. 連絡先管理システムの実装

   
4. Make と Vapi を連携して、AI 対応の通話を実現する
5. Apollo を使って企業データのエンリッチメントを追加する
6. Supabase Edge Functions を使って API 呼び出しを隠す

   

   Webhook を安全に利用するには:

   • プロジェクト設定で Supabase Integration を有効にします。
   • Make へのリクエストをプロキシする Supabase の エッジ関数（Edge Function） を作成します。
   • 直接 Webhook を呼び出すのではなく、Supabase 関数を呼び出すように Lovable を更新します。

   これにより Webhook の URL がブラウザから見えなくなります — 公開アプリでは不可欠です。

   enrich ボタンをクリックする際は、Webhook アドレスへの API コールを隠すために必ず Supabase のエッジ関数を使用してください。そのためには、機能の実装を変更し、API コールが実際にブラウザから見えないようにする必要があります。

7. フォローアップやワークフローの自動化

   取引ステージに基づいてメールキャンペーンを自動化するには：

   • Make でイベントをトリガーするロジックを追加します：
     • 取引が Proposal Sent に移動したらメールを送信する
     • 取引が Negotiation に到達したら Slack でチームに通知する
     • 連絡先をニュースレターやキャンペーンフローに追加する

   これにより、あなたがオフラインのときでもセールス活動を止めることなく継続できます。

8. 最終テストとデプロイ
9. 🎉 やりましたね！

   バックエンドなしで、フル機能の AI 搭載 CRM を構築できました。

   次のステップ

   • 連携を追加: Slack、Notion、HubSpot、Calendly
   • Supabase ですべてを保護し、監査ログを追加する

​

ライブセッションのプロティップス

• Lovable 内で select＋プロンプト を使ってピンポイントな編集を行う
• 接続する前にフローを可視化・整理するために Make の Visual Canvas を使う
• 未知の JSON フィールドを動的にパースしてモーダルに渡し、UX を向上させる
• Vapi＋Apollo＋Make を組み合わせてリアルタイムの AI ワークフローを構築する
• Supabase の Edge Functions を使って、すべての公開 API／webhook 呼び出しをマスクする

​

FAQ

Make とは何ですか？

Make は、ドラッグ＆ドロップのモジュールを使ってツール同士を連携し、ワークフローを構築できるビジュアルオートメーションプラットフォームです。Zapier に似ていますが、より柔軟で開発者フレンドリーです。

なぜ Lovable と組み合わせて Make を使うのですか？

• バックエンドコードを書く必要がない
• UI（ボタン、フォーム、モーダル）からワークフローをトリガーできる
• ビジュアルにオートメーションを構築できる（エージェント呼び出し、データエンリッチメント、メールフローなど）
• 1,500+ のアプリ（Slack、Notion、Calendly、Airtable など）と接続できる

Make は Lovable とどのように連携しますか？

Lovable は HTTP Webhook を使って、通常 JSON 形式のデータを Make のシナリオに送信します。Make はそのデータを受け取り、処理を行い（例：API を呼び出す）、Lovable にレスポンスを返すこともできます。

Make の Scenarios とは何ですか？

Scenarios は自動化されたワークフローです。次のようなものを定義します：

• トリガー（例：Webhook）
• アクション（例：API 呼び出し、メール送信）
• ロジック（ルーター、フィルター、反復処理）

Make の Webhook を保護できますか？

はい。次のような方法があります：

• IP 制限（Webhook を呼び出せる送信元を制限）
• Supabase Edge Functions を使ってプロキシし、機密性の高い URL を秘匿する
• ヘッダーでの APIキー認証

Make と Supabase Edge Functions の違いは何ですか？

• Make はビジュアルなオートメーションツールで、ワークフロー、API 連携、AI トリガーなどに最適です。
• Supabase Edge Functions はサーバーレスなバックエンドコードで、ロジック、認証、セキュリティなどに最適です。

最良の結果を得るには、これらを組み合わせて使ってください。

Make プランのオペレーション数を超えた場合はどうなりますか？

シナリオは一時停止されます。Make からアラートが送信されるので、プランをアップグレードするか、フローを最適化できます。このガイド用のウェビナーで提供される 無料のプロプランには 20,000 オペレーションが含まれており、プロトタイプには十分な量です。

Lovable なしで Make の Scenarios をテストできますか？

はい! Webhook で 手動データ入力 を使うか、Postman または curl からシナリオをトリガーできます。これは Lovable と接続する前のデバッグに最適です。

​

リソース

• Make
• Vapi AI
• Apollo.io Enrichment API
• Supabase Edge Functions
• Make Academy を参照: academy.make.com