AI開発 · 2026.04.29

Difyでチャット画面にプログレスバーを表示する方法:応答待ちUXを改善する実装ガイド【2026年版】

Difyでチャット画面にプログレスバーを表示する方法:応答待ちUXを改善する実装ガイド【2026年版】

Difyでチャットアプリを公開すると、ナレッジ検索や外部ツールを組み合わせたAIチャットを短時間で配布できます。一方で、ワークフローが複雑になるほど、数秒から数十秒の待ち時間が発生します。2026年10月時点でも、ユーザー体験を左右するのは「何秒待つか」だけではなく、「いま何が進んでいるか」が見えるかです。この記事では、Dify標準のWebApp設定、streaming API、workflow/nodeイベントを使って、応答待ちUXを改善する考え方を整理します。

なぜDifyの応答待ちで離脱が起きるのか?

DifyのWeb Appは、公開直後から会話履歴、候補質問、ファイル表示、引用、埋め込みなどを扱える便利な土台です。ただし、社内ナレッジ検索、RAG、外部API、承認分岐、テンプレート整形を順番に通すチャットフローでは、ユーザーから見ると無反応に見える時間が生まれます。同じ10秒でも、「検索中」と分かる10秒と、何も表示されない10秒では不安感がまったく違います。

実務では、待ち時間をゼロにするより、状態を翻訳するほうが効果的です。「質問を解析中」「関連ドキュメントを検索中」「回答を生成中」「最終整形中」のような段階表示があるだけで、再送信や離脱を減らしやすくなります。

2026年10月時点のDify公式で確認できる進捗表示の材料は何か?

DifyのApp WebApp Settingsには、ワークフロー手順を表示するための `show_workflow_steps` が含まれます。これは厳密な進捗バーではありませんが、標準WebAppのまま処理段階を見せる最短の打ち手になります。まずはこの設定で、ユーザーにワークフローが動いていることを伝えられるか確認するのがよいです。

カスタムUIを作る場合は、Chat Message APIをstreamingで呼び出し、SSEイベントをフロント側で解釈します。Difyの実装やAPI系リファレンスでは、message、message_end、workflow_started、node_started、node_finished、workflow_finishedといったイベントが扱われています。これらをステップ名やバー表示に変換すれば、標準UI以上に業務に合わせた待機体験を作れます。

Difyを使った社内AIチャットをPoC止まりで終わらせず、実運用できるUXまで設計したい場合は、 HelloCraftAIへご相談ください。

最短で改善する方法は? `show_workflow_steps` をまず試す

標準のWebAppをそのまま使うなら、最初の打ち手は `show_workflow_steps` を有効にすることです。パーセンテージ表示ではありませんが、「裏で処理が進んでいる」ことをユーザーに伝えられます。あわせて開始前の説明文で、通常の待ち時間、検索対象、外部APIを呼ぶ可能性を短く伝えると、二重送信や問い合わせを減らせます。

この方法が向くのは、FAQボット、社内ナレッジ検索、一次受付、社内規程確認のように、まず標準WebAppで早く公開したい案件です。iframe埋め込みでも同じWebAppを再利用できるため、既存サイトや社内ポータルに載せるだけなら、標準機能で十分なケースも多いです。

進捗バーを自作するには? SSEイベントをUIに変換する

待機時間が長い業務フローでは、Send Chat Message APIを `response_mode=streaming` で呼び出し、返ってくるイベントをフロントエンドで進捗表示へ変換します。たとえば workflow_started で10%、主要な node_started / node_finished ごとに35%、60%、85%へ進め、workflow_finished や message_end で100%にするだけでも、ユーザーは止まっていないと理解できます。

ポイントは、秒数の予測ではなく状態の一貫性を優先することです。外部APIや検索件数によって処理時間はブレますが、固定ステップに落とせば保守しやすくなります。ステップ名は技術用語ではなく、「入力確認」「資料検索」「回答作成」「最終確認」のようにユーザーが理解できる言葉へ変換しましょう。

FAQ:どこまで作り込めば十分か?

目安は3段階です。5秒未満なら `show_workflow_steps` と事前文言で十分です。5〜20秒ならSSEイベントを使った簡易バーやステップ名表示が効きます。20秒を超える処理、承認待ち、外部システム更新を含む場合は、進捗バーだけでなく「処理中タスク」「後で通知」「人の確認待ち」のような状態分離まで設計したほうが安全です。

Difyのワークフロー設計、埋め込みUI、運用ルールまでまとめて整えたい方は、 お問い合わせフォームからご相談ください。