2026年9月、AIサイトビルダー各社が示した方向は「プロンプトだけに頼らない」ことだった。Figma Makeはプロパティパネルと注釈機能で直接操作を取り戻し、Lovableはコード生成前に複数のデザイン案を見せる「Aesthetics」を、v0はデザインシステムパネルで一貫したスタイル管理を提供する。生成AIが「言われた通りに作る」段階から「見て、選んで、直す」段階へ移りつつある動きを、5つのツールの最新機能から追う。
プロンプト一辺倒からの脱却——「直接触れる」機能が増えている
これまでのAIサイトビルダーは「言葉で指示して、出てきたものを見る」の繰り返しだった。細部を直したいだけなのに長いプロンプトを書き直す手間は、ノーコード層にとって最大の不満点でもあった。ここ数か月で各社が足並みを揃えて追加したのが、プロンプトを経由しない直接編集と、コードを書く前にデザインの方向性を選べる仕組みだ。
Figma Make:プロパティパネルと注釈で「触って直す」
Figma Makeは要素を選択して間隔・タイポグラフィ・レイアウト・不透明度・z-indexなどをFigma Designと同じ感覚のパネルで直接調整できるようになった。ホバーの遅延や押下時のアニメーションなど、パネルでは表現しきれない変更はキャンバス上に注釈を書き込んで、AIエージェントへ具体的な指示として渡す「Annotate for agent」も併設している。直接操作はプロンプトよりも消費トークンが少なく、変更は確定前にステージングされてからクレジットが消費される仕組みだ。さらにFigma Newsroomによれば、GPT-5.6もFigma Makeで選択可能になっている。
Lovable:コードを書く前に「見た目」を選ばせる
Lovableの「Aesthetics」は、ビルドを始める前にタイポグラフィ・レイアウト・配色の好みを伝えると、複数のデザイン案をプレビューしてから実装に進める機能だ。「AIが作るとどれも同じような顔になる」という定番の不満に対する回答で、Lovable自身も“ボールドな”ランディングページやアプリを狙えるとしている。加えて直近では、繰り返す指示をMarkdownファイルとして保存し使い回せるSkills機能も追加され、プロジェクトごとのブランドルールやコーディング規約を「教え込む」運用が可能になった。
v0:デザインシステムパネルとFigmaインポート
v0はReact/Next.js+Tailwindのコードを生成する路線を維持しつつ、クリック操作で配色・フォント・コンポーネントの見た目をまとめて調整できる「Visual Design Mode」と、Figmaのリンクを貼るだけでデザインを取り込めるFigma importを備える。2026年2月のアップデートではGit連携とVS Code風エディタも加わり、生成後の細かい手直しをコードレベルで行いたいエンジニア寄りのユーザーにも届く設計になっている。
Bolt.new:計算資源を増やす「Forge」、その代償は
StackBlitzのBolt.newは、ブラウザ内で実際にNode.jsを動かすWebContainers技術が持ち味だが、9月には実験的モード「Forge」を投入した。セッションを匿名化した学習データとして提供することと引き換えに、通常の50倍のAIコーディング利用枠を得られる仕組みで、GLM 5.3やKimi K3など複数のオープンウェイトモデルを裏側で切り替えて使う。The New StackやSuperpower Dailyは、Forge以外の通常利用でも規約上はデータが学習に使われうる余地があると指摘しており、業務利用では利用規約を必ず確認したい。
Framer:CMSの「List」フィールドとエージェント連携の広がり
Framerは今夏のFramer 3.0でキャンバス上のAIエージェントとブランチ機能を統合済みだが、直近のCMSアップデートでは、FAQやプロダクト機能一覧のような繰り返しコンテンツを「Title 1」「Title 2」…と個別フィールドで増やす代わりに、ひとつのListフィールドにまとめて管理できるようになった。既存コンテンツの移行もFramer Agentに依頼できる。外部エージェントとの連携も広がっており、キャンバス上で色・フォント・既存セクションの文脈を踏まえた提案を受けられる。
5サービス比較——「直接編集」と「デザイン提案」の対応状況
| ツール | 直接編集(プロンプト不要) | コード前のデザイン提案 | 得意領域 | 出力形態 |
|---|---|---|---|---|
| Figma Make | ◎ プロパティパネル+注釈 | △(Figma Designからの取り込み) | デザイン資産との連携 | プロトタイプ〜Webアプリ |
| Lovable | △ Aesthetics内で微調整 | ◎ 複数案プレビュー | フルスタックのVibe Coding | React+Supabase |
| v0 | ◎ Visual Design Mode | ○ デザインシステムパネル | Vercelネイティブ環境への実装 | Next.js+Tailwind |
| Bolt.new | ○ コードを直接編集可 | △ | ブラウザ内フル開発環境 | フルスタックWebアプリ |
| Framer | ○ キャンバス直接操作 | ○ AIエージェント提案 | 公開・CMS・SEOまで一体 | 静的サイト+CMS |
使い分けの目安
- デザインの手触りを最優先したいならFigma MakeかLovableのAesthetics。既存のFigmaデザインがあるならFigma Make、ゼロから複数案を見比べたいならLovable。
- 実装まで見据えたコードが欲しいならv0。Next.js/Tailwind/shadcnの構成に寄せて素早く本番コードへ近づけられる。
- CMSやSEO込みで公開まで完結させたいならFramer。コンテンツ量が多いサイトはListフィールドの恩恵が大きい。
- コードを完全に握りたい開発者にはBolt.new。ただしForgeを使う場合はデータ利用範囲を必ず確認する。
結局のところ、どのツールも「プロンプトが万能」という前提を後退させ、人間が手を出せる編集面を増やす方向で競っている。AIに全部任せるのではなく、どこを人間が握るかを選べるツールほど、実務での定着が進みそうだ。
主な情報源
- A properties panel and annotations, now in Figma Make(Figma Blog)
- Figma Newsroom
- Turn repeated instructions into reusable skills in Lovable(Lovable Blog)
- Lovable Launches Aesthetics Update(Create With)
- Bolt is giving developers 50x more compute. But there’s a catch.(The New Stack)
- Bolt’s New Policies Permit Training Beyond Its Forge-Only Pitch(Superpower Daily)
- Framer Updates
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。