- デザインして、コーディング不要で視覚的にプロトタイプを作成します。
- チームとステークホルダーのためのリアルタイムコラボレーション。
- アイデアを、数分でインタラクティブなモックアップに。
- Free plan includes 30 credits per month
- Collaborate in real time with multiplayer editing and AI assistance
- Fully managed hosting, domains, SEO, and updates in one platform
両方で実際のビルドを行いました。Lovableは、Webアプリケーションを構築するチームにとって総合的な勝者です。Figma Makeは、すでにFigmaエコシステム内にいるデザイナーで、コンセプトからプロトタイプまでをより速く進めたい場合に適した選択です。
読む前に理解しておくべき最も重要なこと
Figma Makeは単独のアプリビルダーではありません。 それはFigma内の機能であり、Figma Design、FigJam、Slidesと同じナビゲーションバーからアクセスできます。使用するにはFigmaアカウントが必要です。無料のStarterプランでは利用が制限されます（1日150 AI credits、月500）。それ以上は、1人あたり月額$16のProfessionalシート、またはそれ以上が必要です。
クイックサマリー
Figma Makeは、世界で最も人気のあるデザインプラットフォームの上に構築されたAIレイヤーであり、Figmaデザイナーの生産性を高め、コンセプトからインタラクティブなプロトタイプへより速く進めることを目的としています。Lovable は、スタンドアロンの専門ツールです。Webアプリを説明すると、ライブデータベース、認証、支払い処理を備えた完全にデプロイ済みのフルスタック製品が得られます。重なる部分はありますが、対象ユーザーは異なり、どちらを選ぶべきかは出発点によって決まります。
| 機能 | Figma Make | Lovable |
|---|---|---|
| 開始価格 | Figma Professionalに含まれる（$16/フルシート/月） | $25/月（無制限ユーザー） |
| 無料トライアル/プラン | あり（Starterで1日150 AI credits、月500） | あり（1日5クレジット、月30の上限） |
| 使用AIモデル | Default、Claude Sonnet 4.6、Gemini 3 Flash、Gemini 3.1 Pro（選択可能） | OpenAI、Google Gemini、Anthropicの組み合わせ |
| スタンドアロンツール | いいえ（Figma内で動作；Figmaアカウントが必要） | はい（前提となるプラットフォームなし） |
| ノーコードビルダー | 部分的（プロンプト優先；インラインの視覚編集とコードアクセスもあり） | はい（技術的知識は不要） |
| 事前構築テンプレート | Figma Communityライブラリ（デザイナー向けに豊富） | はい（コミュニティプロジェクト + Business+デザインテンプレート） |
| カスタムコードの書き出し | はい（GitHub連携；ダウンロード；Make内のコードエディター） | はい（GitHub sync、完全なコード所有権） |
| Webアプリ対応 | はい（React + Tailwind；Supabaseを備えたフルスタック） | はい（React/TypeScript/Tailwind） |
| API連携 | GitHub、Supabase、Google Analytics、カスタムコード挿入 | 80+の検証済み連携；ネイティブのSupabaseとStripe |
| ネイティブStripe: checkout、subscriptions、webhooks | ネイティブの支払い連携なし | はい（native Stripe: checkout、subscriptions、webhooks） |
| デプロイオプション | figma.siteサブドメイン；設定でカスタムドメイン | lovable.app、カスタムドメイン、GitHub sync |
| リアルタイム共同作業 | はい（Figmaのマルチプレイヤーが全製品で利用可能） | はい（共同作業者無制限、マルチプレイヤーのワークスペース） |
| バージョン管理 | 自動バージョン管理（Version 1、2、3…）；チャットでロールバック | 組み込みのロールバック + GitHub同期 |
| コード所有権 | はい（GitHub連携；ZIPとしてダウンロード） | はい（完全な所有権、GitHub同期） |
1. 価格とプランの比較
Lovableの無制限チーム料金は、Figmaをすでに支払っていないあらゆるチームに対して、Figma Makeの1シートごとのモデルを上回る
| 機能 | Figma Make | Lovable |
|---|---|---|
| 無料プラン | Starter: 150 AIクレジット/日, 500/月 (制限あり; 無制限生成なし) | Free: 1日5クレジット, 月30クレジット上限 |
| エントリープラン | Professional: $16/フルシート/月 (+ 3,000 AIクレジット/月) | Pro: $25/月 (ユーザー数無制限) |
| ミッドティアプラン | Organization: $55/フルシート/月 (+ 3,500 AIクレジット/月) | Business: $50/月 (ユーザー数無制限) |
| チーム向けシートの種類 | Professionalではフルシート ($16), Devシート ($12), Collabシート ($3) | 単一プランですべてのユーザーをカバー |
| エンタープライズ | $90/フルシート/月 (+ 4,250 AIクレジット/月) | カスタム |
| 年間割引 | はい (OrganizationとEnterpriseは年間請求) | はい |
Figma Make
Figma Makeの価格はFigmaの価格から切り離せない; それらは同じサブスクリプションです。実際には、これは次のことを意味します:
コストは、あなたのチームがどこから始めるかだけに完全に依存します:
すでにFigmaを使っていますか？ Makeに追加費用はかかりません。AIクレジット（Professionalでは3,000/月、Organizationでは3,500）はFigmaのAI機能全体で共有されますが、フルシートはすでに支払い済みです。
Figmaを使っていませんか？ 1つの機能にアクセスするために、世界をリードするデザインプラットフォームを購入することになります。Professionalのフルシート1枚は$16/月、5人なら$80/月です。それで手に入るのはFigma Design、FigJam、Slides、Buzz、Sites、Draw、そしてMake: ほとんどのアプリビルダー利用者には不要な、完全なデザインツールキットです。
契約する前に、クレジットシステムを理解しておく価値があります:
- Starter (無料): 1日150 AIクレジット, 月500クレジット。評価には十分; 継続的な構築には不十分です。
- クレジットは共有されます: Makeだけでなく、すべてのFigma AI機能にわたって共有されます。画像編集、Design AIツール、Makeはいずれも同じプールから消費します。
- セッション途中の警告: 積極的に構築していると、「AIクレジット残高を確認してください」という通知が表示されることがあります; それに応じて計画してください。
シートの種類は重要です。 Figma Makeにはフルシートが必要です。Devシート ($12/月) と Collabシート ($3/月) には完全なMakeアクセスは含まれません。チームの一部のメンバーだけがMakeで構築する必要がある場合、シートの種類を混在させることはできますが、Makeで作成する人は全員、$16/月以上のフルシートが必要です。Lovable
Lovableのモデルは、席課金制のどのシステムよりも構造的にシンプルです。1つのサブスクリプション、無制限のユーザー、1つの価格。
- Free ($0): 1日5クレジット、月間上限30。インターフェースを試し、1つのビルドをテストするには十分ですが、継続的な本番開発には不十分です。
- Pro ($25/month): 1つのサブスクリプションで無制限のユーザー。クレジットの次の請求サイクルへの繰り越し、カスタムドメイン、公開済みアプリからのバッジ削除、オンデマンドのクレジット追加、マルチプレイヤー・ワークスペース（Lovable 2.0）が含まれます。有効な学術用メールアドレスを持つ学生は最大50%オフになります。
- Business ($50/month): Proのすべてに加えて、SSO（Google Workspace、Okta、または同様のIDプロバイダーを使用するチーム向け）、ロールベースのアクセス制御、セキュリティセンターダッシュボード、優先サポートが含まれます。それでも無制限のユーザーをカバーします。
- Enterprise: 専用サポート、高度なコンプライアンス文書、カスタムインフラストラクチャ、SLA保証のためのカスタム価格設定。
席ごとのカウントはなく、ビルダーとビューアーの区別もなく、チームが成長しても不均等に分割されるクレジットプールもありません。2人の創業チームと40人のプロダクト組織が、Proでは同じ $25/month を支払います。
新しい人が参加してアクセスが必要になった場合も、購入する新しい席も、請求管理者の承認も、追跡する人員数もなく、そのままワークスペースに参加します。
年間請求では有料プランに割引が適用されます。チームが次のリセット前に月間割り当てを使い切った場合、オンデマンドのクレジットはサイクル途中で購入できます。
勝者の要約: 正直な答えは状況次第です。すでに Figma Professional を使っているデザイナーにとって、Figma Make は実質無料です。既存のワークフローにゼロの追加コストで追加できます。Figma を使っていないチームの場合、Make を選ぶと最低でも $16/seat/month を支払うことになり、5人で $80/month まで上がります。一方で Lovable は固定の $25/month です。すでに Figma のサブスクライバーではない6人以上のチームにとっては、Lovable のほうが大幅に安く、デザインプラットフォームのオーバーヘッドもありません。
2. AI機能 &機能比較
Figma Makeのモデルセレクター、エコシステムへの埋め込み、自己修復コードがこのカテゴリで際立っています
| 機能 | Figma Make | Lovable |
|---|---|---|
| 使用AIモデル | Claude Sonnet 4.6, Gemini 3 Flash, Gemini 3.1 Pro, or Default（プロンプトごとに選択可能） | OpenAI, Google Gemini, Anthropic の組み合わせ |
| モデル選択 | はい（毎回プロンプトの前にモデルを選択） | いいえ（単一モデルで、ユーザーは選択不可） |
| 自然言語処理 | 優秀（開発者とデザイナーにやさしく、生成前に推論を説明） | 強力（終始平易な英語。技術知識は不要） |
| コード生成品質 | 優秀（Radix UI、MUI、Recharts、Tailwind CSS v4、Lucide アイコン；プロフェッショナルなスタック） | 優秀（React/TypeScript/Tailwind；本番グレード） |
| ビルド前の透明性 | はい（AI が計画、スタックの選択、コンポーネントの決定をリアルタイムで説明） | はい（生成前に構造化されたビルド計画; 不足している依存関係をフラグ付け） |
| 自己修復コード | はい（警告を検出し、”Fix for me”を提示し、根本原因を診断） | はい（エラーに対するワンクリックの”Try to fix”） |
| Figmaエコシステムへの埋め込み | はい（MakeリンクをFigma Design、FigJam、またはSlidesに貼り付け; ライブプロトタイプがキャンバス上で再生される） | いいえ（単体ツール） |
| 指して編集 | はい（要素をクリック; 書式設定ツールバーが表示される; 選択した要素にプロンプトの範囲が限定される） | はい（Visual Edits; 任意の要素をクリックして調整） |
| デザインシステム統合 | はい（Figmaコンポーネントライブラリにアクセス; 既存のデザインシステムのワークフローに埋め込める） | いいえ（デザインファイルとは独立） |
| バックエンド統合 | Supabase（認証、データベース、ストレージをプロンプト経由で） | Supabase（ネイティブで深い統合） |
| コンテキストの透明性 | はい（AIがRecharts、Tailwind v4の選択を明示し、不足しているパッケージに言及; 推論が可視化される） | はい（生成前にビルド計画が返される） |
| コードエディタへのアクセス | はい（Make内のフルなVS Code風エディタ; ファイルツリー; package.jsonを編集可能） | はい（Dev Mode、ブラウザ内エディタ） |
| セッションメタデータ | はい（”8ファイルで作業しました”が表示される; 使用状況統計: credits, commands, time） | 同じ詳細では公開されていない |
Figma Make
Figma Makeの最も特徴的なAI機能は、このシリーズの他のどのプラットフォームにもないものです: 各プロンプトの前にモデルを選べることです.
チャットパネル下部にセレクターが表示される。4つのオプション:
- デフォルト: Figmaの推奨する、速度と能力のバランス
- Claude Sonnet 4.6: “バランスが取れていて効率的”で、Anthropicモデルを扱う人なら誰でもなじみのある
- Gemini 3 Flash: “速く、反復的”: 素早いフィードバックが欲しいときの迅速なビジュアル変更に最適
- Gemini 3.1 Pro: “深く、創造的”: 複雑なレイアウトやニュアンスのある生成に最適
生成前の透明性。 NexaHostの分析ダッシュボードのプロンプトを送信したとき、Figma Makeは1行のコードを書く前にそのアプローチを説明した。
自己修復コード。 出力に10件を超える警告が含まれていると、システムは「私のために修正」を提案した。AIは問題を診断した。チャートデータ内の重複キーがキーの競合とアニメーションの問題を引き起こしていたのだ。各データポイントに一意の識別子を割り当て、競合するチャートアニメーションを無効化した。修正は外科的で的確だった。
Figmaエコシステムへの埋め込み。 Figma Makeのリンクをコピーし、Figma Designファイル、FigJamボード、またはSlidesデッキのどこにでも貼り付けると、ライブのインタラクティブなプロトタイプがそのキャンバス上で直接再生される。
コンポーネント品質。 NexaHostダッシュボードでは、@mui/material、@radix-ui コンポーネント、lucide-react をアイコンに、@emotion をスタイリングに、そしてrecharts をデータ可視化に使用した。これは、簡略化されたひな形ではなく、シニアフロントエンドエンジニアが使うようなものだ。
Lovable
LovableのAIは1つのことに特化しており、それを完全にやり遂げる。前提条件なしで、平易な英語のプロンプトからフルスタックのWebアプリケーションを生成し、デプロイすることだ。
1つのプロンプトからフルスタック。 InvoiceProの構築では、1つのプロンプトで以下のすべてが生成され、10分未満で構築、接続され、稼働した:
- clients、invoices、time_entriesの3つの関連テーブルと正しい外部キー関係を備えたSupabaseデータベース
- メール/パスワードとGoogle OAuthを含む認証
- 3つの料金プラン、チェックアウトリンク、Webhook処理を備えたStripe連携
- ユーザーごとのデータスコープが正しいクライアント向けポータル
- lovable.app上のデプロイ済みURL
選ぶモデルはない。フレームワークの決定もない。確認すべき警告もない。
ビルド前の計画。 コードを書く前に、Lovableはすべての機能、技術選択、そして不足している依存関係（Supabase接続要件など）を明記した構造化された計画を返す。これにより、AIがアーキテクチャを確定する前にレビューの瞬間が生まれ、Figma Makeの透明な推論ステップに似ているが、フルスタックに適用される。
80以上のネイティブ統合。 Stripe、Supabase、OpenAI、Resend、PostHog、Cloudinary、Twilioなどが、APIキーを貼り付ける必要もなく、ボイラープレートを書く必要もなく、Connectorsサイドバーを通じて接続される。Figma Makeのネイティブ統合リストはGitHub、Supabase、Google Analyticsをカバーしている。3つの統合対80以上。Lovable 2.0 の機能:
- Dev Mode: VS Code風のブラウザ内コードエディタ、コンポーネントの直接編集
- Visual Edits: 任意の要素をクリックして、テキスト、色、余白、または間隔を CSS レベルで調整
- Themes: グローバルなデザイントークンパネル（色、フォント、角丸）により、1つの設定からサイト全体に変更を適用
- Multiplayer workspaces: 複数のチームメンバーが同時に作業できます
- AI Connectors: AIサービス、ベクターデータベース、ワークフローAPIへの事前構築済みの経路
Winner Snapshot: Figma Make は、モデルレベルの制御を求めるデザイナーと開発者チーム向けのAI機能で勝利します。プロンプトごとに Claude Sonnet 4.6、Gemini Flash、または Gemini Pro を選択でき、反復で不足した場合はより強力なモデルへエスカレーションできる機能は、この比較シリーズの他のどのプラットフォームにもない真の機能です。
3. アプリ生成速度 &品質比較
Figma Make はフロントエンドではより高速; Lovable はより完全なプロダクトを提供します
| 機能 | Figma Make | Lovable |
|---|---|---|
| 最初の結果までの時間 | 2分以内（複雑な複数ページのダッシュボード） | 10分以内（完全にデプロイされたフルスタックアプリ） |
| 作成されたもの | シミュレーションデータを使ったフロントエンドのダッシュボード; ベースビルドにバックエンドなし | フルスタックアプリ（認証、データベーススキーマ、Stripe決済、クライアントポータル） |
| ビジュアルデザイン品質 | 非常に優秀（プロフェッショナルなコンポーネントスタック; 文脈に即したリアルなデータ） | 高い（洗練されたSaaSグレードのUI） |
| コード構造 | Radix UI、MUI、Recharts、Tailwind v4; 適切なコンポーネント分離 | React/TypeScript/Tailwind; 型付きコンポーネント; 構造化されたフォルダ |
| データのリアリティ | AI生成のリアルなアクティビティフィードの内容 | 標準的なプレースホルダーパターン、正確な構造 |
| バックエンドの完全性 | ベースビルドには含まれません（Supabase は別途追加） | 最初のビルドから完全（認証、DB、Stripe が接続済み） |
| コード警告状態 | 生成後も警告が残る場合があります; 手動修正が必要になることが多い | ほぼクリーンな出力; ワンクリック修正あり |
| 本番対応度 | 中程度（優れたフロントエンド、バックエンドのセットアップが必要） | 中〜高（デプロイ済みフルスタック、RLS の確認を推奨） |
Figma Make: NexaHost SaaS分析ダッシュボード
私は、ダークなサイドバー、KPIカード、トラフィックチャート、最近のアクティビティフィードを備えた、NexaHost という架空のホスティング会社向けの完全な SaaS分析ダッシュボードを1つのプロンプトで依頼しました。速度: 送信を押してから2分未満で完全にレンダリングされ、操作可能になる。これにはAIの推論フェーズ、完全なコード生成、キャンバスのレンダリングが含まれる。出力の複雑さを考えると、これはこの比較シリーズにおける最速の生成時間だ。
品質: ダッシュボードに含まれていたもの:
- NexaHostブランド、”Analytics Dashboard”サブタイトル、および5つのナビゲーションリンク（Overview, Servers, Traffic, Billing, Settings）を備えたダークなサイドバーで、Overviewがすぐに青色でハイライトされている
- 機能する検索フィールドと、通知ベルとアバターを備えた “Sarah Chen / Admin” ユーザープロファイルのあるトップバー
- 4つのKPIカード: 稼働率 (99.98%), 稼働中サーバー (47), 月間帯域幅 (2.4 TB), 未解決チケット (8)、それぞれ先月比のトレンド指標付き
- 30日間のTraffic Trendsチャートが、機能するRechartsのエリアビジュアライゼーションとしてレンダリングされており、実際の日付ラベルがMay 11からJune 5まで、y軸ラベルが20k間隔、そして40k-80kの帯域幅範囲のデータを備えている
- プラン別MRRの棒グラフとサーバーステータス分布のビジュアライゼーション
- Recent Activityフィードには、文脈に即したリアルなホスティングイベントが含まれていた: web-prod-03のサーバー展開成功、db-master-01で87%の高CPU警告、api.nexahost.comのSSL証明書期限切れ警告、入金通知、そして予定されたメンテナンスウィンドウ。いずれもドメインに適したもので、一般的なものは一つもない
アクティビティフィードの詳細は、少し立ち止まって考える価値がある。Figma Makeは単にプレースホルダーテキストを埋めただけではなかった。ホスティングダッシュボードという文脈を理解し、ホスティング運用チームが実際に目にするようなリアルな運用イベントを生成したのだ。
コンテンツ生成におけるこの文脈的知性は本当に印象的で、AI生成のダミーデータがどうあるべきかの基準を打ち立てている。
警告の問題。 生成後、10件を超える警告が表示された。”自分で修正して”でその数は3まで減ったが、その後の編集で9まで戻り、さらに再び10件を超えた。ダッシュボードはその間ずっと問題なくレンダリングされ、機能し続けた。しかし、生成されたコードを本番に持ち込むことを計画しているチームにとっては、反復のたびに新しい警告を自ら生成するコードベースは、コミットする前にさらにテストする価値がある。Lovable: InvoiceProの構築
私は、マルチテナントのダッシュボード、時間追跡、PDF出力付きの請求書作成、Stripe決済、そしてSupabaseを基盤としたクライアントポータルをカバーするクライアントポータル兼請求アプリについて、1つのプロンプトを送信した。
スピード: Lovableは、コードを一切書く前にビルドプランを返し、Supabase接続が必要であることを指摘し、接続後に開始した。主なマイルストーン:
- 4分時点: ヒーローテキストと6つの機能カードを備えたランディングページが公開
- 価格セクション: Starter ($9/month), Professional ($29/month, “一番人気”), Enterprise ($79/month)
- 10分未満: Supabase認証、データベーステーブル、Stripe checkoutがすべて接続された状態でlovable.appにデプロイ
品質: InvoiceProに含まれていたもの:
- 3つの関連テーブル（clients、invoices、time_entries）を持つSupabaseデータベースで、外部キーの関係は正しく、SQLは手作業で書かれていない
- 認証: email/passwordとGoogle OAuth、設定および接続済み
- Stripe統合: 3つの料金ティア、checkoutリンク、請求ポータルのルーティング、サブスクリプション同期、支払いイベントのWebhook処理
- ユーザーごとに正しくデータがスコープされるクライアント向けポータル
- 型付きデータ配列、名前付きコンポーネントファイル、論理的なフォルダ構造を備えたクリーンなReact/TypeScript/Tailwind
- 10分以内に共有可能なURLでライブデプロイ
Supabase環境変数の欠落により空白のプレビューが発生したとき、プレーンテキストのエラー説明が「Try to fix」ボタンとともに表示された。1回のクリックで解決した。
勝者スナップショット:
スピード: Figma Makeの勝利: 2分未満対Lovableの10分。フロントエンドデザインの迅速な反復を必要とするチームにとって、その差は本当に大きい。
出力の品質: Figma MakeのNexaHostダッシュボードは、この比較シリーズの中で視覚的に最も印象的なフロントエンドだ。文脈に即したアクティビティフィード、プロフェッショナルなコンポーネントスタック、そして機能するチャート実装は、卓越したAI生成フロントエンド作業を示している。
完全性: Lovableの勝利。InvoiceProは、認証、本物のデータベース、決済処理を備えた、完全にデプロイ済みの製品だった。NexaHostは、実際のアプリケーションになるために追加のSupabaseセットアップを必要とした、見事なフロントエンドだった。今日動く製品を必要とする読者にとって、Lovableの10分で完全配線された出力は、2分でできた美しいプロトタイプよりも価値が高い。
4. 使いやすさの比較：どちらのプラットフォームの方が使いやすいか？
Lovableは前提となるプラットフォームもデザインのバックグラウンドも不要；Figma Makeは既存のFigma経験が活かされる
| 機能 | Figma Make | Lovable |
|---|---|---|
| アカウント設定 | 既存のFigmaアカウントがそのまま引き継がれる（最速）；新規ユーザーはまずFigmaアカウントが必要 | 簡単（メールまたはソーシャルログイン；短い導入アンケート） |
| 事前に必要なツール | はい（Figmaアカウント；Figmaのインターフェースに慣れていると大幅に有利） | いいえ（スタンドアロン；前提条件なし） |
| ダッシュボードのナビゲーション | 既存のFigmaユーザーには簡単；新規ユーザーがまずFigmaのインターフェースを理解する必要がある場合は中程度 | 簡単（プロンプト優先；サイドバーにプロジェクトビューとRecents） |
| 最初のアプリ作成 | Figmaを知っていれば非常に速い；知らない場合はFigmaの導入オーバーヘッドが加わる | 簡単（完全なプロンプトを受け付ける；バックエンド向けのSupabase接続はガイド付き） |
| プロンプトエンジニアリングが必要 | 低い（平易な英語で十分；技術的な言い回しは任意だが結果は良くなる） | 低い（終始平易な英語で十分） |
| カスタマイズ：チャットベース | はい（メッセージ入力欄で変更内容を説明） | はい（フル機能のプロンプトベース編集） |
| カスタマイズ：ビジュアルインライン | はい（Point and Edit：要素をクリック；要素の上に書式設定ツールバーが表示される） | はい（Visual Edits：要素をクリックしてプレビュー上で調整） |
| カスタマイズ：コードレベル | はい（ファイルツリー付きの完全なコードエディター；package.jsonは編集可能；プライベートnpmパッケージを設定可能） | はい（Dev Mode；VS Code風のブラウザ内エディター） |
| エクスポート/デプロイ | 簡単（figma.siteに公開；設定内のGitHub；ZIPとしてダウンロード） | 簡単（lovable.appへのワンクリック、またはGitHub同期） |
| 学習曲線 | Figmaユーザーには低い；Makeと並行してFigmaも学ぶ必要がある新規ユーザーには中程度 | 低い |
登録とアカウント作成
Figma Makeの オンボーディングは、どこから始めるかによって2つのまったく異なる体験があります：
- 既存のFigmaユーザー：figma.comにアクセスし、アカウントを作成する前にプロンプトを入力し、Googleまたはメールでサインインすると、数秒でMakeの中に入れます。プロンプトは自動的に引き継がれます。
- 新規のFigmaユーザー：まず複数の製品（Design、FigJam、Slides、Buzz、Sites、Draw、Make）を備えた本格的なデザインプラットフォームに出会います。Makeへ移動し、それが他のツールと比べて何をするものなのかを理解することに、実際のオリエンテーション時間が追加されます。
Lovableの サインアップは、短い役割アンケートを通じて進みます。ダッシュボードは、先に理解すべき他のプラットフォームなしに、すぐに読み込まれます。
サインアップには、GoogleやAppleに加えて、認証オプションとしてGitHubも含まれています。Lovableは最後に使った方法も記憶しており、これは繰り返し利用するユーザーにとって小さいながらも気の利いた配慮です。
ユーザーインターフェースとダッシュボード
Figma Makeの ワークスペースは、2つの主要なゾーンに分かれています。左側のパネルが会話を担当し、下部にプロンプト、上部にAIの応答と推論、スクロール可能なラベル付きカードとしてバージョン履歴が表示されます。右側のゾーンは、出力がレンダリングされるライブキャンバスです。
キャンバスのツールバーには、理解しておく価値のある3つのビューがあります:
- プレビューモード (目アイコン): ライブのインタラクティブプロトタイプ
- コードモード (山括弧アイコン): 左に完全なファイルエクスプローラー、右にコードエディタ
- 統合レイアウト: 両方を同時に
それらの切り替えは即座に行われ、生成を中断しません。コードビューでは、完全なプロジェクト構成が表示されます: App.tsx、すべてのコンポーネントファイル、package.json、設定ファイルがあり、すべてのファイルを直接編集できます。
チャットパネルの下部には、新しいプロンプト用の追加ボタン、モデル選択ドロップダウン、AI設定用のスパークアイコン、そしてBuild/Defaultモード切り替えがあります。これらのコントロールが、ワークフロー上の判断の大半を行う場所です。
Lovableの ダッシュボードは、パーソナライズされたあいさつとともに、温かみのある青からピンクへのグラデーションで開きます。プロンプトボックスには「Lovableに、次のようなウェブアプリを作るよう依頼してください…」と表示され、BuildモードのトグルとConnectorsバナーがあります。
左側のサイドバーにはホーム、検索、リソース、Connectorsが並び、その後にプロジェクトビューと最近の項目セクションが続きます。技術に詳しくないユーザーにとって、このダッシュボードのほうがより直感的に理解しやすいです。
Point and Editシステム
Figma MakeのPoint and Edit インライン編集は、最も強力な使いやすさの機能です。NexaHostのダッシュボードがレンダリングされた後、私は「30日間のトラフィックトレンド」の見出しをクリックしました。同時に2つのことが起こりました:
- h3 タグ識別子がチャット入力欄に表示され、次のプロンプトの対象がその正確な要素に絞られました
- キャンバス上のその要素の直上に、豊富な書式設定ツールバーが表示されました: フォントファミリー、サイズ、太字、斜体、配置、その他のコントロール
チャットで変更内容を平易な英語で説明することも、プロンプトを書かずにツールバーを通じて要素を直接操作することもできました。このハイブリッドなアプローチは、すべての変更をAIにルーティングするツールよりも実用的です。特に小さな修正では、タイプミスの修正や価格の変更に、AIがプロンプトを解釈するのを待つ必要がありません。
初期世代のチュートリアルオーバーレイは、Point and Editを4つのステップで案内し、まさに適切なタイミングで表示されます: 最初の出力がレンダリングされた後、実際にその情報が必要になったときです。Lovableの Visual Editsも同様に機能します: プレビュー内の任意の要素をクリックして、テキスト、色、パディング、またはスペーシングを調整できますが、同時フォーマットツールバーはありません。
Lovableのビジュアルエディタでの変更は直接CSS編集を通じて行われますが、Figma Makeのツールバーは、テキスト入力なしで即時フォーマットできるオプションを追加します。
使いやすさの総合評価
率直な分かれ目:
- すでにFigmaを使っていますか？ Makeのほうが簡単な道です。切り替えコストも、新しいダッシュボードもなく、出力はデザインファイルと並んでRecentsに表示され、Figmaのマルチプレイヤーは自動的にMakeプロジェクトにも拡張されます。
- Figmaを使っていませんか？ Lovableのほうが簡単です。シートタイプの決定も、クレジット残高の監視も、プラットフォームのオンボーディングの負担もありません。ただアプリを説明すれば、それはデプロイされます。
勝者の概要: 既存のFigmaワークフローを持たないチームにとって、使いやすさではLovableが勝ちます。Figmaネイティブのチームでは、使いやすさの方程式は逆転します。Makeは彼らがすでに知っている環境内でアクセスでき、Lovableは追加でオンボーディングするプラットフォームになります。決め手となる変数は、あなたのチームが今日どこにいるかです。
5. プライバシーとセキュリティの比較: どのプラットフォームがより安全か？
Figmaは、この比較シリーズで最も広範なコンプライアンス・ポートフォリオを持つが、公開には重大なプライバシーリスクが存在する
| 機能 | Figma Make | Lovable |
|---|---|---|
| SOC 2 Type II | はい（独立監査人による年次レビュー） | はい（Type 1 と Type 2） |
| ISO 27001 | はい（ISO/IEC 27001:2022 認証済み） | はい（ISO 27001:2022） |
| ISO 27017 | はい（クラウドセキュリティ管理） | 未確認 |
| ISO 27018 | はい（クラウドプライバシー保護） | 未確認 |
| ISO 27701 | はい（プライバシー情報管理） | 未確認 |
| FedRAMP Moderate | はい（米国政府レベルのクラウドコンプライアンス） | 未確認 |
| GDPR | はい（EU Cloud Code of Conduct; DPA 利用可能） | はい（完全なGDPR準拠） |
| CCPA | はい | 未確認 |
| TISAX | はい（欧州自動車業界のセキュリティ） | 未確認 |
| C5 | はい（ドイツ政府支援のクラウド標準） | 未確認 |
| プライバシーモード | はい（TeamsおよびOrganizationプラン; SSO 利用可能） | 公開文書なし |
| コード所有権 | はい（GitHub; ZIP としてダウンロード） | はい（GitHub sync） |
| コミュニティ公開リスク | はい（”Show chat history” のチェックを外さない場合、チャット履歴がデフォルトで公開される） | コミュニティ公開機能なし |
Figma Make
Figmaのコンプライアンス・ポートフォリオは、この比較シリーズのどのプラットフォームよりも最も広範です:
- SOC 2 Type II: セキュリティ管理策の継続的な有効性を確認する年次の独立監査
- SOC 3: SOC 2の調査結果を公開向けにまとめたレポート
- ISO 27001:2022: 情報セキュリティマネジメントに関する国際規格
- ISO 27017: クラウド固有のセキュリティ管理策
- ISO 27018: クラウドにおける個人を特定できる情報の保護
- ISO 27701: プライバシー情報マネジメントシステム認証
- FedRAMP Moderate: 連邦機関での採用に必要な認証レベルである、米国政府水準のクラウドコンプライアンス
- GDPR: EU Cloud Code of Conductへの準拠; Data Processing Addendumを利用可能
- CCPA: California Consumer Privacy Actへの準拠
- TISAX: 欧州自動車業界の情報セキュリティ標準
- C5: 規制対象および公共部門の顧客向けのGerman Federal Office for Information Security認証
規制産業（金融サービス、医療、政府、自動車）のエンタープライズチームにとって、この幅広い認証は、Figmaがコンプライアンス対応を済ませていることを意味します。compliance.figma.com のTrust Centerでは、すべての認証が公開されています。
公開前に、すべての読者が知っておくべき重大なプライバシーリスクが1つあります。 Figma Make Publishパネルには、「チャット履歴を表示」というチェックボックスがあり、それはデフォルトでオンになっています。これをオフにせずにFigma Communityに公開すると、Communityの掲載ページを閲覧する人は誰でも、あなたの完全なプロンプト会話を見ることができます: あらゆる反復、却下したあらゆる方向性、指定したあらゆる詳細。
個人的な学習プロジェクトであれば、これは無害です。クライアントワーク、独自の製品仕様、または商業的に機密性の高いあらゆるビルドにおいては、これは重大なデータ露出リスクです。公開フローでは目立つように警告されておらず、見落としやすいです。
Lovable
Lovableは、独立した監査を受けた3つの認証を保持しています。それぞれについて、実務的な観点から理解する価値があります:
- SOC 2 Type 1 and Type 2: Type 1は、セキュリティ管理策が適切に設計されていることを確認します。Type 2は、それらの管理策が継続的な監査期間にわたって効果的に運用されたことを確認します。両方を保持していることは、その評価が設計意図だけでなく、実際の運用実績も対象としていたことを意味します。
- ISO 27001:2022: 情報セキュリティマネジメントシステムに関する国際規格で、クラウド環境とサプライヤー関係を対象としています。2022年版では、特にクラウドサービスに関する更新された要件が反映されています。
- Full GDPR compliance: プラットフォームのデフォルトとして確認されており、デプロイ構成に依存しません。EU拠点のチームは、セルフホスティングを検討することなく対象となります。
コードの所有権は全体を通じて明確です: GitHub同期により、独自形式の抽出なしでいつでもクリーンに移行できます。
勝者のスナップショット: Figmaはより包括的なコンプライアンス文書を備えています: ISO 27017, ISO 27018, ISO 27701, FedRAMP Moderate, CCPA, TISAX, およびC5は、Lovableが公開して確認している範囲を超えています。規制業界のエンタープライズ調達にとっては、FigmaのTrust Centerのほうがより強力なリソースです。トレードオフとして、コミュニティ公開におけるプライバシーリスク（チャット履歴がデフォルトで公開されること）は、Lovableにはない実際の運用上の懸念です。個人情報を含まないFigma Makeプロジェクトを公開する前に、「Show chat history」設定がオフであることを確認してください。
6. プラットフォーム統合とデプロイオプションの比較
LovableのネイティブStripeを含む80以上の統合が圧勝; Figma Makeには決済処理機能がない
| 機能 | Figma Make | Lovable |
|---|---|---|
| ネイティブホスティング | はい（figma.site; 設定でカスタムドメインを利用） | はい（lovable.app） |
| カスタムドメイン対応 | はい（Domains設定経由） | はい（Proプラン以上） |
| GitHub連携 | はい（リポジトリを接続; 生成されたコードをプッシュ） | はい（完全同期、ブランチ管理） |
| Vercel/Netlify連携 | いいえ（まずGitHubにプッシュし、その後別途接続） | はい（GitHub同期経由） |
| データベースオプション | Supabase（統合プロンプト経由; 2段階目としてセットアップが必要） | Supabase（ネイティブで深く統合され、最初のビルドから自動） |
| 決済処理 | ネイティブな決済統合はありません | はい（ネイティブStripe: checkout、subscriptions、webhooks、billing portal） |
| 認証 | Supabase Auth（email/password、magic links、Google、Supabase統合経由のGitHub） | Supabase Auth、Google OAuth（最初のビルドから） |
| 分析 | Google Analytics（設定のG-XXXXXXXXフィールド; プラグイン不要） | PostHog、Mixpanel、Google Analytics（80以上のカタログに含まれる） |
| カスタムコード挿入 | はい（<head>と<body>の開始/終了; どのscript tagでも受け入れ可） | 直接の設定フィールドとしては不可 |
| AI/API統合 | カスタムAPIエンドポイントを設定可能; プライベートnpmパッケージは「Configure your code」ダイアログ経由 | 80以上の検証済み統合; AI Connectorsパネル |
| コミュニティ公開 | はい（Figma Community; プロトタイプは見つけられ、チャット履歴はデフォルトで公開） | コミュニティ公開機能なし |
| デザインファイルへの埋め込み | はい（任意のFigmaキャンバスにMakeリンクを貼り付け; ライブプロトタイプがインラインで再生） | いいえ |
| SEOメタディスクリプション | 出力内容に基づいてAIが自動生成 | 自動生成されない |
| 開発者コンソール | はい（キャンバス内のJavaScriptコンソール。別のDevToolsウィンドウは不要） | 標準搭載なし |
Figma Make
Figma Makeの統合戦略は、設計上きわめて最小限です。主要な接続は3つ、加えてエスケープハッチがあります:
Supabase。 実際のバックエンドを追加するには、2回目のプロンプトが必要で、自動ではありません。必要なものを説明します（「Supabase Authを追加する」や「注文追跡用のデータベースを作成する」など）と、AIがそれを組み込みます。
GitHub。 設定パネルからリポジトリを接続し、生成されたコードをプッシュします。これにより、適切なバージョン管理、CIパイプライン統合、開発チームへの引き継ぎが可能になります。GitHubに送られるコードは、生成されたものと同じ本番向けスタックです。Radix UIコンポーネント、Recharts、Tailwind v4、型付きコンポーネントファイルです。
Google Analytics。 一般設定の1つの欄でG-XXXXXXXXのトラッキングIDを受け付けます。挿入するscriptタグも、インストールするプラグインもありません。公開したアプリは、設定だけでGA4アナリティクスを利用できます。
カスタムコード挿入。 一般設定の4つの欄は、標準のHTML挿入ポイントである開始時、終了時、開始時、終了時をカバーします。ここでは有効なscriptやHTMLタグなら何でも使えます: Hotjar、Mixpanel、カスタムフォント、タグマネージャーのスクリプト、タグ経由で読み込まれる任意の外部サービス。ネイティブの一覧にない統合に対しては、これがエスケープハッチです。
「コードを設定する」ダイアログ。 パッケージマネージャーの設定では、非公開npmパッケージや追加の公開ライブラリを一覧にできます。特定の社内依存関係が必要な開発者はここに追加できますが、これはこのシリーズの消費者向けAIビルダーのどれにもない機能です。
Figma Makeにないもの。 Stripe統合はありません。いかなる種類の支払い処理もありません。お金を集めるFigma Makeプロジェクトを作るには、カスタムコード挿入欄を通じてStripeを別途設定するか、GitHubエクスポート後に手動で追加する必要があります。チェックアウトフローが必要なコンシューマー向け製品を作るチームにとって、この欠如は大きいです。
まだVercelやNetlifyの統合はありません。 Figma Makeのデプロイの話は、現在figma.siteかGitHubです。ワークフローにVercel、Netlify、Render、またはCloudflare Pagesへのデプロイが含まれる場合、それらのプラットフォーム向けのワンクリック統合はありません。まずGitHubにプッシュし、その後別の手順としてそのリポジトリを希望するホスティングプロバイダーに接続する必要があります。
Lovable
Lovableの統合戦略はカバレッジ重視です: 最も一般的な本番要件を、コードを書かずにカバーする80以上の検証済み統合。
Stripe（ネイティブ、自動）。 InvoiceProで1つのプロンプトから: 正しいチェックアウトリンク、請求ポータルのルーティング、サブスクリプション状態のためのSupabase同期を備えた3つの価格ティアが生成された。支払いイベント（サブスクリプション作成、支払い失敗、サブスクリプションキャンセル）のWebhookハンドラは、指示なしで含まれていた。Stripe統合全体は10分の時点より前に配線され、本番稼働していた。Figma Makeには同等の機能はない。
Supabase（ネイティブ、自動）。 Lovableはデータベーススキーマを最初のビルドから作成し、二段階目としてではない。テーブルは正しい列型と外部キー関係で生成される。認証フロー（メール/パスワード、Google OAuth、マジックリンク）は自動的に配線される。RLSポリシーの雛形も含まれる（ただし、Section 5で述べたように、正しい設定には手動での確認が必要）。
80+のカタログ。 メール（Resend、SendGrid、Mailgun）、分析（PostHog、Mixpanel、Google Analytics）、ファイルストレージ（Cloudinary、Supabase経由のAWS S3）、コミュニケーション（Twilio、WhatsApp Business API）、AIサービス（OpenAI、Anthropic、Cohere）などをカバーします。各項目はConnectorsサイドバー経由で接続され、設定手順もAPIキー管理も不要です。
AIコネクタ（Lovable 2.0）。 ベクターデータベース、AIワークフローオーケストレーションサービス、埋め込みAPIへの事前構築済みのパスは、AI駆動機能を構築するチーム向けに、標準REST統合を超えてカタログを拡張します。
デプロイ。 lovable.appへのワンクリック公開と、自動DNSおよびSSLプロビジョニング。既存のホスティングインフラを持つチームには、VercelまたはNetlifyへのGitHub同期が利用可能です。カスタムドメインはPro以上で接続でき、手動の証明書管理は不要です。
80+のカタログ外のサービスについては、Supabase Edge FunctionsがカスタムJavaScriptベースのサーバーロジックを可能にし、コードを書く必要がある特注の統合要件に対する実用的な逃げ道となります。
勝者の要約: Lovableが統合で決定的な差をつけて勝利します。Figma Makeにネイティブの決済処理が一切ないことが、最も重大な欠落です。収益を扱うあらゆるWebアプリケーション（SaaS製品、マーケットプレイス、サブスクリプションサービス）において、LovableのネイティブStripe統合は最初のビルドでエンドツーエンドの支払いロジックを提供しますが、Figma Makeでは別途構築する必要があります。
Figma Make vs Lovable: 結論
Lovableは、すでにFigmaの中で仕事をしていない創業者、プロダクトチーム、そしてWebアプリケーションを構築するすべての人にとって勝者です。Figma Makeは、すでに慣れ親しんだエコシステムの中でより速くプロトタイプを作りたいデザイナーにとって勝者です。
| カテゴリ | 勝者 | 理由（簡潔） |
|---|---|---|
| 価格とプラン | Lovable | 無制限ユーザー向けに月額$25; Figma Makeはフルアクセスに1シートあたり最低$16が必要で、Figmaをまだ使っていない5人なら月額$80まで上がる |
| AI機能 &機能 | Figma Make | このシリーズでモデルセレクター（Claude, Gemini Flash, Gemini Pro）を備える唯一のプラットフォーム; エコシステムへの埋め込み; 自己修復コード; 文脈豊かな生成 |
| アプリ生成速度 &品質 | Lovable | 10分未満でフルスタックのデプロイ済みアプリを完成; Figma Makeはフロントエンドではより速い（2 min）が、実データには第2ステップとしてSupabaseのセットアップが必要 |
| 使いやすさ | Lovable | 前提となるプラットフォーム不要; Figmaのオンボーディング負担なし; Figmaを使っていないチームにとってエコシステム切り替えコストゼロ |
| プライバシーとセキュリティ | Figma Make | このシリーズで最も広範なコンプライアンス・ポートフォリオ（SOC 2, FedRAMP, ISO 27017/18/27701, TISAX, C5）; ただしコミュニティ公開ではデフォルトでチャット履歴が公開される: 公開前にオフにすること |
| 統合 &デプロイ | Lovable | Stripe支払いを含む80+のネイティブ統合; Figma Makeには決済処理がなく、バックエンドには別途Supabaseのセットアップが必要 |
Lovableを選ぶべき場合: 今週中に認証、データベース、そしてStripe支払いが動作するデプロイ済みWebアプリケーションを必要とする創業者、プロダクトマネージャー、またはスタートアップチームである場合。特に、チームがすでにFigmaを使っていない場合や、デザインツールのオーバーヘッドなしで技術者と非技術者の両方のチームメンバーに対応するプラットフォームが必要な場合。
Figma Makeを選ぶべき場合: すでにFigma上にいるデザイナーまたはデザイン主導のチームで、プロトタイプをより速く実際のインタラクションへと変えたい場合、Figmaファイルに埋め込まれたライブプロトタイプを通じてステークホルダーとアイデアを検証したい場合、そしてコンセプトからプロトタイプまで1つのプラットフォーム内にとどまりたい場合。デザインレビュー中にFigJamでインタラクティブなデモを提示する必要がある場合は特に価値があります。
