Webflowが生成AIを統合へ：キャンバス上で直接コンポーネント生成やテンプレート編集が可能に

ChatGPT に頼めば、ヘッダーを中央揃えにする HTML や CSS は一瞬で出力されます。しかし、そのコードを手に入れた後、どこに持ち込んで本番サイトとして仕上げるのかという課題は残ったままでした。

ノーコード Web 制作ツールの Webflow は、このギャップを埋めるべく、Webflow デザイナー内に直接 AI 機能を統合するロードマップを明らかにしました。

キャンバスから離れずに AI を呼び出す

Webflow の操作習得にはこれまで、Webflow University や解説動画を行き来する必要があり、作業の流れが中断されがちでした。

同社が現在開発している機能では、操作画面内に直接コンテキストを理解する AI アシスタントが組み込まれ、疑問が生じたその場で的確な助言を受けられるようになります。

実際の制作プロセスでも多岐にわたる機能が計画されています。テキストプロンプトによる静的テキストや CMS コンテンツの生成および要約、ページの文脈に応じた SEO 設定の自動生成、アクセシビリティ向上のための画像 alt 属性の自動付与、アセットパネル内での画像生成などが含まれます。

さらに踏み込んだ機能として、プロンプトからのコンポーネントやセクションの新規生成、複数要素に対するスタイルの一括変更、周囲のデザインに合わせたバリエーションの自動拡張も開発中です。白紙の状態から始める負担を減らすため、事業内容を入力するだけで既存テンプレートの文章や画像を自動で最適化する機能も予定されています。

なぜ重要か

私たちは、Webflow が打ち出したアプローチは非常に現実的かつ強力だと考えています。

現在、プロンプトひとつで Web サイト全体を自動生成するツールが数多く登場していますが、実務で使おうとすると細部の調整がきかず、実用に耐えないケースが少なくありません。AI が生成した出力物の価値は、それを受け止めて自由にカスタマイズできる制作環境があって初めて成立します。

Webflow は Web 標準に忠実なビジュアル制作環境を持っています。そのため、AI に骨組みやテキストを作らせた上で、人間がプロ仕様のキャンバス上で微調整を加えるという分業が綺麗に成り立ちます。

デザイナーやマーケターにとっては、画像の代替テキスト作成や CMS のダミーデータ投入、多言語対応といった単調な反復作業から解放されるメリットが大きいです。

懸念点があるとすれば、コードの整合性です。Webflow の強みはクリーンで再利用性の高い CSS クラス構造にあります。AI による要素生成が乱雑なスタイル定義を生み出すようであれば、その修正に追われて本末転倒になりかねません。生成された構造をどこまで整然と保てるかが今後の焦点になりそうです。