Builder.io

Builder.ioとは？

Builder.ioは、チームとAIエージェントでソフトウェアを構築する共同開発プラットフォームです。エンジニア、デザイナー、プロダクトマネージャー、マーケターが、ツール間でファイルを受け渡さず同じ本番コードで作業します。

販売されているのは単独でも併用でも使える2製品で、Codeは既存リポジトリ内で動くビジュアルIDE、Contentはページ、キャンペーン、構造化コンテンツ向けのビジュアルなヘッドレスCMSです。Builder.ioは両製品をFusionとPublishとも呼び、前者はプロダクト・デザイン・エンジニアリングチーム向けのAI開発プラットフォーム、後者はコンテンツチーム向けのビジュアルなヘッドレスCMSです。

同社は、ファッション小売ShopStyleで共にWebアプリケーションを開発したSteve SewellとBrent Locksが共同創業しました。2021年の同社に関する報道は、マーケター、プロダクトマネージャー、デザイナーが既存のコンポーネントからコンテンツを作り、A/Bテストを実行し、コンバージョンを測定できるドラッグ＆ドロップ式のビジュアルエディター兼ヘッドレスコンテンツ管理システムとして紹介しました。

プラン選びで最も重要なのは、AI作業、ホスティング、Builder管理のデータベースがすべて共有のエージェントクレジットプールで計量され、シートはユーザー単位で課金される点です。

主な機能

Code：リポジトリ上で動くビジュアルIDE

• コードを理解した生成：Builder Codeは、接続したリポジトリとそのコンポーネント、パターン、プロジェクトルールをコンテキストとして、アプリ、機能、プロトタイプ、UIを作成します。
• ビジュアルなコード編集：レイアウト、余白、スタイル、文言をビジュアルキャンバス上で編集でき、変更のたびに基のコードが更新されます。
• Figmaからコードへの変換：Figmaのデザインを取り込み、チーム独自のコンポーネントとデザインシステムで構成されたレスポンシブなUIに変換します。
• コーディングエージェントとの受け渡し：Cursor、Claude Code、CodexからブランチをBuilderにプッシュしてデザイナーやPMが仕上げ、エンジニアリングレビューの準備ができたら引き戻せます。
• 並列クラウドエージェント：Builderによると、各並列エージェントは完全な開発環境とブラウザプレビューを備えた専用のクラウドコンテナで動作します。
• MCP連携：組み込みMCPサーバーが外部サービスをコード生成に取り込み、カスタムMCPサーバーならエージェントがアプリ固有のデータベースやサービスにアクセスできます。

デリバリー経路はあえて従来型です。承認された変更はプルリクエストとしてチームの既存パイプラインを通り、ファイアウォール内のコードベースにはBuilderがプライベートリンク経由で社内のGit、レジストリ、APIに接続します。つまりCodeは単体のアプリジェネレーターというより、既存リポジトリに重ねるコラボレーションレイヤーに近いものです。

Content：ビジュアルなヘッドレスCMS

• エージェント型のコンテンツワークフロー：プロンプトでページの作成、コンテンツの更新、バリエーションの生成、一般的な公開作業を、開発者にチケットを起票せずに行えます。
• 構造化コンテンツモデル：再利用するコンテンツをモデル、フィールド、参照、APIで管理し、1つのエントリーでページ、アプリ、ストアフロントなどのチャネルを支えられます。
• 実験とパーソナライズ：チームはCMSからテストの実行、バリエーションの作成、オーディエンスのターゲティング、体験のパーソナライズを行えます。
• ローカライズ：複数市場向けのローカライズ済みコンテンツを1つのワークフローで管理し、構造、承認、ブランドの一貫性を保ちます。
• 公開の管理：ロール、権限、承認、プレビュー、環境、監査証跡で、誰が何を公開できるかを制御します。
• Webレイアウトの取り込み：Builder Chrome拡張機能は公開中のページからレイアウトをコピーし、コピー中にブラウザのサイズを変え、複数の画面サイズでレイアウトを取得します。

CodeとContentの連携

両製品はコンポーネントを双方向に共有します。Codeで作ったコンポーネントは、Contentのデザインシステムの一部としてチーム全体で使えます。Contentで作ったコンテンツは、Codeで構築したアプリやUIに取り込めます。

AIモデルとクレジット

クレジットは、入力トークン、出力トークン、選択したモデルのトークン単価に応じて消費されます。モデルのドロップダウンは、各モデルの品質を文字の等級で、コストをClaude Haiku 4.5基準の基本クレジット値に対する倍率で示します。コスト0.1xのモデルなら同じクレジットでおよそ10倍のプロンプトを送れます。管理者は利用可能なモデルを制限し、「Auto」設定で使うデフォルトモデルを選べます。

ガイド

Codeプロジェクトの設定

1. GitHub、Azure、GitLab、Bitbucketのいずれかのアカウントを接続し、全リポジトリか選択したリポジトリへのアクセスを許可して、プロジェクトとして開くものを選びます。
2. デザインシステムを接続します。ほとんどのプランでは「プロジェクト設定」で追加リポジトリとして加え、Enterpriseプランではコンポーネントのインデックス作成でこの手順を自動化できます。
3. 「Generate」タブでエージェントにプロンプトを入力し、Figmaのデザイン、スクリーンショット、PDF、MCPサーバーなどのコンテキストを追加します。
4. .mdcルールファイルを入れた.builder/rules/フォルダーを作ってチームの慣例を定め、プロジェクトの目的とアーキテクチャを説明するAGENTS.mdファイルも用意します。
5. 作業をプルリクエストとして送ります。開いた後は、チームメンバーの誰もがそこで@builder-botにメンションして追加のコード変更を依頼できます。

Builderのドキュメントによれば、このルール調整には開発者の助けが要る場合があります。

ユースケースと事例

• プロトタイピング：プロンプト、アイデア、デザインが動くプロトタイプになり、本格開発の前に、チームでレビューやテストを行い、関係者と検証できます。
• アプリと機能の開発：新しいアプリ、プロダクト機能、社内ツールを、アイデアから出荷までに必要なコンテキストをチームとエージェントで共有しながら構築します。
• マーケティングサイト：ランディングページ、キャンペーンページ、サイトコンテンツをビジュアルに作成・更新でき、ブランドシステムと承認ワークフローは組み込み済みです。
• EC向けコンテンツ：コマースプラットフォームで選んだ商品とコレクションからストアフロントのページを構築するため、タイトル、画像、価格が元のカタログと結び付いたままです。
• SlackやJiraからの依頼：Teamプラン以上では、Slackで@Builder.ioをタグ付けするかJiraのチケットを割り当てると、エージェントがコンテキストを読み取って構築を始めます。

Builder自社サイトの顧客事例は、独立した測定ではなくベンダーが選んだ推薦の声です。その1つでZapierのウェブサイト最適化マネージャーは、チームが250を超える新しいページを公開し、平均で月約100万人の訪問者を集めており、今ではウェブサイトの実験もできると述べています。

対象ユーザー

Builder.ioは、複数の役割が同じコードで作業する前提で設計されています。

• 既存のコードベースを持つエンジニアリングチーム：エンジニアはBuilderでも自分のAIツールでもコーディングでき、ブランチをプッシュすれば、デザイナー、PM、QAが実際のアプリ上でピクセルを調整し、文言を編集し、テストを実行できます。
• マーケティング・コンテンツチーム：Builder Contentは、ブランドに沿ったページ、キャンペーン、パーソナライズされたコンテンツを作成・最適化する必要のあるコンテンツチーム向けのエージェント型CMSとして打ち出されています。
• 本番ソフトウェアを出荷するプロダクト組織：Builderは自社を、本番ソフトウェアを構築するプロダクトチームのコラボレーションと統制のために作られたと説明しています。
• プラットフォームを評価する個人：Freeプランは、プラットフォームを試してみたい個人向けと説明されています。

厳格なデータプライバシー管理が必要でもEnterprise契約は望まないチームには、あまり向きません。プライバシーモードは、厳格なデータプライバシー管理を必要とするエンタープライズ顧客向けの設計だからです。

プラットフォーム

• ブラウザとデスクトップ：Builderはブラウザのほか、macOSとWindows向けのネイティブアプリBuilder Desktopでも提供されています。
• 実行環境：Builder Desktopには、クラウドコンテナ、ローカルマシン、ローカルコンテナという3つの実行モードがあります。
• コードエディター：VS Code拡張機能で、Visual Studio Codeと、CursorやWindsurfなどのVS Codeベースのエディターから、Builderのビジュアルエディターを起動できます。
• Figmaの取り込み：デザイン取り込みの推奨方法は、プロンプトへのFigmaのURL貼り付けです。Builder Figmaプラグインも引き続き使えますが、Figmaのシートと、書き出すファイルへの編集権限が必要です。
• フレームワーク：CodeはReact、Next.js、Vue、Svelte、Angularで動作します。Content SDKは、これらと同じフレームワークで構築したサイト、アプリ、ストアフロントにCMSコンテンツを描画します。
• Gitプロバイダー：入門ガイドはGitHub、Azure、GitLab、Bitbucketのアカウントを挙げる一方、料金ページはBitbucket Enterprise、GitLab Enterprise、Azure DevOpsとの接続をEnterpriseプランに置いています。
• コマースプラットフォーム：ContentはShopify、commercetools、BigCommerce、Salesforce Commerce、Magentoに加え、検索、レビュー、レコメンド、ローカライズなどのコマース向けツールと連携します。
• Shopifyでの請求：Shopify App StoreからBuilderをインストールすると、サブスクリプションはBuilderで直接ではなくShopifyを通じて管理されます。
• プライバシーモードの利用場所：プライバシーモードの設定はデスクトップアプリでのみ利用でき、ブラウザ版にはありません。

価格

Builder.ioの料金は、Codeではユーザー単位で、有料シートごとにエージェントクレジットが付きます。下の表は2026年10月6日に取得したCodeのセルフサービスプランです。

ProまたはTeamの各シートには月500エージェントクレジットが含まれ、この枠は毎月サブスクリプション開始日にリセットされます。追加クレジットは500単位で月$25で購入できます。Pro、Team、Enterpriseでは、未使用クレジットがプランの月間容量まで繰り越されます。

確認した料金ページには、Content（ビジュアルCMS）の定価は見当たりませんでした。Contentスペースのサブスクリプションは、シートとクレジットに加え、月間のビュー数と帯域幅の量を設定します。Builderは、プランの機能、価格、制限は変更されうるとしています。

Builder.ioの代替ツール

Builder.ioはCode側ではAIアプリビルダーと、Content側ではヘッドレスCMSプラットフォームと重なるため、適切な比較対象はどちらの製品を評価するかで変わります。Builder自身の比較ページは、独立したレビューではなくベンダーが書いたポジショニングです。

• Bolt.new：Builderの比較は、素早いプロトタイピング向けのオールインワンのブラウザランタイムか、自分のリポジトリでの協働型で本番品質のコード管理か、という選択として整理しています。
• Lovable：Builderの比較は、LovableはMVPを素早く公開したい個人創業者や小規模チーム向けに、スピード重視で作られたと説明しています。
• Vercelのv0：v0は、AIで動作するアプリケーションを数分で生成し、数秒でライブのWebサイトとして公開できるとしています。
• Storyblok：Content側では、Storyblokはすべてのチームが使えるビジュアルエディターと、APIファーストのヘッドレス配信をプラットフォームの中心に据えたヘッドレスCMSです。

制限事項

利用量とプランの制限

• Freeプランのリセット時刻がページで異なる：料金FAQでは、Freeプランのクレジットは1日15、月最大60で、日次クレジットはUTCの午前0時にリセットされるとする一方、クレジットのドキュメントでは、無料の日次上限はPSTの午前0時にリセットされるとしています。
• Freeではモデルを選べない：Freeのユーザーは常に「Auto」のモデル設定を使います。
• ホスティングもクレジットを消費：Builderのホスティングで公開したり、Builder管理のデータベースを追加したりすると、AIの利用と同じクレジットプールから差し引かれます。利用量は1時間ごとに差し引かれるため、チームの誰もBuilderで作業していなくても残高が減ることがあります。
• 無料ホスティングの上限：無料ホスティングは、スペースごとに公開サイト1つ、月15回のデプロイまでに制限されます。上限に達するとライブサイトは配信を続けますが、翌月になるかアップグレードするまで新しいデプロイはブロックされます。
• ダウングレード：Freeプランにダウングレードしたユーザーは、繰り越したクレジットを使えなくなります。
• Contentのピクセル：Contentのサブスクリプションでは、ビジュアルビューを計測して支払うべき料金を決めるため、顧客のデジタル資産へのピクセル設置が必要です。

AIの出力とサポート

Builderは、AIの出力の正確性、完全性、信頼性を一切保証せず、その誤りにも責任を負いません。出力は唯一とは限らず、AIが他の顧客に同じまたは類似の出力を生成することがあります。AIの出力の解釈やプロンプト最適化は技術サポートの対象外で、クレジット返金の正当な理由にもなりません。

データ、プライバシー、セキュリティ

• AI学習の記述がページで異なる：ホームページのエンタープライズ向けセクションは、データは非公開でモデル学習から切り離されているとしています。AI利用のドキュメントは、FreeプランではBuilderが顧客データをAIの学習と改善に使う場合があるとしています。セルフサービスの有料プランでは、AIコンテンツ学習がオンの場合に限り、顧客データが学習に使われる可能性があります。Builderは、Enterpriseアカウントの顧客データはAI学習に使わないと述べています。料金比較表では、AI学習はFreeとProでオン、Teamでオプトアウト可能、Enterpriseでオフです。同じドキュメントは、Builderが使うサードパーティのLLMは顧客データで学習しないとしています。
• 禁止データ：SaaS規約は、Builderが書面で許可しない限り、HIPAA規制対象の健康情報、18歳未満の子どもの個人データ、完全な支払いカード番号、政府発行のID番号、生体データの送信を禁じています。
• トラッキング：Builderのコンテンツトラッキングはデフォルトでオンで、コンテンツエントリーのインプレッションとクリックを自動記録します。
• セキュリティへの取り組み：BuilderはSOC 2 Type 2の審査を維持し、要望があれば顧客にNDAのもとで最新レポートを提供します。確認された個人データ侵害は、認識から72時間以内に顧客へ通知すると約束しています。また、GDPRと現行の米国データ保護法を遵守しているとしています。
• プライバシーモードの範囲：プライバシーモードは完全なエンドツーエンド暗号化ではなく、クライアント側で管理する暗号化と選択的なデータ秘匿で露出を最小限に抑えます。

よくある質問

Q1. Builder.ioのAIが生成したコードやコンテンツは誰のものですか？

BuilderのAI規約では、Builderと顧客の間では、顧客が提供した入力とAIが生成した出力の両方について、顧客が単独の所有権を持ちます。Builderはサービス提供のためにその出力を使用することがあります。

Q2. Builder.ioはどのAIモデルを使っていますか？

BuilderはAnthropic（Claude）、OpenAI（GPT）、Google（Gemini）などのプロバイダーのモデルを提供しています。「Auto」設定はタスクごとにモデルを選び、セルフサービスプランのデフォルトです。

Q3. Builder.ioのサブスクリプションを解約・返金するとどうなりますか？

解約したサブスクリプションは現在の請求期間の終わりまで有効で、その後アカウントはFreeプランに移行します。返金については、サポートチームが申請を個別に審査し、プラン変更を確認したうえで必要に応じて返金します。一方、SaaSサービス契約では、同契約で明示的に定める場合を除き、すべての料金は返金不可とされています。