Webflow AIでサイトを生成する｜インタラクション実装の強みと、修正が煩雑という弱点【AI活用検証vol.23】

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

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

この検証の概要

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

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

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

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

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

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

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

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

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

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

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

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

対策：多段階指示法

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

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

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

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

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

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

よくある質問

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

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

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

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

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

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

まとめ

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

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

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