---
title: "Webflow AIでサイトを生成する｜インタラクション実装の強みと、修正が煩雑という弱点"
excerpt: "Webflow AIのSite Builderが既存の制作ワークフローを代替できるかを検証しました。ポン出しの品質は高くGSAP連携やコードエクスポートにも対応、特にインタラクションをノーコードで組める点はエンジニアにも効果大。一方で修正にはWebflow固有の知識が必須なため、修正回数自体を減らす「多段階指示法」に至った経緯をまとめています。"
author: "AI活編集部"
author_username: ai-katsu-editorial
published_at: 2025-09-22T00:00:00+00:00
verified_at: 2025-09-22T00:00:00+00:00
models: ["Gemini"]
tools: ["Webflow", "Google Stitch"]
tasks: ["資料作成・デザイン", "ツール検証"]
canonical_url: https://ai-katsu.jp/articles/webflow-ai-site
---
# Webflow AIでサイトを生成する｜インタラクション実装の強みと、修正が煩雑という弱点

Webflow AIの「Site Builder」は、指示からサイトを丸ごと生成します。既存の制作ワークフロー（Figma → STUDIO / WordPress）を代替できるのか、実際に触って確認しました。

結果として、**ポン出しのクオリティは高く、特にインタラクションの実装で工数削減の効果が大きい**と評価しました。一方で、修正の段階に固有のハードルがあります。それを回避するための「多段階指示法」まで含めて共有します。

## この検証の概要

| 項目 | 内容 |
| --- | --- |
| 検証時期 | 2025年9月（9/22〜9/23） |
| 使用ツール | Webflow AI（Site Builder） |
| やりたかったこと | 既存の制作ワークフロー（Figma → STUDIO / WordPress）を代替できるか検証する |
| 良かった点 | ポン出しのクオリティが高い。**GSAP連携・コードエクスポートに対応** |
| ハードル | インターフェースが英語のみ。ネストが深く編集が煩雑。修正にWebflow固有の知識が必須 |
| 判定 | 完了（運用フローの定義） |

> 本記事は自社での検証記録です。制作時間の短縮率などの定量測定は行っていないため、数値は掲載していません。

## 結論：インタラクションをノーコードで組めるのが大きい

この検証で最も評価が高かったのがここです。

**スクロールアニメーションなどのインタラクションを、ノーコードで設定できます。これはエンジニアにとっても工数削減のメリットが大きい**という評価になりました。

動きの実装は、コードで書くと調整の往復が発生しがちな領域です。「もう少しゆっくり」「もう少し遅らせて」という微調整を、コードとブラウザを行き来しながら詰めていく作業になります。ここが画面上で完結するのは、非エンジニアだけでなく実装者にとっても効きます。

GSAP（アニメーションライブラリ）との連携にも対応しており、**コードエクスポートもできる**ため、Webflowの中に閉じ込められる心配も少なくなっています。

## つまずいたこと：修正段階のハードル

生成そのものより、そのあとが問題でした。

**ポン出し後の修正には、Webflow固有の知識が必須です。**パディング、マージン、ネスト構造といった、Webflowの構造理解が前提になります。

加えて次の2点が重なります。

-   **インターフェースが英語のみ**
-   **ネストが深く、編集が煩雑**

「AIが作ってくれるから誰でも使える」とはなりません。**生成は簡単でも、直すには習熟が要る**という構造です。

## 対策：多段階指示法

この「修正が煩雑」という問題への対応として、**そもそも修正を減らす**アプローチを採りました。

```
1. Stitch 等で「理想の構成」を作る
        ↓
2. Gemini 等でその構成を構造化する
        ↓
3. 構造化した指示を Webflow AI にプロンプトとして与える
```

**いきなりWebflow AIに投げるのではなく、前段で構成を固めてから渡す**という進め方です。指示が具体的なほど生成物が意図に近づき、後工程の修正が減ります。

Webflow上での編集が煩雑である以上、**編集回数そのものを減らす方向に投資するほうが合理的**という判断です。

## 既存ワークフローを代替できるか

当初の問いに対する答えは、**「用途による」**というものでした。

| 観点 | 評価 |
| --- | --- |
| デザイン素案の生成 | ポン出しの品質が高く、実用的 |
| インタラクション実装 | ノーコードで組める。**最も価値が出る領域** |
| 細かい修正作業 | Webflow固有の知識が必要。習熟コストあり |
| チームでの運用 | 英語UIとネストの深さがハードルになる |

## よくある質問

### 非エンジニアでも使えますか？

**生成はできますが、修正には習熟が必要です。**パディング・マージン・ネスト構造といったWebflow固有の知識が前提になります。インターフェースも英語のみです。

### 作ったサイトはWebflowから出せますか？

**コードエクスポートに対応しています。**プラットフォームに閉じ込められる心配は比較的少ない構成です。

### 修正が煩雑なのはどう解決しましたか？

**修正回数そのものを減らす方向で対応しました。**Stitch等で理想の構成を作り、Geminiで構造化し、その指示をWebflow AIに渡す「多段階指示法」です。前段で具体化するほど、後工程の修正が減ります。

## まとめ

-   Webflow AIは**ポン出しのクオリティが高く、GSAP連携・コードエクスポートにも対応**
-   最大の価値は**インタラクションをノーコードで設定できる点**。エンジニアにも工数削減効果が大きい
-   一方、**修正にはWebflow固有の知識が必須**。英語UIとネストの深さもハードル
-   対策は**「多段階指示法」**——Stitchで構成 → Geminiで構造化 → Webflow AIへ投入
-   編集が煩雑な以上、**編集回数を減らす方向に投資する**のが合理的

生成AIツールの評価では、生成の質だけでなく「直しやすさ」を見る必要があります。直しにくいツールほど、最初の指示に投資する価値が高くなります。

株式会社AI棒では、こうしたAI活用の検証を日々行い、企業の制作業務へのAI活用を支援しています。ご相談は[お問い合わせフォーム](/contact)から、継続的な伴走支援については[AI参謀](/ai-sanbo)をご覧ください。