AIがキャンバス上でWebサイトを組み立てる — Framer 3.0と500クレジットの無料枠

LovableやBolt、v0のようなAIアプリビルダーは「プロンプトからコードを生成する」ツールだ。出力はReactやNext.jsのコードであり、開発者が中身を理解して修正できることが前提になっている。

Framerは違うアプローチを取った。コードではなく、ビジュアルキャンバスの上でAIがサイトを組み立てる。6月16日にリリースされたFramer 3.0は、その方向性をさらに押し進めた大型アップデートだ。Product Huntの週間ランキングで1位を獲得している。

AIエージェントがキャンバスに来た

3.0の目玉は、エディタ上で動くAIエージェントだ。

ページ全体のデザイン、レスポンシブ対応のブレイクポイント設定、エフェクトの追加、コンポーネントの作成、CMS接続、サイトのアナリティクス確認。こうした作業をAIに指示できる。「LPを作って」と言えば、Framerのキャンバス上に実際のデザインが組み上がっていく。

ここが既存のAIサイトビルダーとの決定的な違いだ。Lovableが生成するのはコード。Framerが生成するのはデザインそのもの。コードを読めない人でも、キャンバス上で直接結果を見て、ドラッグ&ドロップで調整できる。デザイナーやマーケターにとっての敷居の低さは、コード生成型とは比較にならない。

Branchingで「AIの暴走」を防ぐ

チームで使う場合に地味にありがたいのが、Branching機能だ。

Gitのブランチと同じ発想で、プロジェクトの隔離されたコピーを作れる。ブランチ上でAIエージェントに自由にデザインさせて、問題なければ本番にマージする。もしAIが意図しない変更をしても、本番のサイトには影響しない。

AIツールを業務に導入する際の最大の不安は「AIが予期しない変更をして、本番環境を壊す」ことだ。Branchingはこのリスクを仕組みで解消する。特にクライアントワークでWebサイトを運用しているフリーランスや制作会社にとっては、AIエージェントを安心して試せる環境ができたことになる。

Claude Codeをつないで使える「External Agents」

個人的に一番面白いと思ったのは、External Agentsだ。

Framer CLIを使えば、Claude Codeのような外部のコーディングエージェントをFramerのプロジェクトに接続できる。しかも、外部エージェント経由の操作はFramerのAIクレジットを消費しない。

つまり、Framerの内蔵AIエージェントではカバーしきれない複雑なカスタマイズを、Claude Codeに任せるという使い方ができる。「レイアウトはFramerのAIに、ロジックや動的処理はClaude Codeに」という分業は理にかなっている。MCPの普及でツール間の接続が当たり前になりつつある今、この設計は賢い。

料金 — 無料でもかなり使える

Framer 3.0の料金体系はシンプルだ。

• Free: 月$0 — 毎日500 AIクレジット（LP約2ページ分。翌日リセット）、1,000ページ、10 CMSコレクション
• Basic: 月$10（年払い） — 月1,000クレジット、2 CMSコレクション、50GB帯域
• Pro: 月$30（年払い） — 月3,000クレジット、フル機能

無料枠が毎日500クレジットあるのは太っ腹だ。ロールオーバーはしないが、毎日リセットされるので、少しずつ作り込むスタイルなら無料のまま相当なところまでいける。エディタ席の料金も$40から$20に値下げされた。

ただし月払いにすると年払いより30〜40%高くなる。本格的に使うなら年払い一択だろう。

Webflowとどう違うか

「ノーコードでWebサイトを作る」という点ではWebflowが最大の競合だ。

Webflowは自由度が高い反面、学習コストも高い。CSSの概念を理解していないと、細かいレイアウト調整で詰まることがある。FramerはFigma的な直感的操作を重視しており、デザインツールに慣れた人なら違和感なく使える。

3.0のAIエージェント追加で、この差はさらに広がった。Webflowにも生成AI機能はあるが、Framerほどエージェント的な自律性はまだない。「作って」と言えばページが出来上がるFramerに対して、Webflowは部分的な補助にとどまる。

一方で、FramerはECサイトや大規模なWebアプリケーションには向かない。マーケティングサイト、ポートフォリオ、ランディングページが主戦場だ。複雑なデータベース連携やカスタムバックエンドが必要なプロジェクトなら、Webflowやコード生成型のビルダーを選んだほうがいい。

コードが書けない人のための「AIでサイトを作る」入口

AIによるWebサイト制作は、ここ1年で急速に選択肢が増えた。ただし、その多くは開発者向けだ。LovableもBoltもv0も、最終的にはReactのコードが吐き出される。コードが読めないと、AIの出力を修正する手段がない。

Framer 3.0は、この問題に正面から取り組んでいる。AIが生成するのはキャンバス上のデザインであり、修正はドラッグ&ドロップでできる。Branchingで安全に試行錯誤でき、External Agentsで高度なカスタマイズも可能。

デザイナー、マーケター、フリーランスのWeb制作者にとっては、今最も「AIの恩恵」を受けやすいツールの一つだろう。無料枠で試せるので、まずは「LPを作って」から始めてみるのがいい。