1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="7BdPZYWUPt"><a href="https://uxdaystokyo.com/articles/alternative-chat-ui-layout/">「チャット＋AI」で崩壊するUIパターン</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/alternative-chat-ui-layout/embed/#?secret=7BdPZYWUPt" width="600" height="338" title="“「チャット＋AI」で崩壊するUIパターン” — UX TIMES" data-secret="7BdPZYWUPt" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2025/11/alternative-chat-ui-layout.jpg19201080AI時代の「新しい会話設計」を知らないデザイナーが取り残される この記事は Luke Wroblewski 氏による「代替チャットUIレイアウト」についての解説です。（2025年11月10日） 最近では、ほとんどのアプリケーションに AI チャット機能が追加されつつあります。そして、AI がより高度に思考し、ツールを使いこなせるようになるほど、その機能も増えていきます。すると、多くのアプリで共通する使い勝手の問題が生まれ、私たちデザイナーは新しい解決策を考える必要が出てきます。 一見、チャットはとてもシンプルで、誰もが理解しやすい UI パターンです。しかし問題は、「相手が人ではなく AI モデルになった瞬間」に起こります。 AI が相手になると、チャットは“会話”ではなくなる もし人同士がメッセージアプリで話しているだけなら、UI はとても単純です。ですが、AI モデルが相手になり、そこに「思考の痕跡」や「ツール呼び出し」が大量に挟まる（いわゆるエージェント的な動作）と、チャットはもはや普通の対話ではありません。 フルスクリーンであっても、 ユーザーが質問する AI が思考ログを表示する ツールを実行し、その結果を見せる 結果についての評価を述べる 別のツールを呼び出す… という流れが続きます。 これは AI の能力を強化する一方、見た目は“内的独白（モノローグ）”に近くなり、従来の「会話型チャット」とは全く別物になります。 サイドパネルではさらに混乱する：VS Code の例 たとえば VS Code の「Augment Code」では、狭いサイドパネルに思考ログやツール呼び出しが次々と流れてきます。 AI の作業は優秀でも、その過程を細いスペースで追い続けるのは限界があります。タスクが完了する頃には、最初の指示は遥か上に消え、ユーザーは文脈を確認するために何度もスクロールして行き来することになります。 どこまで「思考ログ」を見せるべきか？ ここでデザインチームは必ず議論します。 モデルの思考をどこまで見せるべきか？ どこまで折りたたんでよいのか？ 隠すと不安になるが、出しすぎても読みづらい… アプリによって最適解は異なります。ただ、多くの場合「AI が何をしているか見えることには価値がある」ため、単純に全部隠せば良いという話でもありません。 “プロセス”と“成果”を分けられないか？ ここで重要になるのが「チャット＋キャンバス」パターンです。 思考ログ・ツール呼び出し（プロセス） 生成物（結果） を別の場所に置くという考え方です。 しかし実際には、“どこからが結果か”をどの段階で判断するのか？中間ステップはどちらに属するのか？といった問題があり、線引きは意外に難しい設計課題です。 仮にきれいに分けられたとしても、「プロセス」と「結果」が離れすぎると文脈がつかみにくいという別の問題もあります。 新提案：2つのスクロール領域を持つレイアウト そこで提案されているのが、左右に2つのスクロール領域を配置するレイアウトです。 左列：ユーザー指示 ＋ AI の思考ログ ＋ ツール過程 右列：AI の最終出力（結果） AI の処理が完了すると、左側の思考ログは自動で折りたたまれ、要約だけが残ります。右側の結果はそのまま保持され、必要に応じてスクロールできます。 これにより、 結果を追いながら その裏にあるプロセスを並行して参照する という、今までにない体験が可能になります。 比較：従来のエージェント的チャット vs 新しい2ペインレイアウト 従来の ChatDB のエージェント型チャットでは、 指示 思考内容 ツール呼び出し結果 最終出力がすべて同じ縦の流れに混在して並ぶため、かなり頻繁にスクロールが必要でした。 新しい2ペインレイアウトでは、 指示＆プロセス 結果が左右に分かれるため、どちらも同時に文脈を保ちながら確認できます。 ユーザーは結果をスムーズにスクロールしながら、それを導いたプロセスを横目で把握できます。 今後の展望 この“エージェント型 UI の課題”は多くのアプリで共通しており、この新レイアウトをほかのプロダクトにも試しながら、メリットや課題をさらに検証していく予定です。 AI の進化は非常に速いため、今後も新しい UI の課題が次々と生まれていくはずです。 AI時代のUIは、いま大きく変わり始めています その変化を「設計する側」として理解できていますか？** AI の思考ログ／ツール呼び出し／エージェント的動作……従来の“会話UI”では対応しきれない体験が、次々とプロダクトに入り込み始めています。 AIと人が共に働くUIをどう設計するのか？その解像度を一気に引き上げる 5日間です。 UX DAYS TOKYO – ワークショップ 日程: 2025年12月1日（月）〜 5日（金）時間: 各日 18:00–20:30（日本時間）形式: オンライン（通訳付き）総時間: 12.5時間（2.5h × 5日）