AIエージェントとUIをつなぐ技術 - Google Cloud Next '26 の Generative UI セッションレポート -

2026/05/18 に「Google Cloud Next 2026 Recap in ZOZO」で発表した登壇資料です。
https://zozotech-inc.connpass.com/event/393303/

株式会社ZOZO
データ・AIシステム本部 MA部 MAシステム開発ブロック
林 初実

#GoogleCloudNext26Recap

Transcript

1. AIエージェントと UIをつなぐ技術 Google Cloud Next '26 の Generative UI セッションレポート 株式会社ZOZO データ・AI システム本部 MA部 MAシステム開発 林 初実 Copyright © ZOZO, Inc.
2. 株式会社ZOZO データ・AI システム本部 MA部 MAシステム開発 林 初実 自社内製マーケティングシステム 「ZOZO Marketing Platform」の管理画面+α担当 目指せ！Webアプリなんでもエンジニア
3. 本日話すこと Generative UI とは セッション紹介 Generative UI for any agent, anywhere - A2UI, AG-UI, MCP Apps, and more Personalize the user experience with generative UI Generative UI 活用事例 最後に © ZOZO, Inc.
4. Generative UI とは AIが ユーザーに合わせたUIを動的に構成 するための手法 課題 テキストのみのAIエージェントの回答は 理解しにくい 公園の写真も見たい マップで駅からのルートも見たい Generative UIで解決 インタラクティブなUIを返すことで、 ユーザーがAIの回答を理解しやすい 次の操作もしやすい Gemini 3 高速モード の回答（2026/5/14） © ZOZO, Inc.
5. セッション紹介 Generative UI for any agent, anywhere - A2UI, AG-UI, MCP Apps, and more MCP Apps A2UI AG-UI © ZOZO, Inc.
6. MCP Apps Anthropic社が提唱するMCPの公式拡張 エージェントがチャット内にインタラクティブなUIを返す仕組み ChatGPT、Claude、Gemini など主要ホストが対応 ボタン・フォームなどインタラクティ ブな操作も可能 レンダリングされるものに依存しない Predefined UI（事前定義） Declarative UI（宣言的） Generative UI（生成的） 「BRK2-094 Gen UI (MCP Apps, AG UI, A2UI, WPP) 」P28 より引用 © ZOZO, Inc.
7. MCP Apps MCP Apps は A2UI / AG-UI 含む他のUIプロトコルと相互に運用できる A2UI / AG-UI → MCP Apps A2UIやAG-UIが生成したUIを、MCP Appの中でレンダリングできる MCP Apps → A2UI / AG-UI A2UIやAG-UIでレンダリングするコンポーネントとしてMCP Appsを利用できる 「BRK2-094 Gen UI (MCP Apps, AG UI, A2UI, WPP)」P31 より引用 © ZOZO, Inc.
8. A2UI Google社が提唱する エージェント駆動型インターフェース向けの宣言的UIプロトコル コンポーネントのカタログを定義し、エージェントはそこから選んでUIを組み立てる エージェントは JSONでコンポーネント構造とデータのみ を送信 自前のデザインシステム（React、Flutter など）でUIを描画 A2UI標準のBasic Catalogを利用することも可能 セキュリティ（多層防御）の手段を提供 例：「クリックターゲット内に隠しフォームを埋め込むUI生成」攻撃も、コンポーネントを自前で管理 することで防御できる トランスポートは不問。AG-UI / MCP と組み合わせることも可能 © ZOZO, Inc.
9. A2UI Gemini Enterprise にてプレビューで提供開始 https://cloud.google.com/blog/ja/products/ai-machine-learning/whats-new-in-gemini-enterprise 内の 「Dynamic and interactive Agent UI experiences in Gemini Enterprise」0:07 より引用 © ZOZO, Inc.
10. AG-UI CopilotKit社が提唱する エージェントとフロントエンドの接続を標準化 するプロトコル MCP: ツールと接続 A2A: 他のエージェントと接続 AG-UI: ユーザー向けフロントエンドと接続 「BRK2-094 Gen UI (MCP Apps, AG UI, A2UI, WPP)」P61 より引用 © ZOZO, Inc.
11. AG-UI Generative UIの手法は制御の度合いによってグラデーションがあり、 AG-UIはその全体をカバーする 「BRK2-094 Gen UI (MCP Apps, AG UI, A2UI, WPP)」P64 より引用 © ZOZO, Inc.
12. Personalize the user experience with generative UI Generative UI の New possibilities 同じアプリでも使う人によって体験が異なる 2回目以降のアクセスでは 好みに合わせたUIが最初から提示される 世界観 「BRK2-066 (go/next-genui-deck)」P25 より引用 [プレビュー] Gemini Enterprise for CX の ショッピングエージェントに 「記憶」と「パーソナライゼーション」の機能が追加 © ZOZO, Inc.
13. Generative UI 活用事例 © ZOZO, Inc.
14. GenLatte Generative UIが組み込まれたラテアート注文アプリを体験できるブース © ZOZO, Inc.
15. ZOZOでの事例 WEAR by ZOZO と ZOZOTOWN をChatGPT上で連携 ZOZO、「Apps in ChatGPT」に対応し、アプリ連携を開始 より引用 © ZOZO, Inc.
16. ZOZOの課題 自社内製マーケティングシステム「ZOZO Marketing Platform」の課題 マーケターが SQLを直接書いて セグメント（配信のターゲット群）を作成する設計 すべてのマーケターがSQLを書けるわけではない 「年齢で配信を出し分けたい」などの 軽微な修正でも毎回SQLの記述が必要 過去の試み UIベースの絞り込み機能を開発したが利用されにくい状態 マーケ側の追加要望に対応できていない 例: 「X月X日以降にサイト訪問」で実装されているが、「◦ヶ月以内にサイト訪問」も加えて欲しい 絞り込み条件を日本語化したことで、元のカラム名がわからず、エンジニアに確認の問い合わせが発生 © ZOZO, Inc.
17. ZOZOでの活用の可能性 AIによるSQL生成 + Generative UI の組み合わせによる展望 1.マーケターがセグメントの条件を自然言語で入力 2. AIがSQLを生成 3. 出来上がったSQLとレビュー項目をGenerative UIでマーケターに提示 例: SQLの実行結果（セグメント数）・元にしたSQLとの差分などの情報をダッシュボードで表示 セグメント作成が 迅速かつ柔軟に できるようになる可能性 マーケター完結になれば、マーケター・エンジニア双方の工数削減にもつながる © ZOZO, Inc.
18. まとめ AIエージェントの応答は、テキストからインタラクティブなUIへと変わりつつある セッションでは、その実現手法としてMCP Apps・A2UI・AG-UIが紹介された Generative UIの今後の取り組みとして、同じアプリでも使う人によってUIが異なる世界観が示された 感想 MCP Apps・A2UI・AG-UIのスピーカーがセッション中にお互いを自然に参照し合っており、競合ではなく それぞれが役割を持ちながら共存していく姿勢を感じた Generative UIの現地のデモにより、AIの即時生成 + 使い勝手の良さ を実感できた © ZOZO, Inc.
19. 参考 セッション資料 Generative UI for any agent, anywhere: A2UI, AG-UI, MCP Apps, and more — Google Cloud Next '26 Personalize the user experience with generative UI — Google Cloud Next '26 公式ドキュメント A2UI: a2ui.org MCP Apps: modelcontextprotocol.io AG-UI: docs.ag-ui.com © ZOZO, Inc.