「コードを書かずに作りたい。でも、テンプレートを選ぶだけでは物足りない。」
そんなところまで来ると、Webflowが気になり始めます。
そして今のWebflowには、AI Site Builderがあります。
作りたいサイトを文章で伝えて、最初の構成を作り、そこから自分で詰めていく。
ノーコードから始めながら、少しずつWeb制作の構造そのものに近づいていけるのがWebflowの面白いところです。
Webflow AIで何ができる？
WebflowのAI Site Builderでは、サイトの目的、ページ構成、対象ユーザー、デザインの方向性などを伝えると、複数ページを含むWebサイトの初期案を生成できます。
- サイト構成を作る
- ページを生成する
- テーマやスタイルを整える
- セクションをAIで追加する
- 文章を生成・修正する
- CMSコンテンツを生成する
- SEO関連の設定を補助する
ただしAI Site Builderは、基本的に新しく作るサイトか、AI Site Builderで作成済みのサイトに対して使う機能です。既存の通常サイトへ後からそのまま適用する機能ではありません。
先に結論：Webflowは「デザインだけでなく構造も触りたい人」に向く
- ノーコードで始めたい
- レイアウトを細かく調整したい
- CMSも使いたい
- レスポンシブの仕組みを理解したい
- 将来的にコードにも近づきたい
- 企業サイトやサービスサイトをしっかり作りたい
「AIに全部作ってほしい」というより、AIで最初の土台を作って、そのあと自分でWebサイトを設計したい人と相性があります。
STEP 1：AI Site Builderで新しいサイトを作る
Webflow Dashboardから新しいサイトを作成し、AI Site Builderを選びます。
最初のプロンプトでは、最低でも次の内容を入れます。
- 何のサイトか
- 誰向けか
- 必要なページ
- デザインの雰囲気
- 色やフォントの方向性
プロンプト例
フリーランスのWeb制作者向けポートフォリオサイト。
Home、About、Services、Works、Contactの5ページ。
白背景、黒いタイポグラフィ、余白を広く、シンプルで編集的なデザイン。
AI Site Builderは、ここからページ構成とサイトの初期デザインを生成します。
STEP 2：生成されたサイト構造を先に直す
生成後、いきなり文字サイズや色を細かく直す前に、サイトの構造を確認します。
- 必要のないページはないか
- 足りないページはないか
- セクションの順番は自然か
- CTAまでの流れがつながっているか
Webflowの公式手順でも、AIが作ったサイト構造にページを追加・削除し、各ページのレイアウトを調整してからサイト生成へ進む流れになっています。
画面には、もう5ページある。
昨日なら「5ページ作らないと」と考えていたのに、今日は「この1ページ、本当に必要かな」と考えている。
AIを使うと、作業のスタート地点そのものが少し先へ移ります。
STEP 3：WebflowのCanvasで自分のデザインにする
AIで生成したあと、本格的な編集はWebflowのCanvasで行います。
- 文字サイズ
- 余白
- GridやFlexのレイアウト
- 背景
- 画像
- ボタン
- レスポンシブ
- アニメーションやインタラクション
ここがWebflowの学習ポイントでもあります。
画面上ではノーコードですが、考え方はCSSのレイアウトにかなり近いため、FlexboxやGrid、クラスなどWeb制作の基本構造を理解しやすくなります。
STEP 4：AI Assistantでセクションを追加する
サイト生成後も、Webflow AI Assistantを使って新しいセクションを作ったり、デザインを調整したりできます。
例
「このサイトのデザインシステムに合わせて、お客様の声セクションを追加して」
「このCTAをもっとシンプルにして」
「サービス紹介を3カラムで作って」
AIで追加したあとも、そのまま採用する必要はありません。不要な要素を削り、自分のページに合う形へ直します。
STEP 5：文章もAIで作れる。ただし短くする
Webflow AIでは、サイト内のコピー生成やリライトもできます。
便利ですが、AIが作る文章は説明が多くなりがちです。
- 見出しは短くする
- 同じ意味の文章を削る
- CTAの前は読みやすくする
- 自社・自分にしか言えない内容を追加する
生成した文章を完成品ではなく、編集前の素材として扱う方が使いやすいです。
STEP 6：CMSを使うとWebflowらしさが出てくる
制作実績、ブログ記事、スタッフ紹介、事例など、同じ構造のコンテンツが増える場合はCMSを使います。
- Works
- Blog
- Case Study
- Team
- News
Webflow AIはCMS Collectionのアイテム生成にも対応しています。
ここまで来ると、単なる1ページ制作ではなく、「更新し続けるサイト」の設計へ進めます。
STEP 7：スマホ表示を確認する
WebflowではPCだけでなく、各ブレークポイントで表示を確認しながら調整します。
- 文字が大きすぎないか
- 余白が広すぎないか
- 横並びを縦にする必要がないか
- 画像のトリミングは自然か
- ボタンは押しやすいか
AI生成サイトでも、最後のレスポンシブ確認は自分で行います。
STEP 8：SEO設定とサイトマップを確認する
WebflowではSEO用のタイトルやディスクリプションを設定できます。
Webflow AIは、メタタイトルやメタディスクリプション、schema markupの生成補助にも対応しています。
- ページタイトル
- メタディスクリプション
- OGP
- alt
- 見出し構造
- canonical
- 301リダイレクト
- XMLサイトマップ
Webflowでホスティングする場合、自動生成のXMLサイトマップを利用でき、公開するたびに更新されます。
STEP 9：Previewして公開する
公開前にPreviewで全ページを確認します。
- リンク切れ
- スマホ表示
- CTA
- 問い合わせフォーム
- メタ情報
- 画像
問題がなければ公開します。
Webflow AIの注意点
既存サイトへAI Site Builderを後付けできるわけではない
AI Site Builderは新規サイトか、AI Site Builderで作った既存サイト向けです。通常の既存Webflowサイトを丸ごとAI Site Builder化する使い方ではありません。
プランによってページ数・AI機能の条件が違う
無料状態ではAI Site Builderで作れる静的ページ数に制限があります。また、コピー生成など一部AI機能は有料WorkspaceまたはSite planが必要です。
Webflowは2026年にプラン構成やAIクレジット体系も更新しているため、契約前には最新の料金・利用条件を公式ページで確認してください。
Framer・WordPressとの違い
| ツール | 向いている使い方 |
| Webflow | ノーコード＋細かな構造・CMS・本格的なWeb制作 |
| Framer | デザイン速度・LP・ポートフォリオ |
| WordPress | 記事運用・長期メディア・幅広い拡張 |
Webflowは、Framerより構造を細かく触りたい、でも最初からコードだけで作るのは避けたい、という位置で考えると分かりやすいです。
まとめ
- AI Site Builderで新規サイトを作る
- サイト構造を整理する
- Canvasでデザインを調整する
- AI Assistantでセクションを追加する
- 文章を編集する
- 必要ならCMSを作る
- レスポンシブを確認する
- SEO設定をする
- Previewして公開する
Webflow AIは、ノーコードを「何も知らなくても作れるもの」にするだけではありません。
AIで作り始めながら、レイアウト、クラス、CMS、レスポンシブといったWeb制作の構造へ少しずつ入っていけます。
だからこそ、AI時代にWeb制作そのものを学びたい人にとって、面白い選択肢のひとつです。