ux-loaders-and-progress について
UIのローディング表示や複数ステップの進捗表示を設計する生成型スキルです。待ち時間、進捗の計測可否、タスク構成に応じてパターンを選び、後続の監査も提案します。
主な機能
- 01待ち時間とタスクに応じた表示選択
- 02プログレスバー、スケルトン、インライン表示の設計
- 03複数ステップの進捗トラッカー設計
- 04保存と自動保存の判断支援
- 05検証用UX監査スキルの提案
活用シーン
- 01アップロードやエクスポートの進捗表示設計
- 02コンテンツ読み込み時のスケルトンや短い表示の選択
- 03チェックアウトや登録のステップ表示設計
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/ux-loaders-and-progressを入力して読み込まれたか確認します。
詳細
ローダーとプログレスのスキル
このスキルの動作（最初にお読みください）
これは生成型のスキルです。デフォルトの失敗パターンは次のとおりです。すべてに1つのスピナー（待ち時間が1秒でも60秒でも全画面スピナー）、エンドポイントがあるのに使わない（測定可能なタスクに対する不定形のループ）、そして進捗の見せかけ（2ステップのフォームにトラッカー、嘘をつくパーセンテージ）。フィードバックの種類は待ち時間とタスク構造によって決まります。そしてローダーの本当の役割は、知覚される時間を形作ることであり、飾ることではありません。このスキルは次のことをゲートします。
- 待ちの種類を確定する — どれくらいの長さか、測定可能か、何が開始したか、複数ステップの道のりか。
- 常に当てはまるコアを適用する — 時間のラダー、配置、状態の可視性。
- 文脈依存の判断（スケルトン、カスタムアニメーション、トラッカーのラベリング、保存/自動保存）をトレードオフとともに浮かび上がらせる。
その後、検証のために ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit に引き継ぎます。
ステップ0 — 待ちの種類を確定する
4つの質問がインジケーターを選びます。
- 待ち時間はどれくらいか？ 1秒未満 → 多くの場合インジケーターは不要、1〜5秒 → 不定形（スピナー/テキスト）、約10秒以上 → エンドポイントが見える確定形、長い/変動するコンテンツの読み込み → スケルトン。
- 進捗は測定可能か？ システムが完了率を把握できる場合（アップロード、エクスポート）、ユーザーには確定形のインジケーターを提供します。測定可能なタスクでの終わらないスピナーは「壊れているのでは」と読まれます。
- 何が開始したか？ ユーザーのクリック（ボタン）→ アクションの場所にインラインのフィードバック、コンテンツの読み込み → コンテンツの場所にスケルトン、バックグラウンドプロセス → 目立たない形。
- システムの待ちではなく、複数ステップのユーザーの道のり（フォーム、チェックアウト、オンボーディング）か？ → ローダーではなく進捗トラッカー — 別のコンポーネント、別のルール（以下を参照）。
常に適用するコア（ほぼすべてのケースで正しい）
時間のラダー（ローダー）
- 1〜5秒：不定形 — スピナー、または微妙なアニメーション（脈打つドット）を伴うテキストローダー（「保存中…」）。ループするアニメーションを約5秒より長く動かし続けないでください。エンドポイントのないループこそが、いらだちの始まりです。
- 10秒以上：確定形 — 明確なエンドポイントを伴うプログレスバーまたは円形の塗りつぶし。長いタスクでは精度のためにパーセンテージラベルを追加します。
- コンテンツの読み込み：スケルトン画面 — これから現れるレイアウト（テキストブロック、画像領域）を模したプレースホルダーで、上から下へ順番に埋められます。構造を約束するため、知覚される速度でスピナーより優れています。
- 全画面スピナーは禁止。 進捗の感覚をまったく与えず、故障を示唆します。スピナーは小さくインラインに配置します。クリック後のボタン内、テーブルの行内、読み込み中のもののそばに。
配置 = 意味
- それを開始したアクションの近く（送信ボタンとインライン）、読み込み中のコンテンツの上（オーバーレイ/スケルトン）、またはページ全体が本当に読み込み中の場合にのみ中央に。
- ボタン内の進捗： ボタンはスピナーを表示してクリック不可になります。フィードバックと二重送信の防止を1つの動作で実現します。
進捗トラッカー（複数ステップの道のり）
- 常に見える3つの状態： 完了（チェックマーク/緑）、現在（視覚的に区別 — 「現在地」のピン）、残り（控えめで、到達時にアクティブ化）。
- ステップにラベルを付ける — タイトルは気が散ったユーザーに文脈を取り戻させ、道のりをスキャンしやすくします。
- 最大5〜7ステップ。 トラッカーはフォームを短くしません。ステップが増えすぎるなら、フローは長いトラッカーではなく再構築が必要です。
- トラッカーは装飾ではなくフィードバック： システム状態の可視性に貢献します。ユーザーは自分が何をしたか、どこにいるか、何が残っているかを常に把握できるべきです。
文脈依存の判断（表面化させ、自動適用しない）
| 判断 | 適用する条件 | 避ける／適応させる条件 | デフォルトの推奨 |
|---|---|---|---|
| コンテンツにスケルトンかスピナーか | レイアウトが既知のコンテンツ（フィード、カード、テーブル）— スケルトンは体感待ち時間を短縮します | ごく小さく即時的な読み込み（スケルトンのちらつきは壊れて見えます） | コンテンツ領域にはスケルトン、アクションにはインラインスピナー |
| プログレストラッカーをそもそも置くか | 論理的なステージが 3 つ以上（チェックアウト、アンケート、登録） | 短いフォーム — 2 ステップのトラッカーは儀式感を加えるだけです | 3 ステージ以上から番号付き／ラベル付きステップ |
| トラッカーのラベリング：タイトルか番号か % か | 走査しやすさにはタイトル、長いジャーニーでのモチベーションには番号／% | 不規則に飛び跳ねるパーセンテージ（信頼を損ないます） | タイトル + ステップ数、% は労力に正直に対応するときのみ |
| バーか番号付きステップか | 短いジャーニーにはバー（全体進捗の感覚）、3 つ以上の明確なマイルストーンにはステップ | 実際にはない精度を装うバー | フォームにはステップ、処理にはバー |
| カルーセルトラッカー（ドット） | スキップ可能な画面が少数のオンボーディング／ウォークスルー | 方向性があり、スキップ不可のフロー | ウォークスルーにのみドット |
| 縦型トラッカー | ステータスのタイムライン（配送追跡、申請ステージ） | 標準的なフォームナビゲーション | イベント／ステータス履歴には縦型 |
| 進捗の保存／自動保存 | 数分を超えるあらゆるジャーニー | ユーザーをつなぎとめるのをトラッカーだけに頼ること | 長いフローには自動保存 + 最後のステップへの復帰 |
| カスタムブランドローダー | 待ちが避けられないブランドの見せ場、決定可能／不可能を先に決めます | 進捗を覆い隠す新規性 | 機能が第一、個性は第二 |
結果を検証する（オーケストレーション）
ハンドオフでは、各レンズをインストール可能なスキルの
nameで指定します。呼び出すのはそのスキルがインストールされている場合のみです。インストールされていない場合、このスキル自体の中核がすでにこれらのルールを備えているため、ブロックせずにそのまま進めてください。
生成または改訂した後は、完了と宣言するのではなく、結果を監査レンズに引き渡してください。これらは候補のレンズです — 姿勢は docs/orchestration-policy.md で設定するか、全体を ux-design-review 経由でルーティングします。ここでは、heuristics と microcopy が Tier A（自動実行）、accessibility、aesthetics、mobile-responsiveness が Tier B（オファー） です — 既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用法に絞られます。mobile-responsiveness はモバイル上でのみ適用されます。ユーザーがこのスキルを特定の 1 つの目的で呼び出した場合は、そのスコープを尊重してください。
ux-heuristics-audit（Tier A） — システム状態の可視性は、このコンポーネントが存在する理由そのものです。また、エラー防止（処理中の無効化ボタン）も含みます。ux-accessibility-audit（Tier B — オファー、デザインシステム下では絞り込み） — スクリーンリーダーに読み上げられる読み込み状態、reduced-motion 設定を尊重するアニメーション、薄い色のトラッカーステップのコントラスト。ux-aesthetics-audit（Tier B — オファー、デザインシステム下では抑制） — 実際のレイアウトに対するスケルトンの忠実さ、アニメーションの抑制、トラッカーの視覚的階層。ux-microcopy-audit（Tier A） — テキストローダーの文言、ステップのラベル、パーセンテージ／ステータスの言い回し。ux-mobile-responsiveness-audit（Tier B — オファー、モバイル上でのみ適用） — 文脈がモバイルの場合：トラッカーの圧縮、スケルトンのリフロー。
監査で衝突が浮かび上がった場合（例：ブランドアニメーション対体感速度）、主要なタスクへと立ち返って解決してください。ユーザーは待っています — あらゆるデザイン上の選択は、その待ちを体感的に短縮するか、長くするかのどちらかです。
よくある do/don't パターン
| ❌ 避ける | ✅ 行う |
|---|---|
| 何にでも全画面スピナー | インラインスピナー、コンテンツにはスケルトン、本当のページ読み込み時のみ中央配置 |
| 60 秒かかるアップロードでループするスピナー | エンドポイントとパーセンテージを表示する確定バー |
| レイアウトが既知なのにスピナー | スケルトン画面を順番に埋めていく |
| 処理中なのにクリック可能なボタン | ボタン内スピナー、ボタンを無効化 |
| 原因から遠く離れて浮かぶローダー | アクションの位置、またはコンテンツ上でフィードバック |
| 2 ステップのフォームに進捗トラッカー | トラッカーは 3 ステージから。短いフォームはシンプルのまま |
| ラベルのないトラッカーのドット | ステップタイトル + 完了/現在/残りの状態を明確に |
| 肥大化したフォームの解決策としての 11 ステップのトラッカー | 最大 5〜7 ステップ。フローを再構築する |
| 10→80→82→… と飛ぶ % | 誠実な進捗マッピング、またはステップを使用 |
| 保存機能のない長いフォーム | 自動保存 + 最後のステップに戻る |
| 確認せずに出荷 | ヒューリスティクス + アクセシビリティ + 美学 + マイクロコピーに引き継ぐ |