2026年6月下旬から7月にかけて、AIサイトビルダー界隈は大型アップデートが相次いだ。Figmaは年次カンファレンス「Config 2026」でキャンバスに「コード」「モーション」「シェーダー」を統合し、v0はFigmaインポートを刷新して本番品質のReactを高速生成できるようにした。LovableとBolt.newもそれぞれ使い勝手と対応モデルを強化している。今日は主要4サービスの最新動向を整理する。
Figma Config 2026 — キャンバスに「コード」「モーション」「シェーダー」
Figmaは年次カンファレンス「Config 2026」で、コラボレーティブキャンバス自体を大きく拡張するアップデートを発表した。目玉は次の4つ。
- Code Layers（コードレイヤー）：デザインレイヤーをワンクリック、あるいはプロンプトでインタラクティブなコードレイヤーに変換できる。リポジトリをインポートしてコードからデザインへ「逆流」させることも可能。
- Figma Motion：アニメーションやトランジション、タイムラインをFigmaファイル内で直接編集できる専用モーションツール。AIで生成することもでき、Dev ModeやMCP経由でそのまま実装へ渡せる。
- シェーダー・生成エフェクト：AIでシェーダー効果やフィルを作成し、インタラクティブな質感表現を追加できる。
- 生成プラグイン（Generative Plugins）：AIでその場限りの専用プラグインやツールを生成し、繰り返し作業を自動化できる。
すでにClaude CodeやCodexとの連携も進めてきたFigma Makeだが、今回のConfigでは目立った新機能が発表されておらず、コミュニティからは「Make/Sitesのアップデートがなかった」との声も上がっている。デザインからコードへの橋渡しは、Make単体よりもキャンバス全体の機能拡張という形で進んでいるのが今回の特徴だ。
v0（Vercel）— Figmaインポートを刷新、プロダクション品質のReactを高速生成
Vercelのv0は、Figmaインポート機能を刷新し、レイアウト・タイポグラフィ・コンポーネント・アイコン・画像をFigmaファイルから直接読み取って、より忠実度の高いReactコードを生成できるようになった。処理速度も従来比で大幅に向上しているという。
- Figmaへの認証だけでインポートでき、専用プラグインが不要に
- shadcn/uiや独自デザインシステムとの組み合わせを推奨（大きなデザインを小さなコンポーネント単位に分割して渡すのがコツ）
- 会話履歴をコンテキスト外でも記憶し、コード品質が低下した際は自動でリファクタリング
- SVG・アセットアップロードのサポートも強化
「デザインをそのまま渡せば実装に近いコードが返ってくる」体験を突き詰めているのがv0の方向性で、Figmaとの往復コストを下げることに注力している様子がうかがえる。
Lovable — プランモードと注釈機能で「非エンジニアでも本格開発」
Lovableはフロントエンド・バックエンド・認証・デプロイまでを一括で扱える「オールインワン」型のAIアプリビルダーとして存在感を強めている。最近特に評価されているのが以下の機能だ。
- プランモード：いきなりコードを生成せず、対象ユーザーや必要機能をAIとチャットで詰めてから実装に入るモード。仕上がりの精度が上がるとされる
- 注釈（アノテーション）機能：プレビュー画面に丸や取り消し線などの手描きマークを入れ、「この注釈の通りに直して」と指示できる
- Lovable Cloud：内部的にSupabaseを採用したフルマネージドのバックエンドで、データベース・認証・AI機能をノーコードで組み込める
- GitHub連携：生成コードをGitHubに同期でき、Lovableで作った土台をClaude CodeやCodexで発展させる「脱ロックイン」の導線も用意
「コードは書けないが仕様を詰めて作り込みたい」層に強く刺さる設計で、v0やBolt.newとはやや異なる客層を狙っているのが分かる。
Bolt.new — 最新モデル対応とチーム向け機能を強化
StackBlitzのBolt.newは、公式ブログで最新モデルへの対応やチーム向け機能の強化を継続的に発表している。
- 最新モデルへの対応をいち早く進め、コード生成の精度・速度を継続的に改善
- Bolt for Teams：セキュリティスキャンや管理者によるデプロイ制御、既存の本番データベースとの接続などチーム開発向けの機能を提供
- Twilioなど外部サービスとの連携で、Boltアプリから直接SMS送信のような機能を組み込める
- 「Bolt Rebuilds」のようなハンズオン企画で、既存サイトを題材にした実践的な使い方を発信
スピード重視のプロトタイピングから、チームでの継続運用まで裾野を広げているのが最近のBolt.newの特徴だ。
主要AIサイトビルダー比較
| サービス | 強み | 向いている用途 |
|---|---|---|
| v0 | デザイン精度の高いフロントエンド生成、Figma連携 | 見た目にこだわったUI・LP制作 |
| Bolt.new | 高速なプロトタイピング、柔軟な反復 | 短時間でアイデアを形にしたい時 |
| Lovable | 非エンジニアでも扱いやすいUI、フルスタック一括生成 | PM・非エンジニアによるアプリ立ち上げ |
| Replit | 永続データや社内ツール向けの作り込み | データ連携が必要な業務アプリ |
| Figma Make | デザインファイルとの一体感、Figmaエコシステム | デザイナー主導のプロトタイピング |
各ツールの機能は急速にコモディティ化しつつあり、実務では「初期生成の質」よりも料金体系・外部連携・チーム機能といった部分が選定の決め手になりつつあるという指摘も出ている。
主な情報源
- Figma Blog: Config 2026 Recap
- TechCrunch: Figma adds code layers, support for animations, more AI features in new update
- Vercel Blog: Working with Figma and custom design systems in v0
- AlphaSignal: Vercel’s v0 Rebuilds Its Figma Import to Ship Production React 3x Fast
- Bolt.new Blog
- Ultimate Guide to AI Prototyping Tools (Lovable, Bolt, Replit, v0)
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。