coastdigitalgroup/coastai-skills

ステップ＆プログレスシステム

目的

ステップ＆プログレスシステムスキルは、ユーザーが多段階プロセスを移動したり、バックグラウンドタスクの完了を待つ際の設計と文書化の方法論を提供します。これにより、チェックアウトやオンボーディングなどの複雑なワークフローを管理しやすい塊に分割し、ユーザーが今どこにいて、何を完了し、何が残っているかを伝えることで認知負荷を軽減します。

ユースケース

• ECチェックアウト: 配送、支払い、確認のステップをユーザーにガイド。
• 多段階フォーム: 長いデータ入力タスクを論理的なセクションに分割。
• ユーザーオンボーディング: 新しいアカウントのセットアッププロセスを可視化。
• ローディング/アップロード状態: 長時間実行される処理のステータスを伝達。
• 学習パス: コースやカリキュラムの進捗を表示。

使用すべきでない場合

• 単一ビュータスク: タスクがコンテキストを切り替えずに1つのビューで完了できる場合、進捗システムは不要なノイズを追加します。
• 無限フィード: コンテンツをスクロールするだけで進捗に「終了」が定義されていない場合。
• 重要な高速操作: 進捗インジケーターの表示が時間に敏感なタスク（例：リアルタイムゲームUI）の妨げになる場合。

入力

1. ステップ一覧: タスク完了に必要な個別のステージのリスト。
2. タスクタイプ: ユーザー駆動のシーケンス（ステッパー）か、システム駆動のプロセス（プログレスバー）か。
3. 線形性: ステップを順序通りに完了する必要があるか、ユーザーが間を飛び越えられるか。
4. コンテンツ制約: 各ステップのラベル、説明、アイコン。

出力

1. 進捗フレームワーク: コンポーネントタイプ（水平、垂直、円形）の定義。
2. 状態マトリックス: Pending、Active、Completed、Error各状態の視覚的な仕様。
3. レスポンシブ戦略: インジケーターがモバイルビューポートに適応する方法（ラベル非表示、数字への切り替えなど）。
4. アクセシビリティ仕様: ARIAロール、ライブリージョン、キーボード操作ルール。

ワークフロー

1. 進捗タイプの分類

最適な視覚パターンを決定する：

• 水平ステッパー: デスクトップで3〜5ステップの線形プロセスに最適。
• 垂直ステッパー: 非線形プロセス、コンテンツ長が異なるステップ、またはモバイルファーストのフローに最適。
• 連続プログレスバー: システム駆動のタスク（アップロード、ローディング）やマイクロステップが多いプロセスに最適。
• プログレスサークル: ダッシュボードウィジェットやスペースが非常に限られている場合に最適。

2. ステップ階層とラベルの定義

• プライマリラベル: ステップの簡潔な名前（例：「配送」）。
• セカンダリラベル（オプション）: 短い説明またはステータス（例：「処理中」）。
• 視覚的インジケーター: 数字（順序用）、アイコン（コンテキスト用）、またはドット（ミニマルデザイン用）。

3. 状態の視覚化を確立

各状態に対して明確な視覚的な区別を定義する：

• Pending: 低コントラスト、通常はグレーアウト。
• Active: 高コントラスト、多くの場合プライマリブランドカラーまたは「グロー」効果を使用。
• Completed: 「チェック」アイコンと異なる色（多くの場合緑色またはアクティブ色のミュートバージョン）を使用。
• Error: 「警告」アイコンと意味的なエラー色（赤）を使用。

4. 移動とフィードバックの設計

• トランジション: ステップ間の移動時に微妙なアニメーションを使用して進行を強調。
• クリック可能性: ユーザーが前のステップをクリックして戻れるかどうかを決定。
• バリデーション: 進行を許可する前にステップが有効/完了であることを視覚化。

5. レスポンシブ適応の計画

多段階インジケーターはモバイルで壊れやすいため、注意が必要：

• ラベル省略: モバイルではテキストラベルを非表示にし、数字またはアイコンのみを表示。
• 「Step X of Y」への移行: 完全な視覚バーを単純なテキストまたは数字のサマリーに置き換える。
• 垂直シフト: 小さな画面では水平バーを垂直リストに変換。

決定ルール

• 5ステップルール: 水平ステッパーが5ステップを超える場合は、乱雑さを避けるために垂直ステッパーまたは単純な「Step X of Y」テキストインジケーターに切り替える。
• アイコン vs 数字: シーケンスの順序が重要な場合は数字を使用し、即座に意味的な価値を提供する場合のみアイコンを使用（例：支払いの「クレジットカード」アイコン）。
• 線形性: ユーザーがステップを順序通りに完了する必要がある場合は、「将来の」ステップへのクリックを無効にする。柔軟な設定の場合はジャンプを許可する。
• コンテキストの保持: 常に現在、前、次のステップのラベルを表示する。その他は必要に応じて切り詰めることができる。

制約

• アクセシビリティ:
  • 連続バーには role="progressbar" と aria-valuenow、aria-valuemin、aria-valuemax、および人間が読める aria-valuetext（例：「ステップ2/4：支払い」）を使用する。
  • シーケンス内のアクティブなステップを識別するために aria-current="step" を使用する。
  • アクティブと非アクティブのステップのコントラスト比がWCAG AA（4.5:1）を満たすことを確認する。
  • ステップがクリック可能な場合、そのターゲットはWCAG 2.2 SC 2.5.8（最小24x24px、推奨44px）を満たし、可視の :focus-visible 状態を公開する必要がある。
• 階層: 進捗インジケーターはガイドであり、主な焦点ではない。通常はコンテンツの上部（水平）または左側（垂直）に配置される。
• レスポンシブ: 水平方向のオーバーフローを引き起こしてはならない。

一般的な失敗パターン

• 「ミステリープログレス」: ラベルやパーセンテージなしでバーを表示し、ユーザーに「あとどれくらい？」と疑問を残す。
• アクセス不能な状態: 完了を示すためにアイコンやテキストを使わず、色（例：緑 vs 灰色）のみに依存する。
• 過密な水平レイアウト: 水平レイアウトにあまりにも多くのステップを強制し、モバイルでテキストが重なったりタップターゲットが小さくなる。
• 永続性の欠如: 多段階フローの一部のページで進捗インジケーターを非表示にし、ユーザーが自分の位置を失う原因となる。

検証基準

• 現在のステップが完了済みおよび今後のステップから明確に区別されている。
• 完了したステップにはチェックマークなど色以外のインジケーターが使用されている。
• モバイルビューが機能し、オーバーフローや乱雑さがない。
• ARIAロールと aria-current が正しく適用されている。
• 個々のステップの「Error」状態が処理されている。
• インジケーターがフローのすべてのステップで一貫して配置されている。