Webflow CLI・MCP・APIの違いとは？3つの「入口」を表と図で整理【2026年版】

Webflowは、画面を見ながらサイトを作れるノーコードツールとして知られています。一方で、開発者やAIエージェントがWebflowを操作するための公式の仕組みも用意されています。代表的なのが「Webflow CLI」「Webflow MCPサーバー」「Webflow API」の3つです。

名前は似ていますが、使う人も操作の仕方も異なります。本記事では、Webflowの導入を検討している企業のご担当者や、社内でWebサイトを運用している方に向けて、3つの違いと使い分けを公式情報に基づいて整理します。デザインから入る方法として「Figma to Webflow」もあわせて紹介します。

※本記事の内容は、2026年11月5日時点の公式情報に基づいています。

結論：APIが土台、CLIとMCPはその上の入口

• Webflow API：Webflowをプログラムから操作するための基盤（REST API）です。
• Webflow MCPサーバー：ClaudeやChatGPTなどのAIツールに、自然な文章で指示してWebflowを操作するための入口です。MCPサーバーは、AIの指示をWebflowのAPI呼び出しに変換して実行すると公式に説明されています。
• Webflow CLI：開発者がターミナルでコマンドを打って、サイトの公開、CMSの操作、Reactとの連携（DevLink）、Webflow Cloudへのデプロイなどを行うための公式ツールです。CMSの操作などはAPIを通じて行うと説明されています。

参考：Introduction to the Webflow CLI（Webflow Developers）／Webflow MCP server overview・Intro to Webflow's APIs（Webflow Help Center）

どれを使えばいいか：状況別の早見

• コードを書かない担当者が、記事更新やSEOの見直しを効率化したい：MCPから始めるのが手軽です。ClaudeやChatGPTなどは、Webflowが用意したコネクタから接続できます。なお、IGNITEの社内利用では、AIが意図しないクラスを作ることがありました。使い始める前に、クラスの命名ルールとコンポーネントを整えておくと安心です。
• 開発チームや制作会社に、React連携や自動デプロイを任せたい：CLIが向いています。
• 社内システムや外部サービスとCMSを独自につなぎたい：APIを使います。
• ほかのツールとつなぐだけで、コードは書きたくない：ヘルプセンターでは、Zapier、Make、IntegratelyなどのツールでWebflowと連携する方法も紹介されています。

参考：Connect your AI tools to the Webflow MCP server・Intro to Webflow's APIs（Webflow Help Center）

比較表：CLI・MCP・API

参考：各セクション末尾の公式ページ、Plans & pricing（Webflow）

Webflow CLIでできること

Webflow CLIは、npmで配布されている公式のコマンドラインツールです。Node.js 22.13.0以上の環境で、npm install -g @webflow/webflow-cli を実行してインストールします。2026年11月5日時点の安定版の最新は、10月27日に公開されたv2.15.0です。

主なコマンドは次のとおりです。

• webflow auth：ログインとログイン状態の管理
• webflow sites：サイトの一覧表示・公開
• webflow cms：CMSのコレクション・フィールド・アイテムの作成・更新・公開
• webflow forms：フォームの一覧と送信データの取得（CSVでの書き出しにも対応）
• webflow assets：画像などのアセットのアップロードと整理
• webflow devlink：Reactコンポーネントの共有（import）と、Webflowのコンポーネントの書き出し（export）
• webflow cloud：Webflow Cloudへのデプロイ（コマンドリファレンスでは、apps コマンド群の旧名として扱われています）
• webflow extension：Designer拡張機能の開発

なお、サイトのページをローカルのコードと双方向に同期する sites init/pull/push はβ版です。安定版には含まれず、@next 版をインストールした場合だけ使えます。Webflow Cloudのアプリを管理する apps コマンド群もプレリリース版（@next）でのみ提供されています。

DevLinkはWebflowとReactのコードをつなぐ仕組みで、ヘルプセンターでは「Webflowのコンポーネントの書き出し」「Reactコンポーネントの取り込み」「Webflow Cloudへのアプリのデプロイ」ができると説明されています。

Webflow Cloudは、Webアプリケーションを動かすための公式の実行・ホスティング環境です。Next.js、Astro、Viteのアプリや、フレームワークを使わない静的アプリに対応しています。下の画面のように、AstroとNext.jsのスターターテンプレートから始めることも、GitHubのリポジトリを取り込むこともできます。すべてのサイトプランで使えますが、使える機能や使用量の上限はプランによって異なります。

参考：Introduction to the Webflow CLI・Command Reference・Authenticate with Webflow・Changelog v2.15.0・Webflow Cloud（Webflow Developers）／@webflow/webflow-cli（npm）／DevLink overview（Webflow Help Center）／Understanding Webflow Cloud pricing and new usage-based limits（Webflow Blog）

Webflow MCPサーバーでできること

MCP（Model Context Protocol）は、AIツールが外部のサービスとやり取りするための共通の規格です。WebflowのMCPサーバーにAIツールを接続すると、自然な文章での指示によって、Webflowサイトのデザイン、構築、コンテンツ管理を進められます。

ヘルプセンターでは、ページの作成・編集、レイアウトやスタイルの変更、コンポーネントやデザインシステムの管理などが紹介されています。開発者向けドキュメントでは、CMSやSEO設定、アセットの管理、Webflow Cloudアプリの管理なども挙げられています。

利用条件は次のとおりです。

• Starter（無料）を含むすべてのサイトプランで使えます。
• サイトの「Reviewer」ロール以外のユーザーが接続できます。
• 操作の範囲は、各ユーザーに与えられているWebflow上の権限の範囲内に限られます。
• アクセス解析（Analyze）、AEOのデータ、A/Bテスト（Optimize）の結果を読むには、有料の追加オプションが必要です。メンバーやアクセス権限の管理には、EnterpriseのWorkspaceと、Workspaceのオーナーまたは管理者の権限が必要です。
• MCPサーバーを使っても、WebflowのAIクレジットは消費されません。使用量はAIツール側の契約やクレジットで数えられます。ただし、Campaignsに固有のAI機能では、WebflowのAIクレジットを使う場合があります。

接続後は、Claudeなどから「ブログのコレクションに新しい記事を追加して」と依頼すると、記事の作成から公開までを進められます。Claudeは初期設定で、Webflowでの操作ごとに承認を求めます。また公式は、AIツールに接続を許可するサイトを、作業中のものだけにするようすすめています。

大半の操作は、Webflowの画面を開いていなくても実行できます。キャンバス上で選択中の要素に関わる操作などに限って、Designerで「Webflow MCP Bridge App」を起動しておく必要があります。

また、Webflow Cloudの環境変数のうち秘密情報にあたる値は、MCPサーバーでは扱えず、Webflow CLIで設定するよう案内されています。なお、設定に使うCLIコマンド（apps env-vars）は、公式のコマンドリファレンスではプレリリース版の扱いです。

IGNITEでも社内でMCPを使っており、日々の作業には十分使えるという手応えがあります。一方で、意図しないクラスをAIが新しく作ってしまうことがありました。MCPを使うなら、コンポーネントとクラスの管理がとても重要になると感じています。

参考：Webflow MCP server overview・Connect your AI tools to the Webflow MCP server・Connect Claude to Webflow（Webflow Help Center）／Webflow MCP server・How it works（Webflow Developers）

Webflow APIでできること

Webflow APIは、サイト、CMS、フォームなどのデータをプログラムから扱うための仕組みです。社内向けの連携であれば「サイトAPIトークン」で手早く始められます。他社にも使ってもらう連携を作る場合は、OAuthを使う「Webflowアプリ」での認証が推奨されています。

サイトAPIトークンには、次のような仕様があります。

• 作成できるのはサイト管理者だけです。
• 1サイトにつき5個まで作成できます。
• 365日連続で使われないと失効します。

リクエスト数の上限はサイトプランによって異なります。料金ページでは、CMSを管理するAPI（Content management APIs）の上限が、Starterは毎分60回、Premiumは毎分120回、Teamは毎分600回、Enterpriseは個別に設定とされています。開発者向けのRate Limitsページは、旧プラン名（CMS、eCommerce、Businessなど）で記載されたままです。サイトの公開は1分に1回までという制限もあります。

また、現在のAPIはv2です。v1は2025年3月31日に非推奨となり、保守やサポートの対象外になりました。古い解説記事を参考にする場合は、どちらのバージョンについての記事かを確かめてください。

参考：Intro to Webflow's APIs（Webflow Help Center）／Authentication・Site Token・Rate Limits・Webflow v1 API deprecation notice（Webflow Developers）／Plans & pricing（Webflow）

デザインから入るなら「Figma to Webflow」

CLI・MCP・APIとは別に、デザインデータの入口として「Figma to Webflow」があります。Figmaのプラグインと、Webflowのアプリを組み合わせて使う公式の連携で、Figmaのコンポーネント、変数、スタイルをWebflowに同期できます。2025年2月には、複数のレイヤーをまとめて同期できるようになるなどの大きな改善が告知されました。

同期できるものは次のとおりです。

• Figmaのレイヤー（フレームやコンポーネント）→ Webflowのコンポーネント・要素
• Figmaの変数 → Webflowの変数
• テキストとエフェクトのスタイル → Webflowのクラス
• 画像やベクターのアイコン → Webflowのアセット

同期の向きはFigmaからWebflowです。同期済みのコンポーネントをFigma側で更新すると、Webflowのアプリで変更をまとめて受け入れるか、1つずつ確かめてから取り込めます。使うときは、次の点に注意してください。

• 同期するレイヤーには、Figmaのオートレイアウトが必要です。
• バリアントには対応していません。フレームごとに、別のコンポーネントや要素になります。
• 変数は、1回につき1つのコレクションとモードだけ同期できます。
• カスタムフォントは、先にWebflowのサイトにアップロードしておきます。
• Safariでは使えません。ChromeかFigmaのデスクトップアプリを使います。
• 大きなページは、コンポーネントやセクションを少しずつ同期するのがおすすめです。

参考：Figma to Webflow plugin and app（Webflow Help Center）／Major Figma to Webflow improvements（Webflow Updates）

画面で直せることが、Webflowのいちばんの強み

Webflowは本来、画面を見ながらサイトを作り、直していくノーコードツールです。そこにCLIが加わり、開発チームはコードで、担当者はMCPを通してAIで、と操作の入口が増えました。以前より使いやすくなったと感じています。

それでもBooostは、画面上で見たまま修正・変更できることが、Webflowのいちばんの強みだと考えています。コードで管理する仕組みは、GitHubなどを使いこなせる人が前提で、誰もが扱えるわけではありません。直すたびにコードを更新して公開の手順を踏むのも、手間がかかります。画面で見ながら直して、そのまま公開できる。この土台があるからこそ、CLI・MCP・APIは「必要なところだけ、コードやAIに任せる」という使い方ができます。

なお、Webflowの管理画面や公式ドキュメントは英語が中心です。英語に不安がある場合も、Chromeの翻訳機能や翻訳の拡張機能を使えば、日本語に訳して読みながら操作できます。MCPなら、AIへの指示も日本語で出せます。

制作会社は3つをどう組み合わせるか

Webflow公式のYouTube Short「Webflow CLI」では、フォームとデータベースを持つAstro製の小さなゲストブックアプリを、Webflowサイトの中で動かす例が紹介されています。

出典：Webflow公式YouTube「Webflow CLI」

流れは次の3ステップです。

1. webflow devlink export：Webflowの既存のコンポーネントを、アプリのコードに取り込む
2. webflow apps deploy：アプリをWebflow Cloudにデプロイする（このコマンドは現在プレリリース版でのみ提供。安定版では webflow cloud deploy を使います）
3. webflow devlink import：Reactコンポーネントを、コードコンポーネントとしてWebflowサイトに戻す

デザインはWebflowで、アプリのロジックはコードで管理しながら、1つのコードベースでサイトに組み込めるのが特徴です。

Booostでは、目的に応じて次のように使い分けると考えています。

• 開発とデプロイ：CLIを使い、ReactやWebflow Cloudとの連携を自動ビルド・デプロイの仕組みに組み込む
• 日々の運用・改善：MCPを使い、記事の更新やSEO設定の見直しをAIと一緒に進める
• 独自のシステム連携：APIを使い、社内データベースや外部サービスとCMSをつなぐ

「ノーコードのツールは開発チームの運用になじむのか」というご相談をいただくことがあります。今回ご紹介した3つは、その判断材料のひとつになります。

参考：Command Reference・Introduction to the Webflow CLI（Webflow Developers）

まとめ

Webflow CLI・MCP・APIは、いずれもWebflowを外部から操作するための公式の仕組みです。土台となるAPIの上に、コードで操作するCLIと、AIで操作するMCPがあると整理すると、違いがつかみやすくなります。デザインから入るなら、Figma to Webflowも選択肢です。導入にあたっては、β版・プレリリース版の機能や、プランごとの条件を公式の最新情報で確かめながら進めることをおすすめします。

WebflowでのCLI・MCP・APIの活用については、Booostのお問い合わせからお気軽にご相談ください。

※本記事はIGNITEが独自に調べてまとめたもので、Webflow, Inc.の公式見解ではありません。Webflowは、Webflow, Inc.の商標です（参考：Trademark Usage Policy）。記事中の製品画面や画像の著作権は、各出典元に帰属します。