LLMのレスポンス待ち時間をどう体感短縮するか？フロントエンドのUX工夫

こんにちは、Tabidea（タビデア）開発者の Tomokichi です。

生成AI（LLM）を使ったWebサービスを開発していると、必ずぶつかる大きな壁があります。 それはレスポンス待ち時間が長すぎる問題です。

Tabideaでも、ユーザーから旅行の条件を受け取ってから、AIが裏側で「旅行プランを構成し、外部APIで経路を計算し、JSONで出力する」までに、どうしても数十秒の時間がかかってしまいます。 通常のWebアプリなら「3秒待たせたらユーザーは離脱する」と言われる世界で、この待ち時間をどうやって「退屈させずに」乗り切るか。

今回は、Tabideaのフロントエンド（Next.js）で実装している、体感待ち時間を短縮するためのUXの工夫をご紹介します。

1. 「ただのローディングスピナー」は絶対に使わない

最も避けるべきなのは、画面の中央でただクルクル回るだけのローディングスピナーを表示することです。 ユーザーは「フリーズしているのではないか？」「本当に動いているのか？」と不安になり、離脱の原因になります。

Tabideaでは、プラン生成中の画面を「ただ待つ時間」ではなく、**期待感を高める時間(エンターテイメント)**に変換するアプローチを取りました。

2. LLMの思考プロセスを「実況中継」する

ChatGPTのようなチャットUIが優れているのは、文字がカタカタと出力される（Streaming）ことで、「今まさにAIが考えている」というライブ感がある点です。

TabideaはチャットUIではありませんが、この「ライブ感」を取り入れています。 裏側のAPI（Next.js Route Handlers）から Server-Sent Events (SSE) などを利用して、AIの処理状況を逐次フロントエンドにストリーミングしています。

画面上には、ローディングアニメーションと共に、以下のような「AIの思考プロセス」がリアルタイムに表示されます。

「京都の観光スポットを検索中...」 「あなたに合わせたランチの場所を選定中...」 「スポット間の移動時間を計算中...」 「最終的なタイムラインを生成しています...」

今、システムが何をやっているのかを透明化するだけで、ユーザーの待ちに対するストレスは劇的に軽減されます。

3. スケルトンスクリーンによる「骨組みの先出し」

もう一つの工夫が、スケルトンスクリーンの活用です。

旅行プランのデータは、一気にドン！と完成するわけではなく、段階的に生成されます。 Tabideaでは、まだ詳細なデータ（写真や説明文）が返ってきていなくても、「1日目のタイムラインの枠組み」ができた段階で、即座に画面にUIの骨組み（スケルトン）を描画し始めます。

最初はグレーの四角いブロックが表示され、そこに「清水寺」「ランチ」といったテキストがポツポツと入り始め、最後に美しい写真がフワッと浮かび上がる。 この**徐々に完成していく過程を見せる(Progressive Rendering)**ことで、ユーザーは「待たされている」のではなく「作られていくのを見守っている」という心理状態になります。

4. 待ち時間を利用した「旅のTips」の表示

さらに、数秒の空白の時間ができるタイミングでは、旅行先のちょっとした雑学や、Tabideaの便利な使い方（Tips）を画面の下部にフェードイン・フェードアウトで表示させています。

ゲームのローディング画面でよくある手法ですが、これも「ユーザーの視線を動かす」ことで体感時間を短くする効果的なテクニックです。

技術は「人間の心理」をハックするためにある

技術的にLLMのレスポンス自体を爆速（1秒以内など）にすることは、現状のAPIの仕様上困難です。 しかし、物理的な時間を変えられなくても、体感的な時間はUIとUXの力でいくらでも短く感じさせることができます。

Tabideaでは、「Next.jsのStreaming機能」や「ReactのSuspense」といったモダンなフロントエンド技術を、単なる技術的興味からではなく、「ユーザーのイライラをなくすため」にフル活用しています。

これからも、「AIを待つ時間すらもワクワクする」ような体験を目指して、フロントエンドの磨き込みを続けていきます！