Source by Webflowとは？公式デモから見るAIとサイト制作のこれから
AIでWebサイトの原型を作れても、公開後の修正や運用まで楽になるとは限りません。同じボタンを複数ページで使い回したい、担当者が画像や文章を更新できるようにしたい、といった課題は残ります。Webflowが開発中の「Source by Webflow」は、コードを基盤に、AIと人がビジュアル編集も使いながら制作や改善を進めるための新しいプラットフォームです。
Webflow公式のライブ配信では、研究プレビュー版の画面を使い、コードをもとにしたサイト編集や、仕事に合わせた専用画面の作成が紹介されました。この記事では、デモで確認できたことと未確定の点を整理し、Booostで制作・運用する立場から、期待と気になる点をまとめます。
Source by Webflowとは
Source by Webflowは、デザイナー、開発者、マーケティング担当者がAIエージェントと協力し、Webサイトの構築や改善を進めるためのプラットフォームです。サイトのコードを基盤に、ビジュアル編集とコード編集、AIへの指示を組み合わせられるよう設計されています。開発の背景はWebflow公式のSource紹介記事で確認できます。
2026年10月時点では限定的なリサーチプレビューで、開発が続いています。以下に紹介する画面は公式動画で示された一例であり、一般提供時の仕様を保証するものではありません。
ワークスペース・プロジェクト・セッション・ビューの違い
動画では、Sourceの作業環境を4つの言葉で説明しています。ワークスペースは人やツール、作業をまとめる場所です。その中に、目的や概要を持つプロジェクトを作り、セッションでAIエージェントと作業します。ビューは、その作業に必要な情報や操作を表示する画面です。
たとえば、開発者はコードやページ構造を確認し、コンテンツ担当者は文章を扱う画面を使う、という使い分けが考えられます。Sourceは、同じコードベースやプロジェクトの情報を共有しながら、担当する仕事に合わせて操作画面を構成することを目指しています。
SourceとWebflowの関係：コードを視覚的に扱う
従来のWebflowでは、Designerでページを視覚的に構築し、CMSやコンポーネントを管理します。Sourceは、AstroやNext.jsなどのコードベースを基盤に、そのコードをAIと人が扱いながら、ビジュアル上でも編集できる環境を目指しています。Webflowに慣れた人にとっては、視覚的な制作体験をコードベースのサイトにも広げる取り組みと捉えられます。
これはすべての機能が同等にそろった製品同士の比較ではありません。Sourceは開発途中で、現在のWebflowと同じ編集体験がどこまで実現されるかは、実際の提供内容を確認する必要があります。
Sourceではコードとビジュアルを組み合わせて編集できる
公式デモでは、ローカルにあるAstroプロジェクトをSourceで開き、サイトをプレビューしていました。Next.jsにも対応すると説明されています。AstroとNext.jsは、Webサイトやアプリを作るためのフレームワークです。GitHubのリポジトリに接続して、クラウド環境で作業する方法も紹介されました。読み込みの実演は動画の9分17秒付近から確認できます。
動画では、ページ上の見出しを選び、フォントサイズをビジュアルに調整しています。別の場面では、選択したボタンに対応するAstroファイルをコードモードで開き、設定を変更しました。コードを保存するとプレビューに反映されます。AIへの指示だけでなく、開発者自身がコードを確認・修正できる例です。
作業する人や内容に応じて、画面での調整とコードの直接編集を使い分けられる点が特徴です。ただし、配信時点のビジュアルビルダーは初期段階と説明されており、現在のWebflow Designerと同等の機能がそろっているわけではありません。
Sourceのカスタムビューで業務に合う画面を作る
標準のサイトやコンテンツのビューに加え、デモでは業務に合わせた独自の「カスタムビュー」も紹介されています。
たとえば、デザインの色やフォント、余白などを確認するブランドシステムのビューがあります。担当者がその都度設定ファイルを探さなくても、プロジェクトのデザインルールを視覚的に確認できる可能性があります。
また、動画ではサイト全体のコンポーネントを一覧にし、どのページで使われているか、どのようなバリエーションがあるかを確認していました。コンポーネントを共通パーツとして管理する際には、使用状況を把握するための手掛かりになります。
デモのカスタムビューでは、コンポーネントを実際にページへ配置しなくても、アコーディオンやモーダルなどを操作し、状態の違いを確認できました。これはデモ用に作られたビューの例であり、すべてのプロジェクトに同じ管理画面が標準で用意されているという意味ではありません。
別のコンポーネントナビゲーターの例では、ページ内の構造を見ながら要素を扱う画面も紹介されています。AIが作ったページでも、共通パーツがどこに使われているかを確認できるなら、制作後の整理に役立つ可能性があります。ただし、コンポーネントが自動的に適切に設計・再利用されると保証する機能ではありません。
動画では、自分でビューを作る方法のほか、専用のView Builderエージェントでビューの作成・編集を支援する方法も紹介されています。作成したカスタムビューをチームメンバーへ共有する機能は、配信時点では今後の予定として説明されていました。
アクセシビリティ監査も専用ビューで確認
実演では、サイトのアクセシビリティ上の問題を一覧化するカスタムビューが登場します。画面の片側に問題を並べ、もう片側にページを表示しながら修正する方法が紹介されました。
たとえば、見出しの階層がH2からH4へ飛んでいる箇所について、動画ではコードを確認し、H3へ修正していました。こうした検査は問題を見つける助けになりますが、一覧だけですべての使いやすさを判断するのではなく、実際のページや操作もあわせて確認することが大切です。
Sourceはサイト運用や素材制作にも広がる
アイコンや画像をプロジェクト内で扱う
カスタムビューの例は、サイトの編集画面だけではありません。デモでは、アイコンを作成してプロジェクトに追加する画面や、WebページとSNS用画像を作る例も紹介されています。
たとえば、企業のマーケティング担当者が決まったデザインルールを確認しながら素材を作り、担当者間で成果物を引き継ぐ、といった運用に応用できる可能性があります。どの機能を誰が利用できるかは、実際の権限設定や提供範囲を確認する必要があります。
動画では、制作した素材をプロジェクトのフォルダに保存し、サイトから使う例が紹介されました。素材の制作とサイトへの反映を同じ作業環境で進められる点は、運用を考えるうえでも注目できます。一方、検索や分類、大量の画像の整理など、現在のWebflowのアセット管理と同じ機能がSourceにそろっているかは未確認です。
CMSや担当者の権限も確認が必要
動画のコンテンツビューでは、Astroのコンテンツコレクションを一覧表示し、フィールドを確認しています。既存CMSとの連携という方向性も説明されていますが、Sourceのコンテンツビューと現在のWebflow CMSを同じ機能として扱うことはできません。Sourceへの新しいCMSの統合は、配信時点では今後の予定として紹介されました。
企業サイトで採用するなら、記事の入力から画像追加、確認、公開までを誰が担当できるかが重要です。公式は人とAIに対する権限・承認・監査の仕組みを説明していますが、実際の更新担当者が必要な操作を行えるかは、プレビューで検証したいポイントです。
Sourceで作ったサイトの公開先は？
動画では、GitHubリポジトリに接続してクラウドセッションを開始し、チームが同じコードベースで作業する方法が紹介されています。ローカルの開発環境を用意せずに作業でき、変更をGitHubのブランチへ反映してからWebflow Cloudへデプロイする流れです。Webflow Cloudは、AstroやNext.jsなどのアプリを公開できるWebflowのホスティングサービスです。詳しくは動画の該当箇所をご覧ください。
自分のパソコン上で作業する方法と、GitHubに接続したクラウド環境で作業する方法を選べる構成です。どちらの場合も、変更の管理や公開手順をチーム内で決めておく必要があります。
WebflowはSourceについて、既存のコードベースやホスティングを組み合わせられるとも説明しています。ただし、Sourceから自身のCloudflareアカウントへ直接デプロイできるか、Source固有の機能が外部環境でどう動くかは、提供状況を確認する必要があります。動画でWebflow Cloudが使われたことだけを根拠に、Webflow Cloudが必須だと断定することはできません。
既存WebflowとCloudflareの組み合わせについては、Cloudflare連携ガイドで解説しています。Sourceからの直接公開に対応していることを示すものではありません。
参考：Webflow Cloudの概要／Sourceの公式発表
現在のWebflowサイトはどうなる？
Webflowは、現在のプラットフォームを継続して改善すると説明しています。Sourceへの移行を強制するという発表ではありません。現在のサイトへの影響は、Source公式発表のFAQで説明されています。
一方、動画では、既存のWebflowサイトをSourceへ移す場合は、AstroやNext.jsのようなコードベースに変換する道筋を用意すると説明しています。移行時にデザイン、CMS、アニメーション、運用手順がどのように引き継がれるかは、具体的な提供内容を確認してから判断しましょう。
Sourceの料金と利用開始時期
2026年10月29日時点で、Sourceの一般公開日は発表されていません。現在は一部の顧客やパートナー向けの限定リサーチプレビューで、Webflowは今後数か月にわたり参加対象を段階的に広げると説明しています。アクセス拡大の予定は、一般公開日の発表とは別です。
料金の詳細も発表されていません。動画では、プラットフォーム利用料とAIクレジットの従量課金を組み合わせる方向性が説明されましたが、確定した料金体系として扱うことはできません。
配信では、Sourceの登場に伴って既存のWebflowプランの料金を変更する予定はないとも説明されています。既存プランの料金が将来にわたって変わらない、という保証ではありません。
料金の説明は動画の35分8秒付近、一般公開時期については36分3秒付近から確認できます。
研究プレビューへの参加は、Source by Webflowの公式ページから申し込めます。応募後に承認された場合、Webflowから次の手順が案内されます。
ChatGPTやClaudeから操作できる？ AIクレジットとの関係
外部AIとの連携については、既存のWebflowでできることが、そのままSourceでもできるとは限りません。以下は2026年10月29日時点で確認した情報です。
確認できていること：既存Webflowには外部AIとの連携がある
既存のWebflowには、外部のAIからサイトやCMSを操作するための公式連携があります。
ChatGPT連携の「追加料金なし」という説明は、AIサービス自体やWebflowの利用料まで無料になるという意味ではありません。また、この説明をClaude連携やSourceの料金にそのまま当てはめることもできません。
まだ確認できていないこと：Sourceの操作範囲と課金条件
Sourceの公式説明では、コードベースや既存の制作・運用ツールと接続する方向性が示されています。一方、確認した公式資料だけでは、次の点は判断できません。
コードを共有できることと、Sourceの機能を外部AIから操作できることは別です。現時点で「ChatGPTやClaudeを使えばSourceの従量課金を避けられる」とは言えません。
使う側としては、AIを選べるようにしてほしい
正直なところ、AIクレジットの従量課金には抵抗があります。普段使っているChatGPTやClaudeがあるのに、Sourceを使うために別のAIクレジットを買い、修正するたびに残量や追加費用を気にする運用にはしたくありません。
AIへの指示はChatGPTやClaudeから出し、Sourceでは見た目や共通パーツを管理する。そうした使い分けができるなら魅力があります。専用AIの利用が必須になるかは未確定ですが、使うAIを選べるかどうかは、導入前に確かめたい点です。
辛口で考えるメリット・デメリット：結局、料金に見合うのか
Webflowを使ってきて助かるのは、ホスティングと管理がまとまっていて、公開や更新の手間を減らせることです。一方で、月額料金は安いとは感じていません。Sourceにも期待はありますが、便利そうというだけで採用を決めるつもりはありません。結局は、料金次第です。
メリット：更新や管理の手間まで減るなら、払う理由がある
Relumeなどを使ったAIによるWeb制作も広がっていますが、実際にAIを使って制作していると、同じパーツを再利用してほしいのに、別々の実装になってしまうことがあります。見た目が完成していても、構造が整理されていなければ、後の修正に手間がかかります。
Sourceで期待しているのは、その管理のしやすさです。共通パーツや画像の置き場所を把握でき、担当者が必要な箇所を自分で更新できる。こうした仕組みが実際の業務で機能するなら、毎月の利用料を払う理由になります。
制作会社への小さな修正依頼が減ったり、開発者がコンテンツ更新に付きっきりにならずに済んだりするなら、その時間も含めて考えたいところです。ただし、これはSourceで実現してほしい効果であり、デモだけで削減できる工数まで確認できたわけではありません。
デメリット：安い配信先がある中で、管理の便利さにいくら払うのか
いまは、Cloudflareなどを使って低コストでサイトを配信する選択肢があります。たとえばCloudflare Pagesでは、Functionsを呼び出さない静的ファイルへのリクエストは、無料・有料プランとも無料と案内されています。動的処理やデータ保存などは別の料金・制限があるため、「サイト運用がすべて無料」という意味ではありません。Cloudflare Pagesの公式料金説明
もちろん、配信費だけでWebflowと比べるのは不十分です。Cloudflareを配信先に選んだ場合も、記事や画像の管理、編集画面、フォーム、権限、保守をどう用意するかは別に考える必要があります。Webflowの料金には、プランに応じてCMSや編集・公開の機能も含まれます。既存Webflowのプランについては、料金改定と新プランの解説もあわせてご覧ください。Webflowの公式料金表
それでも、使う側としては「ホスティングが楽だから」だけでは、以前ほど選ぶ理由になりません。安い配信先と必要な管理ツールを組み合わせる場合に比べて、どの仕事がどれだけ楽になるのか。そこが見えなければ、毎月の固定費を増やす判断はしにくいです。
さらにSourceの利用料、AIクレジット、ホスティング、CMSなどが別々に必要になるなら、合計でいくらかかるのかを確認したいと思っています。現時点でこの料金構成が確定しているわけではありませんが、費用が分かれるほど、見かけの月額だけでは判断できなくなります。
私たちが採用前に確かめたいこと
この表は、私たちが導入前に確かめたい条件をまとめたものです。小規模なサイトで更新も少ないなら、多機能な管理環境に払う費用が見合わないこともあるでしょう。複数人が頻繁に更新するサイトでは、担当者間の確認や修正依頼をどれだけ減らせるかも判断材料になります。
Webflowだから選ぶのではなく、このサイトを運用するうえで、わざわざ選ぶ理由があるか。Sourceについても、そこはシビアに見たいと思っています。
画面で直し、必要なところをAIに頼む。その行き来に期待したい
今後のサイト制作や運用は、Webflowのように画面を見ながら修正し、必要な場面ではAIに作業を依頼する流れになっていくのではないかと思います。小さな文字サイズの調整は自分で行い、複数ページにまたがる変更はAIに頼み、結果を画面で確かめる。そんな行き来が気軽にできるようになってほしいです。
私たちが期待しているのは、AIに任せきりにすることではありません。自分で直した方が早い部分は手を動かし、手間のかかる部分はAIの力を借りる。その選択を、特別な準備なしにできる環境です。Sourceのデモには、その方向に進む可能性を感じます。
もちろん、操作が簡単になっても、構造や動作、公開前の確認は必要です。AstroやNext.jsを使うだけで共通パーツが整うわけでも、AIが常に意図どおりに修正するわけでもありません。Sourceでも、人が確認しやすく、問題があれば直せることが大切だと考えています。
価格にはシビアでいたいし、使うAIも選びたい。それでも、画面での編集とAIへの依頼を自然に組み合わせられる時代には期待しています。Sourceが、その使い方をどれだけ無理のない費用と手間で実現できるかを見ていきたいと思います。
まとめ
Source by Webflowは、コードを基盤に、ビジュアル編集とAIへの指示、業務に合わせた管理画面を組み合わせる取り組みです。今回のデモでは、サイト編集から共通パーツの確認、素材制作まで、その具体例が示されました。
まだ研究プレビューの段階で、料金や外部AIとの連携、既存サイトの移行には確認すべき点が残っています。いまのWebflowサイトの更新を止める必要はありません。現在の運用で手間がかかる作業を整理しながら、Sourceがそれを解決できるか、費用に見合うかを確かめていくのがよいと考えています。
Booostはノーコードツール「Webflow」に特化したWeb制作サービスです。
デザイン・マーケティング・翻訳の3つの最適化で、Webサイトの集客力を最大化します。
