サイトの見た目を変えたいのに、ブランドカラーやフォントまで崩したくない——そんな場面で、Framer Agentのレイアウト生成が効きます。
この記事では、2026年6月28日にFramerが告知した新機能の内容と、既存スタイルを維持しながらレイアウト案を素早く試す仕組みを整理します。
この記事でわかること
- Framer Agentのレイアウト生成が何を変えるのか
- 既存スタイルを保ちながら視覚的方向性を試す仕組み
- 実際の使い方と、従来のAIサイト生成との違い
https://www.framer.com/agents/
レイアウト生成で何が変わったか
Framerは2026年6月28日、X（旧Twitter）で次の機能を紹介しました。「数秒でサイトの新しい視覚的方向性を試せる。Framer Agentに依頼すれば、既存スタイルの範囲内で新しいレイアウトを生成できる」という内容です。
これは6月16日に公開されたFramer 3.0の「Framer Agents」に加えて、レイアウト探索に特化した使い方を前面に出した告知です。Framer 3.0では、エージェントがキャンバス上でページ生成やレスポンシブ対応、CMS連携まで担うと発表されていました。今回の投稿は、その中でも「既存プロジェクトのスタイルを崩さずにレイアウトだけ変える」ワークフローを強調しています。
なぜ既存スタイルの維持が重要か
Web制作でレイアウトを変えるとき、よくある課題はトンマナの崩れです。ヒーローセクションの構成を変えた結果、ボタンの角丸や見出しフォントが別物になり、サイト全体の統一感が失われます。手作業で直すには、レイヤーを一つずつ確認する時間がかかります。
Framerの技術ブログ「Building Agents for Framer」では、エージェントがプロジェクト内のレイアウト・スタイル・カラー設定を読み取り、厳密に定義されたスタイルやスウォッチを優先して出力を寄せると説明されています。スタイルが未整備の場合は、エージェントが整備を手伝う設計です。レイアウト生成が「ゼロから別サイトを作る」動きではなく、既存のデザインシステムを土台にした探索になる理由はここにあります。
レイアウト生成でできること
Framer公式のエージェントページでは、レイアウト変更の具体例が公開されています。たとえば、機能紹介セクションをリスト形式から2列×3行のグリッドに組み替える、ホームページのヒーローを画面いっぱいの高さにする、機能ブロックを左右交互に並べる、といった指示が挙げられています。
エージェントはコピー・構造・セクション・レイアウトをまとめて更新しますが、変更結果はすべてキャンバス上で編集可能なFramerのネイティブ要素として残ります。チャットでコード片をもらって別途組み込む方式ではないため、生成後に人間が細部を調整しやすい点が特徴です。
レイアウトの精度を上げるには、公式が推奨するコンテキスト指定が有効です。キャンバス上のレイヤーやセクションを選択してエージェントに渡す「Contexts」機能、ページ名やスタイルを@で参照するメンション、スクリーンショットの貼り付けなどが使えます。技術ブログでは、スクリーンショットを渡すと結果の質が目に見えて上がるとも述べられています。
使い方の流れ
Framer 3.0以降、エージェントはFramerエディタ内のチャットから起動します。手順は次のとおりです。
- レイアウトを変えたいページを開く
- 対象セクションを選択し、Contextsに追加する（任意）
- チャットで希望のレイアウトを自然言語で指示する
- キャンバス上の結果を確認し、必要なら手動で微調整する
大きな変更を試す場合は、Branching機能との併用が安全です。Branchingはエージェントの変更を本番サイトとは別のブランチに隔離し、差分を比較してからマージできます。Framer 3.0の発表時、Perplexityが開発者ゼロでサイトを構築した事例や、Superhumanがサイト作業の85%をデザイン・マーケティング部門だけで完結させている事例が紹介されており、エージェントによる本番運用が想定された設計であることがわかります。
従来のAIサイト生成との違い
多くのAIサイトビルダーは、プロンプトから静的なモックやHTMLを一度生成して終わりです。Framer Agentは最初から公開用プロジェクトのキャンバス上で動き、コンポーネント・CMS・SEO設定・公開フローまで同じ環境を編集します。
レイアウト生成に限っても、差は「編集可能性」と「スタイルの継承」に表れます。生成物はFramerの通常レイヤーとして残るため、エージェントに戻して再指示するか、手動で直すかを場面に応じて切り替えられます。外部のClaude CodeやCursorといったエージェントとも連携でき、@framer/agentパッケージ経由で同じ編集能力を外部ツールから呼び出すことも可能です。ただし外部連携ではリアルタイムのキャンバス更新やリッチなコンテキスト供給がアプリ内エージェントより弱くなるため、レイアウト探索の初動はアプリ内エージェントの方が向いています。
料金と注意点
Framer Agentの利用にはAIクレジットが必要です。技術ブログの執筆時点では、GPT-5.5で1ページ生成するのに約3ドル、中規模の編集で約0.5ドルと公開されています。結果に満足できない場合は変更メニューの「Mark as Bad」からクレジット返還を受けられます。モデルはSonnet、Opus、GPTからタスクに応じて選べます。
レイアウト生成は非決定的なAIの性質上、同じ指示でも結果が変わります。本番反映前にBranchingで確認し、レスポンシブ表示やリンク、アクセシビリティも人間の目で最終チェックする必要があります。エージェントはサイト監査機能（リンク切れ、コントラスト不足、スタイル不整合の検出）も備えているため、レイアウト変更後の品質確認に活用できます。
既存のブランドスタイルを保ちながらレイアウト案を次々試せるようになったことで、Framerは「AIでサイトを作る」段階から「AIと一緒にサイトを育てる」段階へ踏み込んでいます。デザインやWeb制作に携わる人にとって、方向性の探索コストを下げる実用的なアップデートと言えます。