v0・Lovable・FramerのAIサイトビルダー最新事情——「計画」「配布」「部品化」で進む実装への橋渡し

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

2026年8月、AIサイトビルダーは「思いつきをそのまま出力する」段階から一歩進み、計画を挟む・部品を配布する・エディタの外にAPIを開くといった、実装や運用に踏み込む方向に動いています。今回は v0・Lovable・Framerの3製品に絞って、直近のアップデートを整理します。

AIサイトビルダーのイメージイラスト

v0(Vercel)——ビルダーをAPIとして開放、スキルはパッケージ配布へ

v0は8月5日、生成エージェントをそのままプログラムから叩けるv0 APIを一般提供しました。プロンプトを送るとv0がアプリのファイル一式を生成・編集し、Vercel Sandbox上で実行してプレビューURLを返す、という一連の流れをヘッドレスに(=v0.appのUIを使わずに)呼び出せるのがポイントです。ホスティング事業者やSaaSが自社の管理画面に「AIでサイトを作る」機能を組み込む土台として使われ始めています。

もう一つの動きが、8月7日に始まったSkill Packsです。コミュニティ製のスキルやローカルフォルダ、GitHubリポジトリなどをひとまとめにしてskills.sh上のURLとして共有し、npx skills addコマンド1つでチーム全員に同じ生成ルールを配れます。「毎回似たようなプロンプトを書き直す」問題を、パッケージ管理の発想で解決しようとしている形です。

Lovable——コードを書く前に「計画」を見せる

Lovableは2月、それまでの「Chat mode」をPlan Modeとしてリニューアルしました。プロンプトを送るといきなりコード生成に入るのではなく、変更するファイル・コンポーネント・ロジックの概要を文章でまとめて提示し、ユーザーが内容を確認・調整してから実行に移せます。Claude Opus 4.5を計画立案に使うことで、複数ステップにまたがる機能追加でも「作ってみたら思っていたのと違う」という手戻りを減らす狙いです。

あわせて、最大50件のプロンプトを順番にキューイングできる「Prompt Queue」も用意されており、細かい修正依頼をまとめて積んでおき、バッチ的に処理させる使い方ができます。設計のレビューと実行を分離する考え方は、AIサイトビルダーがプロトタイピングツールから実務ツールへ寄っていく象徴的な機能といえそうです。

Framer——AIで「部品」を作る、ページの外でも編集する

Framerの目玉はWorkshopです。Cmd+Kで呼び出し、欲しいコンポーネントを言葉で説明すると、プロパティコントロールまで配線された動くReactコンポーネントをその場で生成します。プロジェクトのフォントやカラーを自動で継承するため、生成物が浮いた見た目になりにくいのも特徴。Framer Marketplace上での利用者数は16万人を超えています。

ページ全体のたたき台を作る「Wireframer」は「Minimal SaaSランディングページ」のような一文からレスポンシブなレイアウトを即座に生成する機能で、Workshopの部品生成と組み合わせることで、構成づくりと個々のUI部品づくりを分業できます。加えて、公開済みのページをブラウザ上でそのまま編集できる「On-Page Editing」も追加され、エディタとプレビューを行き来する手間が減っています。

3製品のアプローチを並べると

製品 直近の新機能 方向性
v0 v0 API一般提供、Skill Packs ビルダー機能の外部化・配布
Lovable Plan Mode、Prompt Queue 生成前の計画確認、バッチ処理
Framer Workshop、Wireframer、On-Page Editing 部品単位のAI生成、公開後編集の簡略化

いずれも「一発で完成品を出す」より、途中の工程(計画・部品・配布・編集)をAIで支援する方向に寄っているのが共通点です。ページ全体を任せるだけでなく、チームの一部の作業を置き換える使い方を検討する際の参考にしてみてください。


主な情報源

ウェブサイトビルダーのイメージ写真
Photo: projectidea / CC BY 2.0, Openverse経由

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