WebflowのAIサイトビルダーでサイトを構築する

今回はWebflowのAI Site BuilderとAI Assistantで、サイト全体を素早く構築・公開する方法をご紹介します。

‍

重要

WebflowのAI Site Builderは現在ベータ版です。

早期アクセスや機能詳細はAI Site Builderページでご確認ください。

今後Enterpriseユーザーにも順次提供予定です。

ベータ期間中の利用はBeta Program Termsに準じます。

‍

WebflowのAI Site BuilderやAI Assistantの機能を活用すれば、Webデザインの経験がほとんどなくても、プロフェッショナルでレスポンシブなWebサイトを短時間で作成できます。

‍

ホームページやランディングページを生成する

利用前に

AI Site Builderは、新規サイトの作成時、またはAI Site Builderで生成した既存サイトの編集時のみ使用できます。

AI Site Builderで作られていない既存サイトには適用できません。

‍

簡単な情報を入力するだけで、WebflowのAI Site Builderがレスポンシブ対応のホームページやランディングページを自動生成します。

提供した情報に基づいて、あなたのニーズに合わせたテーマが作成され、細かく調整できます。

ページ生成の手順

1. ダッシュボードから「New site」をクリック
2. 「AI Site Builder」を選択
3. ビジネスまたは個人用途を選ぶ
4. サイト名を入力して「Next」
5. ビジネスやプロジェクトの概要を入力して「Next」
6. スタイル・背景・ボイス＆トーン・メインカラーを選択
7. 「Generate」をクリック

AI Site Builderが、サイトのプレビューとテーマ選択・カスタマイズオプションを表示します。

入力内容（サイト名や説明など）を変更したい場合は「Edit prompt」で編集し、「Regenerate」で新しい情報をもとにページを再生成できます。

‍

注記
サイトの詳細を編集して「Regenerate」すると、現在のページやカスタマイズ内容が上書きされ元に戻せません。

左側のパネルでテーマを切り替え可能です。切り替えると、

• カラー
• タイポグラフィ
• セクション
• 画像
• ボタン
• フォーム
• カード
• 余白（spacing）
• 角丸（border-radius）
  が変更されます。

一部だけ変更したい場合は、各要素を個別に調整できます。

また、キャンバスプレビュー上で各セクションを追加・カスタマイズ・並べ替え・削除も可能です。
セクション上でホバーすると、

• 「Add section」アイコン：新しいセクションの追加
• 「Replace section」アイコン：レイアウトの選択・差し替え
• 「Move section up/down」アイコン：順序の変更
• 「Swap styles」アイコン：カラー変更
• 「Delete section」アイコン：削除
  が利用できます。

デザインが完成したら、「Start building」をクリックしてサイト情報・テーマを確定し、エディター画面を開きます。

重要
AI Site Builderで作成したサイトはWorkspaces間で移動できず、Librariesの共有にも使えません（AI生成サイトの構造上の制限です）。

‍

サイトのテーマをカスタマイズ

サイトをメインのデザイン画面で開いた後も、カラー・フォント・ボタンなどの調整が可能。

変更は全ページに反映されます。

左ツールバーの「Theme」アイコンからテーマ設定にアクセスできます。

‍

注記
テーマの画像パックを変更しても既存の画像は変わりません。

新しい画像パックは新規生成したページ・セクションにのみ適用されます。

‍

スタイルガイドページ

AI Site Builderは、ホームページやランディングページだけでなく、「Style guide」ページも自動生成します。

ここではサイトのスタイル・要素・レイアウト・エフェクト（カラー、タイポグラフィ、カード、スライダー、余白、グラデーション等）をまとめて確認・カスタマイズできます。

Style guideページの開き方
左ツールバーの「Pages」パネルを開き、Static pages内の「Style guide」をクリック。

補足
AI Site Builderで作られたサイトは、Flowkit CSS Framework（再利用可能なユーティリティクラス、コンポーネントパターン、デザイントークンを集約した構造化フレームワーク）を活用しています。

これにより、レイアウトやスタイリング、インタラクションを効率よくサイト全体で管理できます。

追加ページの生成

AI Site Builderで、About、Contact、Teamなど追加ページも素早く生成できます。

手順：

1. 左ツールバーの「Pages」パネルを開く
2. 「Create New Page」アイコンをクリック
3. 「Generate new page with AI」を選択
4. 生成したいページタイプをクリック

注記
無料Starterプランでは静的ページは最大2ページまで。ページを増やしたい場合はSiteプランのアップグレードが必要です。自動生成される「Style guide」ページはこの制限にカウントされません。

AI Assistantでさらなるカスタマイズ

AI Assistantを使えば、ページデザインの修正、コピーやCMS Collectionアイテムの生成、Webflowの利用方法に関するコンテキストヘルプまで幅広くサポートされます。

• ページデザインの修正
  サイトのスタイルやクラスを使って新しいセクションレイアウトを作成できます。
• コピーの生成
  サイトに最適なコピーもWebflow上で直接生成・修正可能です（コピー生成には有料WorkspaceまたはSiteプランが必要）。
• CMS Collectionアイテムの生成
  Webflow CMSを使う場合も、AI Assistantで新しいCollectionアイテムをスピーディーに生成できます。
• コンテキストヘルプ
  Webflowの使い方に関する質問も、AI Assistantが会話形式でサポートします。

‍