ほとんどのAIウェブビルダーが返してくれるのは「モックアップ」です。
きれいに生成されますが、それは別のキャンバス上にあるもの。既存のブランドカラーもコンポーネントも反映されていません。結局、ライブサイトに手動で移植しなければならないんです。
Framer 3.0のAgentsは最初からライブのFramerプロジェクトを開きます。そして、そこで直接編集を始めます。
他のAIビルダーと何が違うんですか?
最大の違いは「エージェントがどこで動くか」です。
既存のAIウェブビルダーは新しいデザインを生成してくれますが、それは別のキャンバス上のもの。既存サイトとは切り離された状態で、ブランドカラーやフォント、コンポーネントが反映されていないんです。
Framer Agentsは逆の動き方をします。エージェントが最初にやることは、既存サイトを読み込むことなんです。ページ構造、セクション配置、テキストスタイル、カラーシステム、CMSコレクションまで把握してから、それをベースに編集を始めます。
| 既存のAIビルダー | Framer Agents | |
|---|---|---|
| 作業場所 | 別の生成キャンバス | ライブのFramerプロジェクト |
| ブランド反映 | 限定的（テンプレートベース） | 既存コンポーネント・スタイルをそのまま |
| 編集範囲 | コンテンツ生成中心 | ページ・CMS・SEO・レスポンシブ一括 |
| 結果の適用 | 手動でコピー&ペースト | ブランチ統合でそのまま公開 |
| 外部ツール連携 | なし | Claude Code, Cursor, Gemini CLI |
Framer公式の言葉を借りれば、エージェントは「generating（生成）ではなく editing（編集）」に焦点を当てています。 ゼロから新しいサイトを作るのではなく、すでにあるものをより良くするのが目的なんです。
AIがサイトを壊したらどうするんですか
「サイト全体のレスポンシブレイアウトをやり直して」とエージェントに頼むシーンを想像してみてください。すごい機能ですが、何か失敗したときにライブサイトが壊れたら大変ですよね。
Framer 3.0はこの問題をブランチングで解決しました。
ブランチングとは？
開発者が使うgit branchの概念を、デザイナーやコンテンツチーム向けに実装したものです。ライブサイトをコピーして別のブランチを作り、そこでAIの大規模な作業を行います。結果が気に入ればマージ、気に入らなければ捨てるだけ。ライブには一切影響しません。
チームで使うときに特に便利です。デザイナーがブランチでAIを使った大規模なリデザインを試している間、マーケターはライブでブログ記事を公開できます。並行作業が可能で、コンフリクトもありません。
Framerはこれを「デザイナーのためのgit branchモデル」と呼んでいます。 AgentsとBranchingを組み合わせれば、AIが何を変更しても本番環境は絶対に触られません。
Claude CodeでFramerサイトを編集できるんですか？
Framer 3.0で開発者が最も注目すべき機能があります。External Agents — 外部AIツールがFramerプロジェクトを直接編集できるようになりました。
MCP（Model Context Protocol）を通じて、Claude Code、Cursor、Codex、Gemini CLIがFramerプロジェクトに接続できます。 ターミナルからSEO一括監査、NotionページをFramer CMSに自動インポート、CSVファイルをCMSコレクションに変換なども可能です。
価格も変わりました。エディターシートが$40から$20へ半額に。Scaleプランは廃止され、BasicとProのみに整理されました。AI Creditsは無料プランが1日500クレジット、Proプランが月3,000クレジットです。
コミュニティも刷新されました。Marketplace、Gallery、Feed、Awards、Contestsが一つのタブに統合され、マーケットプレイスの事前審査プロセスが廃止されました。2025年のクリエイター収益は$6.5M — 前年比200%成長です。
Framer Agentsを始める方法
- エージェントパネルを開く
Framerキャンバス右下のエージェントアイコンをクリックするとチャット欄が開きます。新規プロジェクトでも既存サイトでもすぐ使えます。 - AI作業前にブランチを作成
大きな変更の前には必ずブランチを作りましょう。上部メニューの「New Branch」で作成すればライブサイトはそのまま維持されます。狭くて具体的な指示ほど良い結果が出ます。 - エージェントに編集を依頼
自然言語で依頼するだけです：「既存のカラーシステムを使って新しいPricingセクションを追加して」「ホームのヒーローのレスポンシブレイアウトを修正して」「ブログCMSを作ってテキストをインポートして」。 - External Agents（MCP）を接続する（任意）
Claude CodeやCursorを使っている開発者は、プロジェクト設定→External AgentsタブでMCP URLをコピーして、使用するAIツールに貼り付けるだけです。 - ブランチを確認してからマージ
エージェントが作ったものをブランチで確認して、良ければ「Merge to Main」でライブに反映。気に入らなければ捨てて、やり直せばいいです。
Agentsの成果を高めるコツ
カラートークンと再利用可能なコンポーネントでデザインシステムを整理しておきましょう。エージェントが「既存スタイルで」作業するときの精度が格段に上がります。「全部リデザインして」より「Aboutページのレスポンシブの崩れを修正して」のように、狭くて具体的な指示が効果的です。
もっと深く知りたい方へ
Framer 3.0公式ブログ Framer Agents、Branching、Communityの全アップデート発表原文 framer.com
Framer Agents公式ページ サイト更新・新規構築・移行など用途別の公式ガイド framer.com
Framer 3.0 AI Agents & Branching Guide 「editing, not generating」哲学と実践習慣の深掘り分析 lushbinary.com
Framer 3.0 Everything You Need to Know AI Creditsモデル、コミュニティ改編、外部エージェント総まとめ frameplate.co
Framer 3.0 External Agents詳細 Claude Code、Cursor、Codex、Gemini CLI連携の詳細 alternativeto.net
Framer Product Huntレビュー 4.8/5（255件）実ユーザーの評価 producthunt.com
