Framer AIは、Webサイト制作ツール「Framer」に組み込まれたAI機能群である。チャット欄に「こんなサイトを作りたい」と書くだけで、ページ構成・配色・タイポグラフィ・初期コンテンツをまとめて生成し、そのままキャンバス上で手直しできる。生成されるのはロックされたテンプレートではなく、編集可能なレイヤーとして扱えるページやセクションなので、AIに叩き台を作らせて人が仕上げる、という流れがそのまま成立する。CMSコレクションの作成、公開前のSEO・アクセシビリティレビュー、Claude CodeやCursorといった外部AIエージェントとの接続にも対応しており、単なる「AIでページを1枚作る」ツールにとどまらない。
主な特徴
- プロンプトからサイトを生成: 作りたいサイトの説明を書くと、レスポンシブなページ構成・配色・タイポグラフィ・初期コピーを一括生成する。生成後はキャンバス上でレイヤーを選び、余白・ブレークポイント・色・効果を通常のFramer操作で調整できる
- AIエージェントとの対話で反復: 生成したレイヤーを選択してチャットの文脈に渡し、「この部分だけ作り直して」といった局所的な指示ができる。使うモデル（GPT / Sonnet / Opus / Fable など）も選択できる
- スキルコマンドで作業を指定:
/cms・/component・/codeのようなコマンドで、CMSコレクションの作成、コードコンポーネントの実装、機能の追加といった作業をAIに明示的に振り分けられる - 公開前レビュー: 公開の前にサイト全体をAIが点検し、コントラスト不足・誤字・alt属性の欠落・SEOの不備・スタイルの不統一を指摘する。アクセシビリティやSEOの見落としを機械的に拾える
- アナリティクスのレビュー: 公開後のトラフィックを分析し、コンバージョンの取りこぼしなど改善点を提案する機能を備える
- 外部AIエージェント連携: Claude Code・Cursor・Codex といった外部のコーディングエージェントからFramerプロジェクトに接続できる。エディタ内のAIと、手元の開発環境のAIを使い分けられる
- ブランチで安全に試す: Proプラン以上ではブランチとプレビューが使えるため、AIに大きく作り替えさせる場合も本番サイトに影響を与えずに試せる
料金
FramerのAI機能は「AIクレジット」を消費する形で提供され、クレジットの量はサイトのプランに紐づく。
| プラン | 月額料金（年払い時） | AIクレジット | 主な特徴 |
|---|---|---|---|
| Free | $0 | 500クレジット（お試し） | Framerドメイン、1GB帯域、ページのデザイン |
| Basic | $10 | 月1,000クレジット（追加購入可） | 独自ドメイン、CMSコレクション2つ、50GB帯域、SEO機能 |
| Pro | $30 | 月3,000クレジット（追加購入可） | 独自ドメイン、CMSコレクション10、100GB帯域、リダイレクト、ステージング環境、ブランチとプレビュー |
| Enterprise | 要問い合わせ | 個別設定（ボリュームディスカウントあり） | 上限のカスタマイズ、エディター無制限、SSO / SCIM、稼働率保証 |
このほか、エディター席の追加（1席あたり月額$20）、コンテンツ編集者席（同$10）、ローカライズや高度なホスティングのアドオンが別料金で用意されている。閲覧のみのビューアーは無料。
料金は2026年8月時点の情報です。表示は年払い時の月額換算で、月払いを選ぶと単価は上がります。最新の料金は公式サイトをご確認ください。
メリット・デメリット
✅ メリット
- 生成物が編集可能なレイヤーなので、AIの出力を出発点にして人の手で仕上げられる。テンプレート型のAIビルダーにありがちな「気に入らない部分を直せない」状態になりにくい
- デザイン・CMS・公開・独自ドメインまで1つのツールで完結し、別途ホスティングを用意する必要がない
- 公開前レビューでコントラストやalt属性、SEOの不備を機械的に拾えるため、非エンジニアが作ったサイトでも最低限の品質を担保しやすい
- Claude CodeやCursorなど外部エージェントから接続できるので、開発者は使い慣れた環境から作業できる
- 無料プランでAI機能を試せる（500クレジット）
⚠️ デメリット
- AI機能がクレジット制のため、試行錯誤を重ねるほど消費が増える。生成のやり直しが多い使い方では上位プランや追加購入が必要になりやすい
- 独自ドメインでの公開はBasic以上が必要で、無料プランは実質お試し用途にとどまる
- 複数人で編集する場合、エディター席が1席ごとに月額課金となり、チーム規模が大きいと費用が積み上がる
- Framer固有のキャンバス操作やCMSの考え方を覚える必要があり、まったくの初心者にとってはAIで生成した後の調整に学習コストがかかる
- 生成されたサイトはFramerのプラットフォーム上で運用する前提で、別環境への移行は容易ではない
類似サービスとの比較
| 比較項目 | Framer AI | Wix AI | Webflow AI | v0（Vercel） |
|---|---|---|---|---|
| 提供元 | Framer | Wix | Webflow | Vercel |
| 主な用途 | デザイン重視のサイト生成・編集 | サイト全体の自動生成 | サイト構築の補助 | UIコンポーネント／画面のコード生成 |
| 生成物 | 編集可能なレイヤー | 完成サイト | セクション・コピー等 | Reactコード |
| 対象ユーザー | デザイナー〜非エンジニア | 初心者中心 | 制作者・中〜上級者 | 開発者 |
| ホスティング | 込み | 込み | 込み | 別途（Vercel等） |
| 無料プラン | あり | あり | あり | あり |
こんな人におすすめ
- ランディングページやポートフォリオを、デザインの質を落とさず短時間で立ち上げたい人
- AIに叩き台を作らせたうえで、自分の手で細部を詰めたいデザイナー
- クライアント向けのサイト案を素早く複数パターン用意したい制作者・フリーランス
- ノーコードでサイトを作りたいが、テンプレートの縛りが窮屈だと感じている人
- Claude CodeやCursorを日常的に使っていて、AIエージェント経由でサイトを触りたい開発者
まとめ
Framer AIは、「AIが作ってくれるサイトビルダー」と「デザインツール」の中間に位置する。プロンプトから一気に形にする速さと、生成後にキャンバスで細かく詰められる自由度の両方を持つのが最大の特徴で、AIの出力をそのまま公開せずに仕上げたい人に向く。一方でAI機能はクレジット制のため、試行錯誤の量が費用に直結する点は理解しておきたい。まずは無料プランの500クレジットで生成の質を確かめ、独自ドメインでの公開が必要になった段階でBasic以上を検討するとよい。