概要
https://uxdaystokyo.com/articles/alternative-chat-ui-layout/
詳細内容
## 「チャット＋AI」で崩壊するUIパターン
https://uxdaystokyo.com/articles/alternative-chat-ui-layout/
AIチャットにおけるエージェントの思考ログやツール呼び出しが従来のUIを機能不全に陥らせる問題に対し、プロセスと結果を分離する2ペインレイアウトが新たな解決策となると論じる。
**Content Type**: 🤝 AI Etiquette
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 84/100 | **Annex Potential**: 83/100 | **Overall**: 84/100
**Topics**: [[AI UI/UX, エージェントAI, チャットUI設計, 思考ログ, 人間とAIのインタラクション]]
Luke Wroblewski氏の解説を基に、AIチャット機能が普及する中で従来のUIパターンが直面している課題を指摘しています。AIが思考ログやツール呼び出し（エージェント的動作）を大量に挟むようになると、チャットはもはや人間同士の「会話」ではなく「内的独白（モノローグ）」のようになり、ユーザー体験を損ねると筆者は述べています。特にVS Codeのサイドパネルのような狭いUI空間では、AIの複雑なプロセスを追うことが難しく、ユーザーは文脈を見失いがちです。
デザインチームは、AIの思考ログをどこまで表示し、どこを折りたたむべきかというジレンマに直面します。すべてを隠せば不安を覚える一方、すべてを表示すれば情報過多になり、可読性が低下します。この問題を解決するため、記事では「チャット＋キャンバス」という概念、すなわち「プロセス（思考ログ、ツール呼び出し）」と「結果（生成物）」を異なる領域に配置するアプローチを提案。しかし、どこからが結果でどこまでが中間プロセスかの線引きが難しく、またプロセスと結果が離れすぎると文脈把握が困難になるという課題も指摘しています。
そこで、左右に2つのスクロール領域を持つ新しいレイアウトが提案されています。左列には「ユーザー指示、AIの思考ログ、ツール過程」を、右列には「AIの最終出力（結果）」を配置。AIの処理完了後には左側の思考ログが自動で要約に折りたたまれ、右側の結果はそのまま残ります。このレイアウトにより、ユーザーは結果をスムーズに追いながら、同時にその結果に至るプロセスを横目で参照できるという、革新的な体験が実現すると強調しています。
この2ペインレイアウトは、従来のチャットUIが抱えていた「指示、思考、ツール、出力」が混在し頻繁なスクロールを要する問題を解決し、AIエージェントが関与するアプリケーションのUI設計において、プロセスの透明性と結果の視認性を両立させる重要な解決策となり得ます。AIの進化に伴い、このような新しいUI課題は今後も増え続けると予測されており、開発者やデザイナーはAIと人が協働するためのUI設計の解像度を高める必要性が高まっています。