Webflow AI Assistantでコピーやコレクションアイテムを自動生成

今回はWebflow AI Assistantを使って、静的コンテンツも動的コンテンツも、短時間で生成＆編集できる方法を解説します。

コピーの作成やコレクションアイテムの自動生成など、AIの力を活用すれば、これまで手間がかかっていた作業もグッと効率化。

Webflow上ではもちろん、Webサイト制作の現場で、もっと手軽に・もっと素早くコンテンツを用意したい――そんな声に応えるのが、Webflow AI Assistantです。

‍

重要

Webflow AI Assistantによるコピーやコレクションアイテムの生成は現在ベータ版です。ベータ期間中の利用はBeta Program Termsが適応されます。

‍

AI Assistantでできること

AI Assistantを使うことで、キャンバス上の静的・動的なテキスト要素に対して、コンテキストに合わせたコピーを自動生成したり、より適切な文章にブラッシュアップしたりできます。

また、コレクションアイテムも生成可能です。
これにより、lorem ipsumのようなダミーテキストに頼る必要がなくなり、作業時間の短縮につながります。

AI Assistantは「デザインモード」と「編集モード」で利用できます。

‍

コピーの追加・編集

利用前の準備

AI Assistantでテキストコンテンツを生成・編集するには、有料のWorkspaceまたはSiteプランが必要です。

注記
・Starter, Core, Growth, Enterprise Lite Workspaceプランの場合、AI Assistantによるコピー生成はデフォルトで有効になっています。無効にしたい場合はWebflowサポートにお問い合わせください。
・Enterpriseプランの場合、デフォルトで無効です。有効化したい場合はWebflowサポートまたはCSMにご連絡ください。

‍

AI Assistantを使うことで、キャンバス上の静的・動的コピーを生成・修正できます。

対応しているテキスト要素は以下の通りです

• Heading-見出し
• Paragraph-段落
• Text Block-テキストブロック
• Rich Text-リッチテキスト
• Text Link-テキストリンク
• Block Quote-ブロック引用

‍

テキスト要素全体を生成・編集する場合

デザインモードの場合

1. キャンバス上で対応している要素を右クリック
2. コンテキストメニューから「Modify copy」を選択
3. （オプション）生成したいコピーの内容を説明するプロンプトを入力
4. 「Submit prompt」アイコンをクリック
5. 「Done」をクリックして生成されたコピーを反映

編集モードの場合

1. キャンバス上で対応している要素を左クリック
2. コンテキストメニューから「AI Assistant」アイコンをクリック
3. （オプション）生成したいコピーの内容を説明するプロンプトを入力
4. 「Submit prompt」アイコンをクリック
5. 「Done」をクリックして生成されたコピーを反映

‍

コピーの特定部分をブラッシュアップする場合

既にコンテンツがあるテキスト要素については、単語・文・段落など特定部分をハイライトしてAI Assistantで修正できます。

例えば、特定の単語を置き換えたり、文を短くしたり、段落のトーンを変更したりできます。

手順（デザインモード／編集モード共通）

1. キャンバス上で対応している要素をダブルクリック
2. 修正したいテキストをドラッグでハイライト
3. 「AI Assistant」アイコンをクリック
4. （オプション）変更内容を説明するプロンプトを入力
5. 「Submit prompt」アイコンをクリック
6. 「Done」をクリックして反映

‍

クイック修正でテキスト編集をより速く

テキスト要素全体でも一部でも、クイック修正（Quick modifications）を使えばより素早く編集できます。
クイック修正の例

• 書き直す（Rewrite）
• 短くする（Make shorter）
• 長くする（Make longer）
• よりプロフェッショナルにする（Make more professional）
• カジュアルにする（Make more casual）
• フレンドリーにする（Make more friendly）
• スペルや文法の修正（Fix spelling and grammar）

編集時や特定のコピーを修正する際、プロンプト入力の代わりにクイック修正（Quick modifications）を選択することも可能です。

‍

Rich text要素内でのスラッシュコマンド

Rich text element（RTE）内で編集している場合、「/」キー（スラッシュ）を押すことで、AI Assistantを使って素早く追加コピーを生成できます。

1. キーボードで「/」を入力
2. コンテキストメニューから「Generate more copy」を選択
3. 「Done」をクリックして反映

補足
生成されたバージョンに満足できない場合は、「Edit prompt」アイコンからプロンプトを修正して、最大3つまで新しいバージョンを生成できます。

また、「Share feedback」アイコンからフィードバックの送信も可能です。

‍

コレクションアイテムのサンプルを一括生成

コレクションが空の場合、AI Assistantでサンプルアイテムをまとめて生成できます。

5件、10件、20件のいずれかを選んで、必要に応じてプロンプトを入力し「Generate」をクリック。

入力内容に基づいてコンテキストに合ったアイテムが生成されるので、すぐにデザイン作業に移れます。

‍

キャンバスから直接サンプルのコレクションアイテムを作成

Designerキャンバス上から直接サンプルコレクションアイテムを生成することもできます。

1. サンプルアイテムを追加したいCollectionページを開く
2. 「Collection items」ドロップダウンをクリック
3. 「Generate new [Collection item]」（例：Generate new Blog Post）を選択
4. （オプション）生成したいサンプルコンテンツを説明するプロンプトを入力
5. 「generate」アイコンをクリック

AI Assistantがドラフト状態のコレクションアイテムを生成します。その後、編集・修正してから公開できます。

注記
Webflow AI Assistantは一部のフィールド（画像、オプション、リファレンス等）には対応していません。

未対応フィールドはプレースホルダーコンテンツが使用されます。

‍

いかがでしたか？
Webflow AI Assistantを活用すれば、コピーやコレクションアイテムの生成・編集がこれまで以上にスムーズかつ効率的になります。

作業時間の短縮はもちろん、より質の高いコンテンツ制作にもつながるはずです。
ぜひこの機能を活用して、あなたやチームのWebflowでのワークフローをアップデートしてみてください。

‍