GoogleがA2UIとMCP Appsの組み合わせ方を整理、エージェントUI設計の実務論が見えてきた

A2UI + MCP Apps: Combining the best of declarative and custom agentic UIs

元記事は一次情報へのリンクです元記事を読む

5行でつかむ要点

Googleは2026年6月17日、A2UIとMCP Appsを組み合わせてエージェント向けUIを設計する3つのアーキテクチャパターンを紹介した。

宣言的レンダリングの扱いやすさと、iframeベースの高い自由度をどう両立するかが主題になっている。

ブランド整合性、セキュリティ、性能を落とさずにAI用UIを作りたい開発チームにとって実務的な整理だ。

自社のデザインシステムとAI生成UIの整合性を保ちたいプロダクトチームには、3パターンの使い分けが実務的な判断材料として役立つ。

どの方式が向くかは画面の複雑さやブランド要件によって変わるため、採用前にパターンごとの比較を確認しておくとよい。

エージェント向けのUIをどう作るかという問いには、実は「速く作れるが自由度は低い」方式と「自由度は高いが手間がかかる」方式という、昔からある二択の構図がそのまま当てはまる。Googleの記事は、この二択を統合しようとする試みだ。

3つのアーキテクチャパターン

紹介されているのは、(1) ネイティブアプリのような見た目を保てる宣言的レンダリング、(2) 複雑な状態を持てるiframeベースのカスタムUI、(3) 既存システムの画面にAIが生成したUIを部分的に注入する方式、の3系統だ。この整理の面白さは、「どれが最強か」を決めようとしていない点にある。単純な確認画面や選択肢の表示にはコストの低い宣言的UIが向き、複雑なダッシュボードや状態管理が必要な画面にはiframeの自由度が要る、という住み分けを前提にしている。

ブランド整合性という見落とされがちな論点

AI機能の画面設計というと、動くかどうかにばかり目が行きがちだが、企業のプロダクトに組み込む段階になると「自社のデザインシステムと合っているか」が想像以上に重要になる。宣言的UIはこの点で有利で、ホスト側のスタイルをそのまま継承しやすい。逆にiframeは表現の自由度と引き換えに、見た目の統一を保つための追加実装が必要になる。この記事はセキュリティや性能だけでなく、ブランドという実務上シビアな観点まで踏み込んでいる点が特徴的だ。

同じような「作りやすさ」対「自由度」のトレードオフは、Webの歴史でもテンプレートエンジンとフルスクラッチ実装の間で何度も繰り返されてきた。エージェントUIの設計も、結局は使う場面ごとに使い分けるという、ある意味当たり前の結論に落ち着きつつあるのかもしれない。パターンの詳しい比較は、Google Developers Blogの該当記事(https://developers.googleblog.com/a2ui-and-mcp-apps/)で図解付きに解説されている。