レイテンシーを考慮した設計：AIのスピードがUXになるとき

AIのレイテンシーは、AI製品における最も重要なUX課題ですが、これをデザイン作業として捉えているチームはほとんどありません。最高のAI体験を提供するチームは、より高速なモデルを待つのではなく、待ち時間を前提としたデザインを始めました。

これはそのためのプレイブックです。知覚速度の計算、成功する5つのパターン、失敗する4つのパターン、5つのティアダウン、そして出荷前チェックリストが含まれています。

AIのレイテンシーはエンジニアリングの問題ではなく、デザインの問題です

多くのAI製品が遅く感じられるのは、レイテンシーをエンジニアリングの問題として扱っているからです。エンジニアリングチームがより高速なモデルを出荷しても、製品は依然として遅く感じられます。なぜなら、ボトルネックはミリ秒単位の遅延ではなく、ユーザーが何も読むもののないスピナーを見つめることになるようなデザイン上の選択だったからです。

ユーザーはミリ秒単位の遅延を計測しません。ユーザーが計測するのは、何かが起こっているかどうかです。4秒間のストリーミング文章は速く感じられますが、モーダルウィンドウが1.5秒遅れると、動作が不安定に感じられます。

知覚速度の計算

4秒間のストリーミング応答は速く感じられます。 1.5秒の応答でブロックが発生すると、遅いと感じられます。知覚される速度は、経過時間ではなく、フィードバックの密度によって決まります。この事実こそが、AI製品におけるあらゆるレイテンシー決定を根本から覆します。

重要なのは、応答時間全体ではなく、最初のトークンまでの時間と1秒あたりのトークン数です。最初のトークンまでの応答時間が500ミリ秒未満であれば、瞬時に感じられます。1秒あたり30～80トークンは、人間の速度で読み取れます。5秒という処理時間制限は、最初のトークンからスムーズに処理されれば許容範囲内ですが、ブロックが発生すると問題となります。これらの数値を考慮に入れた設計を行うことで、処理速度が遅いモデルでも、競合製品よりも速く感じられる可能性があります。

効果的な5つのパターン

ストリーミングテキスト、オプティミスティックUI、プログレッシブディスクロージャー、推論サーフェス、バックグラウンドエージェント。知覚速度で成功を収めている出荷済みAI製品は、少なくともこれらのうち3つを採用しており、優れた製品は5つすべてを採用しています。

5つのパターンが組み合わさります。ストリーミングはユーザーに読むものを提供し、オプティミスティックUIはユーザーに見るものを提供します。段階的な情報開示は、ユーザーに情報を確認する機会を与えます。推論画面は、ユーザーに信頼感を与えます。バックグラウンドエージェントは、ユーザーに別の作業を提供します。これらを組み合わせることで、モデルの処理時間はわずか10秒となり、製品は依然として生き生きとした印象を与えます。

ストリーミングテキストは、待ち時間を回答へと変える

最初のパターンは、トークンごとのレンダリングです。ユーザーはモデルが書き込むのと同時に読み進めることができ、待ち時間は出力の中に消えていきます。重要なのは、最初のトークンが表示されるまでの時間だけです。最初のトークンが届いた時点で、ユーザーは待つのではなく、読み進めることができます。

Claude.aiのストリーミングは、最も洗練された実装例です。最初のトークンは1秒以内に表示され、残りのトークンは読み進める速度で順次表示されます。モデルが2段落目を読み終える前に、ユーザーは1段落目の途中まで読み進めている状態です。同じモデルでも、4秒後に完成したブロックとして表示されると、まるで別の製品のように感じられるでしょう。

オプティミスティックUIは、モデルが応答を返す前にアクションを確定する

2つ目のパターンは、モデルが処理を完了する前に結果を表示し、応答が届いた時点で調整を行うというものです。ユーザーは正解をすぐに知る必要はありません。必要なのは、回答が確定することです。

Linear AIは提案を受け入れる際にこの処理を行います。結果はすぐに課題に反映され、保留状態がさりげなく表示されます。調整はバックグラウンドで行われます。モデルが異なる結果を返した場合、UIは瞬時に更新されます。調整に失敗した場合は、UIはロールバックしてエラーを表示します。ユーザーはどちらの場合でも操作を継続できます。

プログレッシブ・ディスクロージャー：スケルトン、ドラフト、最終版の順で表示

3つ目のパターンは、スケルトンが最初に表示され、次に部分的なドラフト、最後に最終出力となります。構造がコンテンツより先に表示されることで、視覚的な追跡対象が生まれ、待ち時間が短縮されます。

v0では、プロンプトからアプリへの遷移画面でこの方式を採用しています。レイアウトのスケルトンがほぼ瞬時に表示され、モデルがコンポーネントを生成するにつれて要素が追加され、最後に最終的なスタイル付きプレビューが表示されます。Lovableも同様の仕組みを採用しています。各段階は、次の段階が読み込まれる間にユーザーが確認できるチェックポイントとなっています。

推論画面で待ち時間を信頼に変える

4つ目のパターンは、モデルが動作中にその計画や思考プロセスを表示することです。エージェントが推論する様子を見ることは、スピナーを見るよりもずっと効果的です。また、モデルが実際に何をしようとしているのかをユーザーが事前に確認できるため、信頼感も高まります。

Cursorのエージェントモードには、この機能を実現する計画画面が搭載されています。ユーザーは最初のコマンドが実行される前に、意図された手順を確認できます。ChatGPTは、思考モデルの推論トレースを表示し、構造化された文章のように読める折りたたみ可能な思考サマリーを提供します。15秒間の視覚的な推論は、3秒間のブラックボックス表示よりもはるかに優れています。

バックグラウンドエージェントで、モデル実行中もユーザーは作業を継続できます

5つ目のパターンは、エージェントをフォアグラウンドからサイドパネルに移動することです。ユーザーは単一のAIリクエストによって作業が妨げられることはありません。エージェントは画面の隅で実行され、ユーザーはメインキャンバスで文章を書いたり、コーディングしたり、デザインしたりすることができます。

Cursorのバックグラウンドエージェントは、最も洗練されたバージョンです。ユーザーは長時間かかるタスクを開始し、フォアグラウンドで編集作業を続けながら、エージェントはサイドパネルで作業を進めます。GitHub Copilotのコーディングエージェントも、プルリクエスト形式のタスクで同様の動作をします。このパターンは、ユーザーが他に何か作業を行っている場合にのみ有効であり、実際のワークフローでは、ユーザーは常に何か作業を行っています。

失敗する4つのパターン

動作が遅いと感じるAI製品の多くは、以下の4つの失敗するパターンのいずれかの組み合わせを採用しています。純粋なスピナー、思考テキストループ、モーダルブロッキングダイアログ、進捗状況表示の欠如。これらのパターンは、応答速度が速くても、体感速度を低下させます。

純粋なスピナーはユーザーが必要とするものをすべて隠してしまう

進捗状況表示のないスピナーはブラックボックスです。ユーザーは注意を向けるべきものが何もないため、トークンストリームを使用した場合よりも待ち時間が長く感じられます。スピナーはユーザーに視線をそらすように促しますが、これはAIインターフェースが果たすべき役割とは正反対です。

スピナーを削除しましょう。トークンストリーム、スケルトン、または推論トレースを提供してください。応答が短すぎてストリーミングできない場合は、楽観的な状態を表示します。モデルが目に見えない処理を行っている場合は、その処理を示すステータス行を表示します。

思考中テキストループは情報のないノイズ

回転する思考中テキストループは、スピナーよりも悪い。実際には進行していないのに、進行しているかのように見せかけてしまう。ユーザーは2回のセッションでこれを無視するようになり、その結果、次に表示される実際のステータスが失われてしまう。

ループを実際のステータスに置き換えましょう。「3つのソースを検索中」「ファイルを読み込んでいます」「応答を作成中」など。ステータス行は情報です。ループは情報を装ったノイズです。

モーダルによるブロックダイアログは待ち時間を壁に変えてしまう

モデルの実行中にUIの他の部分をブロックするモーダルは、最もコストのかかるレイテンシーのミスです。待ち時間を人質状態に変えてしまいます。ユーザーはスクロールも、前の回答のコピーも、その他の操作もできなくなります。

モーダルを削除しましょう。応答はインライン、サイドパネル、または非ブロッキングトーストで表示します。ユーザーは、AIリクエストの処理中に製品の他の機能へのアクセスを失うべきではありません。

進捗シグナルがないと、ユーザーは離脱してしまう

進捗シグナルがないAIインターフェースは、ユーザーにリクエストが失敗したと思わせてしまいます。レスポンスが届く前に、ユーザーは戻るボタンを押してしまうでしょう。最悪の場合、ページを更新してリクエストを失ってしまうこともあります。

500ミリ秒以上かかるAIインターフェースには、必ず進捗シグナルが必要です。ストリーミングテキストが最適です。次に、スケルトン表示が有効です。より長い待ち時間には、推論トレースが適しています。それ以外の場合は、ステータスラインが有効です。シグナルは必ず必要です。

実際の製品分析5選

レイテンシーをUXに変える5つのAIインターフェース

Claude.ai：ストリーミングによるインタラクション

Claude.aiのストリーミングは、レイテンシーを機能として活用する最も優れた例です。ウォームセッションでは、最初のトークンまでの時間は1秒をはるかに下回り、文章は読みやすい速度で表示され、待ち時間は出力に溶け込みます。

このデザインは、ストリームに完全に集中することを重視しています。スピナーも、思考テキストも、スケルトンも一切なく、応答がトークンごとに表示されるだけです。生成に20秒かかる場合でも、ユーザーは19秒間は処理を読み進めているため、製品自体は高速に感じられます。

Cursor、プランニングと実行のループ

Cursorは、エージェントのプランを最初に表示し、各ステップの進捗状況を可視化しながら実行し、差分が確定するたびにコミットすることで、レイテンシを信頼へと変えます。数分かかるタスクでも、ユーザーはプランを読み、各ステップを監視し、コミットされる差分を確認できるため、目的意識を持って取り組めます。

このデザインは、待ち時間を優先順位付けすることを重視しています。プランを最優先し、各ステップをチェックポイントとして機能させ、差分を最終出力とします。すべてのレイヤーに情報が含まれているため、ジョブが何分も実行されても、ユーザーはブラックボックスをじっと見つめることはありません。

Linear AI、インラインプログレッシブ・ディスクロージャー

Linear AIは、既存のサーフェス内にプログレッシブ・ディスクロージャーを組み込みます。AIが前面に表示することはありません。提案の草案は課題にインラインで表示されます。要約はプロジェクトにインラインで表示されます。ユーザーは既にAIが支援する作業を行っているため、待機時間が実際の作業を妨げることはありません。

ユーザーが既に使い慣れている製品に組み込まれたAIは、モーダルウィンドウやユーザーインターフェースの乗っ取り機能であってはなりません。インラインでの情報開示が適切なパターンであり、遅延コストはユーザーが既に行っている操作の中に隠されます。

モデルの処理速度が遅くても、高速に感じられるAI製品をお探しですか？Brainy を雇用するをご覧ください。UXBrainyは遅延監査とストリーミングUIの再設計を提供し、AppBrainyはAI製品の完全な提供を提供し、ClaudeBrainyはストリーミングを低コストにするプロンプトとスキルレイヤーを提供します。AIエージェントのUIデザインパターンと組み合わせることで、エージェントレイヤーを同じクラフトレベルで提供できます。

Granola、録画から要約へのカスケード

Granolaは、4段階のカスケードによって、数分間のモデル処理を隠蔽します。録画データはまず生の波形として出力されます。文字起こしはスクロール可能なテキストとして2番目に表示されます。下書きメモは箇条書き形式で3番目に表示されます。最終要約は洗練された文章として最後に表示されます。各段階は次の段階が準備できる前に役立ちます。

3分間のモデル作業は、最初の有用な成果物が10分以内に表示されるため、30秒のように感じられます。文字起こしはそれ自体で価値があります。メモもそれ自体で価値があります。要約は、価値を損なうことなく、体験を完成させます。

Perplexity、ライブソースストリーミング

Perplexityは、回答の前にソースをストリーミングします。引用リストが最初に表示され、モデルが各ソースを取得してランク付けするにつれてリストが更新されます。ユーザーがソースを読んでいる間に、回答がその下にストリーミングされます。待ち時間は読み込みではなく、調査作業として認識されます。

このデザイン上の工夫は、結果の前に作業過程を表示することです。ソースリストを読んでいるユーザーは、待っているという感覚がありません。回答が準備できるまでソースを非表示にした場合、応答時間は合計で同じでも、2～3倍遅く感じられるでしょう。待ち時間における情報密度が、知覚される速度のすべてを決定します。

出荷前レイテンシーチェックリスト

出荷前に、あらゆるAIサーフェスでこのチェックリストを実行してください。12項目のチェック項目があり、すべて測定可能です。

1. ウォームセッションで最初のトークン取得までの時間が500ミリ秒未満であること。

2. 対象モデルで、ストリーミングが毎秒30～80トークンの速度を維持すること。

3. 500ミリ秒を超える待機時間には必ず進捗状況を示すシグナルが表示されること。

4. AIサーフェス上に純粋なスピナーがないこと。

5. AIサーフェス上に回転する思考テキストループがないこと。

6. モデル実行中にモーダルブロッキングダイアログが表示されないこと。

7. オプティミスティックUIは、インテントから100ミリ秒以内に可視アクションを実行すること。

8. 2秒を超える応答の場合、コンテンツの前にスケルトンがレンダリングされること。

9. 10秒を超えるタスクの場合、推論トレースが表示されること。

10. 長時間実行されるエージェントは、フォアグラウンドではなくサイドパネルで実行されること。

11. リクエスト処理中に、ユーザーはスクロール、コピー、および以前の出力の閲覧が可能です。

12. マルチステージレスポンスでは、ユーザーが利用できる中間ステージが表示されます。

このリストはデザインレビューテンプレートに格納されており、実行するたびに高速化されます。

よくある質問

AI製品において最も重要なレイテンシの数値は何ですか？

最初のトークンまでの時間です。応答時間全体よりも、ユーザーが読みたいものが表示されるまでの待ち時間が重要です。500ミリ秒未満であれば、瞬時と感じられます。

ストリーミングは常にブロッキングよりも優れていますか？

テキストの場合、はい。500ミリ秒未満であれば、待ち時間が体感できないため、ブロッキングでも問題ありません。それ以上の時間を要する場合は、あらゆる体感速度指標においてストリーミングがブロッキングよりも優れています。

オプティミスティックUIとストリーミングは、どのような場合に使い分けるべきですか？

出力が回答そのものである場合、例えば文章、コード、構造化生成などの場合、ストリーミングを使用します。ユーザーが既に期待している決定（例えば、洗練されたドラフトや承認された提案など）をモデルが下す際には、楽観的なUIが効果的です。この2つが組み合わさることで、ユーザーエクスペリエンスが向上します。

数分かかるエージェントの進捗状況をどのように表示すればよいでしょうか？

推論画面とサイドパネルの進捗状況ストリームを活用しましょう。まずプランを表示し、次にアクティブなステップ、最後に実行中の出力を表示します。ユーザーはプランを読み、ステップの進行状況を確認でき、操作が制限されていると感じることはありません。

現在のAI製品における最悪のレイテンシーエラーは何でしょうか？

スピナー付きのブロッキングモーダルです。これは4つの失敗パターンすべてを1つの画面に詰め込んでおり、AIは使うものではなく、待つものだとユーザーに認識させてしまいます。

AIのレイテンシーを考慮した設計がもたらす真のメリット

AIのレイテンシーを考慮した設計は、遅いモデルへの回避策ではありません。ユーザーが実際に重視するあらゆる指標において、より遅くても優れたモデルが、より速くても劣るモデルに勝てるようにする設計上の転換点なのです。

現在成功を収めているチームは、処理速度そのものを最適化するのではなく、体感速度を重視した設計に切り替えました。彼らはストリーミングに注力し、楽観的なUIを追加し、200msのスケルトンを構築し、エージェントをサイドパネルに移動させました。あらゆる待ち時間に情報が含まれています。

もしあなたのAIサーフェスがまだスピナー、思考ループ、またはブロッキングモーダルを表示しているなら、ボトルネックはモデルではなくデザインです。すべてのステージをスキャン可能にするために、AIエージェントのUIデザインパターン、AI製品の導入プレイブック、AIネイティブな製品設計、視覚的階層構造と連携して作業を進めてください。

モデルが遅い場合でも高速に感じられるAI製品を求めるなら、Brainy を雇用するをご覧ください。UXBrainyはレイテンシー監査とストリーミングUIの再設計を提供し、AppBrainyはAI製品の完全な提供を提供し、ClaudeBrainyはストリーミングを低コストにするプロンプトとスキルレイヤーを提供しています。