AIでWebサイトを作る方法｜Webflow AI Site Builderで構築する流れ

Webflow AI Site Builderは、promptから複数pageの構造・content・themeを生成し、その後Webflow上で編集して公開する機能です。AI生成で完結させるより「site structureを速く作り、WebflowのDesignerで仕上げる」使い方が向いています。

先に結論：AI Site Builderは「サイト構造の初稿」に使う

Goal / Audience

→ Page構成

→ Section構成

→ Theme / Design System

→ Designerで実Copyへ置換

→ Staging QA

→ Publish

AI生成で完成させるのではなく、Information Architectureを速く作り、Webflow Designerで本番品質へ寄せる使い方が基本です。

Site GoalとPage構成を作る

新規サイトとして開始する

Webflow AI Site Builderは、新しくAI Site Builderで作るsite、または既にAI Site Builderで作ったsiteで利用します。通常の既存Webflow siteへ後からAI Site Builderを適用する機能ではありません。

Promptに目的と対象者を書く

何のsiteか、誰向けか、必要なpage、色・font・雰囲気、goalを入力します。ebook download、product sales、sales inquiryなど、siteの目的まで書くと構造を整理しやすくなります。

Page構成を生成する

AIはHome、About、Services、Blog、Contactなどのpage候補とsection構成を生成します。2026年10月10日に確認した公式Helpでは、有料WorkspaceまたはSite planがない場合はStyle guideを除くstatic pageが合計2ページまでで、いずれかの有料planがある場合は初期生成時に最大5ページ、その後も追加可能です。

Section順を整理する

生成段階でsectionの追加・削除・並び替え・duplicateができます。AIが出した構成をそのまま受け入れず、visitorが知りたい順へ並べ替えます。

Design Systemと実Copyを整える

ThemeとDesign Systemを調整する

AI Site Builderはsiteと同時にdesign systemの土台を生成します。color、typography、animationなどを調整し、pageごとの見た目がバラつかないようにします。

Designerでcopyとlayoutを仕上げる

生成後は通常のWebflow環境へ進み、copy、image、responsive、CMS、SEOなどを調整します。AIで生成された内容はplaceholderとして事実確認します。

AI Assistantは利用条件を確認する

AI Assistantによるsectionデザイン生成は2026年10月10日時点でpublic betaです。一部の無料templateとAI Site Builderで作ったsiteに限定され、WorkspaceでWebflow AIを有効にする必要があります。公式Helpでは、このsection生成はAI creditsを消費しないとされています。

Stagingで確認して公開する

Stagingで確認してから公開する

Webflowのstaging subdomainで表示を確認し、必要ならcustom domainへ公開します。custom domainへ公開するには各siteにpaid Site planが必要です。

AIものさしの判断

Webflow AI Site Builderは「新規site→prompt→page/section構造→theme→Designer修正→responsive/SEO→staging→publish」というWorkflowで使うと整理しやすくなります。AIが生成するのは完成品より、Webflowで育てる構造化された初期siteと考えるのが実務的です。

生成前に決める設計メモ

AI Site Builderへ入力する前に、目的とpageの役割を短く書きます。

• 誰が読むか：対象者の経験・前提・知りたいこと。

• 何をしてほしいか：問い合わせ、購入、資料確認、採用応募など。

• 必要なpage：目的を達成するために必要な最小ページ。

• 各pageで伝えること：訪問者が次に知りたい情報を順番にする。

• 事実のSource：実在する機能、価格、実績、連絡先を確認できる場所。

Prompt例：「小規模なオンライン語学教室の紹介サイト。対象は初めてオンライン受講を検討する社会人。目的は無料体験への申込。Homeでは対象者、授業の進め方、料金確認の入口、講師情報、よくある質問、申込CTAを順に置く。Aboutでは運営者と授業方針、Contactでは申込条件と連絡方法を示す。落ち着いた配色と読みやすい文字。実在の受講実績や顧客の声は生成せず、未提供情報はplaceholderとして残す。」

この例をそのまま自分の事業へ流用するのではなく、購入や問い合わせへ進む前に必要な情報へ置き換えます。AIに会社実績・顧客事例・価格を作らせず、確認できない箇所は空のまま残して人が補います。色や雰囲気だけでなく、各ページで読者が解決する問いを伝えると、構造を見て修正しやすくなります。

Page数の制約を先に見積もる

Webflow Helpは、paid WorkspaceまたはSite planがない場合、Style guide pageを除きstatic pageは合計2ページまでと案内しています。いずれかの有料planがある場合は、初期生成時に最大5ページを作れ、その後に追加できます。したがって無料状態で「Home / About / Service / Blog / Contact」の5ページを最初から生成できるとは考えないでください。また、custom domainへ公開するには各siteにpaid Site planが必要です。Workspace planとSite planは役割が異なるため、ページ生成の条件と本番公開の条件を同じものとして説明しないようにします。

まずHome、Service、Contactのように、利用者の目的達成に必要なpageを選びます。AboutやFAQが不足したら生成後に追加する方法もあります。5ページに絞れないなら、最初にサイトの役割を再検討し、単なるメニューの数ではなく「そのページで答える独立した問いがあるか」で判断します。記事や製品一覧を定期更新する必要がある場合は、静的なpageとCMS Collectionのどちらが適切かを別途整理します。

Designerで生成物を検証する

生成後はMarketer roleの簡易編集画面が割り当てられる場合があります。そこでcopyや画像を直し、必要なら元のroleへ切り替えてDesignerで調整します。最初に見るのは装飾ではなく、pageの目的が一目で分かるか、必要な情報が欠けていないか、訪問者が行動へ進めるかです。AIが作った説明や画像に架空の実績、連絡先、商品仕様が含まれていたら削除し、確認済みの情報に置き換えます。

AI Site Builderは既存の標準Webflow siteへ後付け適用できません。新規siteかAIで作られたsiteが対象です。既存サイトを改善したい場合は、そのサイトで通常のDesigner編集を行い、AI Assistantなどの対象条件を確認してください。生成後の再Theme適用は、すでにComponent化したsectionへ反映されない場合があります。共通デザインを先に決めてからsectionをComponent化すると、後からまとめて見た目を直す作業が減ります。

公開前チェック：サイト全体を3段階で見る

1. 内容

各pageの目的、見出し、説明、価格、連絡先、実績、法定表示を確認します。AI生成の仮テキストが残っていないか検索し、資料や事業者情報と突き合わせます。

2. 表示

Desktopとmobileで見出し、ナビゲーション、画像、余白、長い文章を確認します。画像に意味がある場合は代替テキストを用意し、装飾画像と情報画像を分けます。生成画像が実在の商品や施設と誤解される場合は差し替えるか、イメージ画像と分かるようにします。

3. 遷移と公開条件

すべてのナビリンク、CTA、フォーム、404遷移を試します。WebflowのPreviewで確認した後、staging domainで公開経路やFormをテストします。custom domainが必要ならpaid Site planとDNS接続条件を確認し、Workspace planだけで本番公開できると想定しません。

ページごとに「情報不足でも次の操作が分かるか」を見るのも有効です。例えば問い合わせを増やしたいsiteなら、問い合わせ前に必要な料金・対象・対応範囲を示し、CTA後の受付状態が分かるようにします。公開の可否はデザイン完成度だけでなく、申込が正しい担当へ届くか、確認メールが動くかといった実務条件で決めます。

Webflow AI Assistantの利用条件

AI Assistantによるpage sectionのデザイン生成は、2026年10月10日に確認した公式Helpでpublic betaです。利用対象は一部の無料templateとAI Site Builderで作ったsiteに限られ、WorkspaceでWebflow AIを有効にする必要があります。このデザイン生成はAI creditsを消費しないと案内されています。生成セクションには既存styleのclassが適用される一方、画像・component・dynamic dataを生成する機能ではなく、既存class自体を更新することもできません。初稿として使い、構造、CSS class、画像、データ接続をDesignerで確認してください。