Framerを触ってみる。
「速い。これなら作れそう。」
次にWebflowを見る。
「こっちは、もう少しWeb制作そのものに近い。」
どちらもノーコードでWebサイトを作れます。どちらにもAIがあります。だから比較表だけを見ると、余計に迷います。
違いが見えてくるのは、実際にどんな作り方をしたいかを考えたときです。
先に結論：速く形にするならFramer、構造まで作り込むならWebflow
大まかに分けるなら、LPやポートフォリオを素早く形にし、デザインを見ながら仕上げたいならFramer。
複数ページ、CMS、クラス設計、細かなレイアウトなど、Webサイトの構造まで深く作り込みたいならWebflowが向いています。
| 比較項目 | Framer | Webflow |
| AIでの初期制作 | Agentでキャンバス上に直接生成 | AI Site Builderでサイト構造ごと生成 |
| 得意な制作 | LP・ポートフォリオ・デザイン重視 | 企業サイト・CMS・構造的な制作 |
| デザイン調整 | 直感的で速い | 細かく設計しやすい |
| CMS | あり。Agentで作成・更新も可能 | あり。Collectionを中心に本格運用 |
| 学習コスト | 比較的入りやすい | Web制作の概念を覚える場面が多い |
| 外部AI連携 | Codexなど外部Agentとの公式連携あり | Webflow AI中心に制作・監査 |
FramerのAIは「今見ている画面を一緒に直す」感覚
Framer Agentは、エディター内のキャンバスを読みながら、プロンプトでレイアウト、文章、インタラクション、コードまで生成・修正できます。
公式ガイドでも、一度に全部作るより、1セクションずつ生成し、選択した要素に対して追加指示を出す方法が推奨されています。
「この見出しをもっと大きく。」
「次は実績セクションを追加して。」
「少し動きを入れて。」
目の前のページを見ながら会話が続く。FramerのAIは、この距離感が分かりやすいです。
FramerでWebサイトを作る具体的な流れはこちらで解説しています。
WebflowのAIは「サイトの設計図から作る」感覚
Webflow AI Site Builderは、サイトの目的、対象ユーザー、必要なページなどを伝えると、ページ構成、コンテンツ、テーマを含むサイトの初期案を生成します。
無料状態ではAI Site Builderで作れるページ数に制限があり、有料WorkspaceまたはSite planでは生成可能なページ数が増えます。
生成後はWebflowのCanvasで、クラス、Flex、Grid、余白、レスポンシブなどを細かく調整していきます。
Webflow AIでサイトを作る具体的な手順はこちらで紹介しています。
比較1：AIだけで最初の形を作る速さ
1ページのLPを素早く作りたいなら、Framerの方が直感的に感じやすいでしょう。
キャンバス上でAgentに指示し、その場で生成と修正を繰り返せるためです。
一方、Webflow AI Site Builderは複数ページを含むサイト構成そのものから作れるのが特徴です。
1ページを速くならFramer、複数ページの土台をまとめてならWebflow、という違いが見えます。
比較2：デザインを細かく調整するなら
Framerはデザインツールに近い感覚で、要素を選んで見た目を調整しやすいのが魅力です。
Webflowでは、Flexbox、Grid、クラス、ブレークポイントなど、Web制作で使われる考え方に近い設計を画面上で操作します。
- Framer：見ながら速く整えたい
- Webflow：レイアウトの仕組みまで細かく管理したい
Web制作そのものを学びたい人にとっては、Webflowの少し難しい部分が、逆に学習になります。
比較3：CMSはどちらも強くなっている
以前ならCMS用途ではWebflowを選ぶ、という分け方が分かりやすかったかもしれません。
ただし現在のFramerもCMS機能を大きく強化しています。
Framer Agentは、CMS Collectionの作成、フィールド設定、アイテム生成、CSVからのインポートなどにも対応しています。
WebflowもCollectionを中心に、ブログ、事例、スタッフ、商品情報などの動的コンテンツを管理できます。
単純に「CMSがあるか」ではなく、CMSをどこまで複雑に運用したいかで比較する方が現実的です。
比較4：SEO・AEO
FramerもWebflowも、現在は検索エンジン向けの基本機能を備えています。
Framer
- SEOタイトル・説明文
- index設定
- canonical
- リダイレクト
- robots.txt自動生成
- sitemap.xml自動生成
- 構造化データの追加
さらに現在のFramerは、公開ページをAIエージェント向けに構造化Markdownでも提供する仕組みを案内しています。
Webflow
- SEOタイトル・説明文
- alt
- canonical
- 301リダイレクト
- XMLサイトマップ
- schema markup
- AIによるSEO・AEO監査と改善補助
Webflowでは、Audit panelからalt、ページタイトル、メタディスクリプション、schema markupなどの不足を確認し、AIで生成・改善できます。
SEOだけでどちらかを決めるより、サイトの内容と運用体制を優先した方がよいでしょう。
比較5：Codexなど外部AIとの連携
ここは2026年のFramerで大きく変わった部分です。
Framerは、Codex、Claude Code、Cursor、Geminiなど外部AIエージェントをFramerプロジェクトへ接続する公式機能を提供しています。
- CMSの更新
- リダイレクト管理
- ローカライズ
- SEOフィールドの一括修正
- コードコンポーネント
- 公開前チェック
など、構造化された作業を外部エージェントに任せられます。
Codexを普段から使う人にとって、Framerは単なるノーコードツールではなく、「ビジュアル制作＋AIエージェント」の環境になりつつあります。
比較6：初心者が覚えやすいのは？
最初の1ページを完成させるだけなら、Framerの方が入りやすい人が多いでしょう。
Webflowでは、クラス、Box model、Flex、Grid、ブレークポイントなど、Web制作で使う考え方に触れる場面が多くなります。
- まず完成させたい → Framer
- Web制作の構造も覚えたい → Webflow
難易度の高さがそのまま欠点というわけではありません。何を学びたいかによって意味が変わります。
目的別：どちらを選ぶ？
| 目的 | おすすめ | 理由 |
| ポートフォリオ | Framer | デザインを速く詰めやすい |
| LP | Framer | 1ページを素早く制作しやすい |
| 企業サイト | Webflow | 構造・CMS・複数ページを管理しやすい |
| Web制作を学ぶ | Webflow | CSSに近い考え方を操作できる |
| Codexと組み合わせる | Framer | 外部Agentとの公式接続がある |
| とにかく早く公開する | Framer | 生成から公開までの距離が短い |
AICraftWebでは、実際に同じLPを作って確かめる
ここまでの比較は、機能と制作フローをもとにしたものです。
でも、本当に知りたいのは「同じページを作ったときに何が違うのか」です。
AICraftWeb LABでは、Codex・WordPress・ノーコードで同じLPを作り、制作時間や修正回数まで記録する予定です。
まとめ
- 速く作る・デザインを直感的に詰める → Framer
- 構造・CMS・Web制作の考え方まで作り込む → Webflow
- Codexなど外部AIと連携したい → Framerが特徴的
- SEO/AEO → 両方とも必要な機能を備えている
選ぶときは、「どちらが高機能か」ではなく、自分がどこまで制作に入りたいかを基準にすると分かりやすくなります。