ツール一覧 ／ AI活用ノート ／ AIが作った画面はコードに書き出せるか｜主要7ツールのロックイン比較
Figma Make・Framer・Webflow・STUDIO・v0・Lovable・Bolt の書き出し形式を、提供元の公式ドキュメントの記述だけで確認しました。zipが出るか出ないかより、「書き出したあと何が動かなくなるか」で差がつきます。2026-09-03時点の記述に基づきます。
「これ、あとでコードに書き出せますか」——AIで画面を作って提案した案件で、いちばん効いてくる質問です。作っている最中は誰も聞きません。聞かれるのは半年後、担当が変わって「直したい」となったときです。
主要ツールの公式ドキュメントを開いて、書き出し形式・書き出せない部分・独自ランタイムへの依存を確認しました。以下はすべて2026-09-03時点の記述です。課金して検証したものではなく、提供元の公式ヘルプ・利用規約に書かれている内容が根拠です。
順位づけをしていないので「おすすめ」とは書きませんが、比較の軸は先に出します。次の4つで見ました。
どれも「触ってみた感想」ではなく、提供元が自分で書いている記述だけを見ています。触った感想は人によって変わりますが、ヘルプに書いてある制約は変わりません。
| ツール | 書き出しの形 | 出てくるもの | 出てこない／壊れるもの | 手元→ツールへの反映 |
|---|---|---|---|---|
| Figma Make | zipダウンロード／GitHubへプッシュ | アプリのコード一式 | ー（公式は除外項目を明示していない） | 自動では戻せない。手でコピペするか、チャットで伝える |
| Framer | 公式に食い違いあり（後述） | CMSはCSV（公式プラグイン） | サイトのソース一式 | ー |
| Webflow | zip（有料Workspaceプラン） | HTML全ページ・CSS3種・JS・画像 | CMS、メンバーシップ、EC、フォーム、サイト内検索、パスワード保護、多言語、コードコンポーネント | ー |
| STUDIO | なし | ー | HTMLの書き出し自体が提供されていない | ー |
| v0 | ローカルへのエクスポート／GitHub連携 | Next.js・Tailwind・shadcn/ui構成 | ー | GitHub経由。ただし取り込みは手動操作 |
| Lovable | GitHub / GitLab と双方向同期 | 標準的なVite + Reactプロジェクト | バックエンドはSupabase固有機能に依存 | 双方向。ただし同時に扱えるブランチは1本 |
| Bolt | zip（Export > Download） | プロジェクト一式（npm install で起動） | GitHub・Netlifyなどの連携設定 | ー |
← 表は横にスクロールできます →
公式ヘルプは、コードのダウンロードについて「アプリのコードが入った.zipファイルが作られ、好きなIDEに取り込める」と書いています。GitHubへのプッシュにも対応しています。
弱点は、片方向だということです。GitHub連携のヘルプにはこうあります。「GitHub側でコードを編集しても、その変更はFigma Makeには反映されず、次回プッシュ時に上書きされます」。プッシュ先はMakeが作成したリポジトリの既定ブランチ固定で、自分で作ったリポジトリには送れません。別記事でも「コードへの変更を自動でFigma Makeに戻すことはできない。手動でコピー＆ペーストするか、AIチャットで変更内容を共有してください」と明記されています。
つまり、エンジニアが手元で直した瞬間に、Figma Make側のファイルは過去のものになります。デザインの正本をMakeに置き続ける運用は、この時点で成り立ちません。
権利まわりは、Figma AI Termsに「顧客とFigmaの間では、顧客がInputとOutputに関するすべての権利を保持する」とあります。同時に「OutHutの正確性・完全性・信頼性についてFigmaは保証しない。顧客が用途への適合性を評価する責任を負う」とも書かれています。納品物に使うなら、レビューはこちらの仕事です。
なお、生成コードがどのフレームワークで出力されるかは、今回読んだ公式ヘルプの範囲では明示された記述を見つけられませんでした。公開したプロトタイプのホスティングはAWS、ドメインとルーティングはCloudflareで提供されると書かれています。公開機能がベータの間、ホスティング費用は既存の有料プランに含まれるとの記載です（2026-09-03時点）。
ここは、そのまま書きます。Framerのヘルプには、内容が噛み合わない2本の記事があります。
どちらも公式ヘルプで、2026-09-03に両方開いて確認しました。読み方としては、記事Bは公開後のサイトが標準技術で配信されていること（＝データは囲い込まれていない）を述べ、記事Aは編集可能なソースプロジェクトとしての書き出し機能はない、と述べている、と解釈するのが自然です。ただし記事Bには、そのダウンロードをどこから実行するのかという手順が書かれていません。
実務的な線引きはこうです。CMSの中身はFramer公式のCMS Exportプラグインで、コレクション単位のCSVとして持ち出せます。デザインとインタラクションは、持ち出す前提で作らないほうが安全です。クライアントに「あとでコードで渡せます」と言う根拠には、この2本は使えません。
Webflowのコード書き出しは、有料のWorkspaceプランの機能です（サイトプランには含まれません）。zipの中身も公式に列挙されています。
フォームについて公式は、GDPRへの対応のため書き出し先では動作しないと説明しています。Lottieアニメーションはローカルのファイル直開きでは表示されず、Webサーバが必要とも書かれています。
ここが引き継ぎで揉めるポイントです。「コード書き出しに対応しています」は事実ですが、それは静的なガワの話であって、お問い合わせフォームとお知らせ一覧は書き出した先で作り直しになります。見積りに入れておく項目です。
Studioのヘルプには「Studio.DesignはサイトのHTMLコードを書き出す手段を提供していません」とあり、「Studio.Designでできないこと」の節に置かれています。埋め込みやカスタムコードでJavaScriptを差し込むことはできますが、サイトそのものをファイルとして取り出す機能ではありません。
これは欠陥ではなく設計方針です。判断材料になるのは、「クライアントが将来ほかの会社に運用を移す可能性がどれくらいあるか」だけです。可能性が高い案件で選ぶと、移行時にゼロから作り直す費用が発生します。逆に、更新をクライアント自身がSTUDIO上で続ける前提なら、書き出せないことは実害になりにくい。
この3つはコードが手元に来ます。ただし、詰まる場所がそれぞれ違います。
v0：公式は「Next.js、Tailwind、shadcn/uiなどのモダンなツールを使う」と説明しています。FAQには「Vercelは、あなたのクエリやプロンプトに基づいて生成されたコードを所有しません」とあり、ローカルへのエクスポート、GitHubリポジトリの取り込み、zipのアップロードにも対応しています。注意すべき記述はGitHub連携のドキュメントにあります。「一度GitHubリポジトリを接続すると、それがプロジェクトのコードの正本になります。リポジトリを削除するとコードが復元できなくなる可能性があります」。ベース／作業／本番の3種のブランチを使い、公開時はPRを作ってマージする流れです。v0からの書き出しは自動、外部の変更の取り込みは手動操作になります。
Lovable：GitHub / GitLabと双方向同期で、公式は「標準的なVite + Reactプロジェクト」と書いています。弱点は同期の作法とバックエンドです。編集・同期できるブランチは一度に1本。既存リポジトリの取り込みには対応せず（書き出し方向のみ）、一度切断すると同じリポジトリには再接続できず新しいリポジトリが作られます。100MBを超えるファイルは同期に失敗し、10MBを超えるファイルはLovable側で編集できません。そして重要なのがバックエンドで、公式は組み込みバックエンドがSupabase固有のサービスに依存しており、素のPostgreSQLへ移すには認証・ストレージ・エッジ機能を同等に実装し直す必要があり「標準では対応していない」と明記しています。エディタとAIエージェント自体もセルフホストできません。
Bolt：プロジェクト名 > Export > Download でzipが落ち、npm install && npm run dev で起動する、と公式ヘルプが手順まで書いています。Node.jsが必要です。プロジェクトを複製するとGitHubやNetlifyの連携設定は引き継がれない、との注意書きもあります。
比較記事は「書き出し◯／×」で終わりがちですが、引き継ぎで効いてくるのはその先です。
Figmaのヘルプ自体が、ダウンロードしたコードをローカルで動かすときの詰まりどころに触れています。PostCSSの設定でプラグイン名を直す必要がある、tailwindcss・postcss・autoprefixerを入れ直す必要がある、Radix UIのimportに付いたバージョン番号を消す必要がある、といった内容です。対策として、READMEとセットアップ手順を出力させるようAIに指示することを勧めています。
これは「不具合」ではなく、AI生成コードの書き出しにわりと共通する性質です。プレビューはツール側のサンドボックスで動いており、zipはその環境の前提を全部は連れてきません。
もうひとつ、料金について。今回は各社の価格ページまでは確認していないので、金額は書きません。確認できたのは、機能がどのプラン階層に紐づいているか（Webflowのコード書き出しは有料Workspaceプラン、Figma Makeのコード書き出しと公開は有料プランのFullシート）という点だけです。2026-09-03時点の記述で、料金体系は頻繁に変わります。提案書に載せる前に、その日の公式ページを見てください。
読んだ結果、納品前のチェックとして意味があると思ったのは次の3つです。
Q. 書き出したコードの著作権はこちらのものですか。 Figmaは、AI利用規約で「顧客とFigmaの間では、顧客がInputとOutputに関する権利を保持する」としています。Vercelもv0のFAQで「Vercelは生成コードを所有しない」と書いています。ただし両社とも、出力の正確性は保証せず、第三者の知的財産に似た出力が生じうる点と、利用者側の確認責任に触れています。案件で使うなら、規約の該当箇所をその時点で読み直すのが安全です。
Q. FramerやSTUDIOで作ったサイトを、あとからコードに移せますか。 公式が提供する移行機能としては用意されていません。Framerは公式プラグインでCMSコレクションをCSVに書き出せます。デザインとインタラクションは作り直しになる前提で見積もってください。
Q. 第三者の「書き出しツール」を使えば持ち出せますか。 公開済みサイトの表示結果を取得する種類のサービスは存在しますが、提供元の公式機能ではないため、規約面・動作面のリスクを自分で引き受けることになります。この記事では、公式ドキュメントに書かれている手段だけを対象にしました。
Q. AIツールで作った画面を、そのままクライアントに納品してもいいですか。 どのツールの規約も、出力の妥当性を確認する責任は利用者側にあるという立場です。Figmaは「人によるレビューを含め、用途への適合性を評価する責任は顧客にある」と明記しています。レビュー工数は見積りに入れておく前提で考えるのが現実的です。
Q. どれか1つに絞るなら。 案件の性質で変わります。判断材料は1つだけで、「半年後にこのサイトを直す人は誰か」です。自分たち以外の可能性があるなら、ソースが手元に来るものを選ぶ。運用も自分たちで続けるなら、書き出せないことは実害になりにくい。そこを決めずに機能表だけ見比べても、答えは出ません。