mcpField
A
ai-loading-ux

ai-loading-ux

github.com/shipshitdevデザイン・UI38197 回インストール2 日前に更新
リポジトリ

ai-loading-ux について

AI の出力待ち時間に表示するローディング状態の設計スキルです。推論、複数ステップのタスク、ストリーミング、バックグラウンド処理ごとにパターンを案内します。

主な機能

  1. 01パターン選択の枠組み
  2. 02推論表示のガイド
  3. 03複数ステップの進捗パターン
  4. 04ストリーミングと状態表示
  5. 05ローディング実装チェックリスト

活用シーン

  1. 01展開可能な AI 思考表示の設計
  2. 02連続タスクの進捗表示
  3. 03トークン単位のコンテンツ生成表示
  4. 04バックグラウンド処理と完了の通知

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/shipshitdev/skills --skill ai-loading-ux

インストール後、Claude Code で/ai-loading-uxを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

plugin.json
references/
progress-patterns.md
reasoning-patterns.md
status-patterns.md
streaming-patterns.md

詳細

AI ローディング UX

AI の出力を待つ間に、ユーザーに状況を伝えるためのデザインパターンです。

判断フレームワーク

まず、どのパターンカテゴリーに該当するかを判断します。

ユーザーが待っているものパターンカテゴリー主な目標
AI の推論／思考推論表示透明性を通じて信頼を築く
複数ステップのタスク完了進捗ステップ目標に向けた進捗を示す
コンテンツの生成／ストリーミングストリーミング状態待ち時間を短く感じさせる
バックグラウンド処理ステータスインジケーター処理中であることを伝える

基本原則

1. エレベーターの鏡効果

AI を待つユーザーは、時間がゆっくり過ぎるように感じます。見たり読んだりできるものを用意しましょう。アニメーションインジケーターは、実際の時間が変わらなくても、体感待ち時間を短縮します。

2. 段階的な情報開示
  • デフォルトでは簡潔なインジケーターを表示します（「思考中…」など）。
  • 詳細は確認できるようにしますが、表示を強制しません。
  • 詳細を知りたいユーザーが展開できるようにし、すべてのユーザーに負担をかけないようにします。
3. 透明性が高いほど UX が良くなるとは限りません

ユーザーが求めているのは答えであり、推論ではありません。ただし、その答えが適切な推論に基づいているという信頼は求めています。

4. 完了を明確に伝える

処理が終わったことをユーザーが把握できるようにする必要があります。終了状態が曖昧だと、ユーザーは不満を感じます。

パターン早見表

推論表示（思考の連鎖）

AI が問題を「考えている」ときに使います。references/reasoning-patterns.md を参照してください。

推奨される方法（Claude スタイル）：

  • デフォルトでは非表示にし、必要に応じて展開できるようにする
  • 展開時は構造化された箇条書きを表示する
  • 時間カウンターまたは進捗インジケーターを表示する
  • 明確な「完了」状態を示す

避けるべきパターン：

  • ストリーミングテキストを大量に表示する（圧倒される）
  • 読めないほど速くスクロールする
  • 展開できない（不透明に感じられる）
  • 明確な終了状態がない
進捗ステップ

AI が順次タスクを完了するときに使います。references/progress-patterns.md を参照してください。

推奨される方法：

  • 現在のステップと合計ステップ数を表示する
  • 完了したステップを視覚的に示す
  • 現在進行中の処理を表示する
  • 展開時にステップごとの詳細を表示できるようにする
ストリーミング状態

コンテンツがトークンごとに生成されるときに使います。references/streaming-patterns.md を参照してください。

推奨される方法：

  • 入力カーソルまたはテキストアニメーションを使う
  • トークンを滑らかに表示する（唐突にならないようにする）
  • 生成されるコンテンツの形に合わせたスケルトンを表示する
  • 「生成を停止」する手段を用意する
ステータスインジケーター

バックグラウンドで処理が行われるときに使います。references/status-patterns.md を参照してください。

推奨される方法：

  • 控えめながら視認できるアニメーションを使う
  • 現在の処理を簡潔に説明する
  • ユーザーがほかの操作をできるようにする
  • 完了時に通知する

実装チェックリスト

AI のローディング状態を実装するときは、次の点を確認してください。

  1. パターンカテゴリーを特定する：上記の判断フレームワークを使う
  2. 表示レベルを選ぶ：常時表示、展開可能、または最小限
  3. 動きを加える：アニメーションで体感待ち時間を短縮する（ただし控えめにする）
  4. 進捗を示す：経過時間、完了したステップ、またはストリーミングされたコンテンツを表示する
  5. 完了を伝える：終了時に明確な視覚的な変化または状態の変化を示す
  6. 中断手段を用意する：長時間の処理には停止／キャンセル機能を設ける
  7. エラーに対処する：ユーザーをローディング状態のままにしない
  8. 低速な接続でテストする：適切に機能を縮退できることを確認する

製品の比較（参考）

製品方法長所短所
Claude推論を非表示にし、展開可能にして、構造化された箇条書きを表示認知負荷が低い不透明に感じられることがある
ChatGPT簡潔なラベルを表示し、自動で折りたたむ邪魔にならない透明性が低い
DeepSeek推論をすべてストリーミング表示透明性が最大限圧倒される
Geminiユーザーがスクロールする、番号付きステップ構造が明確完了がわかりにくい

使用方法

ご使用のパターンカテゴリに該当するリファレンスファイルをお読みください。

コメント

Markdown 対応