この記事では、Benchのデザイナー「Luke Wroblewski」がAIのデザインパターンのチャットについて、課題と解決方法を説明しています。チャットはスクロールが長くなる問題があり、これに対応するアイディアが紹介されています。
出典：https://lukew.com/ff/entry.asp?2093 — 2025年4月6日
スクロール地獄からの脱出──AIチャットUIの課題と、そのデザイン解決策
最近、あらゆるアプリやウェブサイトにチャットインターフェースが搭載されるようになりました。
ユーザーはAIモデルに自由に質問を投げかけ、多様なユースケースに活用できるようになりましたが、その自由さの裏には新しいUX課題も潜んでいます。
その代表例が、「チャットが長くなりすぎて、ユーザーがどこに何があるかわからなくなる」問題です。
チャットが長すぎると、人は迷子になる
ニールセン・ノーマン・グループの調査「初期の生成AIユーザーの行動」では、ユーザーがAIチャットボットを使う際に**“スクロール迷子”**になるという深刻な課題が指摘されています。
「過去のやり取りを探すために、ユーザーは膨大なテキストを何度も上下にスクロールしなければならなかった。特にAIの出力が長く、画面に収まりきらない場合、どこに何があったのか見失いやすくなった。」
つまり、会話が長くなればなるほど、ユーザーの記憶と空間認識が追いつかなくなるのです。
Luke Wroblewskiのアプローチ：「折りたたむ」会話
ルークが運営するサイトの「Ask LukeW」機能では、質問と回答のペアを自動的に要約・折りたたんで表示されています。最新のやり取りだけが開いた状態で見えるため、ユーザーは常に“今の会話に集中できる”構造になっています。
過去のやり取りを確認したい場合は、タップして展開するだけ。
さらに新しい質問を開くと、他のやり取りは自動的に折りたたまれる──まるで「整理された頭の中」をそのままUIにしたような体験です。
シンプルな会話型UIと展開・折りたたみ型UIの比較
- 左の画面（従来のデザイン）:
- すべての質問と回答が全文表示されています。
- やり取りが長くなると、過去の内容を参照するために長いスクロールが必要になり、ユーザーの負担が大きくなります。（これは前回の返信で指摘した「テキストの壁」問題です。）
- 右の画面（改善案）:
- 過去の質問と回答のペアは、要約されて折りたたまれています。
- 現在の（最新の）質問と回答のみがデフォルトで開いて表示されます。
- このデザインにより、ユーザーは現在のやり取りに集中しやすくなり、画面全体がすっきりと見やすくなります。過去のやり取りも、必要に応じて展開して確認できるため、ナビゲーションが容易になります。
過去の質問と回答のペアはすべて統一サイズで折りたたんで表示されるため、内容に集中しやすくなっています。また、必要な際にはリストから関連するメッセージを迅速に見つけられます。
「Ask LukeW」における展開式会話インターフェース例
会話インターフェースで異なる2つのメッセージを展開した例
過去の質問と回答のペアを展開したい場合は、タップすることで内容が表示され、同時に他のメッセージは自動的に折りたたまれます。
チャットから「知的ワークスペース」へ
AIを活用した検索・データサイエンス・ファクトチェック・メモリなど、複数のツールを統合したインターフェイスは、“知的作業のためのワークスペース”です。各ツールは右側の出力パネルで動作し、生成された結果をその場で編集することもできます。
さらに、タイムライン形式の折りたたみ機能を搭載。
ツールごとの出力をリストとして整理し、ワンクリックで展開・折りたたみを可能にしました。
これにより、従来のチャット形式を超え、AIとの協働の履歴を直感的かつ効率的に整理・閲覧できるインターフェースが実現しています。
一つひとつ見ていきましょう。
ツールウィンドウ
これらのツールウィンドウは、大量の出力を生成できる高い処理能力を備えています。
各ツールの出力は右側のパネルに個別表示され、内容を直接編集することが可能です。
そのため、生成結果を少し修正したい場合でも、手作業でスムーズに調整できます。
出力パネル
ツールが出力を生成したり、別のタスクを開始したりすると、その結果が右側のパネルに表示されます。
一方、生成された出力は、左側のタイムラインにリンク形式で記録されます。これにより、目的の出力結果をすぐに確認することができます。
出力パネルでのクリックターゲット
ただし、出力が複数ある場合、再びスクロール地獄に戻ってしまうのではないでしょうか？
そこで（Ameliaのおかげで）、Benchにタイムラインの折りたたみ機能を追加しました。
返信にカーソルを重ねると、タイムライン上に折りたたみアイコン（＞＜が回転になったアイコン）が表示されます。
Benchの折りたたみ機能におけるクリック領域
折りたたみアイコンをクリックすると、タイムラインがツール名とその出力リンクのみを表示する簡潔なリスト形式に折りたたまれます。
これにより、Benchで生成された出力を容易に確認でき、迅速にアクセスして活用することが可能です。
タイムライン折りたたみパターン
ただタイムラインを縮めたとしても、やはりスクロールはしなければならないのでは？そのため、Benchでは各セッション専用のホームページも用意しました。
右側の出力パネルを閉じると、セッションのタイトルと要約が表示されます。また、使用したすべてのファイルや生成された出力が一覧で確認できます。リストは、出力の生成時間や使用したツールごとに簡単に並び替え可能です。さらに、リスト内の出力をクリックすると、その内容をすぐに開くことができます。ツール名をクリックすると、その出力が生成されたタイムライン上の位置へ直接ジャンプできます。
セッション概要ページ
これらのホームページは、いわば「セッションのダッシュボード」です。
タイムラインがリアルタイムのやり取りを記録する「ストリーム」だとすれば、ホームはあとから全体像を整理するための「地図」のような存在です。
チームメンバーと作業している場合も、このホームページはとても便利です。
たとえば、誰かが途中で抜けたとしても、セッションのタイトルと要約を見れば、どんな目的で何を試していたのかがすぐにわかります。
また、生成物のリストをざっと見渡せば、「あ、ここで画像生成を試したのか」「このファイルが出力の最新版だな」と一目で理解できます。
Benchの設計思想は、「生成AIを使う時間を短くすること」ではなく、「生成AIを使った成果を見つけやすく、使いやすくすること」にあります。
折りたためるタイムライン、ホームページによる俯瞰、リンクによるジャンプ。
これらの仕組みが組み合わさることで、AIとの対話が“記録”として残るだけでなく、“資産”として活用できるようになるのです。
