ホームページ作成AIを使いこなす：Webflowで制作から公開まで

ホームページ作成AIとしてWebflow AIを使うと、事業の概要から編集可能な複数ページのサイトを生成し、その後も文章やセクション、コンテンツを整えられます。起業家や小規模な制作会社にとって大きいのは、作業の出発点が変わることです。ページを一つずつ組み上げる前に、サイト全体のたたき台を確認できます。ただし、何を提供するか、その裏付けはあるか、公開してよいかを判断するのは自分たちです。

Webflowは2026年2月5日の刷新で、複数ページの構成、スタイル、アニメーション、基盤となるデザインシステムをサイト作成の流れに組み込みました。Enterpriseを含む各プランで、DashboardのNew siteから利用できます。ただし、ビルダーを使えても、契約プランのページ数上限がなくなるわけではありません。Webflowのリリース案内。

Webflow AIは何に使う？目的に合った機能の選び方

Webflow AIは、用途の異なる道具がそろう作業場と考えるとわかりやすくなります。サイトビルダーは最初の構成を作り、エディター内のツールは個々の部分を整えます。MCPはModel Context Protocolの略で、外部のAIアシスタントがWebflowサイト内のツールを操作するための接続の仕組みです。

Webflowはこれらの標準機能をWebflow AIとしてまとめていますが、作業を始める場所はそれぞれ異なります。AI機能の概要、ビルダーの利用条件、MCPの概要。

Workspace設定でWebflow AIを有効にする

Workspace OwnerまたはAdminが対象のWorkspaceを開き、Workspace settings → GeneralでEnable Webflow AIをオンにします。Enterpriseでは、カスタムロールでもUse Webflow AI権限を制御できます。メンバーに該当する項目が表示されない場合は、Workspaceの設定とその人のロールを両方確認してください。Webflowの管理者向け手順。

サイト生成、セクションのデザイン、操作に応じたヘルプでは、Webflow AIクレジットを消費しません。一方、文章作成、CMSアイテム生成、AIコードコンポーネント、AIによるSEO作業では消費します。クレジットはWorkspace内で共有され、消費量は作業によって異なります。Webflowの料金ページに現在掲載されている別料金のアドオンは、月間2,000クレジットで月額$20、年払いです。クレジットの仕組み、Webflowの料金。

ホームページ作成AIで3ページのサイトを公開するまで

ここでは、コンバージョンの目標を一つに絞った小規模サービス業を例に進めます。架空のブランドデザイン事務所Cedar Studioが、案件の問い合わせを得るために、Home、Services、Contactの各ページを作成する想定です。

これは公式ドキュメントに基づく手順の解説であり、実機検証ではありません。本記事のためにWebflowのテストサイトを公開した事実はなく、以下の手動修正も、実際に見つかった不具合ではなく、実施すべき確認項目です。

1. 3ページを作れるプランを用意する

有料のWorkspaceなら、最初から3ページすべてを生成できます。無料のWorkspaceを使い、有料のSiteプランも契約していない場合は、まずHomeとContactを作成します。サイト生成後に有料のSiteプランを追加し、PagesパネルのAIページ生成機能でServicesを作成してください。初回の生成は有料プランなら最大5ページ、有料プランなしでは2ページまでです。自動生成されるスタイルガイドは、この2ページの上限に含まれません。今回のような事業紹介サイトを独自ドメインで公開するには、Basicで十分です。ビルダーの制限、Siteプランでできること。

2. 事業の内容をプロンプトで伝える

New siteからAI Site Builderを選び、たとえば次のようなプロンプトを入力します。

独立系の宿泊・飲食事業者を対象とする、小規模なブランドデザイン事務所Cedar Studioのウェブサイトを作成してください。目的は案件の問い合わせを得ることです。Home、Services、Contactの3ページで構成してください。Homeでは提供するサービスを説明し、仕事の進め方を紹介します。Servicesではブランド戦略、ビジュアルアイデンティティ、ウェブサイトのデザインを説明します。Contactではプロジェクトの概要を送ってもらうよう促してください。暖かみのあるニュートラルカラー、読みやすい濃色の文字、控えめな動きを使ってください。顧客、推薦コメント、受賞歴、料金、成果を創作しないでください。主な行動喚起には「プロジェクトについて相談する」を使ってください。

このプロンプトでは、対象者、提供するサービス、次に取ってほしい行動を指定しています。自分のサイトで使う際は、架空の設定を、確認・承認済みの事業情報に置き換えてください。

3. デザインを生成する前に構成を固める

構成案を生成し、不要なページを削除して、セクションの順序を整えます。無料のWorkspaceから始める場合は、プランをアップグレードした後にServicesを追加します。完成するサイトでは、各ページの役割を明確にしましょう。

構成が決まったらサイトを生成します。共通テーマを調整し、Webflowでの編集に進みましょう。ビルダーは、指定したフォントや色を独自のテーマシステムに当てはめるため、ブランドに正確に合わせる作業は自分で行う必要があります。サイト作成とテーマ設定の流れ。

4. 自社の事業を正しく伝える内容に仕上げる

生成された下書きは、編集するための素材として扱います。次の項目で不十分な点があれば、手動で修正してください。

最も難しいのは、事業として何を誠実に約束できるかを決めることです。見栄えのよい仮のコンテンツが、その判断まで代わりにしてくれるわけではありません。

5. 検索向けの情報とアクセシビリティを確認する

Auditパネルを開き、サイト全体を確認します。このパネルでは、画像の説明、ページタイトル、検索結果向けの説明文、ページの情報を構造化して伝えるスキーマの不足を検出できます。AIの提案も、実際の事業内容と照らし合わせて確認する必要があります。コンポーネント、ライトボックス、CMS内の画像はAuditパネルの対象外なので、代替テキストを別途手動で確認してください。監査の手順と対象範囲。

Cedar Studioで目指すのは、正確なページ情報と、問題なく問い合わせできる導線です。生成された入力欄を埋めるためだけに、サービス、所在地、評価を追加してはいけません。

6. ステージングで確認してから独自ドメインで公開する

Publishを開き、webflow.ioのステージング用アドレスだけを選んで、その公開先に公開します。訪問者の立場でHome、Services、Contactを開き、問い合わせをもう一度テストしてください。問題があれば修正し、ステージングに再公開します。

本公開では、Site settingsで独自ドメインを接続し、所有権を確認してから、公開メニューでそのドメインを選択します。公開後は、本番の3つのURLとフォームを再度確認してください。この操作には、適切な公開権限が必要です。Webflowの公開手順。

事業上の違いは、作業の順序にあります。手作業で作る場合は、構成、スタイル、ページの内容を組み立ててから全体を確認します。AIで生成すると、その全体確認を早い段階で行えます。作業計画としては、承認済みの文章と素材をそろえたうえで、要件整理、下書き、確認に2時間の作業枠を確保しておくとよいでしょう。これは作業時間の提案であり、完了までの実測値ではありません。外部連携の問題やブランドに関する修正があれば、さらに時間がかかることもあります。

エディター内のAssistantには、作業を絞って依頼する

役に立つプロンプトは、対象を狭く絞り、何を満たせばよいかを明確にしています。

操作を質問する場合は、上部バーからAssistantを開き、Webflowについて具体的に尋ねます。このモードはHelp Centerの情報をもとに回答します。現在の対応言語は英語で、31日間に100件まで質問できます。回答は確認を前提とした案内として扱ってください。操作ヘルプの使い方。

新しいセクションを作る場合は、Addパネルからキャンバスへセクションをドラッグし、そのセクションのAssistant操作画面を開きます。適したレイアウトを探し、生成されたデザインを選んで、ページに配置した状態で確認します。デザインの統一に使う名前付きスタイルや共通の値、つまり既存のクラスや変数を再利用でき、新しいクラスの作成も可能です。ただし、既存のクラスは更新できません。Webflowの現行のセクションデザインに関するドキュメントでは、この機能は引き続きパブリックベータとされ、対象は一部の無料テンプレートとAIビルダーで作成したサイトに限られます。生成結果に画像、コンポーネント、動的コンテンツは含まれません。セクションデザインの手順。

文章を編集する場合は、デザイナーが対応するテキスト要素を右クリックし、Modify copyを選びます。たとえば、「納品物の説明は残し、新しい主張を加えずに、この段落を短くしてください」と依頼します。事実に関わる変更は、反映する前に一つずつ確認してください。有料のSiteプランまたはWorkspaceプランが必要です。文章編集機能の使い方。

サイトの規模が大きくなると、さらに2つの機能が関わってきます。CMSを利用できるSiteプランでは、構造化されたコンテンツ一覧の項目にあたるCMS CollectionアイテムのサンプルをAIで生成できます。また、Assistantを通じて、計算ツールなどの再利用可能なコードコンポーネントも作成できます。コードコンポーネントにはDesignerまたはSite Managerのロールが必要で、公開にはSiteプランとWorkspaceプランに追加の条件があります。データベース、認証、シークレットキーの管理機能は提供されません。案件で必要にならない限り、今回の基本的な事業紹介サイトの制作手順には含めなくてよいでしょう。CMSの利用条件、コードコンポーネントの利用条件。

サイトを横断する作業はClaudeと接続する

ページやコンテンツのレコードをまたぐ作業には、MCPが役立ちます。Webflowのドキュメントでは、ページとレイアウトの編集、スタイル、コンポーネント、CMS管理、公開への対応が案内されています。Starterを含むすべてのSiteプランで利用できますが、Reviewerロールのユーザーは接続できません。MCPでできること。

Claudeを接続するには、ChatまたはCodeのセッションを開き、プラスメニューからコネクターを追加して、Webflowを探して接続します。Webflowの認可手順に従って対象サイトを選択し、Claudeに戻ります。Claudeは、デフォルトでは操作の前に承認を求めます。WebflowによるClaudeの接続ガイド。

今回の例なら、最初の依頼は次のようにするとよいでしょう。

このサイトの指示を読んでから、Home、Services、Contactを確認してください。サービス名と行動喚起の表現が統一されていない箇所を一覧にしてください。以下の承認済みの表現を使い、具体的な置き換え案を提示してください。編集する前に変更案を見せ、公開は私に任せてください。

これは試すための依頼例であり、監査の結果を保証するものではありません。提案された修正は、自分でもページと照らし合わせて確認してください。

現在は、MCPのほとんどの操作をWebflowのセッションを開かずに実行できます。ただし、キャンバスで選択した要素に関わる操作には、引き続きMCP Bridge Appが必要です。通常のMCP利用で消費するのは、Webflow AIクレジットではなく、外部AIツール側のプランやクレジットです。現在のMCPの動作と制限。

実務での効果を期待しやすい6つの使い方

効果を期待しやすいのは、要件が明確で、結果を判断できる担当者がいる使い方です。以下はワークフローの提案であり、顧客の成果を実測したものではありません。

これらの土台となるのは、Webflowがドキュメントで説明しているセクション編集ツール、Auditパネル、MCPの操作機能です。想定した効果を得られるかは、確認の進め方によって変わります。

Webflow AIを軸に提供できる2つのサービス

サイトを作る需要も、その作業を支援してもらう需要もあります。2026年10月22日に取得したDataForSEOの米国・英語市場の推定値では、「ai website builder」の月間検索数は33,100件です。これは広いカテゴリへの関心を示す数字であり、汎用的な生成ツールをもう一つ求めていることを意味しません。

最も有望：公開から引き継ぎまでを担う制作サービス

承認済みのコンテンツと、動作確認済みの問い合わせ導線を備えた、編集可能なWebflowサイトを求める起業家に向けて、繰り返し提供できるサービスを作ります。DataForSEOの推定では、米国で「webflow agency」の月間検索数は480件です。有料の支援を探す関心を示していますが、そのうち何人が、この特定のパッケージを求めているかまではわかりません。

最小限の商品としては、特定の業種に対象を絞り、項目を整理したヒアリングシートを使って、完成した3ページと編集方法を説明する録画を納品する形が考えられます。制作会社はAIで初稿を作りながら、内容の正確さ、ブランドに関する判断、公開時のテストに責任を持ちます。

**注意点：**似たような下書きを生成するだけなら、競合にも簡単にできます。差別化につながるのは、その業種を理解し、素材の承認を得て、確実な引き継ぎに責任を持つ仕事です。また、制作会社向けの再利用可能な仕組みを設計する前に、AIビルダーで作成したサイトからLibrariesを共有する際のWebflowの制限も確認してください。ビルダーの制限事項。

次に有望：監査で見つけた問題の修正まで担う保守サービス

サイトの不足点を洗い出すだけでなく、修正して確認するところまで支援するサービスです。DataForSEOの推定では、米国で「website seo audit」の月間検索数は320件です。これはより広い市場の動向を示すもので、Webflowに限定した購入見込み客の数ではありません。

最初のサービスとしては、Webflowの監査、修正案の一覧、確認を経た公開作業を組み合わせられます。範囲を限定したコンテンツ更新にMCPを使い、事業に関する記述と最終的なページは人が検証します。提供する価値は、合意した作業を完了し、その結果に責任を持つことです。

**注意点：**説明文を埋めても検索順位は保証されず、自動チェックにも見落とす範囲があります。WebflowのAuditパネルでも、配置場所によっては画像が対象外です。役に立つサービスにするには、その抜けを確認し、検索での成果を約束しないことが必要です。Auditの対象範囲。

Webflow AIだけでは対応できないこと

新しいWebflowサイトの土台を作り、仕上げにも時間をかけられるなら、ビルダーが適しています。既存のカスタムサイトなら、対応するエディター内のツールやMCPから始めてください。どちらを使っても、エージェントがすべてを自由に操作できるわけではありません。MCPは、要素の設定やCMSバインディングの設定の一部にまだ対応しておらず、セクション生成では既存のクラスを書き換えられません。MCPの制限、Assistantの制限。

また、新規プロジェクトの基盤にApp Genを採用するのは避けてください。Webflowは開発を停止しており、廃止を予定していると案内しています。現在のAI機能の概要。

まだプラットフォームを選んでいる段階なら、サービスの比較にはWebflowとFramerの比較、FramerでのAI活用の流れにはFramer AI、候補を広く検討するにはAIサイトビルダーの比較を参考にしてください。

WebflowはAIツールですか？

Webflowは、AIツールを組み込んだウェブサイト制作プラットフォームです。サイトビルダーがサイトの土台を作り、ほかの機能が文章、セクション、コンテンツ、継続的な作業を支援します。MCPは、アクセスを許可したサイトに外部アシスタントを接続します。Webflow AIの概要。

AIでホームページを作れますか？

はい。Webflowのビルダーは、説明文から編集可能なウェブサイトを生成します。ただし、承認済みの事業情報、正しく機能するリンクとフォーム、公開時の確認は必要です。公式ドキュメントに基づく作業手順として、上記の3ページの例を参考にしてください。Webflowのビルダー。

Webflowは本当に無料で使えますか？

無料のStarterプランではWebflow AIとMCPを利用できますが、静的ページは2ページまでです。今回の3ページを独自ドメインで公開する例では、有料のSiteプランが必要になります。追加のAIクレジットは、任意で別途購入するものです。Webflowの料金。

**週明けにまず取り組むこと：**承認済みのサービス内容、実際の画像、問い合わせの送信先をそろえましょう。Home、Services、Contactの下書きを作り、本公開の前に、ステージングで問い合わせの一連の流れを最後まで通して確認してください。

このワークフローを自社向けに構築したい場合は、サイトと自動化の要件整理をお手伝いします。