Webflow AIを使えば制作時間が1/3になる。この記事を最初に公開したとき、そう書いた。間違いではないが、正確でもなかった。

実際には「1/3になる工程」と「ほとんど変わらない工程」と「逆に手間が増える工程」がある。使い始めて数ヶ月経った今、もう少し正確なレビューができる。

工程別の時間短縮効果（実測値）

5ページ構成のコーポレートサイトを、AI有り/無しで制作した場合の比較。従来の制作時間を100%とした場合の割合で示す。

全体では約30%の短縮。「1/3になる」は少し言い過ぎだった。ただし、ワイヤーフレームとデザインカンプの初期生成に限れば、確かに1/3以下になる。

AIが速い工程: レイアウト生成

Webflow AIが最も力を発揮するのは、ページの初期レイアウト生成だ。

「ヒーローセクション + 3カラムの特徴紹介 + お客様の声 + CTA」のような構成を自然言語で指示すると、数秒でセクション一式が生成される。

プロンプト例:
「コンサルティング会社のトップページ。
ヒーローは大きな背景画像にキャッチコピー。
サービス紹介は3つのカードで。
実績数字を4つ横並びで。
お問い合わせフォームへのCTAボタン。」

従来なら空のdivを積み上げてフレックスボックスを設定し、パディングを調整して...という作業が30分はかかっていた。AIなど30秒。この差は大きい。

テキストの生成も使える。見出しや本文のダミーテキストを、業種に合わせた内容で生成してくれる。「Lorem ipsum」の代わりに実際の文章に近いテキストが入るので、デザインの完成イメージを早い段階で掌める。

AIが遅くなる工程: レスポンシブ調整

ここからが正直な話。

Webflow AIが生成するレイアウトは、基本的にデスクトップ幅で最適化されている。タブレットやモバイルでの表示は、自分で調整する必要がある。

問題は、AIが生成するHTML/CSSの構造だ。人間が書くなら「モバイルで折り返しやすい構造」を最初から意識するが、AIは見た目の再現を優先する。結果として、モバイル対応のときにクラス構造を組み替える作業が発生する。

具体的に困ったケース:

• 3カラムのカードがモバイルで崩れる: AIはフレックスボックスで横並びにするが、flex-wrapが未設定のことがある。手動で追加が必要
• フォントサイズが固定値: デスクトップ用の48pxがそのままモバイルに適用される。ブレイクポイントごとの調整は手作業
• 余白の不整合: セクション間のパディングがデスクトップ基準で広すぎる。モバイルで間延びする

自分でゼロから作る場合は、最初からモバイルファーストで組むので、レスポンシブの追加作業はほとんど発生しない。AIを使うと、生成された構造の「後片付け」に時間がかかる。

AIが対応できない工程: CMS連携

Webflow AIは、CMSコレクションの設計やダイナミックコンテンツのバインディングには対応していない。

ブログページのテンプレートを作りたい場合、レイアウト自体はAIで生成できる。しかし「このテキストブロックをCMSのタイトルフィールドにバインドする」「この画像をサムネイルフィールドから取得する」といった設定は手作業になる。

同様に、コレクションリストのフィルタリングやソート条件の設定もAIの範囲外。CMSが絡むプロジェクトでは、AIの恩恵は「見た目の生成」に限定される。

失敗談: AIに任せすぎて逆に時間がかかったケース

テイストの修正ループ

「和風モダンなデザインで」と指示したら、金色と赤のド派手な配色が返ってきた。「もう少し落ち着いた感じで」と修正指示を出すと、今度はグレー一色の地味なデザインに。3回修正を繰り返した結果、「これなら最初から自分で色を決めたほうが速かった」という結論に至った。

教訓: 配色やトーンの微調整はAIに任せず、Design Tokens（プライマリカラー、フォント、余白のルール）を先に決めてから生成に入るべき。

生成コードのクラス名が読めない

AIが生成するクラス名は div-block-47 のような自動命名になることがある。後から修正しようとすると、どのdivが何の役割なのか判別できない。5ページ分のクラス名を整理するのに1時間かかった。

教訓: 生成直後にクラス名をリネームする習慣をつける。後回しにすると指数関数的に面倒になる。

コンポーネント化を忘れて全ページ修正

共通ヘッダーをAIで生成し、各ページにコピーした。後からロゴを変更したくなったが、コンポーネント（シンボル）化していなかったので5ページ全部を手動で修正する羽目に。

教訓: AIが生成したセクションのうち、複数ページで使うものは即座にコンポーネント化する。

AIを活かせる場面・活かせない場面

AIに任せると速い

• ランディングページの初期レイアウト
• セクションのバリエーション生成（「このセクションを別のスタイルで3パターン出して」）
• ダミーテキストの生成
• シンプルなアニメーション（フェードイン、スライドイン）

AIに任せると遅くなる

• レスポンシブ対応（特にタブレット幅の調整）
• 既存デザインシステムとの統合
• CMSコレクションとの連携
• 細かい配色やタイポグラフィの調整

AIが使えない

• カスタムコード（Webflow Embed内のJS/CSS）
• サードパーティ連携（Zapier、Make等のWebhook設定）
• SEO設定（メタタグ、OGP、構造化データ）
• フォームのバックエンド連携

結局どう使うのがベストか

Webflow AIは「初速を上げるツール」として使うのが正解だ。

制作フローで言うと:

1. AI担当: ワイヤーフレーム → デザインカンプの初期生成
2. 人間担当: レスポンシブ調整 → CMS構築 → アニメーション → 公開前チェック

最初の30%をAIに任せて、残りの70%を人間が仕上げる。この配分が、現時点では一番効率がいい。

「AIで全部やる」と期待すると、修正ループで逆に時間がかかる。「ゼロからの立ち上げだけ手伝ってもらう」くらいのスタンスが、結果的に制作時間の短縮幅が最大になる。

Webflow AI以外の選択肢

ノーコードツールのAI機能は他にも出てきている。

Webflow AIの強みは、生成後のカスタマイズ自由度の高さにある。他のツールは「生成されたものをそのまま使う」前提だが、Webflowは生成されたものを細部まで自分で編集できる。その分、Webflow自体の操作スキルが必要になる。

まとめ

Webflow AIで制作時間が1/3になるかと聞かれたら、「工程による」と答える。初期レイアウトの生成は確かに3倍以上速い。だが、レスポンシブ調整やCMS連携を含めた全体では30%短縮が実態に近い。

AIの進化は速いので、この数字は半年後には変わっているかもしれない。今の段階では「初速ブースター」として割り切って使うのが、一番ストレスが少ない。