今週のWebデザイン×AI注目まとめ—Webflowの「Source」発表、Figmaのスキルライブラリ、GitFig、shadcn/ui新コンポーネント

今週のデザイン のアイキャッチ

2026年9月最初の週は「AIエージェントが人と一緒にサイトを作る/整える」流れが濃い一週間でした。Webflowはカンファレンスでエージェント前提の新プラットフォームを発表し、Figmaはコミュニティ主導の「AIスキル」ライブラリを拡充。デザインとコードの橋渡しをするプラグインや、コンポーネントライブラリの新機能も登場しています。今週の注目トピックを5件、要点と出典つきで振り返ります。

AIエージェントとWebデザインのイメージイラスト

1. Webflow Conf 2026:エージェント時代のマーケティング基盤「Source by Webflow」

9月1〜3日にボストンで開催されたWebflow Conf 2026で、Webflowは新プラットフォーム「Source by Webflow」を発表しました。狙いは、マーケターとそのAIエージェントが同じ基盤の上でサイトを運用できるようにすることです。あわせて発表されたAgent Presenceは、AIエージェントがキャンバス上でどこを編集しているかをリアルタイムに表示する機能で、チームメイトの作業を見るのと同じ感覚でエージェントの動きを追えます。今月中に全顧客向けに展開される予定です。

「ビルダー」の定義がデザイナー・開発者だけでなく、マーケターとエージェントにまで広がったという位置づけで、AIサイトビルダー機能もマルチページ生成やデザインシステムとの整合性強化が進んでいます。

2. Figma、コミュニティ発の「AIスキルライブラリ」を拡充

Figmaは、Figma Community上で公開・共有できるAIスキルライブラリを拡張し、リサーチ・デザインシステム・ハンドオフなど7カテゴリにわたって50以上のスキルが公開されています。「スキル」とは、デザインレビューの進め方やブランドに沿ったコンポーネント生成の手順などをまとめた短いSKILL.md形式のファイルで、Figma agentのほかClaude・Cursor・Codexなど他のMCP対応AIエージェントからも呼び出せます。

プロンプト欄で /design-crit のようにスラッシュコマンドとして呼び出すほか、ファイル内のコンテキストをもとにFigma agentへスキルを自動生成させ、そのままコミュニティに公開することも可能です。詳細はFigma公式ブログにまとまっています。

3. GitFig:FigmaとGitHubを双方向同期するプラグイン

GitFigは、Figmaのバリアブル・スタイル・各モードをJSONとしてGitHubリポジトリに保存し、ブランチ・コミット・プルリクエストをFigma内から直接操作できるようにするFigmaプラグインです。W3C Design Tokens・Style Dictionary・Tokens Studioなど複数のトークン形式に対応しており、デザイントークンをコードのようにGitでバージョン管理したいチームに向いています。デザインとエンジニアリングの間で起きがちな「どちらが正か分からない」状態を、Gitのワークフローで解消しようという発想です。

4. shadcn/ui、複数ステップの入力に対応する新コンポーネント

コンポーネントライブラリshadcn/uiの8月のchangelogでは、複数ステップの質問フローを組み立てる新コンポーネントが追加されました。エージェントによる確認・聞き取り、オンボーディング、アンケート、設定ウィザードなど、「AIが対話しながらユーザーから情報を集める」UIを組みやすくする狙いです。7月の更新では新規プロジェクトの既定がRadixからBase UIに切り替わっており、AI駆動のプロダクトで対話型UIの需要が増えていることがうかがえます。

今週のトピック早見表

トピック 何が新しいか 向いている人
Webflow「Source」/ Agent Presence エージェント常駐前提のサイト運用基盤、編集箇所のリアルタイム可視化 マーケティングチーム、複数人+AIでの運用
Figma AIスキルライブラリ SKILL.md形式で手順を共有、Figma agent/Claude/Cursor等から呼び出し可 デザインシステム運用チーム
GitFig デザイントークンをGitでバージョン管理、PRベースで同期 デザイナー・エンジニア混成チーム
shadcn/ui 新コンポーネント 多段階の質問フロー用UIパーツ 対話型・エージェント系プロダクトのUI開発者
複数人でコーディング・デザイン作業をしている様子
Photo: hackNY / CC BY-SA 2.0, Openverse経由

まとめ

共通しているのは、「AIエージェントが単独で完成品を作る」段階から「人とエージェントが同じ場所で一緒に手を動かす」段階への移行です。Webflowのプレゼンス表示やFigmaのスキル共有は、その協働をどう見える化し、再利用可能にするかという工夫といえます。デザイントークンの同期やUIコンポーネントの整備も、その土台を支える動きとして見ておくとよさそうです。


主な情報源

各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。