R&D_UIのラストワンマイルをLLMで埋める

LayerXの向き合うR&D課題 〜ビジネス課題を解く挑戦〜の登壇資料
https://layerx.connpass.com/event/383718/

Transcript

1. © LayerX Inc. UI のラストワンマイルを LLM で埋める 2026/02/24 知念 優 @LayerXの向き合うR&D課題 〜ビジネス課題を解く挑戦〜
2. © LayerX Inc. 2 知念 優 (ちねん ゆう) twitter: @taxfree_python 所属: • 東京科学⼤学 情報理⼯学院 数理‧計算科学系 B4 (休学中) • 理化学研究所 • LayerX Ai Workforce事業部 R&D インターン やってること: • 数理最適化 (スケジューリング) • AI for Science、AI Agent ⾃⼰紹介
3. © LayerX Inc. 3 • one size fits all で基本的に 1 つの種類の UI を全ユーザーが使っている • 特に、Agentic な動的で多⽬的なサービスにおける単⼀ UI は UX 低下の可能性 → UI のラストワンマイルを LLM で埋める • ユーザー⾃⾝で業務の⽬的ごとに UI をカスタム • FDE が最適化するよりもさらに細かいユーザーレベルでの最適化を提供 課題: UI は全員に同じ画⾯
4. © LayerX Inc. 4 UI ⽣成アプローチの整理 → 今回は、出⼒の安定性、安全性の観点から宣⾔的 UI ⽣成を採⽤
5. © LayerX Inc. 5 A2UI: 宣⾔的 UI ⽣成のフレームワーク • Google 主導で開発が進められている declarative UI generation のフレームワーク • ユーザーの⼊⼒に対して動的に LLM が必要な UI を考えて JSON を⽣成 • ⽣成された JSON と inventory をレンダー側で突き合わせて UI を描画 • デザイナー向けの画⾯と利⽤者向けの UI が⽤意されているが、どちらも基本は毎回⽣成‧使い捨て を想定
6. © LayerX Inc. 6 流れ: catalog + prompt → UI LLM に⾃然⾔語で 欲しい UI を説明 UI ⽣成時: UI ⽣成⽤の指⽰を追加した LLM を⽤いて欲しい UI を説明 LLM が catalog を ⾒て UI を⽣成 テンプレート UI を⽣ 成 UI 利⽤時: A2UI と異なりレイテンシ、安定性などの観点からリアルタイムで⽣成しない! 使⽤する テンプレートを選択 検索結果などの データを注⼊ UI を レンダリング
7. © LayerX Inc. 7 2 つのユースケースを紹介 ユースケース: スライド検索の例
8. © LayerX Inc. 8 2 つのユースケースを紹介 ユースケース: スライド検索の例
9. © LayerX Inc. 9 prompt: サムネイルを⼤きくしてください ユースケース: ストーリー A before after
10. © LayerX Inc. 10 prompt: deck タイトル以外の情報は不要です ユースケース: ストーリー A before after
11. © LayerX Inc. 11 prompt: ⼆⾏にしてほしい ユースケース: ストーリー A before after 👍
12. © LayerX Inc. 12 2 つのユースケースを紹介 ユースケース: スライド検索の例
13. © LayerX Inc. 13 prompt: 縦スクロールにして、⽇付と作成者が知りたい ユースケース: ストーリー B before after
14. © LayerX Inc. 14 prompt: 同じ⽇付のスライドをグループにまとめて、⽇付を⾒出しにして ユースケース: ストーリー B before after
15. © LayerX Inc. 15 prompt: スライド情報は、タイトルの先頭 30 ⽂字と著者名を表⽰して、サムネイルを少し⼤きくして ユースケース: ストーリー B before after 👍
16. © LayerX Inc. 16 技術的な⼯夫‧ハマりどころ A2UI で不便だと思って追加したこと • 複数 provider 対応: 公式実装は Gemini 以外は未対応 • マルチターン会話: A2UI はマルチターンでのやりとりに未対応 • ⽣成した UI の JSON の export/import 機能: A2UI は未対応 実運⽤で使うために追加したこと • inventory 境界検出: 与えられた UI inventory で与えられた UI を構成可能かを判定し、無理な更新 を抑制 • catalog のハイブリッド更新: catalog は component から⾃動⽣成されるが⻑くなると⾒落しが発 ⽣し invalid な JSON を返すことがあったので、⼿動で追加の指⽰を追加し安定性を向上
17. © LayerX Inc. 17 • UX の改善 ◦ 現状: ユーザーが「こういう UI にして」と指⽰する必要がある ◦ 次: 業務内容から適切な UI をこちらから提案する (最適解を考える負担をユーザーから外す) ◦ さらに: inventory の境界で「できない」→「代わりにこれはどうですか」と代替案を提⽰ • UI 開発者への応⽤ ◦ デフォルトの UI も⾃動で⽣成する • 複雑な inventory への対応: Agent Skills のように動的に catalog を読み込んで、⼤規模なコンポー ネント群にもスケールさせる • スライド検索以外のドメインへの応⽤ 今後の課題
18. © LayerX Inc. 18 1. A2UI を基にした宣⾔的 UI ⽣成で安全性と再利⽤性を両⽴ ◦ inventory 制約付き JSON ⽣成 → 壊れない UI ◦ テンプレートとデータの分離 → 利⽤時は LLM 不要 2. ⾃然⾔語の段階的修正で UI を調整できることを検証 ◦ レイアウト変更‧表⽰項⽬変更‧プロパティ変更まで対応 ◦ 同じデータに対して異なる UI 体験を即座に切り替え可能 3. inventory がガードレールであり、最適化の起点になる ◦ LLM の出⼒を制約内に収める安全装置 ◦ 境界の検出 → ユーザーへのフィードバック → inventory 拡張の根拠 まとめ