Framer 3.0・Lovable×Claude Opus 5・Figma Make×GPT-5.6――AIサイトビルダー、7月の三者三様アップデート

AIサイトビルダー のアイキャッチ

2026年7月、主要なAIサイトビルダー・デザインツールが立て続けにアップデートを発表した。FramerはデザインキャンバスにAIエージェントを常駐させる「Framer 3.0」を、Lovableは最新モデル「Claude Opus 5」の搭載と、作ったアプリをそのままMCPサーバー化できる機能を、Figma Makeはモデルピッカーに「GPT-5.6」を追加した。今回はこの3つを軸に、各ツールが「どのAIモデルを積むか」「外部エージェントとどう連携するか」で差別化を図る動きを整理する。

デザインツールの中で働くAIエージェントのイメージイラスト

今週のポイント

ツール アップデート 発表時期
Framer 3.0 AIエージェントがキャンバス常駐、Branching、外部エージェント連携 2026年6月16日
Lovable Claude Opus 5搭載、MCPサーバーが全プランで利用可能に 2026年7月24日
Figma Make モデルピッカーにGPT-5.6を追加 2026年7月7日
v0 by Vercel 「Vercel Connect」でエージェントに一時認証情報を発行 2026年7月(Ship 2026)

Framer 3.0――デザインキャンバスに常駐するAIエージェント

Framerは6月に「Framer 3.0」を発表し、Agents(AIエージェント)をデザインキャンバスに直接組み込んだ。ページ全体の設計、ブレークポイントの追加、エフェクトの付与、コンポーネント作成、コード記述、CMS連携まで、これまで人が手を動かしていた作業をエージェントに任せられる。

  • Branching: 大きなチームでもAgentsによる変更を安全に試せるよう、サイトの変更をブランチとして分離できる仕組み。
  • External Agents: Slackからコピーを更新したり、ターミナルからCMSを変更したり、Claude CodeやCursor、GitHub PRなど外部のエージェント経由でFramerサイトを操作できる。
  • あわせて「AI Credits」を軸にしたシンプルな料金体系にも刷新された。

デザインの精度を保ちながらノーコードでリッチなサイトを作りたい層にとって、キャンバス内でエージェントが完結する体験は大きな進化と言える。

Lovable――Claude Opus 5搭載と「アプリがそのままMCPサーバーに」

Lovableは7月24日、Claude Opus 5を主要モデルとして追加した。Lovable共同創業者のFabian Hedin氏は「最も難しいエージェント型コーディングタスクでOpus 4.7比22%向上しており、実行のたびのブレも少ない」とコメントしている。

もう一つの大きな変化が、MCPサーバー(mcp.lovable.dev)が無料プランを含む全プランで使えるようになったことだ。ChatGPTやClaude、Claude Code、Cursor、VS CodeなどMCP対応クライアントから、自然言語でLovableのプロジェクト作成・編集・デプロイ・SQL実行・アナリティクス参照までを行えるようになる。「作ったアプリを外部のAIクライアントの“道具”としてそのまま使わせる」という発想は、他のビルダーにも波及しそうだ。

このほか、セキュリティ企業Wizのスキャン結果がプロジェクトのSecurityビューに標準表示されるようになるなど、企業利用を意識した機能強化も進んでいる。

Figma Make――モデルピッカーにGPT-5.6が追加

Figma公式ブログによると、Figma Makeのモデルピッカーに、OpenAIの最新モデル「GPT-5.6」が全プラン向けに追加された。公式の検証では、初回生成の精度向上、エラーからの自己修復、レスポンシブなプロトタイプの仕上がりが改善したとされている。

Figmaは今年のConfig 2026でも、キャンバス上でのモーション・3D変形・シェーダー・コードレイヤーの追加、FigJamやSlidesへのAgent拡張など、AI関連機能を矢継ぎ早に投入している。デザインツールとしての立ち位置を保ちながら、生成AIモデルを使い分けられる基盤づくりを進めている格好だ。

v0 by Vercel――エージェントに「その場限りの鍵」を渡すVercel Connect

開発者向けのAIサイトビルダーとして存在感を保つv0 by Vercelは、単体の新機能というより基盤側の強化が目立つ。Vercel Ship 2026で発表された「Vercel Connect」は、エージェントが外部ツールやデータにアクセスする際、環境変数に長期間有効なトークンを置く代わりに、目の前のタスクに限定した一時的な認証情報を発行する仕組み。v0で生成したアプリにエージェント機能を組み込む開発者にとって、セキュリティ面での安心材料になる。

コードエディタで作業する画面
Photo: Matrixizationized / CC BY 2.0, Openverse経由

比較で見る、4ツールの立ち位置

ツール 得意分野 今回の目玉 向いている層
Framer ビジュアル重視のマーケティングサイト キャンバス常駐エージェント+外部エージェント連携 デザイナー、ノーコード志向のチーム
Lovable DB・認証込みのフルスタックアプリ Claude Opus 5+アプリのMCPサーバー化 プロトタイプから本番運用まで一気に作りたい人
Figma Make デザインシステムと地続きのプロトタイピング GPT-5.6を選べるモデルピッカー 既存のFigmaデザイン資産を活かしたいチーム
v0 by Vercel React/Next.jsのフロントエンドコード生成 Vercel Connectによる安全なエージェント接続 コードで細部まで制御したい開発者

フロントエンドのコード生成に強いv0、フルスタックのLovable、デザインキャンバス発想のFramer、既存デザイン資産と接続するFigma Make――それぞれ出自もアプローチも異なるが、共通しているのは「使うAIモデルを選べる」「外部のAIエージェントやチャットクライアントと連携できる」という2軸で進化している点だ。どのツールを選ぶかより、目的に応じて使い分ける発想が実務では有効だろう。


主な情報源

各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。