今週のWebデザイン×AIまとめ。Figmaの年次カンファレンス「Config 2026」から生まれた新機能「Figma Motion」がキャンバスに時間軸を持ち込み、Webflowは「MCP 2.0」でAIエージェント時代のガバナンス整備に本腰を入れました。一方で「AIが作るサイトはどれも同じ顔になる」という批判も話題に。今週注目の3トピックを、公式発表と一次情報を中心に短くまとめます。
Figma Motion登場——キャンバスに「タイムライン」が来た
Figmaの年次イベント「Config 2026」で発表されたFigma Motionが、一般提供に向けて話題を広げています。これまでレイアウトはFigma、実際に動かす部分はAfter EffectsやRiveに任せるのが定番でしたが、Figma Motionはキーフレーム・イージング変数・コード書き出しを備えた本格的なタイムラインを、コンポーネントや変数と同じファイル内に統合しました。SNSでは「プロンプト一発でボタンのスパークルアニメーションを作れた」といった投稿も広がっています。
ただし、インタラクティブな状態遷移を扱う用途では、依然としてRiveのステートマシンに分があるとの比較も出ています。ざっくり整理すると次の通りです。
| 観点 | Figma Motion | Rive |
|---|---|---|
| 出力 | アニメーション/クリップ＋コード書き出し | 実行時に反応するステートマシン |
| ランタイムでの相互作用 | なし（作った通りに再生） | あり（入力・スクロール・データに反応） |
| ステートマシン | 非対応 | ビジュアルエディタで対応 |
| タイムライン/キーフレーム | キャンバス上でネイティブ対応（2026年新機能） | ボーンや拘束つきでフル対応 |
用途で使い分けるなら、ブランド動画やマイクロインタラクションの「見た目」を素早く仕上げたいならFigma Motion、アプリ内で状態に応じて動くUIを作りたいならRive、という棲み分けになりそうです。
Webflowが「エージェント時代」のガバナンス整備へ
Webflowが「MCP 2.0」を発表しました。Claude・ChatGPT・Cursor・Slack・Postmanなど外部のAIエージェントをWebflowに接続しつつ、権限管理やロールベースのアクセス制御を維持できる点が売りです。あわせて公開ベータで登場した「Webflow for Slack」を使うと、Slackのチャンネルからサイトのコンテンツ編集やアクセス解析の確認、公開作業までを行えます。
- Claude・ChatGPT・Cursor・Slack・Postman・Rovoなど主要なAIツールと標準接続
- 既存のロール権限がAIエージェント経由の操作にもそのまま適用される
- 「Webflow for Slack」はチャット上でCMS編集・SEOメタデータ更新・分析データの共有が可能（公開ベータ）
「AIエージェントに強い権限を渡しても事故らない仕組み」を各サイトビルダーが競って整え始めており、単なる生成機能の追加から一歩進んだフェーズに入った印象です。
“AI製サイトはみんな同じ顔”論争——Claude Designが槍玉に
Northeast Timesが、AIデザインツールの普及によるビジュアルの均質化を指摘する記事を公開しました。ベージュ背景、赤茶系のアクセント、イタリック体の大きなセリフ見出し、ニュース速報風のティッカーバー——こうした特徴は、Anthropicが4月に投入した「Claude Design」で作られたサイトによく見られるパターンとして名指しされています。
記事では、エンジニアのLucas Gelfond氏の「射出成形プラスチックの継ぎ目や、木材の工業用ノコギリ跡のようなもの」という例えを紹介。shadcn/uiやRadix UIといった同じオープンソースのUI部品に多くのAIツールが依存していることが、均質化の一因になっていると分析しています。プロンプトやデザインシステムを工夫して「AIっぽさ」から抜け出す取り組みが各所で始まっており、この論点は今後もフォローする価値がありそうです。
その他、駆け足で
- AIサイトビルダー競争はLovable・Bolt.new・Replitの3つ巴が続く。Lovableはフルスタック環境「Lovable Cloud」、Bolt.newはブラウザ完結の「Plan Mode」を強みに打ち出している。
- プロンプトから没入型3Dサイトを丸ごと生成するニッチなツールも増加中。Splineのような「3Dオブジェクトを埋め込む」タイプに加え、Three.js製の3D演出を丸ごと書き出すサービスも登場している。この領域は本トラックの木曜回で改めて深掘り予定。
主な情報源
- Figma Blog: Config 2026 — New materials, new tools and a more expressive canvas
- Rive vs Figma Motion (2026): Full Comparison
- Webflow Blog: The agentic web is here — Introducing Webflow MCP 2.0
- Webflow for Slack: Manage Your Site From Team Chat
- Northeast Times: AI design tools are making every website look the same
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。