Figma Makeの新編集機能とBolt.newテンプレート集に見る、AIサイトビルダーの「実装まで届く」進化

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

AIサイトビルダー各社が「作って終わり」から「本番運用まで届く」機能へと踏み出している。今回はデザインとコードの橋渡しを一気に進めたFigma Makeの新機能2つと、無料のテンプレート集で「ゼロからの白紙」問題に挑むBolt.newの新機能を取り上げる。

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

Figma Makeに「プロパティパネル」と「アノテーション」が追加

Figma Makeは、テキストからアプリやサイトを生成する「Prompt to code」ツールだが、生成後の細かい調整はこれまでプロンプトのやり直しに頼る場面が多かった。新たに追加されたプロパティパネルとアノテーション機能により、要素を選んで余白・色・サイズなどを直接編集できるようになり、変更内容に応じてエージェントが裏側のコードを自動で書き換える。

  • プロパティパネル:キャンバス上で要素を選択し、スペーシングやスタイルをGUIで直接調整
  • アノテーション:プレビュー画面の該当箇所をクリックして「ここをこう直して」とエージェントに指示できる、文脈付きのコメント機能

この2機能は新規に作成したMakeファイルから利用可能で、既存ファイルは従来の編集ツールのままとなる。「ざっくり生成→細部はGUIで微調整」という、デザインツールに近いワークフローに一歩近づいた形だ。

Figma Make「Workflow Lab」――デザインの修正がそのままGitHubのPRになる

もう一つの大きな動きがWorkflow Lab: Deploying Designs Directly with Figma Makeで紹介された、既存のGitリポジトリをFigma Makeに直接取り込み、デザイナー自身がブランチを作成してプルリクエストを出せるようにする仕組みだ。

ステップ 内容
1. リポジトリ連携 既存のGitHubリポジトリをFigma Makeにインポートし、本番コードをキャンバス上で編集可能にする
2. 修正とアノテーション アクセシビリティ対応など細かな修正をデザイナーが直接行い、コメント・注釈も一緒に記録される
3. ローカルコミット 変更は自動でローカルコミットとして蓄積され、本番には即反映されない
4. ブランチ&PR作成 準備ができたらMake上からブランチを切り、GitHubへプルリクエストを送信
5. エンジニアのレビュー 通常のPRと同じくエンジニアが差分をレビューし、承認・マージして本番反映

VentureBeatの報道によれば、既存のエンジニアリングのレビュー体制を迂回せず、通常のGitワークフローの中で完結するよう設計されているのが特徴。「バックログで数ヶ月待たされていた小さな修正が、1日で本番に反映される」という事例が紹介されている。デザイナーとエンジニアの分業を崩さずに、着手から反映までの距離を縮める設計思想がうかがえる。

ホワイトボードに貼られたUI画面のスケッチとレビューの様子
Photo: juhansonin / CC BY 2.0, Openverse経由

Bolt.newが無料の「Template Marketplace」を公開

一方、Bolt.new(StackBlitz製)は、デザインスタジオやエージェンシーが作り込んだフルスタックアプリのテンプレートを無料公開するTemplate Marketplaceを開始した。

  • ポートフォリオ・SaaS・社内ツール・EC・編集系・不動産/金融ダッシュボードなど幅広いカテゴリを用意
  • 見た目だけのモックアップではなく、バックエンド・データ・ロジックまで組み込まれた「実際に動くアプリ」がベース
  • 閲覧・プレビューはトークン消費ゼロで、編集を始めた時点から課金が発生する設計

AlphaSignalの紹介記事では「AI生成アプリがみな同じような見た目になる」問題への対策として位置付けられており、プロがデザインした土台からカスタマイズを始めることで、量産感のあるビジュアルから脱却しやすくなる点が評価されている。個人開発者やスモールチームが「白紙のプロンプト」から始めるハードルを下げる狙いだ。

まとめ:AIサイトビルダーは「生成」から「運用」の段階へ

Figma Makeの2つの新機能は、生成したデザイン/コードを本番の開発フローに正しく載せるための橋渡しであり、Bolt.newのテンプレート集は逆に「最初の一歩」を軽くする施策だ。方向性は異なるが、いずれも単発のプロンプト生成で終わらせず、実際の制作・運用サイクルに組み込むための工夫という共通点がある。


主な情報源

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