PR 本ページにはプロモーションが含まれています。
この記事を読むと、WebflowのAIコードコンポーネントをキャンバス（デザインを確認する作業画面）上で調整し、修正したい場所をAIに正しく伝える流れがわかります。AI機能の使い方や料金が不安な方でも、この手順に沿って小さく試せば大丈夫です。
Webflowは2026年9月2日、AIが生成したコードコンポーネントをキャンバス上で視覚的に編集できる機能を正式公開しました。同日に、サイト内の情報をもとにAIエージェント（作業を自動化するAI）向けの指示書を作成する機能も公開しています。
今回の変更で重要なのは、AIにコードを作らせて終わりにするのではなく、デザイナーが画面上で確認しながら調整し、その結果をAIへの指示へつなげられる点です。
結論：AI生成物をデザイン作業の流れに組み込みやすくなった
これまでAIにコード生成を任せる場合、出力されたコードを確認し、必要に応じて指示を追加したり、コードを直接修正したりする作業が必要でした。
今回の機能では、AIコードコンポーネント内の要素をキャンバス上で選択し、スタイル（色や余白、文字の見た目など）やテキストを視覚的に調整できます。さらに、選択した要素をAIへの指示対象としてコンテキスト（AIが参照する情報）に追加できます。
実際に使うと、最初の壁は「AIに何を直してほしいのか」を言葉だけで説明することです。ボタン、カード、見出しなどを先に画面上で選ぶと、対象を指定する手間が減ります。コード全体を読み解かなくても、デザイン画面を起点に修正を進められる点が便利です。
具体的に何ができるのか
- AIが生成したコードコンポーネントをキャンバス上で確認する
- コンポーネント内の要素を選択する
- 選択した要素のスタイルを調整する
- テキストを編集する
- 選択要素をAIへの指示対象として追加する
たとえば、AIが作成したカードやヒーローエリア（ページ上部の大きな訴求エリア）について、文章の差し替えや見た目の調整を行い、その対象を明示したうえでAIに追加修正を依頼できます。
実際の画面で行う手順
1. AIコードコンポーネントをキャンバスに表示する
- Webflowの対象プロジェクトを開きます。
- 左側のページ一覧またはサイト内の対象ページを開きます。
- 中央のキャンバスに、AIが生成したコードコンポーネントを表示します。
- 表示されたコンポーネントをクリックし、選択状態にします。
ここでは、いきなりAIへの指示を入力するより、まず見た目を確認します。スマートフォン幅でレイアウトが崩れていないか、文章が長くなったときにボタンが押し出されないかも見ておくと安心です。
2. 直したい要素をキャンバス上で選ぶ
- 中央のキャンバスで、見出し、画像、ボタン、カードなど修正したい部分をクリックします。
- 選択枠が意図した要素を囲んでいるか確認します。
- 親要素（選択した部分を内包する外側のブロック）が選ばれた場合は、もう一度クリックして対象を切り替えます。
初心者がよく混同するのは、コンポーネント全体と、その中のボタンやテキストの違いです。全体を選ぶとレイアウトの調整になり、文字だけを選ぶと内容や文字スタイルの調整になります。
3. スタイルとテキストを調整する
- 要素を選択した状態で、画面右側のスタイル関連の操作欄を確認します。
- 色、文字サイズ、余白、配置など、変更したい項目を一つずつ調整します。
- 文章を変える場合は、キャンバス上のテキストをクリックして内容を編集します。
- 変更後、デスクトップ幅とスマートフォン幅の両方で表示を確認します。
実際に使うと、最初から複数の項目を一度に変えるより、「見出しの文字を短くする」「ボタンの色をブランドカラーにする」のように一つずつ試すほうが原因を追いやすくなります。
4. 選択要素をAIのコンテキストに追加する
- 修正したい要素をキャンバス上で選択したままにします。
- 画面上のAI操作欄または選択要素に関するメニューを開きます。
- 選択した要素をAIのコンテキストへ追加する操作を選びます。
- AIへの指示欄に、「この見出しを短くし、ボタンはそのままにする」のように変更範囲を書きます。
- 生成結果を確認し、意図と違う場合は対象要素と変更内容を絞って再度指示します。
ここでのコツは、指示に「何を」「どう変えるか」「何を変えないか」を入れることです。たとえば「選択したカードの画像だけを差し替え、余白とボタン位置は維持してください」と書くと、意図を伝えやすくなります。
エージェント用指示書の生成とは
もう一つの機能では、サイトに蓄積された情報をもとに、AIエージェントが参照する指示書を生成できます。指示書は、AIに渡すルールブックのようなものです。
対象には、次のようなガイドライン（作業上の決まり）が含まれます。
- Brand Guidelines（ブランドの色、言葉遣い、表現のルール）
- Design System（ボタンや見出しなど、デザイン部品の共通ルール）
- Asset Guidelines（画像やロゴなどの素材の扱い方）
- CMS Guidelines（CMS、コンテンツを管理する仕組みの運用ルール）
毎回同じ注意事項を個別に入力する負担を減らし、サイト固有のルールを踏まえた生成を促しやすくなる点が特徴です。
指示書を使うときの手順
- 対象サイトのブランド、デザイン、アセット、CMSに関する情報を整理します。
- AIエージェント向けの指示書を生成する画面を開きます。
- 生成対象のガイドラインを選びます。
- 生成された内容を読み、現在のチームルールと照合します。
- 古い色名、使っていない画像ルール、例外条件がないか確認してから利用します。
実際に使う場合、生成された指示書をそのまま正解と考えないことが大切です。AIはサイト内の情報を整理できますが、最新の社内ルールや担当者だけが知っている例外まで正しく反映するとは限りません。
従来のやり方や他ツールとの違い
従来のコード編集との違い
- 従来：コードエディター（コードを書く画面）で該当箇所を探し、数値や文章を直接変更します。
- 今回：キャンバス上で対象を選び、見た目を確認しながら調整できます。
従来の方法は細かな制御に向いています。一方、今回の方法は「このカードだけ少し目立たせたい」といったデザイン起点の修正に向いています。
一般的なデザインツールとの違い
- デザインツール：見た目の試作や画面設計はしやすいものの、そのままWebサイトの実装になるとは限りません。
- Webflowの今回の機能：Webflow上のコードコンポーネントを、実際のサイトに近い画面で確認しながら調整できます。
デザインツールで作った見本を実装担当者へ渡す工程を減らせる可能性があります。ただし、複雑な動きや外部サービスとの連携などは、別途コードや設定の確認が必要です。
他のAIコード生成ツールとの違い
- コード生成中心のツール：指示文からコードを作ることが中心です。
- 今回のWebflow：生成後に画面上の要素を選択し、その対象を次のAI指示に結び付けやすくなっています。
つまり、コードを一度生成して終わるのではなく、「生成する」「画面で確認する」「対象を選ぶ」「再度AIに伝える」という往復がしやすくなった点に違いがあります。
従来との違い
- AIコードの調整：従来はコード確認や追加指示が中心でしたが、今回はキャンバス上で要素を選び、視覚的に調整できます。
- 修正対象の指定：従来は文章で対象を説明する必要がありましたが、今回は選択した要素をコンテキストに追加できます。
- サイトルールの共有：従来は担当者が都度説明することが多かったものの、今回はガイドラインとして整理し、AIに渡しやすくなっています。
初心者がつまずきやすいポイント
- コンポーネント全体を選んでしまう：文字だけを変えたい場合は、内側のテキスト要素を選びます。
- 見た目の変更と文章の変更を混同する：色や余白はスタイル、文章はテキスト編集として分けて考えます。
- 選択対象をAIに伝えず指示する：対象を選択してからコンテキストに追加すると、指示が曖昧になりにくくなります。
- デスクトップだけで確認する：スマートフォン幅では文字の折り返しやボタンの位置が変わるため、複数の画面幅で確認します。
- 生成結果をすぐ公開する：実際の画像や長い文章を入れた状態で、表示崩れとリンク先を確認します。
- 指示書を社内ルールそのものだと思う：生成後に担当者が内容を確認し、古い情報を修正します。
使い方の基本的な流れ
- AIコードコンポーネントをキャンバス上で確認する
- 調整したい要素を選択する
- スタイルやテキストを編集する
- 必要に応じて対象要素をAIのコンテキストへ追加する
- 変更内容を限定した指示を入力する
- デスクトップとスマートフォンの表示を確認する
- サイトのブランド、デザイン、CMSに関する指示書を生成・活用する
最初は、見出しとボタンだけの小さなコンポーネントで試すのがおすすめです。変更前の状態を複製しておけば、意図しない結果になっても比較しやすくなります。
向いている人・向いていない人
向いている人
- AIで作ったUI（画面の見た目や操作部分）をデザイン画面で調整したい人
- コード編集よりも視覚的な操作を重視するデザイナー
- ブランドやデザインシステムをAIにも守らせたいチーム
- CMSやアセットの運用ルールを標準化したい組織
- 生成と修正を何度も繰り返しながら、制作時間を短縮したい人
向いていない人
- AIコードコンポーネントを利用しない人
- サイト固有のルールをAIに参照させる必要がない人
- 生成結果を確認せず、そのまま公開したい人
- 細かなコード制御や複雑な外部連携を最初から重視する人
料金はどうなる？
今回確認できる正式発表の情報だけでは、これらの機能に追加料金が必要か、どの料金プランに含まれるかは判断できません。
利用前に、契約中のプランでの提供条件、AI機能の利用制限、生成回数などを確認してください。無料で使えると決めつけず、最新の公式案内と管理画面の表示を確認するのが安全です。
注意点
視覚的に編集できても、表示崩れやレスポンシブ対応（画面幅に合わせて表示を変える仕組み）、既存コンポーネントとの整合性まで自動的に保証されるとは限りません。
公開前には、複数の画面幅、実際の画像、長い見出し、スマートフォンでの操作性を確認しましょう。また、AIエージェント用指示書はAIの判断を補助するものであり、ブランド表現やCMS運用の最終確認を不要にするものではありません。
よくある質問
いつ正式公開されましたか？
AIコードコンポーネントの視覚編集機能とエージェント用指示書生成機能は、2026年9月2日に正式公開されました。
コードを書かずにAIコードコンポーネントを変更できますか？
要素をキャンバス上で選択し、スタイルやテキストを視覚的に調整できます。ただし、複雑なカスタマイズではコードや周辺設定の確認が必要になる場合があります。
どんな指示書を作れますか？
Brand Guidelines、Design System、Asset Guidelines、CMS Guidelinesなど、サイトのブランドやデザイン、アセット、CMSに関する指示書を生成できます。
追加料金はかかりますか？
確認できる発表情報だけでは料金条件は明らかになっていません。契約中のプランと最新の提供条件を確認してください。
まとめ：今日からできること
Webflowの今回の変更により、AIが生成したコードコンポーネントを、コードだけでなくデザイン画面から確認・調整しやすくなりました。選択した要素をAIのコンテキストに追加できるため、修正対象を説明する負担も減らせます。
最初の一歩は、既存ページをいきなり大きく変更することではありません。小さなカードやボタンを一つ選び、テキストを変える、色を変える、スマートフォン幅を確認する、という順番で試してください。
今日からできることは次の3つです。
- 小さなAIコードコンポーネントを一つ選んで表示を確認する
- 修正対象をキャンバス上で選び、変更範囲を限定してAIに指示する
- ブランドやCMSのルールを整理し、生成された指示書と照合する
この流れに慣れると、AIに作成を任せるだけでなく、デザイナー自身が画面を見ながら品質を整え、サイト固有のルールに沿って仕上げやすくなります。
参考・公式情報
Webflowの公式発表および管理画面の最新情報を確認してください。
Amazonで関連商品を探す
Webflow、AIコードコンポーネントの視覚編集とエージェント用指示書生成に対応
